SlideShare une entreprise Scribd logo
1  sur  86
Télécharger pour lire hors ligne
Responsive Websites
             Joe Seifi, Sept 2012
Survey
- http://www.bostonglobe.com
- http://worldwildlife.org/
- http://nd.edu/
- http://www.w3.org/
- More at http://mediaqueri.es




                Demos
Responsive Websites
Why?
Why?
What?
Why?
What?
How?
Why?
    What?
    How?
Sample Project
Why?
    What?
    How?
Sample Project
Best Practices
Why?
     What?
     How?
 Sample Project
 Best Practices
Testing 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
apple.com              apple.com




 Desktop                 iPhone




       1. Do Nothing
yelp.com   m.yelp.com   yelp apps




Desktop    iPhone Web   Native Apps




2. Separate Website
starbucks.com   starbucks.com   starbucks.com




 Desktop           iPhone          iPad




3. Responsive Website
Responsive Design’s main components
1. Flexible Layout
2. Media Queries
3. 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
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
- 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
Responsive Websites
Media Queries
Mobile Site styles
+   @media queries added
______________________
=   Full Desktop Site


Mobile First Approach
1600x1200 1680x1050
   1280x1024 1440x900
    1280x800 1366x788
1024x768 800x600 480x320
     320x480 240x320


    Breakpoints
<link rel="stylesheet" type="text/css"
  media="print, handheld" href="foo.css">


           Recognized media types
      all braille embossed handheld
print 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 values
width 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, Obigo




Progressive 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="http://dummyimage.com/
400x300" alt="Responsive Image" data-
fullsrc="http://dummyimage.com/800x600">


<script>responsiveEnhance(document.getEleme
ntById('demo'), 400);</script>




 JavaScript Image Swapping
http://src.sencha.io/320/http://
victorianigro.files.wordpress.com/2012/01/football-
                     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 Gillenwater




Loading 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 emulators




More than Screen Size
- Progressive Laoding
- Concatenation




         File Loading
- Less Framework 4
- Skeleton Framework
- Foundation 3
- Starbucks Style Guide
- 320 and Up
- Mobile Boilerplate


Responsive 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://
    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 --verbose




Adobe 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
Books
Thank You
References
Joe Seifi                                                                      Responsive Images                                                            Responsive Frameworks
http://seifi.org                                                               http://www.sencha.io/                                                        http://lessframework.com
                                                                              http://adaptive-images.com/                                                  http://foundation.zurb.com
Original Article - Ethan                                                      http://5by5.tv/webahead/25                                                   http://www.getskeleton.com
http://www.alistapart.com/articles/responsive-web-design/                     https://github.com/filamentgroup/Responsive-Images                            http://stuffandnonsense.co.uk/projects/320andup/
                                                                              https://github.com/joshje/Responsive-Enhance                                 http://html5boilerplate.com/mobile
Mobile First - Luke                                                           https://github.com/carsonmcdonald/ServerSideResponsiveImageExample           http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-
http://www.lukew.com/ff/entry.asp?933                                          http://www.alistapart.com/articles/responsive-images-how-they-almost-        designs/
                                                                              worked-and-what-we-need/                                                     http://www.starbucks.com/static/reference/styleguide/
Future Friendly                                                               http://24ways.org/2011/adaptive-images-for-responsive-designs                http://www.amazium.co.uk
http://futurefriend.ly/thinking.html                                          http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-           http://www.starbucks.com/static/reference/styleguide/
                                                                              support-retina-images/
W3C Specs                                                                     http://cloudfour.com/examples/mediaqueries/image-test/                       Stats
http://www.w3.org/TR/CSS2/media.html                                          http://css-tricks.com/which-responsive-images-solution-should-you-use/       http://arstechnica.com/business/2012/08/from-altair-to-ipad-35-years-of-
http://www.w3.org/TR/css3-mediaqueries/                                       http://dev.opera.com/articles/view/responsive-images-problem/                personal-computer-market-share/4/
                                                                              http://filamentgroup.com/examples/responsive-images/                          http://www.akamai.com/stateoftheinternet/
