Adaptive design

Options for mobile sites


  1. Mobile Site: Separate Mobile Site e.g. mobile.site.com 
  2. Adaptive Content: Apply Adaptive design techniques on existing content
  3. Redesign Design: with Responsive Web Design (RWD) techniques

Adaptive design is:


Controlled adaption, optimal user experience, and progressive enhancement techniques - for a specific context


  • Device
  • Screen Size
  • Resolution

coined by author Aaron Gustafson in Adaptive Web Design




Think of user 1st, 

Then browser 2nd.

progressivE 

Enhancement


Adaptive Web Design

adaptive design uses:


Adaptive Content

Break Points

Media Queries

Understand: 


Who Is Your User?

How Will They Use The Site?

Context (i.e. what device?)

Content (how will it adapt?)

example


  • Who Is Your User? 
    • Restaurant diner
  • How Will They Use The Site?
    • Find & learn about restaurant
  • Context (i.e. what device?)
    • From laptop, phone, tablet
  • Content (how will it adapt?)
    • "Call" from number & "Find" from map

Adaptive HTML


Microformats are open data formats, easily shared.



HTML Attributes

  • :tel to convert link to make phone call 
<!-- Cross-platform compatible (Android + iPhone) -->
<a href="tel://1-555-555-5555">+1 (555) 555-5555</a>

Adaptive CSS:

break points


  • Max screen height & widths
  • Does layout look odd? Breakpoint.
  • REF: ScreenSiz.es

Adaptive CSS:

media queries


Always existed in CSS

<link rel="stylesheet" media="screen" href='desktop.css' />


<link rel="stylesheet" media="print" href='paper.css' />


<link rel="stylesheet" media="handheld" href='mobile.css' />




MEDIA QUERIES


Extract media types 
& place at bottom of stylesheet

/* "screen" is Media Type *//* "max-device-width: 480px" is Query *//* If screen is 480px or smaller, apply these CSS Rules */
@media only screen and (max-device-width: 480px) {  /* CSS RULES */ }