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
Slideshare-icon Views on SlideShare
Embed Views



25 Embeds 4,286 3128 702 147 140 61 22 21 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.


12 of 2

  • 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
    • 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
    • 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/