Sample Sites                                                                  https://docs.google.com/spreadsheet/ccc?                                     http://www.smartonline.com/smarton-products/smarton-mobile/
http://www.bostonglobe.com                                                    key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0                       smartphones-pass-pc-sales-for-the-first-time-in-history/
http://worldwildlife.org/                                                     http://www.w3.org/community/respimg/wiki/Picture_Element_Proposal            http://www.gomez.com/wp-content/uploads/CPWR-MWD-Infographic-
http://nd.edu/                                                                https://github.com/scottjehl/picturefill                                      FNL3-72dpi.jpg
http://www.w3.org/                                                            http://fitvidsjs.com                                                          http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/b
http://mediaqueri.es                                                                                                                                       http://www.browserscope.org/
                                                                              RESS
Style Tiles                                                                   http://www.lukew.com/ff/entry.asp?1392                                        Tools
http://styletil.es                                                            http://detector.dmolsen.com/                                                 http://pxtoem.com
                                                                              http://wurfl.sourceforge.net                                                  http://labs.adobe.com/technologies/shadow/
Just get Started - Move Your Feet                                             http://www.slideshare.net/4nd3rsen/ress-responsive-design-server-side-       http://people.apache.org/~pmuellr/weinre/docs/latest/
http://swanson.github.com/blog/2012/08/27/move-your-                          components-10084972                                                          http://mobitest.akamai.com/
feet.html                                                                     http://www.slideshare.net/4nd3rsen/ress-responsive-web-design-               http://www.browserstack.com/
                                                                              serverside-components                                                        http://slowyapp.com
Dao of Web Design & Revisited                                                 http://www.dmolsen.com/mobile-in-higher-ed/2012/02/21/ress-and-the-          http://jsfiddle.net
http://www.alistapart.com/articles/dao/                                       evolution-of-responsive-web-design/?                                         http://iosfonts.com/
http://www.webdirections.org/resources/john-allsopp-the-                      utm_source=feedburner&utm_medium=twitter&utm_campaign=Feed%3A
dao-of-web-design-revisited/                                                  +MobileInHigherEd+%28Mobile+in+Higher+Ed%29                                  LESS
                                                                              http://www.lukew.com/ff/entry.asp?1392                                        http://winless.org
Arguments Against Responsive Design                                           https://github.com/tobie/ua-parser                                           http://lesscss.org
http://www.webdesignshock.com/responsive-design-problems/                                                                                                  http://incident57.com/codekit/
http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-          Navigation Patterns                                                          http://winless.org
one/                                                                          http://bradfrostweb.com/blog/web/responsive-nav-patterns/
                                                                              http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-            Tutorials
iOS Human Interface Guidelines                                                responsive-design/                                                           http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-
http://developer.apple.com/library/ios/documentation/UserExperience/          http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-   techniques-tools-and-design-strategies/
Conceptual/MobileHIG/MobileHIG.pdf                                            solution/                                                                    http://www.netmagazine.com/tutorials/build-responsive-site-week-
                                                                                                                                                           designing-responsively-part-1
Device testing lab at BBC                                                     Layout Patterns                                                              http://www.netmagazine.com/tutorials/build-responsive-site-week-
http://mobiletestingfordummies.tumblr.com/post/20056227958/testing            http://www.lukew.com/ff/entry.asp?1514                                        designing-responsively-part-1
                                                                              http://jasonweaver.name/lab/offcanvas/technical/
Media Queries                                                                 http://designshack.net/articles/css/5-really-useful-responsive-web-design-   Mobile Compatibility Tables
http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-   patterns/                                                                    http://www.quirksmode.org/m/table.html
queries/                                                                      http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
https://github.com/scottjehl/Respond                                                                                                                       Responsive Emails
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/     Performance                                                                  http://www.campaignmonitor.com/guides/mobile/design/
http://filamentgroup.com/lab/                                                  https://github.com/filamentgroup/quickconcat                                  http://www.campaignmonitor.com/guides/mobile/coding/
a_fix_for_the_ios_orientationchange_zoom_bug/                                  http://www.amdocs.com/Whitepapers/OSS/WhitePaper-
https://github.com/scottjehl/Respond                                          MobileDataCapacityCrunch.pdf                                                 Responsive Ads
                                                                              http://www.igvita.com/2012/06/14/debunking-responsive-css-                   https://github.com/filamentgroup/AppendAround
                                                                              performance-myths/

