New look, what do you think?| 0 comments
Well, my website has been down for awhile as I have been working on the redesign. This is it! What do you think? There’s lots of changes with this redesign. Obviously, the overall look of it. But there’s more to it than that of course. I thought I would go through what I have done and learned through this process.
My previous design was a child theme that I created off of Thematic, a theme framework. At first I liked child theming, but after learning how to create my own themes over the past few months in my directed study at VIU, I have a new love for custom theming. With creating your own theme, you have complete control over everything, and you don’t have to use CSS to hide things, or force things to be a certain way. There’s a lot less clunky stuff going on I guess you could say. You can also include or exclude certain components, such as comments.
A couple books that have helped me out with custom theming are Smashing WordPress: Beyond the Blog and Smashing WordPress Themes: Making WordPress Beautiful, both by Thord Daniel Hedengren. Both are great books, and I highly recommend them. There is a 2011 edition now of Beyond the Blog as well. And, I also can’t forget the help of the WordPress Codex.
HTML5 and CSS3, baby!
I have also used some CSS3 techniques that add some fun to my website. If you’re not sure what these might be, try hovering your mouse on the social media icons at the bottom of the page, or hover atop the featured projects on the home page. Those effects are all done with CSS3 transitions and transformations. If you’re not seeing anything kind of spinny or zoomy, it is either because you’re in an older version of your browser (such as an older version of Firefox), or your browser doesn’t support it yet (a big one is Internet Explorer).
I have also used things like box-shadow, text-shadow (though that’s technically not CSS3), and :first-child and :last-child structural pseudo-class selectors. Links you’ll notice also have an effect on them, done with CSS3 transitions (I apologize to Internet Explorer users, that’s just another thing that IE doesn’t support!).
A little jQuery love!
I haven’t used a lot of jQuery for my redesign. I use a bit of jQuery I learned from the Animated Scroll to Top article by Web Designer Wall. The :last-child structural pseudo-class selector isn’t recognized by IE (though :first-child is, odd isn’t it?) so that has a little jQuery backup for IE. And, search inputs have some jQuery to remove the text within when clicked.
Responsive design with media queries!
Though this is CSS3, this deserves it’s own little section just for how cool it is. There is a lot of talk about responsive web design now, and with so many different devices to view websites – desktops, laptops, tablets, mobile phones – it’s important that designers and developers look at making websites with different variations for these different devices, or make websites fluid and flexible to adapt to the devices, rather than using fixed-width layouts. I myself have used fixed-width layouts for a long time, usually trying to pick a width that isn’t too wide yet small enough for most common screen resolution (remember when we had to worry about 800×600?). However, there’s more to it all then just screen resolution based on the desktop or laptop size or settings (and different broswers, browser versions, colour rendering… the list goes on). Just because someone has a large screen resolution, doesn’t mean they browse the web with the browser window at full-width. And now with tablets and mobile devices becoming so popular, that is even a completely different situation to work with.
So, in comes media queries! If you don’t know what media queries are, I highly recommend these articles: Responsive Web Design, CSS3 Media Queries, and Adaptive & Mobile Design with CSS3 Media Queries. The first one is an excellent article from A List Apart on responsive web design, and covers using media queries. Personally, I found the article a little difficult to follow and understand with all the crazy numbers, but it’s a great read none-the-less. The next two are from Web Designer Wall, and the first gives an overview of media queries and some examples. The second I found extremely helpful, and simple to understand. Basically, you can, if you wish and as I have done, design your website as fixed-width for the largest width it will be. Then using media queries to target smaller specific screen resolutions (or browser width), you make the layout adapt as the screen/browser gets smaller using percentages, so the layout is fluid. Of course, it all depends on your layout so percentages will probably differ from the article. You can use pixels, but then your design will snap into place – unless that’s what you want!
Go ahead, and resize your browser, making the width smaller and smaller. Neat, eh?
I have enjoyed working on the redesign of my website, and I love what I have done with it. I will probably tweak it some more, maybe add a few things or not, but overall it’s basically done! If you have any comments or suggestions please post a comment below!