Supercharge Responsive Design

SMX Milan 2014

2

Search  Experience  Op.miza.on®   Evolve  Responsively.  

It’s  about  intercep(ng  the  most  produc.ve  audiences  and  delivering  experien(al  content  

3

Make  the  experience  fast  so  it  responds  seamlessly  throughout  the  day    

Responsive  Design  Fits  the  Lifestyle  

Commu(ng  (7am  –  10am)  

Work  Time  (10am  –  5pm)  

Leisure  Time  (8pm  –  12am)  

Source:

2.81  

13.5  

11.64  

M. Site RWD Laptop 0

2

4

6

8

10

12

14

16

Responsive Design and Load Time

•  Don’t  load  the  same  assets  to  web  and  mobile  

•  Use  SVG  images  for  icons  and  logos  

•  Leverage  emerging  standards  for  srcset  and  <picture>  

•  Responsive  backend  with  “Vary:  User-­‐Agent”  in  h]p  response  

•  Op.mize  for  PageSpeed  best  prac.ces  

•  Ensure  videos,  images,  stylesheets  and  scripts  are  fully  accessible  

Avg.  Load  Times  for  Mobile  Configura.ons  (seconds)  

Google’s  recommended  mobile  configura.on  is  inherently  slow  Supercharge  Responsive  Design  

Source: High Performance Responsive Design By Tom Barker – O'Reilly Media

Responsive  sites  ocen  serve  the  same  high-­‐res  images  to  desktop  and  mobile  

5

Responsive  Images  in  a  Re.na  World  

Both  experiences  serve  the  same  heavy  image  

Images  on  Responsive/Re.na  Templates  are  Heavy  

6

Avg.  PageSpeed  42%  

Considering  the  web,  images  account  for  62%  of  total  weight  

Source: HTTP Archive – http://goo.gl/o4ucTh

Don’t  Serve  the  Same  Assets  to  Mobile  

7

Avg.  Mobile  PageSpeed  29%  

With  the  same  assets  served  to  mobile,  avg.  PageSpeed  is  13%  lower  

SVG  Images  

8

SVG  has  strong  browser  compa.bility  and  should  be  used  for  icons  and  logos    

Scale  Images  Using  SRCSET  and  SIZES  

<img  src="yacht_race@fallback.jpg”  srcset=“  

img/yacht_race@mobile.jpg  320w,  img/yacht_race@wide-­‐mobile.jpg  480w,  img/yacht_race@tablet.jpg  768w,  img/yacht_race@desktop.jpg  1024w,  img/yacht_race@hires.jpg  1280w"  

sizes=“  (max-­‐width:  20em)  30vw,  (max-­‐width:  30em)  60vw,  (max-­‐width:  40em)  90vw"  

alt="A  very  exci.ng  yacht  race.”  />  

9 Source: http://goo.gl/qXGhlj

Scale  images  across  varying  viewport  widths  and  screen  resolu.ons.  

•  SRC  serves  as  the  fallback  image  •  SRCSET  provides  alternate  images  for  

varying  widths  

•  SIZES  provide  an  es.mated  image  layout  width  

•  Allows  media  condi.ons  

Direct  Images  with  PICTURE  and  SOURCE  MEDIA  

<picture>    <!-­‐-­‐  16:9  crop  -­‐-­‐>    <source      media="(min-­‐width:  36em)"      srcset="quilt_2/detail/large.jpg    1920w,                      quilt_2/detail/medium.jpg    960w,                      quilt_2/detail/small.jpg      480w"  />    <!-­‐-­‐  square  crop  -­‐-­‐>    <source      srcset="quilt_2/square/large.jpg    822w,                      quilt_2/square/medium.jpg  640w,                      quilt_2/square/small.jpg    320w"  />    <img      src="quilt_2/detail/medium.jpg"      alt="Detail  of  the  above  quilt,  highligh.ng  the  embroidery  and  exo.c  s.tchwork."  />  

</picture>  

10 Source: http://goo.gl/qXGhlj

The  picture  element  allows  for  various  image  sizes  at  different  resolu.ons.  

•  SOURCE  uses  media  queries  for  advanced  customiza.on  

•  Apply  CSS  to  the  IMG,  not  the  PICTURE  

Desired  Results  from  <picture>  

11 Source: http://goo.gl/qXGhlj

The  results  show  a  more  detailed  and  firng  image  to  mobile  users.  

Responsive  Back-­‐End    

•  WURFL  Cloud  is  useful  for  server-­‐side  customiza.on  –  Serve  unique  mobile  content  (e.g.  store  locator)  –  Requires  “Vary:  User-­‐Agent”  

12

Server-­‐side  customiza.on  is  fast.  Easy  to  retrieve  device  

informa.on  

Use  “Vary:  User-­‐Agent”  when  Dynamic  

•  The  “Vary:  User-­‐Agent”  direc.ve  should  be  used  when  the  content  is  different  on  mobile  vs  laptop  

•  “Vary:  User-­‐Agent”  let’s  the  ISP  know  to  consider  the  user  agent  when  serving  cached  assets  

13

GET /page-1 HTTP/1.1 Host: www.example.com (...rest of HTTP request headers...) HTTP/1.1 200 OK Content-Type: text/html Vary: User-Agent Content-Length: 5710 (... rest of HTTP response headers...)

Op.mize  Load  Times  Purpose Minimize  load  .me  because  users  and  engines  strongly  favor  pages  that  load  within  one  or  two  seconds.    Recommendations •  Reduce  server  response  .me  •  Leverage  browser  caching  •  Reduce  the  file  sizes  of  images  •  Reduce  the  number  of  JavaScript  includes  •  Reduce  h]p  requests  by  consolida.ng  include  files  •  Minify  JavaScript  includes  to  reduce  file  size  •  Move  JavaScript  includes  to  bo]om  of  markup  

MO

BILE

48 100

Figure 1. Mobile PageSpeed score for SeroquelXR.com

Make  Assets  Fully  Accessible  Purpose

Google  requires  access  to  digital  assets  like  videos,  images,  stylesheets  and  scripts.    Robots.txt

Don’t  block  videos,  images,  stylesheets  or  scripts.    XML Sitemap

Include  videos  and  high  resolu.on  images  in  XML  sitemap.  

Figure 1. 100% site saturation occurs when the number of submitted pages matches the number of indexed pages.

16

A  Supercharged  Responsive  Design…  

17 Source: metrics for illustrative purposes only

…uses the best attributes from each of the recommended mobile configurations

Separate   Dynamic   Responsive  

A  Supercharged  Responsive  Design  

§  Highly  customized  §  Very  fast  

§  Customiza.on  from  client-­‐side  

§  Only  one  URL  §  No  Redirects  

5.81  

9.14  

1.34   1.65  

0  

2  

4  

6  

8  

10  

Site  1   Site  2  

Average  Load  Time  in  Seconds  Post  Op.miza.on  Load  Time