Contenu connexe

Tendances

Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Oleksii Prohonnyi
 
Front end development session1
Front end development session1Front end development session1
Front end development session1marwa Ayad Mohamed
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web DevelopmentYash Sati
 
Web Designing Presentation
Web Designing PresentationWeb Designing Presentation
Web Designing PresentationRahulSuri30
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web DevelopmentRobert Nyman
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLAnn Alcid
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentRandy Connolly
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to BootstrapRon Reiter
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to BootstrapSeble Nigussie
 
Introduction to MERN Stack
Introduction to MERN StackIntroduction to MERN Stack
Introduction to MERN StackSurya937648
 
ASP.NET Web API
ASP.NET Web APIASP.NET Web API
ASP.NET Web APIhabib_786
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first courseVlad Posea
 

Tendances (20)

web development
web developmentweb development
web development
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
Front end development session1
Front end development session1Front end development session1
Front end development session1
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web Development
 
Webservices
WebservicesWebservices
Webservices
 
Web Designing Presentation
Web Designing PresentationWeb Designing Presentation
Web Designing Presentation
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Html coding
Html codingHtml coding
Html coding
 
Html
HtmlHtml
Html
 
Php Presentation
Php PresentationPhp Presentation
Php Presentation
 
Expressjs
ExpressjsExpressjs
Expressjs
 
Introduction to MERN Stack
Introduction to MERN StackIntroduction to MERN Stack
Introduction to MERN Stack
 
ASP.NET Web API
ASP.NET Web APIASP.NET Web API
ASP.NET Web API
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 

En vedette

CSS in React
CSS in ReactCSS in React
CSS in ReactJoe Seifi
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyJoe Seifi
 
Reactjs - the good, the bad and the ugly
Reactjs - the good, the bad and the uglyReactjs - the good, the bad and the ugly
Reactjs - the good, the bad and the uglyKrasimir Tsonev
 
Gazteluberri Septiembre 2013
Gazteluberri Septiembre 2013Gazteluberri Septiembre 2013
Gazteluberri Septiembre 2013Petronor
 
Programa Máster en Comunicación y Marketing Político
Programa Máster en Comunicación y Marketing PolíticoPrograma Máster en Comunicación y Marketing Político
Programa Máster en Comunicación y Marketing PolíticoUAB-MMP
 
3. realizar formato valorar contexto grupo 25 la sabrosura
3. realizar formato valorar contexto grupo 25 la sabrosura3. realizar formato valorar contexto grupo 25 la sabrosura
3. realizar formato valorar contexto grupo 25 la sabrosuraMaria Diaz
 
sistemas materiales
sistemas materialessistemas materiales
sistemas materialesegonoje921
 
Alteración del funcionamiento familiar en el trastorno bipolar
Alteración del funcionamiento familiar en el trastorno bipolarAlteración del funcionamiento familiar en el trastorno bipolar
Alteración del funcionamiento familiar en el trastorno bipolarvitriolum
 
Asamblea en la carpinteria EMJM
Asamblea en la carpinteria EMJMAsamblea en la carpinteria EMJM
Asamblea en la carpinteria EMJMtuchocvx
 
"El origen de la crítica de arte y los salones"
 "El origen de la crítica de arte y los salones"  "El origen de la crítica de arte y los salones"
"El origen de la crítica de arte y los salones" Ruth Smith
 
4Sist. segundo mensajero adenilato ciclasa-ampc
4Sist. segundo mensajero adenilato ciclasa-ampc4Sist. segundo mensajero adenilato ciclasa-ampc
4Sist. segundo mensajero adenilato ciclasa-ampcKathy Denisse
 

En vedette (20)

CSS in React
CSS in ReactCSS in React
CSS in React
 
LESS
LESSLESS
LESS
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The Ugly
 
Reactjs - the good, the bad and the ugly
Reactjs - the good, the bad and the uglyReactjs - the good, the bad and the ugly
Reactjs - the good, the bad and the ugly
 
