SlideShare a Scribd company logo
1 of 157
Download to read offline
Responsive Design:
Clever Tips and Tricks



                           Vitaly Friedman
                28/11/2012 @ FOWD, Prague
Vitaly Friedman, editor-in-chief
and co-founder of SmashingMag
Responsive Web Design: Clever Tips and Techniques
This talk is about RWD techniques.
This talk is about RWD techniques.
And simple, clever tricks and ideas.
This talk is about RWD techniques.
And simple, clever tricks and ideas.
And (a bit) about our 2012 redesign.
Responsive Web
Design (Extended)
When Sydney J. Harris said that, he meant
           human society and our understanding of
           computers. But it can relate to what we do as
           we'll. When we think about the Web, what do




“
    The dangerous thing is not that
    machines might start thinking like
    humans, but that humans might start
    thinking like machines.

                                — Sydney J. Harris
We are blinded by chrome. When it
comes to RWD, we think about layouts,
and often we should, but we have to
keep in mind that we are not rectangle
artists. we explore solutions to
problems. Browsers think in boxes, but
humans shouldn't.
Wir denken dass das Web so aussieht.
Als Designer sehen wir uns oft als Pixel-Pusher
oder Rectangle Zeichner. So sieht das Web aber
nicht aus


When it comes to responsive design, we think
about layouts, and sometimes we should, but we
have to keep in mind that we aren’t rectangle
artists. We explore solutions to problems.
A fluid, unpredictable, chaotic,
interconnected environment
with plenty of right and wrong
solutions. I always feel weird
about blog posts on why RWD is
a wrong technique, or HTML5/
native is a wrong solution. The
Web isn’t black and white, it’s
rich, extremely diverse and it
requires pragmatic thinking.
Responsive Web Design is an
appropriate tool for this “fluid” Web.
It’s a new mindset that requires us to
rethink and extend our practices.
Content
Choreography
“
    Media queries can be used to do
    more than patch broken layouts:
    with proper planning, we can
    begin to choreograph content
    proportional to screen size,
    serving the best possible
    experience at any width.

                       — Trent Walton
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Content Choreography

  • From the technical standpoint, arrangement
    of boxes is often implemented using Flexbox.

