Tips & tricks for how to not have your new site look awful on phones

If you build a website for a company that promotes mobile development especially - make sure that it looks semi-decent (doesn't look completely distorted) on a portable device.

Supported devices with media queries:

Know how to target each device and it's orientation. If these are all the devices that you might want to support, create the following media query tags:

  1.  
  2.  
  3. /* Smartphones (landscape) ----------- */
  4. @media only screen
  5. and (min-width : 321px) {
  6. /* Styles */
  7. }
  8.  
  9. /* Smartphones (portrait) ----------- */
  10. @media only screen
  11. and (max-width : 320px) {
  12. /* Styles */
  13. }
  14.  
  15. /* iPads (landscape) ----------- */
  16. @media only screen
  17. and (min-device-width : 768px)
  18. and (max-device-width : 1024px)
  19. and (orientation : landscape) {
  20. /* Styles */
  21. }
  22.  
  23. /* iPads (portrait) ----------- */
  24. @media only screen
  25. and (min-device-width : 768px)
  26. and (max-device-width : 1024px)
  27. and (orientation : portrait) {
  28. /* Styles */
  29. }
  30.  
  31. /* iPhone 4 ----------- */
  32. @media
  33. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  34. only screen and (min-device-pixel-ratio : 1.5) {
  35. /* Styles */
  36. }
  37. /* kindle fire ----------- */
  38. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  39. only screen and (min-device-pixel-ratio : 1.5),
  40. and (min-device-width : 600px)
  41. {
  42. /* Styles */
  43. }
  44.  

More info on media query syntax here , and some good examples to get you excited about implementing them here.

Adjusting the layout viewport

Now don't forget to add these properties to the viewport-meta tag anywhere in the header of your html document, so that the site is being prevented to scale down when viewed on the iphone :

  1.  
  2. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />
  3.  

For more information on the viewport meta-tag read here.

What to do about 7-inch tablets?

As Jacob Nielsen recommended for 10-inch tablets (iPad) - we simply served the desktop layout (it looks perfectly fine for our site).
While 7-inch tablets like the Kindle Fire or various other android tablets out there should be served the mobile version of a website. According to him - a site that is optimized for 3.5-inch mobile screens feels luxurious (in terms of space) on a larger 7 inch screen.

For having your iPad use the scaled desktop version of your site, after you deactivated scaling in your viewport, simply change the viewport properties in the header to depend on the screen-size:

  1.  
  2. <script type="text/javascript">
  3. if ((screen.width<=600) ) {
  4.    document.write('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />');    
  5. }
  6. </script>
  7.  

More about detecting device-orientation

iOS 4, as iPad with iOS 3.2, supports the media-query "orientation" attribute, so you can apply different styles for portrait and landscape orientations.
Yet older iOS versions for iPhone do not, so we still included those work-arounds:

You can a combination of min/max-width: For older iPhone, landscape, you want to make sure the min-width is at least 321px, that way these styles won’t be applied in portrait mode. The max-width property is used if you implement iPad-size specific media-queries so that you don’t affect the desktop counterparts that support the orientation media query, it's set to 1024px which is the iPad's max landscape width.

For more complex orientation event handling, take a look at safari's event handling documentation here.

Use separate style-sheets to keep things clean

We didn't actually do this, - opposed to the applied best practices in our real development projects - our site's stylesheet is a meter-long mess.
But I would, next time around!

  1.  
  2. <head>
  3. <link rel="stylesheet" href="smartphone-landscape.css"
  4. media="only screen and (min-width : 321px)"/>
  5. <link rel="stylesheet" href="smartphone-portrait.css"
  6. media="only screen and (max-width : 320px)"/>
  7. <!-- and so on -->
  8. </head>
  9.  

The next two tips are not really needed, but you can add them if you believe they make the experience of viewing your site on a mobile device special.

Have a iOS specific bookmark-icon

If a viewer wants to bookmark your site on home-screen - normally the iOS device will just create a screenshot of your site.
Now you can create your own "app icon" specific for your site - that is looking just as any other iOS app icon.

  • add this code to the section of your site.
    1.  
    2. <rel="apple-touch-icon" href="images/appicon.png"/>
    3. <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    4. <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    5.  
  • Create an icon in 57x57 pixel size, (one for retina display: 114x114 pixels, one for ipad: 72x72 pixels in .png format - do not add the rounded corners, apple does that for you.
  • Name the image it as you want, and link the path in the code snippet above.

  • Use special phone tags, if you link to phone-numbers

    1.  
    2. <a href="tel:008612345678900">Call me</a>
    3. <a href="sms:008612345678900">Send me a text</a>
    4.  

    (You ARE designing for a phone, duh.)

    1 Comment

    1. Todd M. | April 8th, 2012

      Thanks for the write up, especially introducing Kindle and other smaller devices – it gives us all something to think about as technology moves forward and onto more screens and sizes.

    Post a Comment