Gazteluberri Septiembre 2013
Gazteluberri Septiembre 2013Gazteluberri Septiembre 2013
Gazteluberri Septiembre 2013
 
Programa Máster en Comunicación y Marketing Político
Programa Máster en Comunicación y Marketing PolíticoPrograma Máster en Comunicación y Marketing Político
Programa Máster en Comunicación y Marketing Político
 
Crisis educativa
Crisis educativaCrisis educativa
Crisis educativa
 
3. realizar formato valorar contexto grupo 25 la sabrosura
3. realizar formato valorar contexto grupo 25 la sabrosura3. realizar formato valorar contexto grupo 25 la sabrosura
3. realizar formato valorar contexto grupo 25 la sabrosura
 
Informative dossier
Informative dossierInformative dossier
Informative dossier
 
Robotm 131
Robotm 131Robotm 131
Robotm 131
 
Fotos Naturaleza Grrodriguez
Fotos Naturaleza GrrodriguezFotos Naturaleza Grrodriguez
Fotos Naturaleza Grrodriguez
 
sistemas materiales
sistemas materialessistemas materiales
sistemas materiales
 
Premios Max 2013
Premios Max 2013Premios Max 2013
Premios Max 2013
 
ILEA Admissions Process
ILEA Admissions ProcessILEA Admissions Process
ILEA Admissions Process
 
Abaka 18 03-2013
Abaka 18 03-2013Abaka 18 03-2013
Abaka 18 03-2013
 
Primeros pasos con Mailchimp
Primeros pasos con MailchimpPrimeros pasos con Mailchimp
Primeros pasos con Mailchimp
 
Alteración del funcionamiento familiar en el trastorno bipolar
Alteración del funcionamiento familiar en el trastorno bipolarAlteración del funcionamiento familiar en el trastorno bipolar
Alteración del funcionamiento familiar en el trastorno bipolar
 
Asamblea en la carpinteria EMJM
Asamblea en la carpinteria EMJMAsamblea en la carpinteria EMJM
Asamblea en la carpinteria EMJM
 
"El origen de la crítica de arte y los salones"
 "El origen de la crítica de arte y los salones"  "El origen de la crítica de arte y los salones"
"El origen de la crítica de arte y los salones"
 
4Sist. segundo mensajero adenilato ciclasa-ampc
4Sist. segundo mensajero adenilato ciclasa-ampc4Sist. segundo mensajero adenilato ciclasa-ampc
4Sist. segundo mensajero adenilato ciclasa-ampc
 

Similaire à Responsive Websites

Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Webmikeleeme
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopbetabeers
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5Ron Reiter
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. ToolboxWojtek Zając
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Wahyu Putra
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Patrick Lauke
 
Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011Patrick Lauke
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in BriefEPAM
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Suzanne Dergacheva
 
Building Responsive Websites with Drupal
Building Responsive Websites with DrupalBuilding Responsive Websites with Drupal
Building Responsive Websites with DrupalSuzanne Dergacheva
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...Patrick Lauke
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio
 

Similaire à Responsive Websites (20)

Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
Responsive design
Responsive designResponsive design
Responsive design
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
 
Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in Brief
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
 
Building Responsive Websites with Drupal
Building Responsive Websites with DrupalBuilding Responsive Websites with Drupal
Building Responsive Websites with Drupal
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
 

Dernier

The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 

Dernier (20)

The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 