@media screen and
   (max-width: 33.236em) {

#main { display: flex; }

#main > nav,
#main > aside { flex: 1; }
#main > article { flex: 2; }

#main > nav { order: 0; }
#main > article { order: 1; }
#main > aside { order: 2; }
Responsive Web Design: Clever Tips and Techniques
We can manipulate
experiences to make
them genuine across
different viewports —
be it desktop, mobile or
anything else.
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Resolution
Independence
Resolution Independence

• High pixel density displays prompt us to
  create future-proof solutions for graphics.

• Creating multiple assets for the same
  graphics (not photos) isn’t future-proof.

• Two options: SVG and Icon Fonts.
• HTML:                                 PNG sprites
 <ul class="actions">
 <li><a class="a-share" href="#">Share</a></li>
 <li><a class="a-print" href="#">Print</a></li>
 </ul>


• CSS:
 .actions a { font-size: 1em; /* Sprite: 30x160px */
              background-image: url('sprite.png'); }
 .actions .a-share {
              background-position: 10px 0; }
 .actions .a-print {
              background-position: 10px -40px; }
• HTML:                                 SVG sprites
 <ul class="actions">
 <li><a class="a-share" href="#">Share</a></li>
 </ul>


• CSS:
 body { font-size: 100%; } /* = 16px by default */
 .actions a { font-size: 1em;
              background-image: url('sprite.svg');
              background-size: 1.875em 10em; }
 .actions .a-share {
              background-position: 0.625em 0; }
Resolution Independence (SVG)

• SVG files are usually larger and browsers
  need more time to rasterize and display them.

• Good SVG support: Chrome 4+, Safari 4+,
  FF4+, Opera 9.5+, IE9+, mobile browsers.

• For legacy browsers (and Android 2.3)
  we need PNG-fallback with Conditional
  Comments (IE<9) or Modernizr.
• HTML:                                       Icon Fonts
 <a class="icon share" href="#">Share</a>


• CSS:
 @font-face { font-family: 'Icon Font';
              src: url('icon-font.eot');
              src: local('☺');
              url('icon-font.woff') format('woff'),
              url('icon-font.ttf') format('truetype'),
              url('icon-font.svg') format('svg'); }
 .icon { font-family: 'Icon Font'; font-size: 20px; }
 .share:before { content: "s";   }
• HTML:                                       Icon Fonts
 <a class="icon" data-icon="s" href="#">Share</a>
 <a class="icon" data-icon="h" href="#">History</a>



• CSS:
 .icon:before {
      content: attr(data-icon);
      /* Optional color definition */
  }
Resolution Independence
  (Web Fonts)

• There are many comprehensive Web fonts:
  Entypo and FontAwesome are free.

• Excellent support: everywhere but Opera
  Mini and Android 2.1.

• Build custom, small “bundles” with Fontello
  (combines popular open-source fonts).
Responsive Web Design: Clever Tips and Techniques
Compressive
Images
Compressive Images

• To display photos properly on high pixel
  density displays, we don’t need hi-res images.

• If a JPG image has relatively small dimensions,
  we can use a workaround to keep its size small.

• Solution: given a “normal” image resolution,
  double it and use minimal JPEG compression.
“
    ...Given two identical images that
    are displayed at the same size on a
    website, one can be dramatically
    smaller than the other in file size
    if it’s highly compressed and
    dramatically larger in dimensions
    than it is displayed.
                          — Daan Jobsis
600×400px file, 0% JPEG compression,
displayed in 600×400 (file size 7 Kb)
600×400px file, 0% JPEG compression,
displayed in 300×200 (file size 7 Kb)
300×200px file (21 Kb)               600×400px file (7 Kb)
_________________________________   ________________________________
80% JPEG compression                0% JPEG compression
displayed in 300×200                displayed in 300×200
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Conditional
Loading
“
    If you [...] had to choose between
    employing media queries to make
    the design look good on a mobile
    device or optimizing the site for
    performance, you would be better
    served by making the desktop site
    blazingly fast.
                       — Jason Grigsby
Conditional CSS

• We ask browsers to load assets progressively —
  and only when they can be displayed.

• Idea: if a CSS media query was fired, catch it
  with JavaScript and load additional assets.

• CSS:
  @media all and (min-width: 45em) {
     body:after {
         content: 'desktop';
         display: none;
     }
 }
Conditional CSS
• CSS:
  @media all and (min-width: 45em) {
      body:after {
          content: 'desktop';
          display: none;
      }
 }


• JS:
  var size =
  window.getComputedStyle(document.body,':after').get
  PropertyValue('content');
  if (size == 'desktop') {
      // Load some more content.
  }
Conditional CSS (Example)
• HTML:
 <a href="desktop-friendly-version.jpg">
 <img src="mobile-version.jpg"
     data-medium="tablet-friendly-version.jpg"
     data-large="desktop-friendly-version.jpg" /></a>


• CSS:
 @media all and (min-width: 45em) {
     body:after {
         content: 'desktop';
         display: none;
     }
 }
Conditional CSS (Example)
• JavaScript:
  var size =
  window.getComputedStyle(document.body,':after').get
  PropertyValue('content');


 if (size == 'desktop') {
       $('img').each(function(index) {
           var large = $(this).data('large');
           $(this).attr('src',large);
           }
 }


 if (size == 'tablet') {...
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Lazy Loading
JS, Social Buttons
Gmail’s Lazy Loading

• Latency is the time between when a browser
  requests a resource from a server and when it
  starts to receive the server’s response.

• On mobile, latency is a major UX killer. For a
  1Mb page with 85 requests per page, it is 4.5s!

• JavaScript is expensive; parsing takes time and
  blocks the rendering of the page. Usually you
  don’t need all JavaScript right away.
Gmail’s Lazy Loading

• Idea: let browsers download all of the JS right
  away, but evaluate it “on demand”, i.e. when
  users need a particular feature.

• Much of the downloaded JS is commented out,
  and when needed uncommented and eval-ed.

• Gmail’s case:
  200 Kb of JS -> 2600 ms page load
  200 Kb of JS (lazy loaded) -> 240 ms page load
Gmail’s Lazy Loading
• <script id="lazy">
  // Make sure you strip out (or replace) comment
  blocks in your JavaScript first.
  /* JavaScript of lazy module */
  </script>

  <script>
  function lazyLoad() {
  var lazyElement = document.getElementById('lazy');
  var lazyElementBody = lazyElement.innerHTML;
  var jsCode = stripOutCommentBlock(lazyElementBody);
  eval(jsCode); }
  </script>

  <div onclick=lazyLoad()>Lazy Load</div>
Responsive Web Design: Clever Tips and Techniques
The Two-Click Social Widget

• Load social widgets only when user explicitly
  chooses to take that action to share content.

• Idea: load small social icons by default, and
  load the FB, Twitter and G+ widgets on click.

• Cuts down on bandwidth and on latency.
  (FB button alone weighs 120 Kb + 4 requests).
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Protecting image/
video aspect ratios
Protecting Image Aspect Ratios

• When max-width: 100%; is applied to an
  image with width and height attributes
  defined in HTML, image rescales incorrectly.

• Solution: add height: auto; for images to
  which max-width: 100% is applied.

• CSS:
  img, video { max-width: 100%; height: auto; }
Intrinsic Ratio For Videos

• To ensure the intrinsic 4:3 or 16:9 ratios for
  videos, we create a box with the proper ratio,
  then stretch the video inside to fit the
  dimensions of the box.

• HTML:
  <div class="wrapper-with-intrinsic-ratio">
      <div class="element-to-stretch"></div>
  </div>
Intrinsic Ratio For Videos
• CSS:
 .wrapper-with-intrinsic-ratio {
     position: relative;
     padding-top: 25px;      /* player chrome */
     padding-bottom: 56.25%; /* 9:16 = 0.5625 */
     height: 0; }

 .element-to-stretch {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: teal;	}
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Videos

• We can serve different video files to different
  devices by using media attribute on the
  video <source> attribute.

• Supported in the latest versions of Chrome,
  Opera, Safari, FF 15+, IE9+, mobile browsers.
Responsive Videos
• HTML:
 <video controls preload="none">

 <source type="video/mp4" src="video_small.mp4"
     media="all and (max-width: 480px),
            all and (max-device-width: 480px)">

 <source type="video/webm" src="video_small.webm"
     media="all and (max-width: 480px),
            all and (max-device-width: 480px)">

 <source type="video/mp4" src="video.mp4">

 <source type="video/webm" src="video.webm">

 <!-- proper fallback content goes here -->

 </video>
Vertical media
queries & splitting
Vertical Media Queries

• min-height and max-height are useful for
  adjusting the font-size, padding, margin and
  cropping images.

• Beware of h/v-media queries collisions when
  resizing the browser. Things might easily
  get out of control.
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Media Queries Splitting

• In development, we can use a breakpoint-
  based organization for CSS (“min-width”):
  0-up.css, 450-up.css, 720-up.css etc.

• We can also set breakpoints 1px apart and
  split styles instead of overriding from one
  media query to the next (“min/max-width”):
  base.css, 0-449.css, 450-719.css etc.
Media Queries Splitting

• In practice, it’s often a good starting point to
  work with em media queries right away.
  0-up.css, 25em-up.css, 35em-up.css etc.

• If it’s not an option, it’s a good idea to convert
  px to em for production code to improve
  maintenance and avoid zooming issues.
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Debugging
Media Queries
“
    Designing for the Web is like
    visualizing a tesseract. We build
    experiences by manipulating their
    shadows.
                         — Tim Brown
Debugging Media Queries

• Due to lack of convenient tools, debugging
  RWD often feels like groping in the dark.
  There are some popular techniques though.

• Setting the body bg color to different colors for
  each breakpoint. Also box-sizing:   border-box.

• The * technique for testing for optimal
  measure in the browser.
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
People like to test a number
of metrics to see why people
are not * staying on a site. I
think sometimes we spend
so much time focusin* g on
                       *
analytics that we have no...
People like to test a number
of metrics to see why people
are not * staying on a site. I
think sometimes we spend
so much time focusin* g on
                       *
analytics that we have no...
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Typography-Out Approach is an option
for building responsive websites.
Typography-Out
Approach
Responsive Web Design: Clever Tips and Techniques
We prepared a series of
moodboards to further
explore the idea we had,
especially to find
elements that a new,
content-heavy layout
could use.
We focused
specifically on
macro- and
microtypography as
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Our design process was defined by one
major constraint: perfect measure.
“
    If we could adequately typeset an article and
    thus establish the general context of the
    design, everything else would follow. [...]
    The key attribute for achieving perfect
    typesetting was perfect measure: a good
    average between 45 and 90 characters per
    line—on all screen resolutions.

          — Elliot Jay Stocks, “Smashing Book 3”
So we started looking for typefaces that would best express our
new vision, values and our deisgn persona...and oh boy were we
excited. We felt like a kid in a candy store... until we had to be
thrown into cold shower.

With the abundance of rich typefaces on the Web, we excitedly
jumped into the myriad of possibilities. We experimented with
literally dozens of typefaces from several type foundries in various
pairings: we considered Centro Sans and Centro Serif, Meta and
Meta Serif, Adelle, Ronnia, LFT Etica, FF Tisa, just to name a few.
We observed how they looked at different font sizes and how well
they worked together. We examined how well they appeared in bold
and italic and in headings and body copy, as well as how they worked
in less obvious contexts such as image captions.
Responsive Web Design: Clever Tips and Techniques
Typefaces should be optimized for
long reading on (many) screens and
fit various contexts.
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
We started out with setting up a couple of demo pages for
typography, including links, italics, bold.

With all design distractions removed, we could pay a great
deal of technical attention to the type once we set up our
basic styles. How legible is this typeface at a particular size?
How well does it perform on Windows? Is there a superior
version from an alternative font delivery network that
perhaps uses PostScript outlines for display sizes?
Focusing on these fine details is much easier when you’re
looking purely at the type and nothing else.

Because there’s a lot going on visually on Smashing
Magazine—screenshots, buttons and noisy ads—a sans-serif
felt like a more sensible, uncluttered route for body copy. In
fact, it was difficult to imagine a serif typeface being used for
code-heavy articles in the coding section.
Sorry, Proxima Nova rendering is
incorrect on this screenshot, but we
lost the original files. :-)
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
We started from mobile, and worked
our way upwards to desktop views.
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
The keywords were carefully
                          chosen and tested.
Navigation changes: we     We kned that it would take too
used t wo markups: one    much space, but we decided to test
with select, another      it and it performed fairly well.
with a nested unordered
list. and switches them   We’ve developed a toggle menu here
on and off with CSS.      as well, it is currently in the queue
                          for testing. We had drop-down...
                          initially here...
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
We never targeted specific devices—
and introduced media queries
whenever it felt natural to do so.
Responsive design affects viewports
and media, including print.
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive
Design Patterns
Responsive Design Patterns

• Responsive design affects all design assets:
  layout, images, type, navigation, tables,
  calendars, galleries, forms, maps, ads...

• Offline access and mobile UX enhancements
  complement RWD very well (e.g. HTML5
  localStorage, GeoLocation, Telephone links).
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Design Patterns

• Media queries aren’t supported in Android
  2.1 native client, Gmail app on all platforms,
  Win Mobile 6.1 & Phone 7, BlackBerry OS 5.

• Also, Webmail services tend to ignore media
  queries and overwrite them with their custom
  CSS code.
Responsive Web Design: Clever Tips and Techniques
http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/
Responsive Web Design: Clever Tips and Techniques
There are still many
unsolved problems.
There are still many
unsolved problems.
Web forms     Consistency
Images        Debugging
Performance   Maintenance
The Very Final
Conclusion
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
www.smashingbook.com
www.the-mobile-book.com
Responsive Web Design: Clever Tips and Techniques
Thank You
For Your Attention!
@smashingmag
Image credits

• Front cover: Geometric Wallpapers
  by Simon C Page (http://simoncpage.co.uk/
  blog/2012/03/ipad-hd-retina-wallpaper/)

• Homer Simpsons: http://smashed.by/homer,
  http://smashed.by/crazy-homer

More Related Content

What's hot

Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best PracticesHolger Bartel
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standardsgleddy
 
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?Chris Mills
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portlanddmethvin
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Developmentmwrather
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewDiacode
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web DesignChristopher Schmitt
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web DesignDave Olsen
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can buildMonika Piotrowicz
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery PluginsMarc Grabanski
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And ProtocolsSteven Cahill
 
Responsive Web Design - but for real!
Responsive Web Design - but for real!Responsive Web Design - but for real!
Responsive Web Design - but for real!Rudy Rigot
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information ArchitectureChristian Crumlish
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
 
Web Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JSWeb Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JSBootstrap Creative
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09jeresig
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
 

What's hot (20)

Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
 
Responsive Web Design - but for real!
Responsive Web Design - but for real!Responsive Web Design - but for real!
Responsive Web Design - but for real!
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
 
Web Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JSWeb Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JS
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
 

Viewers also liked

Viewers also liked (6)

Ppt manajemen kurikulum
Ppt manajemen kurikulumPpt manajemen kurikulum
Ppt manajemen kurikulum
 
Met pen pendidikan
Met pen pendidikanMet pen pendidikan
Met pen pendidikan
 
Profesi dan jabatan dalam bidang akuntansi
Profesi dan jabatan dalam bidang akuntansiProfesi dan jabatan dalam bidang akuntansi
Profesi dan jabatan dalam bidang akuntansi
 
Pengertian, dan fungsi Kelas maya
Pengertian, dan fungsi Kelas mayaPengertian, dan fungsi Kelas maya
Pengertian, dan fungsi Kelas maya
 
Social media FOR Schools
Social media FOR SchoolsSocial media FOR Schools
Social media FOR Schools
 
Financial Accounting
Financial AccountingFinancial Accounting
Financial Accounting
 

Similar to Responsive Web Design: Clever Tips and Techniques

Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.GaziAhsan
 
Responsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at ScaleResponsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at Scalescottjehl
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Frédéric Harper
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Webmikeleeme
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Doris Chen
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty grittyMario Noble
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. ToolboxWojtek Zając
 
Responsive content
Responsive contentResponsive content
Responsive contenthonzie
 
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
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practicesmintersam
 
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....Aidan Foster
 
Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Frédéric Harper
 
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschiIasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschiCodecamp Romania
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveSalem Ghoweri
 

Similar to Responsive Web Design: Clever Tips and Techniques (20)

Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
 
Responsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at ScaleResponsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at Scale
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
Responsive content
Responsive contentResponsive content
Responsive content
 
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
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
 
Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13
 
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschiIasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
 

Recently uploaded

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 

Recently uploaded (18)

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 

Responsive Web Design: Clever Tips and Techniques

  • 1. Responsive Design: Clever Tips and Tricks Vitaly Friedman 28/11/2012 @ FOWD, Prague
  • 2. Vitaly Friedman, editor-in-chief and co-founder of SmashingMag
  • 4. This talk is about RWD techniques.
  • 5. This talk is about RWD techniques. And simple, clever tricks and ideas.
  • 6. This talk is about RWD techniques. And simple, clever tricks and ideas. And (a bit) about our 2012 redesign.
  • 8. When Sydney J. Harris said that, he meant human society and our understanding of computers. But it can relate to what we do as we'll. When we think about the Web, what do “ The dangerous thing is not that machines might start thinking like humans, but that humans might start thinking like machines. — Sydney J. Harris
  • 9. We are blinded by chrome. When it comes to RWD, we think about layouts, and often we should, but we have to keep in mind that we are not rectangle artists. we explore solutions to problems. Browsers think in boxes, but humans shouldn't.
  • 10. Wir denken dass das Web so aussieht. Als Designer sehen wir uns oft als Pixel-Pusher oder Rectangle Zeichner. So sieht das Web aber nicht aus When it comes to responsive design, we think about layouts, and sometimes we should, but we have to keep in mind that we aren’t rectangle artists. We explore solutions to problems.
  • 11. A fluid, unpredictable, chaotic, interconnected environment with plenty of right and wrong solutions. I always feel weird about blog posts on why RWD is a wrong technique, or HTML5/ native is a wrong solution. The Web isn’t black and white, it’s rich, extremely diverse and it requires pragmatic thinking.
  • 12. Responsive Web Design is an appropriate tool for this “fluid” Web.
  • 13. It’s a new mindset that requires us to rethink and extend our practices.
  • 15. Media queries can be used to do more than patch broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width. — Trent Walton
  • 18. Content Choreography • From the technical standpoint, arrangement of boxes is often implemented using Flexbox. @media screen and (max-width: 33.236em) { #main { display: flex; } #main > nav, #main > aside { flex: 1; } #main > article { flex: 2; } #main > nav { order: 0; } #main > article { order: 1; } #main > aside { order: 2; }
  • 20. We can manipulate experiences to make them genuine across different viewports — be it desktop, mobile or anything else.
  • 29. Resolution Independence • High pixel density displays prompt us to create future-proof solutions for graphics. • Creating multiple assets for the same graphics (not photos) isn’t future-proof. • Two options: SVG and Icon Fonts.
  • 30. • HTML: PNG sprites <ul class="actions"> <li><a class="a-share" href="#">Share</a></li> <li><a class="a-print" href="#">Print</a></li> </ul> • CSS: .actions a { font-size: 1em; /* Sprite: 30x160px */ background-image: url('sprite.png'); } .actions .a-share { background-position: 10px 0; } .actions .a-print { background-position: 10px -40px; }
  • 31. • HTML: SVG sprites <ul class="actions"> <li><a class="a-share" href="#">Share</a></li> </ul> • CSS: body { font-size: 100%; } /* = 16px by default */ .actions a { font-size: 1em; background-image: url('sprite.svg'); background-size: 1.875em 10em; } .actions .a-share { background-position: 0.625em 0; }
  • 32. Resolution Independence (SVG) • SVG files are usually larger and browsers need more time to rasterize and display them. • Good SVG support: Chrome 4+, Safari 4+, FF4+, Opera 9.5+, IE9+, mobile browsers. • For legacy browsers (and Android 2.3) we need PNG-fallback with Conditional Comments (IE<9) or Modernizr.
  • 33. • HTML: Icon Fonts <a class="icon share" href="#">Share</a> • CSS: @font-face { font-family: 'Icon Font'; src: url('icon-font.eot'); src: local('☺'); url('icon-font.woff') format('woff'), url('icon-font.ttf') format('truetype'), url('icon-font.svg') format('svg'); } .icon { font-family: 'Icon Font'; font-size: 20px; } .share:before { content: "s"; }
  • 34. • HTML: Icon Fonts <a class="icon" data-icon="s" href="#">Share</a> <a class="icon" data-icon="h" href="#">History</a> • CSS: .icon:before { content: attr(data-icon); /* Optional color definition */ }
  • 35. Resolution Independence (Web Fonts) • There are many comprehensive Web fonts: Entypo and FontAwesome are free. • Excellent support: everywhere but Opera Mini and Android 2.1. • Build custom, small “bundles” with Fontello (combines popular open-source fonts).
  • 38. Compressive Images • To display photos properly on high pixel density displays, we don’t need hi-res images. • If a JPG image has relatively small dimensions, we can use a workaround to keep its size small. • Solution: given a “normal” image resolution, double it and use minimal JPEG compression.
  • 39. ...Given two identical images that are displayed at the same size on a website, one can be dramatically smaller than the other in file size if it’s highly compressed and dramatically larger in dimensions than it is displayed. — Daan Jobsis
  • 40. 600×400px file, 0% JPEG compression, displayed in 600×400 (file size 7 Kb)
  • 41. 600×400px file, 0% JPEG compression, displayed in 300×200 (file size 7 Kb)
  • 42. 300×200px file (21 Kb) 600×400px file (7 Kb) _________________________________ ________________________________ 80% JPEG compression 0% JPEG compression displayed in 300×200 displayed in 300×200
  • 46. If you [...] had to choose between employing media queries to make the design look good on a mobile device or optimizing the site for performance, you would be better served by making the desktop site blazingly fast. — Jason Grigsby
  • 47. Conditional CSS • We ask browsers to load assets progressively — and only when they can be displayed. • Idea: if a CSS media query was fired, catch it with JavaScript and load additional assets. • CSS: @media all and (min-width: 45em) { body:after { content: 'desktop'; display: none; } }
  • 48. Conditional CSS • CSS: @media all and (min-width: 45em) { body:after { content: 'desktop'; display: none; } } • JS: var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }
  • 49. Conditional CSS (Example) • HTML: <a href="desktop-friendly-version.jpg"> <img src="mobile-version.jpg" data-medium="tablet-friendly-version.jpg" data-large="desktop-friendly-version.jpg" /></a> • CSS: @media all and (min-width: 45em) { body:after { content: 'desktop'; display: none; } }
  • 50. Conditional CSS (Example) • JavaScript: var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { $('img').each(function(index) { var large = $(this).data('large'); $(this).attr('src',large); } } if (size == 'tablet') {...
  • 55. Gmail’s Lazy Loading • Latency is the time between when a browser requests a resource from a server and when it starts to receive the server’s response. • On mobile, latency is a major UX killer. For a 1Mb page with 85 requests per page, it is 4.5s! • JavaScript is expensive; parsing takes time and blocks the rendering of the page. Usually you don’t need all JavaScript right away.
  • 56. Gmail’s Lazy Loading • Idea: let browsers download all of the JS right away, but evaluate it “on demand”, i.e. when users need a particular feature. • Much of the downloaded JS is commented out, and when needed uncommented and eval-ed. • Gmail’s case: 200 Kb of JS -> 2600 ms page load 200 Kb of JS (lazy loaded) -> 240 ms page load
  • 57. Gmail’s Lazy Loading • <script id="lazy"> // Make sure you strip out (or replace) comment blocks in your JavaScript first. /* JavaScript of lazy module */ </script> <script> function lazyLoad() { var lazyElement = document.getElementById('lazy'); var lazyElementBody = lazyElement.innerHTML; var jsCode = stripOutCommentBlock(lazyElementBody); eval(jsCode); } </script> <div onclick=lazyLoad()>Lazy Load</div>
  • 59. The Two-Click Social Widget • Load social widgets only when user explicitly chooses to take that action to share content. • Idea: load small social icons by default, and load the FB, Twitter and G+ widgets on click. • Cuts down on bandwidth and on latency. (FB button alone weighs 120 Kb + 4 requests).
  • 63. Protecting Image Aspect Ratios • When max-width: 100%; is applied to an image with width and height attributes defined in HTML, image rescales incorrectly. • Solution: add height: auto; for images to which max-width: 100% is applied. • CSS: img, video { max-width: 100%; height: auto; }
  • 64. Intrinsic Ratio For Videos • To ensure the intrinsic 4:3 or 16:9 ratios for videos, we create a box with the proper ratio, then stretch the video inside to fit the dimensions of the box. • HTML: <div class="wrapper-with-intrinsic-ratio"> <div class="element-to-stretch"></div> </div>
  • 65. Intrinsic Ratio For Videos • CSS: .wrapper-with-intrinsic-ratio { position: relative; padding-top: 25px; /* player chrome */ padding-bottom: 56.25%; /* 9:16 = 0.5625 */ height: 0; } .element-to-stretch { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: teal; }
  • 69. Responsive Videos • We can serve different video files to different devices by using media attribute on the video <source> attribute. • Supported in the latest versions of Chrome, Opera, Safari, FF 15+, IE9+, mobile browsers.
  • 70. Responsive Videos • HTML: <video controls preload="none"> <source type="video/mp4" src="video_small.mp4" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/webm" src="video_small.webm" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/mp4" src="video.mp4"> <source type="video/webm" src="video.webm"> <!-- proper fallback content goes here --> </video>
  • 72. Vertical Media Queries • min-height and max-height are useful for adjusting the font-size, padding, margin and cropping images. • Beware of h/v-media queries collisions when resizing the browser. Things might easily get out of control.
  • 75. Media Queries Splitting • In development, we can use a breakpoint- based organization for CSS (“min-width”): 0-up.css, 450-up.css, 720-up.css etc. • We can also set breakpoints 1px apart and split styles instead of overriding from one media query to the next (“min/max-width”): base.css, 0-449.css, 450-719.css etc.
  • 76. Media Queries Splitting • In practice, it’s often a good starting point to work with em media queries right away. 0-up.css, 25em-up.css, 35em-up.css etc. • If it’s not an option, it’s a good idea to convert px to em for production code to improve maintenance and avoid zooming issues.
  • 80. Designing for the Web is like visualizing a tesseract. We build experiences by manipulating their shadows. — Tim Brown
  • 81. Debugging Media Queries • Due to lack of convenient tools, debugging RWD often feels like groping in the dark. There are some popular techniques though. • Setting the body bg color to different colors for each breakpoint. Also box-sizing: border-box. • The * technique for testing for optimal measure in the browser.
  • 85. People like to test a number of metrics to see why people are not * staying on a site. I think sometimes we spend so much time focusin* g on * analytics that we have no...
  • 86. People like to test a number of metrics to see why people are not * staying on a site. I think sometimes we spend so much time focusin* g on * analytics that we have no...
  • 89. Typography-Out Approach is an option for building responsive websites.
  • 92. We prepared a series of moodboards to further explore the idea we had, especially to find elements that a new, content-heavy layout could use.
  • 93. We focused specifically on macro- and microtypography as
  • 99. Our design process was defined by one major constraint: perfect measure.
  • 100. If we could adequately typeset an article and thus establish the general context of the design, everything else would follow. [...] The key attribute for achieving perfect typesetting was perfect measure: a good average between 45 and 90 characters per line—on all screen resolutions. — Elliot Jay Stocks, “Smashing Book 3”
  • 101. So we started looking for typefaces that would best express our new vision, values and our deisgn persona...and oh boy were we excited. We felt like a kid in a candy store... until we had to be thrown into cold shower. With the abundance of rich typefaces on the Web, we excitedly jumped into the myriad of possibilities. We experimented with literally dozens of typefaces from several type foundries in various pairings: we considered Centro Sans and Centro Serif, Meta and Meta Serif, Adelle, Ronnia, LFT Etica, FF Tisa, just to name a few. We observed how they looked at different font sizes and how well they worked together. We examined how well they appeared in bold and italic and in headings and body copy, as well as how they worked in less obvious contexts such as image captions.
  • 103. Typefaces should be optimized for long reading on (many) screens and fit various contexts.
  • 107. We started out with setting up a couple of demo pages for typography, including links, italics, bold. With all design distractions removed, we could pay a great deal of technical attention to the type once we set up our basic styles. How legible is this typeface at a particular size? How well does it perform on Windows? Is there a superior version from an alternative font delivery network that perhaps uses PostScript outlines for display sizes? Focusing on these fine details is much easier when you’re looking purely at the type and nothing else. Because there’s a lot going on visually on Smashing Magazine—screenshots, buttons and noisy ads—a sans-serif felt like a more sensible, uncluttered route for body copy. In fact, it was difficult to imagine a serif typeface being used for code-heavy articles in the coding section.
  • 108. Sorry, Proxima Nova rendering is incorrect on this screenshot, but we lost the original files. :-)
  • 117. We started from mobile, and worked our way upwards to desktop views.
  • 120. The keywords were carefully chosen and tested. Navigation changes: we We kned that it would take too used t wo markups: one much space, but we decided to test with select, another it and it performed fairly well. with a nested unordered list. and switches them We’ve developed a toggle menu here on and off with CSS. as well, it is currently in the queue for testing. We had drop-down... initially here...
  • 125. We never targeted specific devices— and introduced media queries whenever it felt natural to do so.
  • 126. Responsive design affects viewports and media, including print.
  • 131. Responsive Design Patterns • Responsive design affects all design assets: layout, images, type, navigation, tables, calendars, galleries, forms, maps, ads... • Offline access and mobile UX enhancements complement RWD very well (e.g. HTML5 localStorage, GeoLocation, Telephone links).
  • 143. Responsive Design Patterns • Media queries aren’t supported in Android 2.1 native client, Gmail app on all platforms, Win Mobile 6.1 & Phone 7, BlackBerry OS 5. • Also, Webmail services tend to ignore media queries and overwrite them with their custom CSS code.
  • 147. There are still many unsolved problems.
  • 148. There are still many unsolved problems. Web forms Consistency Images Debugging Performance Maintenance
  • 156. Thank You For Your Attention! @smashingmag
  • 157. Image credits • Front cover: Geometric Wallpapers by Simon C Page (http://simoncpage.co.uk/ blog/2012/03/ipad-hd-retina-wallpaper/) • Homer Simpsons: http://smashed.by/homer, http://smashed.by/crazy-homer