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.

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

Two approaches:

1. Build a dedicated site for mobile devices
   • mobile
   • tablet ¹⁾
   • desktop
2. Build one site for all devices
   • Same HTML, different style²⁾–preferred approach

Target.com (an e-commerce site)

• www.target.com
• sites.target.com/site/en/spot/mobile.jsp

BART (a transport services site)

• www.bart.gov – full site for desktops and tablets
• m.bart.gov – mobile version of the site
• www.bart.gov/wireless/ – another mobile version for devices with even less capabilities.

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

• The key design approach that you need to adopt is called Progressive enhancement.³⁾
• 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, www.alistapart.com/articles/responsive-web-design and the Book of the same name.

Example: www.foodsense.is

• 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.

Also known as “Mobile First” design

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

<note>

• 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.

</note>

• Luke Wroblowski, Mobile First design, Nov 2009. URL www.lukew.com/ff/entry.asp?933 (See also the http://www.lukew.com/ff/entry.asp?1137 and Book with same title from A Book Apart, 2011.
• Jeremy Keith on the “one site for all approach, “One Web”, Presentation at the 2011 DIBI Conference: www.vimeo.com/27484362 and transcript www.adactio.com/articles/4938

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
                              resolution

KX except on i E <9. Example

      f-f--0 bare-ass-used by all
                                      browser
                      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