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.
Maybe you address this in a later video but might it be a browser compatibility differences perhaps?
The iOS simulator is Safari. I know chrome and safari are pretty close but not sure if there are any differences between chrome and mobile safari.
A couple of tools I’ve found useful for RWD on a Windows machine ( I have no affiliation with these tools, they’re just awesome and they also work on Mac).
1. Chrome add-on called Window Resizer which allows you to set specific screen resolutions for your browser (Thanks Treehouse for that one).
2. Adobe Edge Inspect (formerly Adobe Shadow). Which will basically shadow your browser window content and display it on a mobile device.
I mentioned this in a past screencast but for windows I am using this, I think it’s the best. Ripple emulator
What do you think about creating the website for mobile first then adding more as you go to tablet then desktop? I hear people talking about designing for mobile first because you focus on content first. Is this something anyone else does and should you Chris have done that here first?
Love the vids by the way. Learning a lot and also I’m seeing that talking to oneself must be normal since I do the same thing when I develope sites.
I think that’s a great way to go – moreso for web apps. It forces you to cut and simplify just because of scarcity of screen space. That’s a big deal for apps who have certain things they can’t cut because they are absolutely core to what the app does.
Less of a big deal for web sites. Still simplifying, but you don’t have to cut as much. The goal is mainly readability and navigability which are easier problems to tackle than say something like a drag and drop form builder.
Mobile First changes your priority. For a site like CSS-tricks, MF is arguably LESS important because most of the people using the site are developers in front of a computer and not developing on their iPhones (testing, yes… developing, I doubt it), but I’m sure Chris was still thinking about mobile when he was designing for desktop.
I would tend to disagree that it’s less important for web sites as a general statement. It still depends on the site’s audience and content. If you have a site already, Google Analytics is a gold mine of information for this kind of stuff.
Lots of people use their phone as a primary computing device. Then there are those using tablets and phablets as primary devices!
It depends on your content and audience, but I might consider designing for about 600px wide as your primary. Wider versions (desktop) and mobile versions can respond from that width. If you have an iPad, check out
…oops… check out http://niarchive.org/trails/causeway-coast-salmon/ on your iPad. Love how they transition the narrow layout to essentially “reading mode”