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 design approach that 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 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 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