Best  Prac*ces  in  Responsive  Website  Design  

Agenda  

•  Who  is  Stew?  •  What  is  responsive?  •  Why  responsive?  •  What  should  a  designer  remember?  •  When  do  things  go  wrong?  •  Where  can  I  learn  more?  

Who  is  Stew?  •  Ski  Bum  /  Sailor    •  Dad  •  First  web  project  1994  •  Ad  /  Interac*ve  side  for  20  Years  •  NOT  A  PROGRAMMER  •  Past  Clients:      MarrioS,  Best  SoUware,  BlueCross  BlueShield,  Fletcher  Allen  Hospital,  SAM  Magazine,  Ea*ngWell  Magazine,  Burton,  Arrow  Fasteners,  Orvis,  Revision  Eyewear,  Synergy  SoUware,  Vermont  Public  Radio,  Line  Skis,  Solidworks,  Redington  Fly  Rods,  Crystal  Springs  Resort,  Vermont  Chamber  of  Commerce,  Dale  of  Norway,  Special  Olympics  Vermont,  Killington  VT,  Mount  Snow  VT,  Hunter  Mountain  NY,  Schweitzer  ID,  Valdez  Heli-­‐camps  AK,  Stowe  VT,  Whiteface  NY,  Bolton  Valley  VT,  Waterville  Valley  NH,  Sunday  River  ME,  Bromley  VT,  Gunstock  NH,  Peak'n  Peak  NY,  Mountain  Creek  NJ,  Shawnee  Peak  ME,  Ski  Vermont  VT,  Haystack  Club  VT,  Windham  NY,  Burke  VT,  and  Trapp  Family  Lodge  VT.    

VP  /  Partner  nxtConcpets,  Ltd  

Example  

What  is  responsive?  •  Built  on  a  flexible,  fluid  grid  that  adapts  to  the  orienta*on,  

browser,  and/or  device  that  is  rendering  the  website.  •  Op*mized  content,  naviga*on,  and  features  that  are  best  

suited  to  the  par6cular  user’s  needs  based  on  device,  connec*on  speed,  and  even  loca*on.  

Why  responsive?  

Users  are  there  and  spending  money:  •  More  than  60%  of  all  internet  traffic  is  already  from  “mobile”  

devices.  (InMobi)  

•  Users  expect  easy-­‐to-­‐use  interfaces  and  site  sta*s*cs  confirm  approval.  “40%  of  people  using  mobile  devices  will  choose  another  search  result  if  it  is  not  mobile  friendly.”  (iacquire)  

•  62%  of  companies  that  designed  a  website  specifically  for  mobile  had  increased  sales.  (Econsultancy)  

•  Mobile  Phone  and  Tablet  E-­‐Commerce  to  More  Than  Double  by  2018  (Forrester)  

Why  responsive?  Results!    Time  Inc.  Responsive  Redesign  •  Pages  per  visit,  across  mobile,  tablet  and  desktop  are  up  

considerably.    •  Mobile  is  up  23%  compared  to  what  it  had  been.    •  Homepage  uniques  are  up  15%,  and  *me  spent  is  up  

7.5%.    •  The  mobile  bounce  rate  decreased  by  26%.    •  Source  The  Associa*on  of  Magazine  Media  

 O’Neill  Clothing  Responsive  Redesign  •  65.7%  conversion  rate  increase  on  iPhone/iPod    •  101.2%  revenue  growth  on  iPhone/iPod  •  407.3%  conversion  rate  increase  on  Android  devices  •  591.4%  revenue  growth  on  Android  devices  •  20.3%  conversion  rate  increase  on  non-­‐mobile  devices  •  41.1%  revenue  growth  on  non-­‐mobile  devices  •  Source  hSp://electricpulp.com  

Why  responsive?  Results!    Fathead  Responsive  Redesign  •  90%  improvement  in  mobile  conversions  YOY.  •  Revenue  per  visitor  increased  more  than  70%,  and  