Responsive Websites

  • 1. Responsive Websites Joe Seifi, Sept 2012
  • 3. - http://www.bostonglobe.com - http://worldwildlife.org/ - http://nd.edu/ - http://www.w3.org/ - More at http://mediaqueri.es Demos
  • 8. Why? What? How? Sample Project
  • 9. Why? What? How? Sample Project Best Practices
  • 10. Why? What? How? Sample Project Best Practices Testing and Tools
  • 11. Why?
  • 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
  • 16. 2 years early - in 2010 Here and Now
  • 17. - Websites are not like print. Why do we design them that way? Traditional Print
  • 18. Lots of Web Devices
  • 19. - Performance - Resolutions and Screen Sizes - Browser Features - Network Connection Speeds Differences in Mobile
  • 20. What?
  • 21. @media (min-width: 600px) and (max-width: 700px) {     body{ background-color:red;} } @media (max-width:500px){     body{background-color:blue;}    } Quick Code
  • 22. How?
  • 24. apple.com apple.com Desktop iPhone 1. Do Nothing
  • 25. yelp.com m.yelp.com yelp apps Desktop iPhone Web Native Apps 2. Separate Website
  • 26. starbucks.com starbucks.com starbucks.com Desktop iPhone iPad 3. Responsive Website
  • 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
  • 42. - Mostly Fluid - Column Drop - Layout Shifter - Tiny Tweaks - Off Canvas Luke Wroblewski & Jason Weaver Responsive Patterns
  • 43. - Mondrain - Basic Gallery - Featured Items - Column Flip - Feature Shuffle Joshua Johnson Responsive Patterns
  • 44. - Write LESS: Do more! - CSS Pre-compiler - Variables - Functions (aka Mixins) - Operations LESS can Help
  • 46. Target _________ = Result Context 24 ____ = 1.5em 900 ____ = 93.75% 16 960 Fluid Design Formula
  • 49. Mobile Site styles + @media queries added ______________________ = Full Desktop Site Mobile First Approach
  • 50. 1600x1200 1680x1050 1280x1024 1440x900 1280x800 1366x788 1024x768 800x600 480x320 320x480 240x320 Breakpoints
  • 51. <link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css"> Recognized media types all braille embossed handheld print projection screen speech tty tv Media Types - CSS2
  • 52. <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
  • 53. [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
  • 54. <meta name="viewport" content="width=device-width, initial- scale=1.0, user-scalable=0" /> Recognized viewport values width height initial-scale minimum-scale maximum-scale user-scalable Meta Viewport
  • 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
  • 61. <img id="demo" src="http://dummyimage.com/ 400x300" alt="Responsive Image" data- fullsrc="http://dummyimage.com/800x600"> <script>responsiveEnhance(document.getEleme ntById('demo'), 400);</script> JavaScript Image Swapping
  • 63. RESS
  • 64. <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
  • 65. #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
  • 66. <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
  • 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
  • 71. - Progressive Laoding - Concatenation File Loading
  • 72. - Less Framework 4 - Skeleton Framework - Foundation 3 - Starbucks Style Guide - 320 and Up - Mobile Boilerplate Responsive Frameworks
  • 73. - Top Navigation - Footer Anchor - Select Menu - Toggle - Off Canvas Nav - Footer Only - Hide Navigation Patterns
  • 74. 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
  • 75. 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
  • 76. <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
  • 79. - 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
  • 80. - Shaodw - Mac or Windows + Chrome + iOS/Android - weinre - sudo npm -g install weinre - weinre --boundHost localhost --verbose Adobe Shadow / Weinre
  • 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
  • 83. Books
  • 86. Joe Seifi Responsive Images Responsive Frameworks http://seifi.org http://www.sencha.io/ http://lessframework.com http://adaptive-images.com/ http://foundation.zurb.com Original Article - Ethan http://5by5.tv/webahead/25 http://www.getskeleton.com http://www.alistapart.com/articles/responsive-web-design/ https://github.com/filamentgroup/Responsive-Images http://stuffandnonsense.co.uk/projects/320andup/ https://github.com/joshje/Responsive-Enhance http://html5boilerplate.com/mobile Mobile First - Luke https://github.com/carsonmcdonald/ServerSideResponsiveImageExample http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web- http://www.lukew.com/ff/entry.asp?933 http://www.alistapart.com/articles/responsive-images-how-they-almost- designs/ worked-and-what-we-need/ http://www.starbucks.com/static/reference/styleguide/ Future Friendly http://24ways.org/2011/adaptive-images-for-responsive-designs http://www.amazium.co.uk http://futurefriend.ly/thinking.html http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to- http://www.starbucks.com/static/reference/styleguide/ support-retina-images/ W3C Specs http://cloudfour.com/examples/mediaqueries/image-test/ Stats http://www.w3.org/TR/CSS2/media.html http://css-tricks.com/which-responsive-images-solution-should-you-use/ http://arstechnica.com/business/2012/08/from-altair-to-ipad-35-years-of- http://www.w3.org/TR/css3-mediaqueries/ http://dev.opera.com/articles/view/responsive-images-problem/ personal-computer-market-share/4/ http://filamentgroup.com/examples/responsive-images/ http://www.akamai.com/stateoftheinternet/ Sample Sites https://docs.google.com/spreadsheet/ccc? http://www.smartonline.com/smarton-products/smarton-mobile/ http://www.bostonglobe.com key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0 smartphones-pass-pc-sales-for-the-first-time-in-history/ http://worldwildlife.org/ http://www.w3.org/community/respimg/wiki/Picture_Element_Proposal http://www.gomez.com/wp-content/uploads/CPWR-MWD-Infographic- http://nd.edu/ https://github.com/scottjehl/picturefill FNL3-72dpi.jpg http://www.w3.org/ http://fitvidsjs.com http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/b http://mediaqueri.es http://www.browserscope.org/ RESS Style Tiles http://www.lukew.com/ff/entry.asp?1392 Tools http://styletil.es http://detector.dmolsen.com/ http://pxtoem.com http://wurfl.sourceforge.net http://labs.adobe.com/technologies/shadow/ Just get Started - Move Your Feet http://www.slideshare.net/4nd3rsen/ress-responsive-design-server-side- http://people.apache.org/~pmuellr/weinre/docs/latest/ http://swanson.github.com/blog/2012/08/27/move-your- components-10084972 http://mobitest.akamai.com/ feet.html http://www.slideshare.net/4nd3rsen/ress-responsive-web-design- http://www.browserstack.com/ serverside-components http://slowyapp.com Dao of Web Design & Revisited http://www.dmolsen.com/mobile-in-higher-ed/2012/02/21/ress-and-the- http://jsfiddle.net http://www.alistapart.com/articles/dao/ evolution-of-responsive-web-design/? http://iosfonts.com/ http://www.webdirections.org/resources/john-allsopp-the- utm_source=feedburner&utm_medium=twitter&utm_campaign=Feed%3A dao-of-web-design-revisited/ +MobileInHigherEd+%28Mobile+in+Higher+Ed%29 LESS http://www.lukew.com/ff/entry.asp?1392 http://winless.org Arguments Against Responsive Design https://github.com/tobie/ua-parser http://lesscss.org http://www.webdesignshock.com/responsive-design-problems/ http://incident57.com/codekit/ http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide- Navigation Patterns http://winless.org one/ http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://bradfrostweb.com/blog/web/complex-navigation-patterns-for- Tutorials iOS Human Interface Guidelines responsive-design/ http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design- http://developer.apple.com/library/ios/documentation/UserExperience/ http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive- techniques-tools-and-design-strategies/ Conceptual/MobileHIG/MobileHIG.pdf solution/ http://www.netmagazine.com/tutorials/build-responsive-site-week- designing-responsively-part-1 Device testing lab at BBC Layout Patterns http://www.netmagazine.com/tutorials/build-responsive-site-week- http://mobiletestingfordummies.tumblr.com/post/20056227958/testing http://www.lukew.com/ff/entry.asp?1514 designing-responsively-part-1 http://jasonweaver.name/lab/offcanvas/technical/ Media Queries http://designshack.net/articles/css/5-really-useful-responsive-web-design- Mobile Compatibility Tables http://zomigi.com/blog/essential-considerations-for-crafting-quality-media- patterns/ http://www.quirksmode.org/m/table.html queries/ http://www.thismanslife.co.uk/projects/lab/responsivewireframes/ https://github.com/scottjehl/Respond Responsive Emails http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ Performance http://www.campaignmonitor.com/guides/mobile/design/ http://filamentgroup.com/lab/ https://github.com/filamentgroup/quickconcat http://www.campaignmonitor.com/guides/mobile/coding/ a_fix_for_the_ios_orientationchange_zoom_bug/ http://www.amdocs.com/Whitepapers/OSS/WhitePaper- https://github.com/scottjehl/Respond MobileDataCapacityCrunch.pdf Responsive Ads http://www.igvita.com/2012/06/14/debunking-responsive-css- https://github.com/filamentgroup/AppendAround performance-myths/