Differences

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

--- eg-146:lecture19 [2012/04/23 07:00] – created eechris
+++ eg-146:lecture19 [2012/04/23 18:29] (current) – [Making 'one site for all' happen] eechris
@@ Line 17: / Line 17: @@
 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
+===== Mobile strategies and considerations =====
-I approaches.
+Two approaches:
-I, Build a dedicated site for
+  - Build a dedicated site for mobile devices
-        mobile devices
+          * mobile
-        e. g, mobile
+          * tablet ((mobile and tablet sometimes/often? combined))
-                tablet} sometimes thu?
+          * desktop
-                desktop combined.
+  - Build one site for all devices
-, Build one site for all deuces
+        * Same HTML, different style((possibly also adjusted image & video sizes because mobile is expensive and slow))--preferred approach
-        Some HTML different style
-        (possibly also adjusted image & video
+===== Dedicated site =====
-        sizes because nubile is expensive land
-        show)-preferred approach
+Target.com (an e-commerce site)
-Dedicated site
-Examples: WWW-target. (our) sites, target-count
+  * [[http://www.target.com|www.target.com]]
-                        site tent spot two.},
+  * [[http://sites.target.com/site/en/spot/mobile.jsp|sites.target.com/site/en/spot/mobile.jsp]]
-Example 2
-        WWW. mort-you m-but-gone
+BART (a transport services site)
-        WWW-how, you) wireless)
-        (point out differences in approach)
+  * [[http://www.bart.gov|www.bart.gov]] -- full site for desktops and tablets
-One site for AN
+  * [[http://m.bart.gov|m.bart.gov]] -- mobile version of the site
-One sheer set of HTML which adapts for
+  * [[http://www.bart.gov/wireless/|www.bart.gov/wireless/]] -- another mobile version for devices with even less capabilities.
-device, Remember mobile phone love
-smaller screens a reduced bandwidth
+===== One site for All =====
-Making one site For All Happen
-Progressive enhancement
+One set of HTML which adapts for
-        separate HTML from a Ss so that
+device. Remember mobile phones have
-        you can progressively enhance
+smaller screens and reduced bandwidth
-        the layout for higher resolution
-        • more capable devices
-example WWW food sense, i s
+===== Making 'one site for all' happen =====
-                show on i Phone
-                        i Pad
+  * 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))
-                        desktop.
+  * In summary you need to separate HTML from styles so that you can progressively enhance the layout for higher resolution and more capable devices
-Ethan Mantle: Responsive Wets Design
+  * 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]].
-        w WW, a list apart. com / articles / responsive-web-design
-                (+ Boon)
+Example: [[http://www.foodsense.is|www.foodsense.is]]
-Principles:
-• a flexible grid-based layout
+----
-        fluid layout width (margin) padding set
-        to ewes or percentages, Makes all
+  * try resizing the browser window and watch what happens to the main content, banner, navigation menu and other items that are on the screen.
-        layout elements relative
+  * If you can, try viewing the site on a smart phone and/or tablet.
-• Flexible images and media
+  * With these devices check what happens when you change the orientation of the device.
-        (scaled with percentages (scale up or
-        down) wow-artist apart. confounds fluid-
+===== Principles of Responsive Design =====
-(Also semer side to reduce whatnot sandals
-of download)
+Also known as "//Mobile First//" design
-• Media queries, A 0553 component
+  * A flexible grid-based layout
-that allows you to adjust deng based
+  * Flexible images and media
-on media features such as width of
+  * Use of media queries
-browser's relievable page over
-Together called "Responsive Design"
+----
-or 'Mobile First-4
-Further Reading
+<note>
-        Luke Wrote lew ski-^ Mobile First"
+  * //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.
-                design Nov 2009.
+  * //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.
-        w WW-hike w-com / ff I on his-a op? 9 33
+  * //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.
-                Video -> -t 118ft entry-asp? 1127
+</note>
-"Mobile First 4 Book, NBYZLI Apart, 2011
-fewest Jeremy Keith "one site fron all u
+===== Further Reading =====
-approach "One Welsh at DIBI
+  * 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 w w. v i n e o. cour / 2 7 48 4 3 6 2
+  * 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]]
-+ transcript WWW-adoration. com (articles 14938
-Understanding s Using media events
+===== Understanding and Using Media Queries =====
 Used in head
                 <i ink net = "style sheet a half ="-.."
@@ Line 107: / Line 107: @@
                 b aha h net ÷ u b use. CSS u I>
 Cube d = a style sheet n
                 media = "only screen
 ===== Summary ======