mobile  revenue  increased  more  than  538%  YOY.  •  The  responsive  site  is  credited  with  a  275%  increase  in  

mobile  traffic  YOY.  •  On  the  non-­‐phone  side,  conversion  rates  increased  

17%  and  revenue  increased  25%.  •  Source  mobilecommercedaily.com  

 Regent  College  Responsive  Redesign  •  99%  increase  in  unique  visitors  •  77%  increase  pageviews  •  63%  increase  in  online  applica*ons  •  Source  Domain7  

Why  responsive?  It  saves  you  6me  and  money:  •  One  CMS,  one  set  of  content.  Reduce  duplicate  effort  and  

training  /  solu*on  overhead.  •  Ini*al  development  and  design  *me  is  more  than  a  

comparable  sta*c  site,  but  less  than  building  separate  mobile  templates  or  apps  for  mul*ple  OS.  

•  SEO  is  only  done  once  and  is  preferred  by  Google.  

What  should  a  designer  remember?  

Strategy  &  Content:  •  Look  at  mobile  user  behavior  on  your  analy*cs.  •  Mobile  first  design  approach.  •  Create  a  new  mobile  naviga*on  that  emphasizes  the  most  

accessed  informa*on.  •  Cut  content  and  make  the  mobile  experience  even  more  

streamlined.  •  Review  features  and  remove  those  that  are  cumbersome  or  

won’t  work  on  the  mobile  plaqorm.  •  Consider  a  geoloca*on  approach.  Different  offers  to  different  

users  depending  on  loca*on.  

What  should  a  designer  remember?  Design  6ps:  •  There  is  no  fold.  However,  when  stacking  content,  keep  your  

desired  primary  users  goals  and  ac*ons  high  in  the  column.  •  Use  obvious  menu  icons  or  buSons.  “Hamburger”  alone  is  just  

catching  on.  •  Mobile  and  tablet  users  would  rather  swipe  than  click.  Long  

content  pages  are  OK.  •  Put  your  phone  number  in  the  header.  Most  phones  allow  

you  to  “click  to  call”.  •  Avoid  visual  complexity.  Drop  shadows,  photo  treatments,  

design  flourishes  or  embellishments.  

What  should  a  designer  remember?  

Design  6ps:  •  Paralax  and  responsive.  Too  many  moving  parts.  •  Avoid  Google  fonts.  •  Photo  op*miza*on  –  use  Adap*ve  Images  or  other  

techniques.  •  “Flat”  design.  A  trend  with  a  reason.  •  Use  whitespace  –  give  designs  space  to  breath.  •  BulliS  points  make  things  easy  to  digest.  •  Make  buSons  large  and  avoid  text  links.  •  Make  sure  the  developer  knows  all  the  performance  saving  

tricks  available.  

When  do  things  go  wrong?  Issues:  •  Responsive  ad  units.    •  Ecommerce  carts  that  are  not  responsive.  •  Flash.  •  Load  *me  /  server  calls.  •  Pictures  that  are  not  op*mized.  •  Mega  naviga*on,  dropdowns,  and  hover.  •  Wide  data  tables.  •  Re*na  high  resolu*on  screens.  

Where  can  I  learn  more?  Download  Presenta6on:    hSp://www.nxtconcepts.com/ideas/seminars    Resources:    •  Google  -­‐  hSps://developers.google.com/web/fundamentals/

layouts/rwd-­‐fundamentals/  •  W3C  -­‐  hSp://www.w3.org/standards/webdesign/mobilweb  •  Mashable  -­‐  hSp://mashable.com/category/responsive-­‐web-­‐design  •  Responsive  Design  -­‐  hSp://responsivedesign.is/resources  •  Brad  Frost  List  -­‐  hSp://bradfrost.github.io/this-­‐is-­‐responsive/

resources.html          

Ques6ons  &  (perhaps)  Answers  

 Thank  You!