SlideShare a Scribd company logo
1 of 86
Download to read offline
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
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
- 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 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/

More Related Content

What's hot

AWS Security Best Practices in a Zero Trust Security Model - DEM06 - Atlanta ...
AWS Security Best Practices in a Zero Trust Security Model - DEM06 - Atlanta ...AWS Security Best Practices in a Zero Trust Security Model - DEM06 - Atlanta ...
AWS Security Best Practices in a Zero Trust Security Model - DEM06 - Atlanta ...Amazon Web Services
 
Using AWS WAF and Lambda for Automatic Protection
Using AWS WAF and Lambda for Automatic ProtectionUsing AWS WAF and Lambda for Automatic Protection
Using AWS WAF and Lambda for Automatic ProtectionAmazon Web Services
 
I Know Your P4$$w0rd (And If I Don't, I Will Guess It...)
I Know Your P4$$w0rd (And If I Don't, I Will Guess It...)I Know Your P4$$w0rd (And If I Don't, I Will Guess It...)
I Know Your P4$$w0rd (And If I Don't, I Will Guess It...)Jaime Sánchez
 
20+ Ways To Bypass Your Macos Privacy Mechanisms
20+ Ways To Bypass Your Macos Privacy Mechanisms20+ Ways To Bypass Your Macos Privacy Mechanisms
20+ Ways To Bypass Your Macos Privacy MechanismsSecuRing
 
Introduction to Web Technology Stacks
Introduction to Web Technology StacksIntroduction to Web Technology Stacks
Introduction to Web Technology StacksPrakarsh -
 
Optimizing Network Performance for Amazon EC2 Instances (CMP308-R1) - AWS re:...
Optimizing Network Performance for Amazon EC2 Instances (CMP308-R1) - AWS re:...Optimizing Network Performance for Amazon EC2 Instances (CMP308-R1) - AWS re:...
Optimizing Network Performance for Amazon EC2 Instances (CMP308-R1) - AWS re:...Amazon Web Services
 
Amazon Virtual Private Cloud (VPC): Networking Fundamentals and Connectivity ...
Amazon Virtual Private Cloud (VPC): Networking Fundamentals and Connectivity ...Amazon Virtual Private Cloud (VPC): Networking Fundamentals and Connectivity ...
Amazon Virtual Private Cloud (VPC): Networking Fundamentals and Connectivity ...Amazon Web Services
 
[REPEAT 1] Elastic Load Balancing: Deep Dive and Best Practices (NET404-R1) -...
[REPEAT 1] Elastic Load Balancing: Deep Dive and Best Practices (NET404-R1) -...[REPEAT 1] Elastic Load Balancing: Deep Dive and Best Practices (NET404-R1) -...
[REPEAT 1] Elastic Load Balancing: Deep Dive and Best Practices (NET404-R1) -...Amazon Web Services
 
Practical Differential Fault Attack on AES
Practical Differential Fault Attack on AESPractical Differential Fault Attack on AES
Practical Differential Fault Attack on AESRiscure
 
Migrating Your Databases to AWS - Deep Dive on Amazon RDS and AWS Database Mi...
Migrating Your Databases to AWS - Deep Dive on Amazon RDS and AWS Database Mi...Migrating Your Databases to AWS - Deep Dive on Amazon RDS and AWS Database Mi...
Migrating Your Databases to AWS - Deep Dive on Amazon RDS and AWS Database Mi...Amazon Web Services
 
AWS Security Best Practices in a Zero Trust Security Model - DEM08 - Toronto ...
AWS Security Best Practices in a Zero Trust Security Model - DEM08 - Toronto ...AWS Security Best Practices in a Zero Trust Security Model - DEM08 - Toronto ...
AWS Security Best Practices in a Zero Trust Security Model - DEM08 - Toronto ...Amazon Web Services
 
OpenID Connect: An Overview
OpenID Connect: An OverviewOpenID Connect: An Overview
OpenID Connect: An OverviewPat Patterson
 
Becoming a hyperledger aries developer learn things.online
Becoming a hyperledger aries developer   learn things.onlineBecoming a hyperledger aries developer   learn things.online
Becoming a hyperledger aries developer learn things.onlinedjaber3
 
(STG401) Amazon S3 Deep Dive & Best Practices
(STG401) Amazon S3 Deep Dive & Best Practices(STG401) Amazon S3 Deep Dive & Best Practices
(STG401) Amazon S3 Deep Dive & Best PracticesAmazon Web Services
 
Getting Started with AWS Database Migration Service
Getting Started with AWS Database Migration ServiceGetting Started with AWS Database Migration Service
Getting Started with AWS Database Migration ServiceAmazon Web Services
 
HTTP request and response
HTTP request and responseHTTP request and response
HTTP request and responseSahil Agarwal
 

What's hot (20)

Web technologies: HTTP
Web technologies: HTTPWeb technologies: HTTP
Web technologies: HTTP
 
AWS Security Best Practices in a Zero Trust Security Model - DEM06 - Atlanta ...
AWS Security Best Practices in a Zero Trust Security Model - DEM06 - Atlanta ...AWS Security Best Practices in a Zero Trust Security Model - DEM06 - Atlanta ...
AWS Security Best Practices in a Zero Trust Security Model - DEM06 - Atlanta ...
 
Using AWS WAF and Lambda for Automatic Protection
Using AWS WAF and Lambda for Automatic ProtectionUsing AWS WAF and Lambda for Automatic Protection
Using AWS WAF and Lambda for Automatic Protection
 
Introduction to Docker on AWS
Introduction to Docker on AWSIntroduction to Docker on AWS
Introduction to Docker on AWS
 
I Know Your P4$$w0rd (And If I Don't, I Will Guess It...)
I Know Your P4$$w0rd (And If I Don't, I Will Guess It...)I Know Your P4$$w0rd (And If I Don't, I Will Guess It...)
I Know Your P4$$w0rd (And If I Don't, I Will Guess It...)
 
20+ Ways To Bypass Your Macos Privacy Mechanisms
20+ Ways To Bypass Your Macos Privacy Mechanisms20+ Ways To Bypass Your Macos Privacy Mechanisms
20+ Ways To Bypass Your Macos Privacy Mechanisms
 
Introduction to Web Technology Stacks
Introduction to Web Technology StacksIntroduction to Web Technology Stacks
Introduction to Web Technology Stacks
 
Optimizing Network Performance for Amazon EC2 Instances (CMP308-R1) - AWS re:...
Optimizing Network Performance for Amazon EC2 Instances (CMP308-R1) - AWS re:...Optimizing Network Performance for Amazon EC2 Instances (CMP308-R1) - AWS re:...
Optimizing Network Performance for Amazon EC2 Instances (CMP308-R1) - AWS re:...
 
Amazon Virtual Private Cloud (VPC): Networking Fundamentals and Connectivity ...
Amazon Virtual Private Cloud (VPC): Networking Fundamentals and Connectivity ...Amazon Virtual Private Cloud (VPC): Networking Fundamentals and Connectivity ...
Amazon Virtual Private Cloud (VPC): Networking Fundamentals and Connectivity ...
 
[REPEAT 1] Elastic Load Balancing: Deep Dive and Best Practices (NET404-R1) -...
[REPEAT 1] Elastic Load Balancing: Deep Dive and Best Practices (NET404-R1) -...[REPEAT 1] Elastic Load Balancing: Deep Dive and Best Practices (NET404-R1) -...
[REPEAT 1] Elastic Load Balancing: Deep Dive and Best Practices (NET404-R1) -...
 
AWS Route53
AWS Route53AWS Route53
AWS Route53
 
Practical Differential Fault Attack on AES
Practical Differential Fault Attack on AESPractical Differential Fault Attack on AES
Practical Differential Fault Attack on AES
 
CI/CD on AWS
CI/CD on AWSCI/CD on AWS
CI/CD on AWS
 
Migrating Your Databases to AWS - Deep Dive on Amazon RDS and AWS Database Mi...
Migrating Your Databases to AWS - Deep Dive on Amazon RDS and AWS Database Mi...Migrating Your Databases to AWS - Deep Dive on Amazon RDS and AWS Database Mi...
Migrating Your Databases to AWS - Deep Dive on Amazon RDS and AWS Database Mi...
 
AWS Security Best Practices in a Zero Trust Security Model - DEM08 - Toronto ...
AWS Security Best Practices in a Zero Trust Security Model - DEM08 - Toronto ...AWS Security Best Practices in a Zero Trust Security Model - DEM08 - Toronto ...
AWS Security Best Practices in a Zero Trust Security Model - DEM08 - Toronto ...
 
OpenID Connect: An Overview
OpenID Connect: An OverviewOpenID Connect: An Overview
OpenID Connect: An Overview
 
Becoming a hyperledger aries developer learn things.online
Becoming a hyperledger aries developer   learn things.onlineBecoming a hyperledger aries developer   learn things.online
Becoming a hyperledger aries developer learn things.online
 
(STG401) Amazon S3 Deep Dive & Best Practices
(STG401) Amazon S3 Deep Dive & Best Practices(STG401) Amazon S3 Deep Dive & Best Practices
(STG401) Amazon S3 Deep Dive & Best Practices
 
Getting Started with AWS Database Migration Service
Getting Started with AWS Database Migration ServiceGetting Started with AWS Database Migration Service
Getting Started with AWS Database Migration Service
 
HTTP request and response
HTTP request and responseHTTP request and response
HTTP request and response
 

Viewers also liked

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
 

Viewers also liked (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
 

Similar to 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
 

Similar to 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
 

Recently uploaded

Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 

Recently uploaded (20)

Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 

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
  • 4.
  • 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
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 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
  • 47.
  • 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/