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. 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 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 test. But what did bother me is what he did next.
He watched and mumbled something as he dragged his browser window wide then narrow. Wide then narrow. 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 desktop window to be the same size as his phone screen. He muttered some things about icons and font sizes that I didn’t quite hear but I can probably guess what he was thinking. I offered my phone to show him but he dismissed it and moved on to another topic. He was clearly short on time (or just not interested) so I kept my retorts about using actual devices to test to myself, but this episode highlighted one thing…
The term “responsive” is now generic enough that non-developers know how to “test” it and do so automatically.
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 there.
Thus the only way to test an experience is by using a device. Sure, use you can use browser squishing to test general layout and broader design choices but the only way to know – to feel – if your responsive design is right 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 to select 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. It doesn’t matter so long as it 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 in a browser at that width? If things are a bit off in that dead zone, so be it. Move along.
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 and you’ll 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.