Mobile First Intro

Jump start into Mobile Web Design and Development by understanding the general concepts and the building process.

Transcript

1. Mobile First Intro @markodugonjic
2. CONTENT OUT MOBILE FIRST RESPONSIVE WEB VISUAL DESIGN LOGO © YOUR COPY GOES HERE
3. (collect and) understand content make a plan design basic module reuse and expand
4. GROUP CONTENT <div id="primary" /> <div id="secondary" /> <div id="navigation" />
5. HOW MANY BREAKPOINTS?
6. RESPONSIVE WEB DESIGN Design master layouts for different devices
7. HEADLINE IMAGE PARAGRAPH
8. html { font-size: 10px; } p { font-size: 1.2rem; line-height: 1.5em; margin: 0 0 1.5em } rem = root em
9. Control layout via parent element (320 x 480) /* portrait: */ padding: 1.5em 6.25% /* landscape: */ padding: 1.5em 4.166% 6.25% od 320px = 20px 4.166% od 480px = 20px
10. CONTROL IMAGES max-width: 100%; height: auto; if (parent.offsetWidth > 440) img.src = 'big-image.jpg';
11. ADD HORIZONTAL VALUES @media (min-width: 768px) and (max-width: 1023px) { #primary { width: 50%; } #secondary { width: 25%; } /* padding: 1.5em 6.25%; */ } }
13. general proportions, vertical spacing, colors, links etc. GENERAL DESIGN LAYOUT DESIGN horizontal spacing, float, position, overflow etc. 4 x {
14. <link rel="stylesheet" href="general.css" /> <link rel="stylesheet" href="smartphone.css" media="only screen and (max-device-width: 480px)" /> . . . <link rel="stylesheet" href="desktop.css" media="only screen and (min-width: 1024px)" /> <!--[if lte IE 8]> <link rel="stylesheet" href="desktop.css" /> <![endif]-->
15. http:/ /www.w3.org/TR/css3-mediaqueries/ max-width min-width max-device-width min-device-width orientation (landscape, portrait) device-pixel-ratio . . .
16. THANKS :* @markodugonjic