A Responsive Redesign
I've been meaning to redesign my website for a long time. In reality, I want to redesign my website all the time. After each successive redesign, I inevitably see room for improvement. It’s the perfectionist in me.
This time needed to be different. This time I set out to nail it. And while it’s not perfect, I believe this iteration is my best yet. Aside from an overall redesign that incorporates Typekit fonts and room for content growth, I've implemented a responsive design using media queries and re-engineered the site to run on Expression Engine.
I'd like to take a moment to focus on my implementation of media queries.
Ethan Marcotte's A List Apart article on Responsive Design in May 2010 set the web design community ablaze with the excitement and benefit of media queries. Put simply, media queries are a CSS3 specification that allow developers to set rules in CSS for specific screen resolutions, whether it’s a large desktop computer or a mobile phone. The benefits of media queries transcend both mobile and desktop devices: pages can be styled for both common mobile device resolution breakpoints and the ever growing plethora of laptop and desktop monitor sizes. No more horizontal scrolling for 800x600 users. No more designing for 1024x768 screens. No more clipping fixed layouts.
I won't turn this into a tutorial, but I will say this: if you can write a basic CSS rule, you can write media queries. It's simple as pie, but there are a few things to keep in mind.
A Little Help for Internet Explorer
Versions of IE prior to 9.0 don't understand media queries. This should come as no surprise, especially seeing that media queries are a CSS3 specification. But there's a workaround: CSS3-mediaqueries-js. This JavaScript library helps IE5+, Firefox 1+ and Safari 2 understand media queries. This doesn't mean much for mobile devices, but it sure is helpful when implementing media queries for PC environments.
Remember, the majority of web users are still using Internet Explorer.
Scaling the Page for Mobile Devices
In the early stages of my testing process, my mobile-sized layouts weren't being rendered on iPhone or Android devices. Instead, the full 960px wide website was reduced to fit inside the mobile screen. I was stumped. The media queries rules were written perfectly, with successful test results on a desktop monitor. After some research I discovered the solution in a tiny but powerful meta tag:
<meta name="viewport" width="device-width">
By default, mobile webkit browsers - those that are found on iPhone and Android devices - automatically assume a website is 980px. The viewport meta tag fixes this by instructing these browsers to interpret the width as the device width, not 980px or the entire width of the site. The result: mobile webkit browsers display the layout defined with media queries.
In addition to the viewport meta tag, I included two additional meta tags for similar scaling issues on additional mobile devices:
<meta name="HandheldFriendly" content="True">
The "HandheldFriendly" tag appears to control page scaling in Blackberry browsers, as well as a variety of other mobile browsers.
<meta name="MobileOptimized" content="320">
The "MobileOptimized" tag was created by Microsoft to control the layout in mobile phones running Internet Explorer. In this example, the content attribute is defining the screen width at 320px.
I'll be honest, I have yet to fully test the site on a Blackberry or a Windows Mobile device, but it’s on my to-do list.
But Houston, I Still Have a Problem
Those two fixes appeared to have made media queries applicable in a majority of browsing environments. But late in the game I found one more problem that I have yet to solve as of this writing: When I change the orientation on an iPad, the website doesn't resize correctly when the orientation is changed from vertical to horizontal or vice versa. It reverts to the default 980px width that mobile webkit browsers understand by default.
I have a sneaking suspicion that I can solve this by implementing the orientation as part of the media query rule, but I have yet to test it due to the simple fact that I don't own an iPad. If you know what solves it and want to share your expertise, I’m all ears. I'll post the update here with credit and will blast mucho kudos throughout the twittersphere.
All-in-all my first official foray into the media queries went well. The hardest part was making it fluid instead of fixed. but that's a topic for another day.
###
