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

Mobile strategies a consideration I approaches. I, Build a dedicated site for

      mobile devices
      e. g, mobile
              tablet} sometimes thu?
              desktop combined.

2, Build one site for all deuces

      Some HTML different style
      (possibly also adjusted image & video
      sizes because nubile is expensive land
      show)-preferred approach

Dedicated site Examples: WWW-target. (our) sites, target-count

                      site tent spot two.},

Example 2

      WWW. mort-you m-but-gone
      WWW-how, you) wireless)
      (point out differences in approach)

One site for AN One sheer set of HTML which adapts for device, Remember mobile phone love smaller screens a reduced bandwidth Making one site For All Happen 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