Silverstripe for Smart-phone (IPhones)

More and more people are viewing websites on their phones and tablet PCs. For some of my web sites, there figure is about 10% and rising. The good news for web designers, is that smart phones and tablet PCs nowadays are pretty much just small screened PCs, and the web browsers on these phones render web sites pretty much the same as on your PC or Mac. For the most part, all we need to worry about is size - and with some simple CSS we can make a site that looks great on a full sized screen, but squishes down nicely to look good on a tiny wee mobile phone screen.

@media screen and (max-width:480px) { }

The key to setting up our site for smart phone are the following two commands

  • @media screen and (max-width:480px) { }
  • @media screen and (min-width:480px) { }

Simple enough: Within the {} bracket you can specify CSS styles which will only apply if the users screen is above, or below a specified width. 480px pixels is a typical width of a smart phone when it's held on its side.

For example:

@media screen and (min-width:480px) { 
    /* for normal screens */
    
    #Header { height:200px;}
    #MainPage { width:80%;}
    #Content { padding: 40px;}
    
}

@media screen and (max-width:480px) { 
    /* for small screens */
    
    #Header { height:40px; }
    #footer { display:none; }
    #MainPage { width:100%}    
    #Content { padding: 5px;}    
    
}

In the example above, the top section specifies styles when the user's screen is more than 480px wide. They will see a big header, space on either side of the main page, and a nice amount of padding the content area.

When the same page is viewed on a small screen, the top set of CSS is ignored, and the lower set comes in to play. The header is reduced in size, the footer is hidden to save space, the main page is made to fill the full width, and the padding is reduced on the content area to give more space too.

Tips

Here are some things you'll want to achieve for a small screen:

  • try and avoid horizontal scrolling
  • remove any unnecessary stuff,
  • remove drop-down menus - keep it simple for touch screens,
  • have items like menu links wrap to avoid horizontal scrolling,
  • reduce the size of sections like headers and footers, or hide them altogether,
  • if you have floating columns, either hide them, or put then above or below your content.

It's just CSS

Don't forget though, this is just CSS and we're only dealing with layout here. The other issues for mobile / smart phone development are:

  • download times - keep images as small as possible, no big videos,
  • no Flash,
  • generally keeping it as simple as possible.

The simplest way to deal with these issues is to just make your entire site fast loading, with no flash, and keep it all simple - thereby making it fine for any platform.