The Internet is more mobile than ever

The age old problem of screen size has plighted the humble web designer for decades.Today, more people are accessing the internet by mobile phone than ever before, and the problem has only gotten worse. 2% of internet traffic comes from iOS devices, which is more than what the desktop browser, Opera creates!

So how can we tackle this problem? I mean, thats 2 out of every 100 people reading your website on their phones. Thankfully, the W3C has saw this preeminent strike of traffic from the mobile community, and given us the tools we need to make it work.

Goal

Want an example? If you’re using a modern browser, try resizing your browser window on this website. You’ll notice that it changes layout depending on the browser size (and therefore screen size). This is the effect we’re going for.

Strategy

It is possible to make a website that fits on every screen without CSS3 media types, but its difficult, time consuming, and it will never look perfect on smaller, mobile screens. Our goal is to create a natural, intuitive look that is associated with mobile web browsing and app usage. After a lot of experimenting, I’ve came to the conclusion that the optimal design for mobile devices (excluding iPad) is a single column website.

First things first, if you haven’t already, make a website, just how you normally would! It can be a flexible layout or a rigid one, it doesn’t really matter. Now try resizing your browser window on your beautifully crafted piece of work. Depending on how you’ve built it, at a certain resolution you’ll get the abominable horizontal scroll bar, and no one wants to see that. The alternative is you don’t get the horizontal scroll, but eventually the content becomes so squished that you end up with almost one word per line. Our main tool to battle this is media types.

The @media Rule

Think of the @media rule as a very basic conditional statement in CSS. You can call something with @media either through a separate stylesheet, or call it directly inside your main stylesheet. If you wish to call it as a separate stylesheet, make another CSS file and include it like you’d include any other CSS file, and add the media attribute.

For this tutorial we’re going to be calling it inside the stylesheet, which in my opinion, is the better way to go about this. It’ll decrease load times on your site by reducing HTTP requests.

The iPhone resolution (and that of all mobile devices) is less than 640 pixels wide. So usually I’ll say if the screen is less than 700 pixels wide, switch to single column mode. We use this code to check for that:

@media (max-width: 700px) {
   /* PUT CSS HERE TO ALTER WEBSITE TO SINGLE COLUMN */
}

Things might get a bit messy down here, but hopefully if you’ve done everything neatly you shouldnt have to add too much. For example, lets say you have two columns normally, #column_1 and #column_2. Column 1 is the main content, and column 2 is supplementary information and adverts. Column 2 isn’t really necessary for someone just accessing the website from their phone, so you could add this inside your media declaration:

#column_2 {
     display: none;
}

That way, column-2 wont be visible on smaller screens, leaving you with just one column, assuming that you’ve put this inside your media declaration. But wait! There’s more. You can also have a minimum width, so if you decide that when the window is on the larger size (i.e. more than 1300 pixels wide), you can increase the size of your content and sidebar areas. This is more suitable for rigid websites, rather than flexible columns

@media (min-width: 1300px) {

}

You could then say, what happens between the widths of 700 and 900 pixels:

@media (max-width: 900px) and (min-width: 700px) {

}

More Tips!

These are pretty important!

  • You can have a hidden div on your website, which only appears (with display: block) when the user goes beyond a certain width. This is great if you have some information in the sidebar you wish to retain.
  • Something I’d suggest doing is having overflow-x: scroll on content areas (such as maybe .entry-content) that use tables or other wider forms of media. This means that nothing gets cut off that might be important. You don’t want to apply the scroll bar to the entire page though!
  • Don’t forget, if something doesn’t seem to be working you can use the !important declaration at the end of the style, i.e. display: block !important. Assuming you’ve added all of this to the bottom of your CSS file this shouldn’t be such a problem, as CSS further down overrides CSS further up.

iOS and Android Meta Tag

In your head you can place a meta tag which will alter how android and iOS render a web page. This is sometimes necessary for scaling on mobile devices since we use the scale property below to define what scale we want the website to be on. Generally keeping user scalable set to yes is the best idea, although on mobile apps this may not be necessary.

<meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" />

Support

Here are all the @media rules, with their support. It’s pretty widely supported nowadays. Last Updated August 2013.

FeatureChrome/SafariFirefoxInternet ExplorerOpera
height/width Yes Yes 9.0 Yes
min-height/min-width Yes Yes 9.0 Yes
device-height/device-width Yes Yes 9.0 Yes
device-aspect-ratio Yes Yes 9.0 Yes
color Yes Yes 9.0 Yes
color-index Yes Yes 9.0 Yes
monochrome No Yes 9.0 Yes
resolution No Yes 9.0 Yes
orientation No Yes 9.0 Yes
aspect-ratio No Yes 9.0 Yes
grid No Yes 9.0 Yes
scan No Yes 9.0 Yes