Up until recently I too, much like yourself was developing websites with desktop in mind first and then absolutely racking my brain getting it to work on smaller screens using media queries. You might have noticed that the approach of max-width in media queries and scaling a site down is a hackled approach to responsive development that doesn’t work properly and causes you so much grief you want to punch a hole in your keyboard.
There is a better way and it involves retraining how your brain approaches responsive development. Eventually mobile devices like phones and tablets will be a majority of web traffic, desktops and laptops will always account for a hefty percentage but trends are showing those little brushed aluminium glass coated devices we love so much as taking over.
The Old Approach
You design or the designer passes you a PSD of how they want the website to look. Awesome, you say, this should be easy. Set up your container and then get to work measuring everything out. You should be using percentages and if you are not, then you are most likely going to hell.
You get your beautiful desktop version done and it’s looking great, but then the trouble starts. Your designer uses a Mac because they’re a designer and designers feel as though they are compelled to use a Mac. The average Macbook resolution is 1366 x 768. The site isn’t looking right on my laptop, you have a look and spot the issue. You set out to make it work on the designers laptop.
… The designer taps you on the shoulder again. “Hey, I just noticed when I resize my browser to this arbitrary screen height and width the unicorns on the site don’t display correctly and the menu is completely broken” you find out the dimensions and you get it to work for said arbitrary size. This continues on and on. By now your media queries file is so messy and full of !important declarations you are starting to feel overwhelmed.
You are most likely using max-width in your media query file and while it does work, max-width is very specific and you generally use a lot of them. If your designer is like most up-to-date and modern designers, they don’t want the site to just work at specific breakpoints they want it to be truly responsive.
While this “old approach” works for breakpoint based responsive sites, I am willing to bet if you’re in the majority of developers in 2013, you or your designer like their websites to work for any past, present and future screen sizes.
The New Approach
The new approach as mentioned earlier requires a complete workflow adjustment. You are going to be building the site for mobile first and then through various breakpoints show more and more of the site depending on screen size. For breakpoints we’ll be using relative EMs (rems). They’re not supported in IE8, but IE8 doesn’t support media queries either and I could care less for a browser with 8% market share that makes my life a living nightmare (unless clients want to pay extra).
For brevity’s sake, I am going to assume you are using LESS, Stylus, Sass or at least some kind of CSS pre-processor that undeniably makes your life easier. If not, look into one of those. I maintain a work in progress called Modern Web Framework which comes with a media queries file loaded with REM based breakpoints for your apps. You can get the media queries file here if you’re lazy and cannot be bothered looking through the repository.
Using the media queries file I linked as a reference we start from the bottom and work our way to the top. Much like that Drake song, only not as annoying. The lowest common denominator screen size you’ll want to cater for is 240px, feel free to skip that one if you don’t give a fuck about crappy Android users on horribly small devices (I wouldn’t blame you if you did).
Using this mobile aka small screen first approach and background images, we can scale our site up more nicely. Use background images as much as you possibly can, start with smaller versions and replace them with bigger images for larger displays.
