sizes because mobile is expensive and slow))--preferred approach===== Dedicated site ===== Examples: WWW-target. (our) sites, target-count
site tent spot two.},Example 2
WWW. mort-you m-but-gone WWW-how, you) wireless) (point out differences in approach)One site for AN One sheer set of HTML which adapts for device, Remember mobile phone love smaller screens a reduced bandwidth Making one site For All Happen Progressive enhancement
separate HTML from a Ss so that you can progressively enhance the layout for higher resolution • more capable devicesexample WWW food sense, i s
show on i Phone i Pad desktop.Ethan Mantle: Responsive Wets Design
w WW, a list apart. com / articles / responsive-web-design (+ Boon)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. rules3 Media features you can test for *
width aspect-ratio scar height device-aspen-ratio grid device-width color deuce-height cow-index orientation monochrome resolutionKX 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===== Summary ====== ===== Next =====