Responsive Websites
Upcoming SlideShare
Loading in...5

Responsive Websites



Introduction to Responsive Web Design

Introduction to Responsive Web Design
Includes a sample project built from scratch in Node.js using LESS available on Github



Total Views
Views on SlideShare
Embed Views



25 Embeds 4,303 3140 706 147 140 61 22 22 19
http://localhost 7 5 5 4 4 3 3 2 2 2 2 2 1 1 1 1 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Responsive Websites Responsive Websites Presentation Transcript

  • Responsive Websites Joe Seifi, Sept 2012
  • Survey
  • - More at Demos View slide
  • Why? View slide
  • 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
  • What?
  • @media (min-width: 600px) and (max-width: 700px) {    body{ background-color:red;}}@media (max-width:500px){    body{background-color:blue;}   } Quick Code
  • How?
  • 3 Main Options
  • Desktop iPhone 1. Do Nothing
  • yelp appsDesktop iPhone Web Native Apps2. Separate Website
  • Desktop iPhone iPad3. Responsive Website
  • 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
  • 1600x1200 1680x1050 1280x1024 1440x900 1280x800 1366x7881024x768 800x600 480x320 320x480 240x320 Breakpoints
  • <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
  • <meta name="viewport"content="width=device-width, initial-scale=1.0, user-scalable=0" /> Recognized viewport valueswidth height initial-scale minimum-scale maximum-scale user-scalable Meta Viewport
  • 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
  • Code: Responsive Images
  • <img id="demo" src="" alt="Responsive Image" data-fullsrc=""><script>responsiveEnhance(document.getElementById(demo), 400);</script> JavaScript Image Swapping
  • field-31.jpg Adaptive Server Side
  • RESS
  • <picture alt="description"> <source src="small.jpg"> <source src="medium.jpg" media="(min-width:400px)"> <source src="large.jpg" media="(min-width:800px)"></picture> Picture Tag
  • #test { background-image: url(assets/no-image-set.png); background-image: -webkit-image-set(url(assets/test.png) 1x, url(assets/test-hires.png) 2x); background-image: -moz-image-set(url(assets/test.png) 1x, url(assets/test-hires.png) 2x); background-image: -o-image-set(url(assets/test.png) 1x, url(assets/test-hires.png) 2x); background-image: -ms-image-set(url(assets/test.png) 1x, url(assets/test-hires.png) 2x); width:200px; height:75px; } Image-Set Support
  • <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
  • video { max-width: 100%; height: auto;}.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}<div class="video-container"><iframe src=""></iframe></div>.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;} Responsive Videos
  • AppendAround<div class="foo" data-set="foobar"></div><div class="bar" data-set="foobar"></div>.bar {display: block;}.foo {display: none; }@media (min-width: 30em){ .foo {display: block;} .bar {display: none;}}$( ".sample" ).appendAround(); Responsive Ads
  • <style type="text/css"> @media only screen and (max-device-width: 480px) { table[class=contenttable] { width:320px !important; } } </style><table width="640" border="0" cellpadding="0"cellspacing="0" class="contenttable"> Responsive Emails
  • SEO Implications
  • Testing and Tools
  • - Xcode > Open Developer Tool > iOS Simulator- Opera Mini & UC Browser In the iTunes App Store- Nokia http:// UC Browser BlackBerry https:// Android http:// 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- Aptus on Mac- Hardware IO Tools for Xcode or the Slowy app Testing Tools
  • Books
  • Thank You
  • References
  • Joe Seifi Responsive Images Responsive Frameworks http://foundation.zurb.comOriginal Article - Ethan http://www.getskeleton.com First - Luke designs/ worked-and-what-we-need/ Friendly support-retina-images/W3C Specs Stats personal-computer-market-share/4/ Sites key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0 smartphones-pass-pc-sales-for-the-first-time-in-history/ FNL3-72dpi.jpg RESSStyle Tiles Tools get Started - Move Your Feet components-10084972 serverside-components http://slowyapp.comDao of Web Design & Revisited http://jsfiddle.net evolution-of-responsive-web-design/? utm_source=feedburner&utm_medium=twitter&utm_campaign=Feed%3Adao-of-web-design-revisited/ +MobileInHigherEd+%28Mobile+in+Higher+Ed%29 LESS http://winless.orgArguments Against Responsive Design http://lesscss.org Navigation Patterns http://winless.orgone/ TutorialsiOS Human Interface Guidelines responsive-design/ techniques-tools-and-design-strategies/Conceptual/MobileHIG/MobileHIG.pdf solution/ designing-responsively-part-1Device testing lab at BBC Layout Patterns designing-responsively-part-1 Queries Mobile Compatibility Tables patterns/ Responsive Emails Performance MobileDataCapacityCrunch.pdf Responsive Ads performance-myths/