responsive web design - Trilibis [PDF]

Responsive websites are often not designed with the crucial mobile user as the foremost ... In this survey, for 4 out of

0 downloads 4 Views 2MB Size

Recommend Stories


responsive web design
The only limits you see are the ones you impose on yourself. Dr. Wayne Dyer

Responsive web design
We must be willing to let go of the life we have planned, so as to have the life that is waiting for

Expert-Rated Responsive Web Design
If you are irritated by every rub, how will your mirror be polished? Rumi

Design Principles for Responsive Web
Everything in the universe is within you. Ask all from yourself. Rumi

Responsive vs. Adaptive Web Design
We can't help everyone, but everyone can help someone. Ronald Reagan

Responsive Web Design with Adobe Muse CC
Be like the sun for grace and mercy. Be like the night to cover others' faults. Be like running water

[PDF] Learning Web Design
Ego says, "Once everything falls into place, I'll feel peace." Spirit says "Find your peace, and then

[PDF] Download Learning Web Design
Never wish them pain. That's not who you are. If they caused you pain, they must have pain inside. Wish

[PDF] Download Learning Web Design
Your task is not to seek for love, but merely to seek and find all the barriers within yourself that

PdF Download Learning Web Design
This being human is a guest house. Every morning is a new arrival. A joy, a depression, a meanness,

Idea Transcript


RESPONSIVE  WEB  DESIGN:     WHY  IMAGE  OPTIMIZATION  IS   CRUCIAL  FOR  A  MOBILE-­‐FRIENDLY   CUSTOMER  EXPERIENCE    

 

EXECUTIVE  SUMMARY  

 

Responsive  websites  are  often  not  designed  with  the  crucial  mobile  user  as   the  foremost  priority.  For  many  web  designers  and  developers,  ensuring  a   high-­‐quality  visual  experience  and  delivering  a  project  within  tight  timelines   are  top  priorities.  

   

     

However,  the  automatic  smooth  image  resizing  and  other  layout   transformations  that  are  the  essence  of  responsive  design  can  place  heavy   processing  demands  on  mobile  devices.   In  this  survey,  Trilibis  assesses  the  impact  of  image-­‐heavy  responsive   websites  on  the  experience  of  mobile  users.      

SURVEY  FINDINGS  

! Paying  attention  to  image  size  is  critical  for  ensuring  that  responsive   websites  load  quickly  and  deliver  the  best  experience  for  mobile  users.   ! In  this  survey,  for  4  out  of  5  h ighly  rated  responsive  design  websites,   page  weight  and  load  time  were  sub-­‐optimal.   ! 69  percent  of  the  responsive  sites  we  sampled  were  image-­‐heavy,  with   images  contributing  to  more  than  50  percent  of  overall  page  weight.   ! The  responsive  sites  in  this  survey  generally  performed  badly  on  mobile   phones.   – –

Only  32  out  of  the  155  responsive  sites  (21  percent)  responded  with   acceptable  load  times.   32  percent  took  anywhere  from  8  to  48  seconds  to  load  

! Server-­‐side  image  optimization  delivered  some  compelling  performance   gains  on  mobile  devices:   – –

   

Image  weight  was  reduced  by  77  percent.   Page-­‐load  times  were  reduced  by  28-­‐54  percent.  

