eg-146:lecture19
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
eg-146:lecture19 [2012/04/23 07:11] – eechris | eg-146:lecture19 [2012/04/23 18:29] (current) – [Making 'one site for all' happen] eechris | ||
---|---|---|---|
Line 21: | Line 21: | ||
- Build a dedicated site for mobile devices | - Build a dedicated site for mobile devices | ||
* mobile | * mobile | ||
- | * tablet (mobile and tablet sometimes/ | + | * tablet |
* desktop | * desktop | ||
- Build one site for all devices | - Build one site for all devices | ||
- | * Same HTML, different style((possibly also adjusted image & video | + | * Same HTML, different style((possibly also adjusted image & video sizes because mobile is expensive and slow))--preferred approach |
- | | + | |
- | | + | |
===== Dedicated site ===== | ===== Dedicated site ===== | ||
- | Examples: WWW-target. (our) sites, | + | |
- | site tent spot two.}, | + | Target.com (an e-commerce site) |
- | Example 2 | + | |
- | WWW. mort-you m-but-gone | + | * [[http:// |
- | | + | * [[http:// |
- | | + | |
- | One site for AN | + | BART (a transport services site) |
- | One sheer set of HTML which adapts for | + | |
- | device, Remember mobile | + | * [[http:// |
- | smaller screens | + | * [[http://m.bart.gov|m.bart.gov]] |
- | Making one site For All Happen | + | * [[http:// |
- | Progressive enhancement | + | |
- | separate HTML from a Ss so that | + | ===== One site for All ===== |
- | | + | |
- | | + | One set of HTML which adapts for |
- | • more capable devices | + | device. Remember mobile |
- | example WWW food sense, i s | + | smaller screens |
- | show on i Phone | + | |
- | i Pad | + | |
- | desktop. | + | ===== Making |
- | Ethan Mantle: | + | |
- | w WW, a list apart. com / articles / responsive-web-design | + | * 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)) |
- | (+ Boon) | + | * In summary you need to separate HTML from styles |
- | Principles: | + | * For a good introduction see Ethan Marotte, //Responsive |
- | • a flexible grid-based layout | + | |
- | fluid layout width (margin) padding | + | Example: [[http:// |
- | to ewes or percentages, Makes all | + | |
- | layout | + | ---- |
- | • Flexible images and media | + | |
- | (scaled with percentages | + | * 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. |
- | (Also semer side to reduce whatnot sandals | + | * With these devices check what happens when you change the orientation of the device. |
- | of download) | + | |
- | • Media queries, A 0553 component | + | ===== Principles of Responsive Design ===== |
- | that allows you to adjust | + | |
- | on media features such as width of | + | Also known as "// |
- | browser' | + | * A flexible grid-based layout |
- | Together called " | + | * Flexible images and media |
- | or ' | + | * Use of media queries |
- | Further Reading | + | |
- | Luke Wrote lew ski-^ Mobile First" | + | ---- |
- | | + | |
- | w WW-hike w-com / ff I on his-a op? 9 33 | + | < |
- | Video -> -t 118ft entry-asp? 1127 | + | * //A flexible grid-based layout// uses so-called |
- | " | + | * //Flexible images and media// means that images and video are sized by percentages |
- | fewest | + | * //Use of media queries// -- a CSS3 feature -- that allows you to adjust |
- | approach " | + | </ |
- | w w w. v i n e o. cour / 2 7 48 4 3 6 2 | + | |
- | + transcript | + | ===== Further Reading |
- | Understanding | + | |
+ | | ||
+ | |||
+ | ===== Understanding | ||
Used in head | Used in head | ||
<i ink net = "style sheet a half =" | <i ink net = "style sheet a half =" | ||
Line 106: | Line 107: | ||
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.1335165111.txt.gz · Last modified: 2012/04/23 07:11 by eechris