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.

Custom theme!

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!

Technologies for the web are rapidly evolving, and it’s important as web designers and developers to stay on top of these as best we can. Though not fully implemented by all browsers, and of course not by older browsers, HTML5 is here and it’s here to stay. I have used HTML5 for my redesign, as well as a few other recent projects, and I will be using it in all projects from now on. There’s really no reason why we can’t use HTML5 now. With a little bit of CSS, and some JavaScript for Internet Explorer, HTML5 works. If you’re not convinced, check out HTML5 Doctor. There’s even some great books out there. I recommend Introducing HTML5 by Bruce Lawson and Remy Sharp (who are also a part of HTML5 Doctor), and HTML5 & CSS3 for the Real World through Sitepoint. Because the HTML5 spec is changing very often, books can have parts that become a little outdated quickly – mostly the spec definitions. Introducing HTML5 will be coming out in second edition in the fall. If you’re not wanting to spend the money on books because of the rapid spec growth, HTML5 Doctor would be one of the best resources as it does keep up-to-date with the changes. Of course, you can always go straight to the source at the W3C.

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?

Now you may be wondering about images. Like in the article explains, you just have to use max-width: 100% and height: auto on images (with a special line for IE8), and they will adjust accordingly, never going outside their containing element. The key, is to not state the image width and height in the HTML (and yes, that is okay semantically!). Max-width is supported by most browsers (I just found this helpful site recently for checking browser support), even IE7+. However, IE8 and below does not support CSS3 media queries. That’s where the JavaScript library comes in.

The end…

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!