Posted on by csharpner

CodeStock 2012: Adaptive and Responsive Web Design

imageBelow are my notes taken during CodeStock 2012’s “Adaptive and Responsive Web Design” hosted by:

Steve Bodnar ( @SteveBodnar )
www.geeksandgurus.com

 

 

Click here to follow me on Google+.

Follow me on Twitter @CSharpner.

In this session we learned how HTML5 lets us design our web apps to automatically adjust to all sorts of different sized browsers.  See links in notes below for sites with examples.  Resize your browser to large and small and watch the sites automatically adapt.

Raw notes, as I typed them in class below:

  • How to make your sites work on any HTML/Javascript device regardless of browser or device.
  • RELEVANT CONCEPTS
    • App vs. site
    • Graceful degradation
    • Progressive enhancement
    • Others…
  • GRACEFUL DEGRADATION
    • Downgrade gracefully when features aren’t available in browser. User should not notice.
    • Design on most advanced browser then adapt to lower browsers
  • PROGRESSIVE ENHANCEMENT
    • Focused on content, not browsers
    • Builds for least capable devices
  • STRAGEGIES
    • Start with lowest
    • Design for semantics and structure
    • Add features appropriate for baseline devices
    • Add features appropriate for accessibility
    • Add layout markup and style sheets for structural layout
    • Add baseline presentational style sheets using link
    • Add behavior (scripts, css hover, etc.)
    • Add workarounds/hacks for recalcitrant browsers
    • Define styles for modern graphical browsers.
  • ADAPTIVE WEB DESIGN
    • Not clear divide between this and response web design. Responsive is more specific
    • Creating interfaces that adapt
        • (use firefox user agent switcher to render as other devices)
        • Using progressive enhancement
        • Examples of adapting
          • If device can access location, enable location-based behavior
          • If device supports touch, enable touch-friendly ui
          • If device supports html5, use it
        • Mobile First
  • RESPONSIVE WEB DESIGN
    • Fluid Grids
    • Fluid Images and Media
    • Media Queries
    • (site takes shape of browser).
    • MediaQueries.es for examples of adaptive web design.
    • ASP.NET MVC 4 provides adaptive in default project.
    • @media keyword in CSS.
    • Resolution independence
  • MOBILE FIRST
    • Embrace constraints, don’t fight them.
    • Ony eyeball, one thumb
      • Forces you to focus
        • What content must be delivered?
        • Is chrome necessary?
        • Rich context aware applications.
  • ACCESSIBILITY
    • Design for all visitors
      • Screen readers
      • Color blindness
      • Hearing impaired
      • Navigation, images, forms
    • Not just about design for people with disabilities
  • BROWSER GRADES
    • C-Grade
      • Based level of support
      • Identified, incapable, antiquated and rare
    • A-Grade
      • Highest level of support
      • Identified, capable, modern and common
    • X-Grade
      • Unknown, fringe or rare browsers as well as browsers on which development has ceased.
  • TOOLS
    • CSS
      • Embrace CSS
        • CSS Zen Garden csszengarden.com
          • Links on right switch CSS to completely change the site with zero HTML change.
        • CSS1k.com
          • Examples of what 1KB of CSS can do to how a website looks.
  • HTML5
    • Clark Sell and Brandon Satrom
    • Microsofties
    • At CodeMash
    • —
    • HTML
    • CSS3
    • JavaScript
    • Semantic HTML
      • <div>
      • <div id = “header”>
      • <header>
      • <article>
      • <time>
    • Data attributes
      • Any attribute that starts with “data-” will be treated as a storage area for private data
      • <data-role>
      • <data-role = “header”>
      • <data-role=”footer”>
    • Viewport (browsers tell you what resolution they can handle – phones will lie)
      • Visual Viewport
        • The part of the page that’s currently on-screen
      • Layout Viewport
        • Doesn’t change in size or shape
        • Varies per browser
  • MEDIA QUERIES (w3 site has it all)
    • Width
    • Height
    • Device-width
    • Devbice-height
    • Orientation
    • Aspect-ratio
    • Device-aspect-ratio
    • Color
    • Color-index
    • Others.
  • FRAMEWORKS
    • MVC 4
    • Twitter bootstrap twitter.github.com/bootstrap
  • EVERYONE AGREES
  • Emulators
    • Shrinking your browser isn’t a perfect example.
    • Use real emulators if you have them.
    • Android-emulator.org
      • Has emulators for multiple mobiles including Ios
  • RESOURCES
    • Alistapart.com
    • Css3pie.com – to get IE 6-9 capable of rendering several of the most useful css3 decoration features.

Leave a Reply