Andy Chung

Vancouver BC, Canada
  1. 18 Jan, 2011 - "A Responsive Redesign"

    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.

    Un-fixed widths with media queries

    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.

    6 column layout in a desktop browser 4 and 2 column layout within iOS

    Scaling images

    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.

    Choosing the right images to load

    Stacey App (the CMS powering andychung.ca) allows you to create 3 different sizes of each image and query them using a simple templating syntax. Thanks to some javascript magic from friend and co-worker James Burke, we query a different set of images depending on the size of the browser - we even refresh the images when the browser is resized. This enables me to create content which actually fits the browser frame, rather than trying to awkwardly scale content from 940px wide down to 300px wide.

    Large horizontal image loaded for 960px width Medium image loaded for 640px width Small vertical image loaded for 320px width, and images are shown inline rather than in a gallery

    Let me know what you think on Twitter, @_andychung

    1. andychung posted this