Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile First Intro

Mobile First Intro

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

10a4285792e47c507ab4782b6716c0d1?s=128

Marko Dugonjić

April 13, 2012
Tweet

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%; */ } }
  12. None
  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