Have you ever worked really hard to created a really cool website that looks great on a browser and large tablet PC only to view it on a mobile device (like a Smartphone) and have it nearly impossible to read? Me, too. But what is one to do? Create a whole separate website just for phones and try and reroute traffic? And what happens when something new comes up like a Retina display? Create a third site?
History
Someone came up with a really cool solution that is known today as Responsive Design. You can read the original article (according to Wikipedia, but I wouldn't be surprised if someone else stumbled upon this earlier) by Cameron Adams in 2004 at http://www.themaninblue.com/writing/perspective/2004/09/21/. You'll notice he called it Resolution Dependent Layout. I used to design websites with the same mindset that they reshape themselves to whatever size starting in 2002, but we didn't have the cool CSS tools, the large bandwidth, or the wide browser support we do today. I called my approach Organic HTML, which I still think is the best name. Feel free to spread it around and see if it catches on.
Approaches
There are a lot of different approaches that one can take. There are also hundreds of different devices and screen sizes one has to consider. One school of thought is to create a separate site for each screen size. But this becomes a nightmare to update.
My approach is to basically design your site so it works well for larger screens (desktops, laptops, and large tablets) and small screens (phones and small tablets) and use Cascading Style Sheets to create a different layout for each. You may be saying to yourself, "But i want to customize my site to look just so on every device." Yeah, there are too many devices--your code will be so bulky it won't load right and your sanity will have checked out long before you get halfway thru the list.
There are two important subjects to consider. First is the code to make the site behave how you want. The other is designing the site to look good and to be easily read and navigated. Both must be skillfully executed to successfully create a site that adapts to different devices. This post will cover the code aspects. A later post will cover design considerations.
It is also important to note, that this approach works best with what is wrongly called html5 and modern browsers, i.e. Mozilla Firefox 3.5+, Google Chrome 2+, Apple Safari 3.1+, and recent versions of mobile browsers. Versions of Microsoft Internet Explorer before 9 were NOT designed to properly render html5, CSS 3, or other techniques. While these browsers make up around 10% of the market, they are still significant enough to consider. You may need to add IE specific code to correct rendering errors of an html5 approach.
Code
Below are some tricks and techniques you can use to code your site to adapt to different screen sizes.
- Set the iPhone Retina (or other mobile device with high density display) to view the site as a mobile device with a low resolution display and not a desktop even though you have the pixels to do so.
- Add the following tag inside the <head> tags:
- Set the min-width of either the <body> or the <div> containing the site to around 800. This isn't essential but will help you control how your site appears on smaller screens.
- iPhone Home Screen Icon
- Create a 57 x 57 png. Do not create rounded edges or a shiny effect. The iOS device will do that for you.
- Call it apple-touch-icon.png.
- Place it in the root directory of your website. This will be the default icon for your site if someone wants to save it on their home screen like it was an app.
- iPad Home Screen Icon
- Create a 75 x 75 png.
- Call it touch-icon-ipad.png. Do not create rounded edges or a shiny effect. The iOS device will do that for you.
- Place it in the root directory of your website.
- Add the following tag to the <head> section of EACH webpage: <link href="touch-icon-ipad.png" rel="apple-touch-icon" sizes="76x76">
- iPhone Retina Display Home Screen Icon
- Create a 120 x 120 png.
- Call it touch-icon-iphone-retina.png.
- Place it in the root directory of your website. This will be the default icon for your site if someone wants to save it on their home screen like it was an app.
- Add the following tag to the <head> section of EACH webpage: <link href="touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="120x120">
- iPad Home Screen Icon
- Create a 152 x 152 png.
- Call it touch-icon-ipad-retina.png.
- Place it in the root directory of your website. This will be the default icon for your site if someone wants to save it on their home screen like it was an app.
- Add the following tag to the <head> section of EACH webpage: <link href="touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="152x152">
- Fonts
- In the Style Sheets, set the fonts using ems, NOT pixels or points. Ems will allow the fonts to scale as the size of the website changes. 1 em is a good default for text meant to be read.
- Caution: If you set multiple rules, the effect will multiply. For example, if you set the font-size of 1.2 ems for elements in a <div>, and then set 1.2 ems for an specific element inside the <div>, it will be 1.2 times larger than the 1.2 of the <div>, i.e. larger than you were expecting.
- Images
- Set the Width and Height of images to 100%. Set a max-height and max-width to the size in pixels you want the image to appear on a desktop at full screen. This will allow the images to scale smaller.
- Layouts
- While <table> provides the most robust and consistent layout framework, it won't work with Responsive Design, so you'll have to use <div> and CSS-P techniques to layout your site. But you've probably been doing this for years.
- Use percentages and NOT pixel sizes to set width and height. This will allow the design to adapt more freely. Pixel sizes are good for max-width and max-height (or min-width and min-height).
- CSS branching
- Write your CSS code like you would normally for a desktop browser.
- At the bottom add @media screen and (max-width: 980px) { } (or use a different pixel size for the max-width) and write a new set of CSS code in side the brackets for the specific elements (NOT all elements) that need to change for the smaller screen. For example, if you have three columns in your site, you may want to reduce them to one; use smaller images; enlarge text; set certain elements to disappear with the display: none; style attribute.
- Test your site on several devices. Depending on the design of your site and the audience, you'll want to adjust the numbers and settings until it appears just right on your site. The above is just to get you started. Modern browsers allow you to drag the corner of the browser and resize it to give you a rough idea of how it will appear on a mobile device, but it isn't perfect. You need to test the site on a real phone.
The above list are basic techniques and approaches to turn your site into a mobile site. It's not meant to be exhaustive covering every technique, but it is sufficient to make your site mobile friendly. And there are lots of other resources on the web for other techniques. Here are a few I've found helpful:
