#044: Responsive Tweaks on Real Emulator

(Updated on )

Squeezing down a desktop browser very narrow can give you a vague sense of how a responsive design works, but it’s not an accurate representation of an actual small screen device. And actual small screen devices are what we’re designing for here, not other curious designers squeezing their browsers down =).

In this screencast we open up the iOS simulator (comes free with XCode on a Mac) and make some design tweaks based on what we are seeing there. In my experience the simulator is very accurate to what you see on the real device. I have seen differences though as well – for example memory usage. Just after the launch of this very website I was seeing crashing on mobile webkit – and that wasn’t happening in the simulator.

One thing we do is remove the 3D stacked paper effect at the narrowest media query. We also figure out that the ad in the header is causing some horizontal scroll on mobile, an undesirable thing in how we’re approaching mobile layout. Fortunately we were able to track that down right away, but sometimes these things are elusive to track down and you just hide the overflow-x on the body, which we ultimately do here.

We adjust some font sizes for the smaller screen as well.