Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
12. - 7.0 Billion people in the world
- 3.5 Billion own a mobile devices (1/2)
- 1.3 Billion mobile internet users
- 21% had 3G in 2010
Population: 7+ Billion
13. - 71% expect websites to load quickly on their phone
- 74% leave a website after waiting 5 seconds
- 77% of top websites take at least 5 seconds to load
- 43% unlikely to return to a slow website
- 72.8% of stats are made up on the spot
- 95% of people have already heard that one
More Stats
21. @media (min-width: 600px) and (max-width: 700px)Â {
   body{ background-color:red;}
}
@media (max-width:500px){
   body{background-color:blue;}  Â
}
Quick Code
27. Responsive Designâs main components
1. Flexible Layout
2. Media Queries
3. Flexible Images
Building Blocks
28. - Simplify
- Only provide the features your users want
Content First
29. - Design for Mobile First
- Optimize for Speed and Performance
- Add Functionality for Larger
Resolutions
- Load Time Affects Customer
Retention
Luke Wroblewski 2011
âMobile Firstâ
30. - Micro-Tasks
- Downplay Navigation & Options
- Align with user Context and Behavior
- Donât Assume userâs location, speed,
mindset, and expectation
Mobilize your Website
31. - Pixel Perfect Wireframes & Mockups donât
make sense anymore
- Style Tiles
- Page Description Diagrams
- Work with âContentâ Pages first
- Prioritize Design Elements
Mobilize your Process
32. - Principles of being future friendly
- Acknowledge and embrace
unpredictability.
- Think and behave in a future-friendly way.
- Help others do the same.
Be âFuture-Friendlyâ
33. - BBC Testing Lab Sample
- iOS - iPhone
- Symbian S60 - N95
- Android 2.1 - HTC desire
- Blackberry OS 5 - Bold 9700
- Blackberry OS 6 - Bold 9700
- Windows Phone 7.5 - Omnia 7
- Symbian S60
- Kindle Fire - Android 2.2 Fork
- iPad
- Kindle Fire
Grow a Device Lab
34. - Wanna know the secret to improving your
running? Move your feet.
- Paralysis by Analysis
- Intimidation of Complexities
- Just Start somewhere
- Hone your skills along the way
Move your Feet
55. Combine it all together...
<meta name="viewport" content="initial-scale=1.0,
width=device-width">
<link media="all" href=âbase.cssâ rel="stylesheet" />
<link media="only screen and (min-device-width:
320px)" href=â320.cssâ rel="stylesheet" />
<script> or <!--[if lt IE 9]> ... add shim for IE 8 or below
56. import only 1 file
<meta name="viewport" content="initial-scale=1.0,
width=device-width">
<link rel="stylesheet" media="all" href=âbase.cssâ/>
/* inside base.css ---------- */
// base styles first... then breakpoints inline
@media only screen and (min-device-width : 320px){ ⊠}
@media only screen and (min-device-width : 480px){ ⊠}
@media only screen and (min-device-width :768px){ ⊠}
@media only screen and (min-device-width : 1020px){ ⊠}
57. - Start with Base css... then cascade upwards
- âEnhanceâ the site only for those browsers
that âRespondâ to media query viewports
and have âFeaturesâ you can detect
- Add Polyfill Solution for IE8 and below
- IE8,7,6,5,4, IE Mobile, Blackberry old, Net Front, UCWeb, Obigo
Progressive Enhancement
59. @media only screen and (-webkit-min-device-pixel-
ratio : 1.5), only screen and (min-device-pixel-ratio :
1.5) {}
/* sniff iPhone 4 and high pixel ratio devices */
Vendor Specific Queries
68. - @embeded vs. <external
- cascade vs. min-max:isolated
- default mobile vs. desktop
- <!--[conditional vs. <javascript
Zoe Mickley Gillenwater
Loading your @media...
69. - Augment Media Queries with Feature
Detection
- Media Query
- Main Layout and Graphics
- Feature Detection
- Improve Design and Functionality
Feature Detection
70. - Screen Size != Browser/Device Capability
- May not be using Native Device Browser
- Connection & Hardware Speeds vary
- Donât rely on emulators
More than Screen Size
82. - Chrome - Web developer toolbar
- Safari - User Agent switching
- ResponsivePX.com
- mobilephoneemulator.com pxtoem.com
- Aptus on Mac
- Hardware IO Tools for Xcode or the Slowy app
Testing Tools