Responsive design needs more than a good squeeze
The browser just isn’t enough
If you’re a developer and hear that a site is responsive, the first thing you do is resize your desktop browser. I know you do. We all do it. That’s fine and doing so quickly proves the point but responsive design is not about browser squishiness.
True story here. I was working on a responsive wireframe and was asked to give a preview to someone. I showed up with my tablet and phone ready to show off the work so far and get some more discussion happening. The person knew that one of the “features” of the wireframe was responsiveness, so he resized his desktop browser. That didn’t bother me…again, it’s a quick way to prove a point. But what did bother me is what he did next.
He watched and mumbled to himself as he dragged his browser window wide then narrow. Narrow then wide. He stopped at narrow for a second and then grabbed his phone. He proceeded to hold his phone up to the monitor and attempted to resize the browser window to be the same size as his phone screen. I think he muttered some things about icons and font sizes. I couldn’t quite hear but I can probably guess what he was thinking. I offered my phone to show him but he had already moved on to another topic. He was clearly short on time (or just not interested) so I kept a lengthy discussion about using actual devices to test to myself, but this little episode highlighted one thing…
The term “responsive” is now generic enough that non-developers know how to check for it. But that’s where they stop.
The guy I was showing this to wasn’t a developer. He’s familiar with technology but he’s not crunching code nor striving to design usable experiences all day like the rest of us. He knows what responsive is and knows his product needs it, but at that basic understanding, responsive simply means the site changes when you resize your browser. If only it was that easy.
Thinking in fixed-widths
Here’s the thing, responsive design isn’t about browser squishiness. It’s about devices. It’s about your phone, your tablet, your watch, your whatever. Outside of a desktop browser, you’re not resizing your browser window. You can’t. It’s size is fixed in either portrait or landscape. Your non-desktop visitors are going to hit your web site from a device and pretty much stay at that size.
Thus the only way to test the experience is by using a mobile device. Sure, you can use browser squeeze to test general layout and broader design choices but the only way to know – to feel – if your responsive design works is when you’re using it on a real device. Resizing your desktop browser to 320-pixels wide to match your iPhone is not a true representation.
Not to mention that you can’t, nor should you, account for every possible screen size in your responsive design. It doesn’t make sense and you’ll drive yourself crazy trying to make it all work (especially cross-browser).
The best way to work is to first do your research andselect the sizes that worry you the most. If you’re worried about 320-wide, 480-wide and 600-wide, design with those in mind. Don’t worry about how things look between 493 and 498. The in-betweens don’t matter so long as it is all still functional. The only people that could possibly hit that magical 5-pixel range are desktop users, and just how realistic is it that someone will use your site with a browser at that width? If things are a bit off in that dead zone, so be it. Move along.
Test in the real world
Responsive design is about your web site being usable on a device that isn’t a 30-inch monitor. Thus the 30-inch monitor isn’t your end-all-be-all testing tool. You need devices, lots of them. Grab your friends or co-workers and test your designs on their phones to get a good idea of things. Or find a device lab in your area and take a few hours to test offsite.
And for the love of Benji, never let anyone demo your site in their desktop browser alone when showing off responsive design. Ask them to use their device or offer yours. It’s not impressive to squeeze a browser and watch icons change. What is impressive is loading a web page on a phone, tablet and desktop and seeing each look and function happily. There’s still something magical about your web site looking nice on a mobile device. That magic will go away eventually so take advantage of it while you can.
