eg-146:lecture19
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
eg-146:lecture19 [2012/04/23 07:22] – [Dedicated site] eechris | eg-146:lecture19 [2012/04/23 18:28] – [Further Reading] eechris | ||
---|---|---|---|
Line 44: | 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)) |
- | | + | * In summary you need to separate HTML from styles |
- | | + | * For a good introduction see Ethan Marotte, //Responsive |
- | • more capable devices | + | |
- | example WWW food sense, i s | + | Example: [[http:// |
- | show on i Phone | + | |
- | i Pad | + | ---- |
- | desktop. | + | |
- | Ethan Mantle: | + | * 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 | + | ===== Principles of Responsive Design ===== |
- | to ewes or percentages, Makes all | + | |
- | layout | + | Also known as "// |
- | • Flexible images and media | + | * A flexible grid-based layout |
- | (scaled with percentages | + | * Flexible images and media |
- | | + | * Use of media queries |
- | (Also semer side to reduce whatnot sandals | + | |
- | of download) | + | ---- |
- | • Media queries, A 0553 component | + | |
- | that allows you to adjust | + | < |
- | on media features such as width of | + | * //A flexible grid-based layout// uses so-called |
- | browser' | + | * //Flexible images and media// means that images and video are sized by percentages |
- | Together called " | + | * //Use of media queries// -- a CSS3 feature -- that allows you to adjust |
- | or ' | + | </ |
- | Further Reading | + | |
- | Luke Wrote lew ski-^ Mobile First" | + | ===== Further Reading |
- | | + | |
- | w WW-hike w-com / ff I on his-a op? 9 33 | + | |
- | Video -> -t 118ft entry-asp? 1127 | + | |
- | " | + | ===== Understanding |
- | fewest | + | |
- | approach " | + | |
- | w w w. v i n e o. cour / 2 7 48 4 3 6 2 | + | |
- | + transcript | + | |
- | Understanding | + | |
Used in head | Used in head | ||
<i ink net = "style sheet a half =" | <i ink net = "style sheet a half =" | ||
Line 112: | 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