Adaptive design
Options for mobile sites
- Mobile Site: Separate Mobile Site e.g. mobile.site.com
- Adaptive Content: Apply Adaptive design techniques on existing content
- 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 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.
- hCard for contact card
- hCalendar for calendar event
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 */}