~~SLIDESHOW~~
====== Style sheets for Mobile to Desktop  ======

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

**Lecturer**: [[C.P.Jobling@Swansea.ac.uk|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:
  - Build a dedicated site for mobile devices
          * mobile
          * tablet ((mobile and tablet sometimes/often? combined))
          * desktop
  - Build one site for all devices
        * Same HTML, different style((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|www.target.com]]
  * [[http://sites.target.com/site/en/spot/mobile.jsp|sites.target.com/site/en/spot/mobile.jsp]]

BART (a transport services site)

  * [[http://www.bart.gov|www.bart.gov]] -- full site for desktops and tablets
  * [[http://m.bart.gov|m.bart.gov]] -- mobile version of the site
  * [[http://www.bart.gov/wireless/|www.bart.gov/wireless/]] -- another mobile version for devices with even less capabilities.

===== 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**.((This also applies to behaviour, and we will study it in more depth next year when we look at JavaScript))
  * 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//, [[http://www.alistapart.com/articles/responsive-web-design|www.alistapart.com/articles/responsive-web-design]] and the [[http://www.abookapart.com/products/responsive-web-design|Book of the same name]].

Example: [[http://www.foodsense.is|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.

===== Principles of Responsive Design =====

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>

===== Further Reading =====
  * Luke Wroblowski, //Mobile First design//, Nov 2009. URL [[http://www.lukew.com/ff/entry.asp?933|www.lukew.com/ff/entry.asp?933]] (See also the [[http://www.lukew.com/ff/entry.asp?1137]] and Book with same title from [[http://www.abookapart.com/products/mobile-first|A Book Apart]], 2011.
  * Jeremy Keith on the "one site for all approach, "One Web", Presentation at the 2011 DIBI Conference: [[http://www.vimeo.com/27484362|www.vimeo.com/27484362]] and transcript [[http://www.adactio.com/articles/4938|www.adactio.com/articles/4938]] 

===== 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
                                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 =====

  *