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

Progressive enhancement

      separate HTML from a Ss so that
      you can progressively enhance
      the layout for higher resolution
      • more capable devices

example WWW food sense, i s

              show on i Phone
                      i Pad
                      desktop.

Ethan Mantle: Responsive Wets Design

      w WW, a list apart. com / articles / responsive-web-design
              (+ Boon)

Principles: • a flexible grid-based layout

      fluid layout width (margin) padding set
      to ewes or percentages, Makes all
      layout elements relative

• Flexible images and media

      (scaled with percentages (scale up or
      down) wow-artist apart. confounds fluid-

(Also semer side to reduce whatnot sandals of download) • Media queries, A 0553 component that allows you to adjust deng based on media features such as width of browser's relievable page over Together called “Responsive Design” or 'Mobile First-4 Further Reading

      Luke Wrote lew ski-^ Mobile First"
              design Nov 2009.
      w WW-hike w-com / ff I on his-a op? 9 33
              Video -> -t 118ft entry-asp? 1127

“Mobile First 4 Book, NBYZLI Apart, 2011 fewest Jeremy Keith “one site fron all u approach “One Welsh at DIBI

      w w w. v i n e o. cour / 2 7 48 4 3 6 2

+ transcript WWW-adoration. com (articles 14938 Understanding s Using media events 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