RESPONSIVE  DESIGN  AND  CUSTOMER  EXPERIENCE  FOR  MOBILE  

 

  Millions  of  consumers  prefer  to  use  mobile  devices   to  connect  with  the  websites  of  marketers,   publishers  and  top  brands.  According  to  August   i 2013  data  from  the  Pew  Research  Center ,  63   percent  of  U.S.  adult  mobile  phone  owners  now  use   their   phones   to   go   online—double   the   level   of   2009.   Significantly,  34  percent  of  these  consumers  say   they  access  the  web  primarily  from  their  mobile   phones.  Meanwhile,  tablets,  which  account  for  8   percent  of  total  U.S.  web  traffic,  have  surpassed   smartphones  as  the  preferred  device  for  mobile   ii browsing.     Designing  for  optimal  presentation  of  content  on   mobile  devices  has  become  a  high  priority  for   website  developers.  For  many  of  them,  ensuring   that  their  website  will  display  perfectly  across  all   types  of  mobile  devices  and  all  major  browsers  —   on  tablets  and  mobile  phones,  as  well  as  desktops.     Responsive  web  design  (RWD)  has  become  a   popular  web  design  methodology  to  address  this   need.     iii A  recent  Forrester  survey  reported  that  more  than   40  percent  of  developers  chose  responsive  design,   or  a  variant  of  it,  as  part  of  their  current  web  design   approach.  The  same  report  also  noted  the  “hype   and  lack  of  understanding”  associated  with  RWD,   especially  with  regard  to  best  practices  related  to   implementation.    

Trilibis  Mobile  

Here  at  Trilibis,  we’ve  watched  the  market  shift   from  so-­‐called  “m-­‐dot”  websites,  which  are   developed  specifically  for  mobile  phones  (and  offer   content  that  differs  from  full-­‐featured  desktop   sites),  to  a  general  market  consensus  that,  for  most   brands,  it  makes  more  sense  to  have  a  single   website  codebase  that  serves  content  to  all  kinds  of   devices  —  desktop,  phone  and  tablet.  We  support   the  RWD  approach  because  we  see  it  as  an  efficient   way  to  deliver  a  holistic  “one  web”  experience   across  all  devices.     However,  this  ‘one  size  fits  all’  approach  has  some   potential  and  significant  downsides.  Radware   recently  tested  the  load  times  of  the  top  500  retail   iv web  sites  and  found  that  pages  are  heavier  and   slower  than  they  were  just  one  year  ago.  This   correlates  with  our  own  experiences.  Through  our   work  with  clients  to  eliminate  performance  issues   on  their  websites,  we  noticed  that  aspects  of  RWD   sites  were  often  the  reason  for  slow  site  load  on   mobile  devices.  Too  often,  in  the  rush  to  deploy  a   time-­‐sensitive  website,  performance  and  page-­‐load   time  are  not  given  the  necessary  attention  to   ensure  the  best  experience  for  mobile  users.  

April  2014  

2  

ANALYSIS:  IMAGE  SIZE  VS.  PAGE  WEIGHT   While  a  number  of  factors  can  determine  the   overall  weight  (i.e.,  size  in  bytes)  of  a  web  page,   images  are  generally  the  principle  contributor.  This   is  particularly  true  for  responsive  websites,  which   generally  serve  the  same  content  to  all  devices.  This   can  lead  to  overly  large  images  being  served  to   mobile  devices.   This  survey  sets  out  to  measure  the  image  weight  of   the  top  RWD  websites  and  assesses:   1.

How  much  do  images  contribute  to  page   weight  on  responsive  websites?  

2.

How  much  does  this  affect  load  time  for   different  types  of  users?  

3.

Can  page  weight  and  load  time  be  reduced   without  affecting  user  experience?  

To  compile  a  list  of  the  best  RWD  sites,  we  turned   to  the  industry  experts.  Our  shortlist  was  based  on   recommendations  provided  by  Dashburst,   Econsultancy,  Mobify,  Search  Engine  Journal,  and   The  Next  Web.  This  yielded  a  list  of  155  prominent  

 

Trilibis  Mobile  

