ICCT Wiki

User Tools

Site Tools

Trace:
eg-146:lecture19

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
eg-146:lecture19 [2012/04/23 07:19] – eechriseg-146:lecture19 [2012/04/23 18:28] – [Further Reading] eechris
Line 29: Line 29:
  
 Target.com (an e-commerce site)  Target.com (an e-commerce site) 
- * http://www.target.com + 
- * http://sites.target.com/site/en/spot/mobile.jsp+  * [[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) BART (a transport services site)
- * http://www..bart.goc + 
- * http://m.bart.gov +  * [[http://www.bart.gov|www.bart.gov]] -- full site for desktops and tablets 
- * http://www.bart.gov/wireless/+  * [[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 site for All =====
Line 41: Line 44:
 device. Remember mobile phones have device. Remember mobile phones have
 smaller screens and reduced bandwidth smaller screens and reduced bandwidth
 +
  
 ===== Making 'one site for all' happen ===== ===== Making 'one site for all' happen =====
-Progressive enhancement + 
-        separate HTML from a Ss so that +  * 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)) 
-        you can progressively enhance +  * In summary you need to separate HTML from styles so that you can progressively enhance the layout for higher resolution and more capable devices 
-        the layout for higher resolution +  * 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 Book of the same name. 
-        • more capable devices + 
-example WWW food sense, i s +Example: [[http://www.foodsense.is|www.foodsense.is]] 
-                show on i Phone + 
-                        i Pad +---- 
-                        desktop. + 
-Ethan Mantle: Responsive Wets Design +  * try resizing the browser window and watch what happens to the main content, banner, navigation menu and other items that are on the screen. 
-        w WW, a list apart. com / articles / responsive-web-design +  * If you can, try viewing the site on a smart phone and/or tablet.  
-                (+ Boon) +  * With these devices check what happens when you change the orientation of the device. 
-Principles: + 
-• a flexible grid-based layout + 
-        fluid layout width (margin) padding set +===== Principles of Responsive Design ===== 
-        to ewes or percentages, Makes all + 
-        layout elements relative +Also known as "//Mobile First//" design 
-• Flexible images and media +  * A flexible grid-based layout 
-        (scaled with percentages (scale up or +  * Flexible images and media 
-        down) wow-artist apart. confounds fluid- +  * Use of media queries 
-(Also semer side to reduce whatnot sandals + 
-of download) +---- 
-• Media queries, A 0553 component + 
-that allows you to adjust deng based +<note> 
-on media features such as width of +  * //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. 
-browser's relievable page over +  * //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.  
-Together called "Responsive Design" +  * //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. 
-or 'Mobile First-4 +</note> 
-Further Reading + 
-        Luke Wrote lew ski-^ Mobile First" +===== Further Reading ===== 
-                design Nov 2009. +  * 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. 
-        w WW-hike w-com / ff I on his-a op? 9 33 +  * 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]]  
-                Video -> -t 118ft entry-asp? 1127 + 
-"Mobile First 4 Book, NBYZLI Apart, 2011 +===== Understanding and Using Media Queries =====
-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 Used in head
                 <i ink net = "style sheet a half ="-.."                 <i ink net = "style sheet a half ="-.."
Line 109: Line 108:
                 b aha h net ÷ u b use. CSS u I>                 b aha h net ÷ u b use. CSS u I>
 Cube d = a style sheet n Cube d = a style sheet n
-                media = "only screen  +                media = "only screen
- +
- +
 ===== Summary ====== ===== Summary ======
  
eg-146/lecture19.txt · Last modified: 2012/04/23 18:29 by eechris