Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
- http://www.bostonglobe.com- http://worldwildlife.org/- http://nd.edu/- http://www.w3.org/- More at http://mediaqueri.es Demos
Why?
Why?What?
Why?What?How?
Why? What? How?Sample Project
Why? What? How?Sample ProjectBest Practices
Why? What? How? Sample Project Best PracticesTesting and Tools
Why?
- 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
- 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
Here and Now
Here and Now
2 years early - in 2010 Here and Now
- Websites are not like print. Why do we design them that way? Traditional Print
Lots of Web Devices
- Performance- Resolutions and Screen Sizes- Browser Features- Network Connection Speeds Differences in Mobile
Responsive Design’s main components1. Flexible Layout2. Media Queries3. Flexible Images Building Blocks
- Simplify- Only provide the features your users want Content First
- Design for Mobile First- Optimize for Speed and Performance- Add Functionality for Larger Resolutions- Load Time Affects Customer Retention Luke Wroblewski 2011 “Mobile First”
- Micro-Tasks- Downplay Navigation & Options- Align with user Context and Behavior- Don’t Assume user’s location, speed, mindset, and expectation Mobilize your Website
- 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
- 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”
- 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
- 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
Sample Project
- Mostly Fluid- Column Drop- Layout Shifter- Tiny Tweaks- Off Canvas Luke Wroblewski & Jason Weaver Responsive Patterns
- Mondrain- Basic Gallery- Featured Items- Column Flip- Feature Shuffle Joshua Johnson Responsive Patterns
- Write LESS: Do more!- CSS Pre-compiler- Variables- Functions (aka Mixins)- Operations LESS can Help
Code: Flexible Layout
Target _________ = Result Context 24____ = 1.5em 900 ____ = 93.75% 16 960 Fluid Design Formula
Media Queries
Mobile Site styles+ @media queries added______________________= Full Desktop SiteMobile First Approach
<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css"> Recognized media types all braille embossed handheldprint projection screen speech tty tv Media Types - CSS2
<link media="screen and (device-width: 600px)"rel="stylesheet" url=”600.css” />@import url(“600.css”) screen and (device-width:600px);@media screen and (device-width : 600px) { … }Media Queries - CSS3
[min-|max-]width or height[min-|max-]device-width or device-height [min-|max-]aspect-ratio [min-|max-]device-aspect-ratio orientation resolution monochrome color color-index scan grid Media Features
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
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){ … }
- 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, ObigoProgressive Enhancement
Code: Media Queries
@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
<div id="test"> <div></div></div><style type="text/css">#test div {background-image:url(test.png);width:200px;height:75px;}@media all and (max-width: 500px) { #test {display:none;}</style> Background Images
Beyond the Basics
- @embeded vs. <external- cascade vs. min-max:isolated- default mobile vs. desktop- <!--[conditional vs. <javascript Zoe Mickley GillenwaterLoading your @media...
- Augment Media Queries with Feature Detection- Media Query - Main Layout and Graphics- Feature Detection - Improve Design and Functionality Feature Detection
- Screen Size != Browser/Device Capability- May not be using Native Device Browser- Connection & Hardware Speeds vary- Don’t rely on emulatorsMore than Screen Size
- Progressive Laoding- Concatenation File Loading
- Less Framework 4- Skeleton Framework- Foundation 3- Starbucks Style Guide- 320 and Up- Mobile BoilerplateResponsive Frameworks
- Top Navigation- Footer Anchor- Select Menu- Toggle- Off Canvas Nav- Footer Only- Hide Navigation Patterns
- Xcode > Open Developer Tool > iOS Simulator- Opera Mini & UC Browser In the iTunes App Store- Nokia http:// www.developer.nokia.com- UC Browser http://www.ucweb.com/- BlackBerry https:// developer.blackberry.com- Android http:// developer.android.com/tools/help/ Emulators
- Shaodw - Mac or Windows + Chrome + iOS/Android- weinre - sudo npm -g install weinre - weinre --boundHost localhost --verboseAdobe Shadow / Weinre
Performance Tests
- 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
1–1 of 1 previous next