Why bother? It's true that smartphone web browsers are pretty advanced and certainly can handle rendering the full version of this blog. But there's a big difference between ensuring a site works and creating a good experience for your audience regardless of the device they're using. If anything, advances in the mobile web make responsive layouts like the one on this blog even more necessary — as it becomes more and more likely that your users are viewing your site on a handheld screen, it becomes less acceptable to force your audience to zoom way into your page and follow the text with their thumbs.
The key to a good mobile design is to fix at least one axis — it's fine if the user has to scroll down or to the right to see the rest of the content, but making the user scroll diagonally means that the layout doesn't fit the screen. For text-heavy sites like this blog, it's best to just allow vertical scrolling. Aside from this consideration, links, text fields, and buttons must be large enough to allow for easy navigation with thumbs. The font size may need to be adjusted to optimize viewing on a mobile screen. On a Mac, you can use mobile Safari on the iPhone Simulator that comes with Xcode to see how your site will look on a phone.
The good news is that these responsive layouts aren't difficult to implement. When I set out to theme this Octopress blog, our designer gave me two comps, one for the full version of the site and the other for the mobile version. The first step towards a responsive layout is to notice common elements between the two designs. If you compare the two versions of the blog, you'll notice that they contain essentially the same content. This means that we need only one template file for both designs, and definitely do not need to resort to creating a whole mobile subdomain to serve different content to small screens. For elements that aren't the same in the two designs, we can simply hide them by setting
display: none for devices where the elements shouldn't be shown. I used this technique in a couple of places on the blog: the right sidebar is hidden on the mobile version, while the mobile search bar (which differs from the search bar on the side in that it has placeholder text and appears in the main content
div) isn't displayed on the full version of the site.
But how do you apply different styles to the same elements depending on the size of the browser's viewport? There are a couple of ways, but by far the cleanest way is to use CSS3 media queries. Media queries allow developers to apply different styles to elements on a page depending on the media on which they are displayed, whether that medium is a screen, a projection, print, braille, etc. The most common use of media queries, however, is to create responsive layouts. Media queries come after an
@media declaration. Directly after comes the definition of the media type: we're concerned with creating responsive layouts for screens, and as a result, we'll declare our styles under
@media screen. To apply custom styles based on the size of the screen, we'll use media features, which come after the keyword
and and are enclosed in parentheses. Here's the SCSS code used to style the Artsy logo on this blog:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
The styles that are common to all viewports are written outside of
@media declarations at the top of the styles for
#lrg-mark — regardless of the screen size, we want the logo to be the same image and the same size, and we don't want to display the span inside of the div that contains fallback text. The rest of the styles are given in media queries: for a large viewport, we want the logo fixed in the upper right corner, for slightly smaller viewports, we want it to disappear, and for mobile viewports, we want it centered on the screen. Note that 481px is a magic number: it's the width of an iPhone in landscape mode.
The media features
min-width are a little misleading: they don't mean the maximum or minimum possible width of the user's screen. It's best to think of
max- as "less-than-or-equal-to" and
min- as "greater-than-or-equal-to." See the W3C's website for a complete reference on CSS media queries.
Making It Cross-Browser