Earlier this year there was an article on A List Apart discussing CSS3 media queries that made me re-think my approach to website layouts. Personally, until then there were two approaches when mocking up a design; fluid or fixed width. As a designer coming from a print background I never liked the lack of control of a fluid layout, but also found fixed widths to be not optimal on all screen resolutions.
When it came time to overhaul my personal website I decided it was time to create a design that would adapt to mobile, tablet, and desktop browsers. With CSS3 media queries I was able to create specific styles based on browser resolution, allowing for simple and seamless transitions between devices. Separate stylesheets are created for a resolution greater than 960px, lesser than 960px, and lesser than 620px. This allows me to create three distinct “fixed” width layouts for mobile, tablet and desktop without the need for mobile subdomains or completely fluid layouts.
Media queries were a successful way to re-size, re-style and relocate html elements, but one thing that didn’t scale particularly well were images. Loading a 940px wide image and scaling it down to 300px wide is inefficient and will often result in awkward looking content. Furthermore, if a user is loading a 320px wide browser they are most likely going to be on a mobile device, making file size and load times a huge factor in creating a successful experience.
Let me know what you think on Twitter, @_andychung