How to Format a Website for Mobile Devices (like the iPhone) using HTML 5 and CSS

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.

1. 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.
1. Add the following tag inside the <head> tags: 
2. 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.
2. iPhone Home Screen Icon
1. Create a 57 x 57 png. Do not create rounded edges or a shiny effect. The iOS device will do that for you.
2. Call it apple-touch-icon.png. 
3. 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.
4. iPad Home Screen Icon
1. Create a 75 x 75 png. 
2. Call it touch-icon-ipad.png. Do not create rounded edges or a shiny effect. The iOS device will do that for you.
3. Place it in the root directory of your website.
4. Add the following tag to the <head> section of EACH webpage: <link href="touch-icon-ipad.png" rel="apple-touch-icon" sizes="76x76">
5. iPhone Retina Display Home Screen Icon
1. Create a 120 x 120 png. 
2. Call it touch-icon-iphone-retina.png. 
3. 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.
4. Add the following tag to the <head> section of EACH webpage: <link href="touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="120x120">
6. iPad Home Screen Icon
1. Create a 152 x 152 png. 
2. Call it touch-icon-ipad-retina.png. 
3. 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.
4. Add the following tag to the <head> section of EACH webpage: <link href="touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="152x152">
7. Fonts
1. 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.
2. 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.
8. Images
1. 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.
9. Layouts
1. 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.
2. 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).
10. CSS branching
1. Write your CSS code like you would normally for a desktop browser.
2. 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.
11. 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:
• Beginner’s Guide to Responsive Web Design
• A List Apart: Responsive Web Design
• Designing an iPhone-friendly Website
• Responsive Web Design Techniques, Tools and Design Strategies

Sour Grapes, or Typical Rantings of a Graphic Design Degree holder

Recently a friend of mine shared a blog post by a graphic designer via Facebook. This wasn't the first time he had shared one, and I doubt it will be the last.

In this post he was lamenting the loss of the HTML/CSS guru and blaming it on web standards. I found this post odd, because whenever I look at job listings, there are just as many listings for an HTML/CSS guru as there have ever been. The author of the post talked about how web standards had eliminated all the quirks that used to exist between differing browsers. I wondered if this guy had built a website in the last month, because there are still a mountain of quirks one has to deal with just as there were over a decade ago when I started designing sites. True, many of the old quirks have disappeared, but with the introduction of HTML 5 and CSS 3 have come dozens of new quirks designers and programers have to deal with. If you write old code (HTML 4 and CSS 2) then yes, the code will be very consistent across browsers with very little need to write extra code to handle the quirks (but it will still require some). But who wants to hire someone to write old code? Most people have jumped onto the HTML 5 bandwagon thinking they need it without really understanding what it is or why it exists.

Reading that post, I was reminded of another rant another friend had posted about the decline of the art industry. At one time, the author had a booming business, but his clients had moved to outsourcing to cheaper labor in other countries that could deliver the same product. His solution was a certification program to block new entries into the job market.

And that post reminded me of a third post where a graphic designer was ranting and raving about people getting access to professional graphics software (especially of the Adobe family) and thinking they were designers but producing horrendous efforts. (This one I did have some sympathy for, because I have seen some pretty awful work by people who had never learned the basics of design.) His argument was the graphic design was some magical skill only a few possessed and should not be undersold. (He apparently was being underbid.) Graphic Design is a skill, but unlike other art skills (drawing, painting, storytelling, sculpture) anyone can learn it. And anyone can learn it from books or online resources--you don't need a special class or degree.

All three of these posts reminded me of numerous people I have come across who have BFA degrees in Graphic Design but couldn't find a job for years. They blame the market, the economy, and everything else but themselves. For some reason, it never occurred to them that they just weren't as good as they thought they were.

I've been a professional graphic designer/web designer for over 11 years. I got my first job as a designer two months after graduating with a degree in Economics. A couple of years later, I was offered another job replacing a guy who didn't even have a college degree, but was producing professional graphic design/web designer/motion design for large clients and delighting them with his work. Later I worked for several years as a Senior Designer/Webmaster for a large financial institution. In all these different positions, I've worked with many other designers, and I've noticed a pattern: the majority of those I work with do not have degrees in Graphic Design. Those that do tend to have less ability and fewer skills than those who majored in something like Communications.

But there is one thing that holders of BFAs in Graphic Design have that others do not--an excess of EGO. I don't know why, but designers think they are wonderful, everything they produce is a masterpiece, and everyone else is incapable of producing anything worth looking at. And this seems to be unique to designers. I went to art school, and I have a lot of artist friends. The illustrators, draftsmen, sculptors, and others are all nice, easy going people that admire others' work when it is good and recognize that they could improve their own. Those that are professional graphic designers with degrees in something else also recognize and acknowledge good work regardless of the source.

And that brings me back to this post's title: Sour Grapes. The three blog posts I've mentioned were all very negative and very angry. The authors were not having the success they wanted, and so they lashed out placing the blame on various sources. And others who felt the same way or were in the same boat reposted and/or shared these posts thinking they were masterpieces that hit the nail on the head. But never once did any of them even consider that they weren't as good as they thought they were. They never once suggested that they had gotten complacent and hadn't bothered to update their skills or learn new ones. They also didn't consider that the economy is a dynamic place with jobs and careers disappearing or being reinvented in all industries, not just design.

Being an expert with Photoshop is nice, but anyone can learn the commands and techniques. And when the new version comes out, many of the processes, short cuts, commands, etc. will have changed, so the old skills lose value. What does have value--and always will--is an eye for what looks good together, what fonts should be used, what colors, how the elements to be arranged in relation to each other, how to organize a work so it is accessible. These skills will always have a place, although their application may change drastically. Design has as much to do with taste and fads as fashion, and designer that was hot last year may be yesterday's news this year. And these are the skills the designers who write such blog posts seem to be weakest in.

The solution to their dilemma (not as much work, money, or prestige) is to improve their skills and make themselves better designers. Instead, they take the approach that many other failing and failed businesses have tried and that is to eliminate competition and vilify whatever elements they see as the source of their problems. It rarely works, and when it does work it's usually temporary and requires a great deal of maintenance. (Does Detroit and the car industry ring any bells?)

Writing this post, I realize that those who would benefit most from it will probably never read it, and if a few of them do, they will be sitting at their computers yelling at the screen arguing against the points I've made claiming I just don't get it not realizing how ironic that accusation is.

The expressions of the muses on the book cover at the top reminded me of the expression I imagine these blog post writers having and their desire to control the world as if they were the three fates of Greek mythology. Fortunately, they do not have that power. Just imagine what the world would be like if they did.