websites  that  use  RWD  techniques  to  optimize   content  for  mobile  devices  (see  Appendix  A).   To  better  understand  how  much  the  size  of  each   website’s  home  page  consisted  of  images,  we  ran  a   set  of  tests  on  all  155  sites  to  rank  them  by  page   weight.  We  encountered  a  wide  range  of  results:   the  lightest  page  was  a  mere  57KB  while  the   heaviest  came  in  at  a  whopping  11MB.   On  average,  the  mean  home  page  weight  of  the  155   sites  we  sampled  was  1.7MB,  with  a  median  weight   of  1.2MB.  Notably,  this  figure  was  considerably   heavier  than  the  420KB  average  page  weight  of  the   top  30  retailers  tracked  on  the  Keynote  Mobile   v Commerce  Performance  Index  (a  well-­‐regarded   industry  benchmark).   Also  of  note  was  the  distribution  of  image  weight  as   a  percentage  of  overall  page  weight.  For  107  of  the   155  sites  (69  percent),  images  constituted  more   than  50  percent  of  overall  page  weight.  The  six   most  image-­‐heavy  sites  served  home  pages  with   more  than  90  percent  of  overall  page  weight   consisting  of  images.

 

April  2014  

3  

PAGE  WEIGHT  VERSUS  LOAD  TIME    

Most  designers  would  agree  that  a  heavy  page   directly  conflicts  with  a  core  objective  that  led  to   the  adoption  of  a  RWD  approach:  to  deliver  an   excellent  experience  for  the  mobile  users.  In  fact,   iv there  is  evidence  that,  in  general,  pages  delivered   to  mobile  users  are  loading  more  slowly:  9.3  sec  in   2014  vs  7.7  sec  in  2013,  based  on  the  median  load   time  of  500  ecommerce  home  pages.     More  importantly,  there  is  a  direct  relationship   between  page-­‐load  time  and  shopper  behavior.  A   vi study  conducted  by  Walmart  concluded  that  faster   pages  resulted  in  more  buyers  than  non-­‐buyers.       Other  research  underscores  the  emphasis  on  page-­‐ load  times.  The  March  Keynote  index  showed   average  load  time  for  all  top  30  retailers  on  mobile   devices  was  7.73  seconds,  with  the  longest  clocking   in  at  18.15  seconds.  Research  conducted  by  The   vii Search  Agency  found  that  the  average  time  it   takes  to  load  a  Fortune  100  company  homepage  on   a  smartphone  is  about  5  seconds.  This  research   found  that  average  page  load  speeds  were  much   quicker  on  dedicated  mobile  sites  (2.9  seconds)   than  on  desktop  sites  accessed  via  a  smartphone   (6.57  seconds),  while  those  sites  using  responsive  

design  had  the  slowest  load  speeds,  timing  out  at   an  average  of  8.4  seconds.  Based  on  the   performance  of  dedicated  mobile  sites,  one   conclusion  that  can  be  drawn  from  this  is  that  3-­‐4   seconds  is  a  reasonable  target  for  page-­‐load  time   on  mobile  devices.     To  understand  the  load  times  of  the  155  responsive   sites  in  this  survey,  we  tested  them  using  the   Akamai  Mobitest  on-­‐line  tool  and  recorded  the   following  times:  mean:  7.95  seconds;  median:  5.82   seconds;  minimum:  0.54  seconds;  maximum:  48.08   seconds.  There  was  clearly  room  for  much   improvement  in  page-­‐load  time  for  the  responsive   design  websites  we  sampled:     1. The  responsive  sites  generally  loaded  slowly  on   mobile  phones.  Only  32  out  of  the  155   responsive  sites  (21  percent)  responded  with   acceptable  load  times  of  less  than  4  seconds.   32  percent  required  anywhere  from  8  to  48   seconds  to  load.   2. Load  time  becomes  unacceptable  when  page   weight  exceeds  1  MB.   3. On  average,  images  make  up  50–60  percent  of   page  weight  in  this  survey.

    Image&Weight&a&Key&Driver&of&Overall&Page&Weight&

Only%1%in%5%Responsive%Sites% Demonstrated%Good%Load%Times%

3000" 2500"

31%$

2000"

21%$ Good$($8$secs)$

500"

48%$

Other"Weight" Image"Weight"

0" Good"(

Smile Life

When life gives you a hundred reasons to cry, show life that you have a thousand reasons to smile

Get in touch

© Copyright 2015 - 2024 PDFFOX.COM - All rights reserved.