This is an old revision of the document!
Table of Contents
~~SLIDESHOW~~
Style sheets for Mobile to Desktop
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.
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:
Dedicated site
Target.com (an e-commerce site)
BART (a transport services site)
- www.bart.gov – full site for desktops and tablets
- m.bart.gov – mobile version of the site
- 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 feature you need to adopt is called Progressive enhancement.3)
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, www.alistapart.com/articles/responsive-web-design and the Book of the same name. Example: 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: • 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