User Tools

Site Tools



Style sheets for Mobile to Desktop

Contact Hour 19: To be discussed on Monday 23rd April, 2012.

Lecturer: Dr Chris P. Jobling.

The contents of these notes and all the examples are from Chapter 12 of Castro and Hyslop, HTML5 and CSS3: Visual Quickstart Guide, 7th Ed., PeachPit Press, 2012.

A the moment, these notes are incomplete and you are invited to contribute to them by getting an account on this wiki.

Style sheets for Mobile to Desktop

Aim-to build one web site that works on the entire range of devices – from TV to smart phone – adapting its layout according to the devices capabilities

Mobile strategies and considerations

Two approaches:

  1. Build a dedicated site for mobile devices
    • mobile
    • tablet 1)
    • desktop
  2. Build one site for all devices
    • Same HTML, different style2)–preferred approach

Dedicated site (an e-commerce site)

BART (a transport services site)

One site for All

One set of HTML which adapts for device. Remember mobile phones have smaller screens and reduced bandwidth

Making 'one site for all' happen

  • The key design approach that you need to adopt is called Progressive enhancement.3)
  • In summary you need to separate HTML from styles so that you can progressively enhance the layout for higher resolution and more capable devices
  • For a good introduction see Ethan Marotte, Responsive Web Design, and the Book of the same name.


  • try resizing the browser window and watch what happens to the main content, banner, navigation menu and other items that are on the screen.
  • If you can, try viewing the site on a smart phone and/or tablet.
  • With these devices check what happens when you change the orientation of the device.

Principles of Responsive Design

Also known as “Mobile First” design

  • A flexible grid-based layout
  • Flexible images and media
  • Use of media queries


  • A flexible grid-based layout uses so-called fluid layout so that width/margin/padding of elements are defined in percentages or ems rather than pixels. This makes the location and size of all elements relative and easily resizable.
  • Flexible images and media means that images and video are sized by percentages which can be scaled up or down. This may require server-side support for scaling if it is to be efficient on mobile devices.
  • Use of media queries – a CSS3 feature – that allows you to adjust the design based on device features such as the width of the device's viewable area.


Further Reading

Understanding and Using Media Queries

Used in head

              <i ink net = "style sheet a half ="-.."
                              media ="..-sheik's decry ^ />

or in Style sheet Crude c-stoutest {

                      i. rules

3 Media features you can test for *

      width aspect-ratio scar
      height device-aspen-ratio grid
      device-width color
      deuce-height cow-index
      orientation monochrome

KX except on i E <9. Example

      f-f--0 bare-ass-used by all
                      styles-480 ^ c is r-use d only
                              if browser has width
                                      > = 480 pixels.
                      Cared supports media queues!)

<veto name = “viewpoint” content = a

              w a d In = device-width, i n i bi al-scale = I. 0'

(Ink net = “styles meet a media = hall u

              b aha h net ÷ u b use. CSS u I>

Cube d = a style sheet n

              media = "only screen



mobile and tablet sometimes/often? combined
possibly also adjusted image & video sizes because mobile is expensive and slow
This also applies to behaviour, and we will study it in more depth next year when we look at JavaScript
eg-146/lecture19.txt · Last modified: 2012/04/23 18:29 by eechris