mobile and tablet sometimes/often? combined

possibly also adjusted image & video

      sizes because mobile is expensive and
      slow))--preferred approach

===== Dedicated site ===== Target.com (an e-commerce site) * http://www.target.com (our) sites, target-count * http://sites.target.com/site/en/spot/mobile.jsp BART (a transport services site) * http://www..bart.goc * http://m.bart.gov * http://www.bart.gov/wireless/ ===== 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 ===== 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 

===== Summary ====== ===== Next =====