Mobile  Sites  &  Responsive  Design  Building  and  designing  for  the  future  

?  …tablet  sales  are  expected  to  exceed  100  million  this  year…   …about  half  of  the  US’s  

311  million  people  own  a  smartphone…  

…mobile  web  usage  took  50%  of  sales  related  to  Mother’s  Day  in  2012…  

…tablet  sales    are  expected  to  exceed  100  million  this  year…  

Mobile  Sites  &  Responsive  Design  Building  and  designing  for  the  future  

Desktop   Tablet   Phone  

The  Mobile  Experience  Mobile  Site  

Full  Spectrum  User  Experience  

The  Mobile  Experience  at  a  Glance  Experience  PlaIorms  

APPLICATION  (APP)  

•  Must  be  downloaded  by  the  user  •  Runs  naIvely  on  the  device  •  Most  costly  to  develop  

MOBILE  SITE  •  m.sitename.com    -­‐or-­‐    sitename.com/mobile  •  Can  be  a  whole  separate  code  base  specifically  for  

mobile    

RESPONSIVE  DESIGN/CODE  

•  URL  stays  the  same  •  Fluid  design  and  code  base  allows  for  adaptaIon  

across  mulIple  screen  sizes  

STOP!

Fundamentals  of  Mobile  InteracIons  

Maslow’s  hierarchy  of  needs  

Image  source  wikipedia.org  

Let’s  take  one  step  back  before  we  blindly  take  ten  steps  forward.  

THE  WHO:  Understanding  human  needs  and  moPvaPon  

Fundamentals  of  Mobile  InteracIons  THE  WHO:  Understanding  the  needs  of  the  mobile  user  

Kristofer  Layon’s  hierarchy  of  mobile  moPvaPon  

ENHANCE  

PERFORM  

INTERACT  

ACCESS  

Mobile  strategy  should  leverage  and  address  the  user’s  needs.  

See/Navigate  

Read/Share/Buy  

Performance/Speed  

Extra  features/UI  enhancements  

Thinking  Full  Circle  about  Mobile  

Business  

Design   Development  

MOBILE  SOLUTION  

NUTS  AND  BOLTS:  Bringing  all  the  players  to  the  table  

Thinking  Full  Circle  about  Mobile  BUSINESS:  Point  of  Entry  

Business  

WHERE  ARE  WE  NOW  WHERE  ARE  WE  GOING?  

•  We  don’t  have  a  website  and  are  creaIng  one  from  scratch.  

•  We  have  a  legacy  site  and  are  adding  mobile  enhancements.  

•  We  don’t  have  a  website,  but  only  care  about  our  mobile  users.  

•  We  have  a  legacy  site,  but  want  to  re-­‐build  and  redesign  the  enIre  site.  

Thinking  Full  Circle  about  Mobile  BUSINESS:  Why,  What  &  How?  

Business  WHY  WHAT  HOW  

•  Why  is  a  mobile  experience  good  for  business?  

•  What  are  the  business  objecIves  for  the  mobile  experience?  

•  What  content  is  important?  •  How  do  we  want  the  user  to  interact  with  the  

content?  •  What  kind  of  resources  do  we  have  for  

mobile  development?  

Thinking  Full  Circle  about  Mobile  CHOOSING  A  SOLUTION:  Design  and  Development  

Design  

Development  

MOBILE  SITE  

RESPONSIVE  DESIGN/CODE  

Business  WHY  WHAT  HOW  

hZp://googlemobileads.blogspot.com  

Thinking  Full  Circle  about  Mobile  DESIGN  ELEMENTS  of  the  mobile  experience  

Design  WHY  WHAT  HOW  

+  

First  and  foremost  a  user  needs  to  be  able  to  access  the  experience.  

•  Limited  and  Big  NavigaIon  

•  Shorter  Elements  

•  UIlizaIon  of  whitespace  

•  Be  aware  of  content  length  and  presentaIon  

PERFORM  

ENHANCE  

ACCESS  

INTERACT  

•  Limit  images  within  content  •  Build  in  gradual  UI  enhancements  

(mobile  first  thinking)  

Thinking  Full  Circle  about  Mobile  DEVELOPMENT  ELEMENTS  of  the  mobile  experience  

WHY  WHAT  HOW  

+  

Building  with  Responsive  Design  

•  Media  queries  

•  Image  re-­‐sizing,  mobile  specific  images  

•  Flexible  grids/fluid  CSS  

•  Limit/restrict  Flash  

PERFORM  

ENHANCE  

ACCESS  

INTERACT  

•  Implement  gradual  enhancement  

Development  

Responsive  Design  Fundamentals  The  flexible  layout  and  responsive  behaviors  

Responsive  Behaviors:  The  basic  concept  behind  having  a  responsive  design  is  to  have  a  layout  and  organizaIonal  structure  that  can  adapt  to  different  screen  sizes.    Content  importance  is  prioriIzed  and  user  interacIons  are  defined  based  on  various  screen  sizes.    The  “break  points”,  or  dimensions  at  which  the  design  adjusts,  are  usually  set  for  average  desktop,  tablet  and  mobile  phone  sizes.  

Checkout  the  example  at  h]p://mobile.creedinteracPve.com/  

Responsive  Design  Fundamentals  The  flexible  layout  and  responsive  behaviors  

Responsive  Design  Viewed  at  Desktop  Dimensions.    NoIce  the  various  areas  called  out  in  blue.  

CONTENTCONTENT

ASIDEASIDE

NAVIGATIONNAVIGATION

Responsive  Design  Fundamentals  The  flexible  layout  and  responsive  behaviors  

Responsive  Design  Viewed  at  Tablet  Dimensions.    NoIce  how  the  navigaIon  has  adjusted  to  accommodate  the  smaller  size  and  how  the  aside  slides  below  the  content  since  it’s  of  less  importance.  

NAVIGATIONNAVIGATION

CONTENTCONTENT

ASIDEASIDE

Responsive  Design  Fundamentals  The  flexible  layout  and  responsive  behaviors  

Responsive  Design  Viewed  at  Phone  Dimensions.    NoIce  how  the  navigaIon  has  again  adjusted  to  accommodate  the  smaller  size.    The  navigaIon  links  remain  large  for  ease  of  use  with  touch  devices.    The  aside    

NAVIGATIONNAVIGATION

CONTENTCONTENT

ASIDEASIDE

Example  of  Mobile  Only  Site  User  interface  and  design  specifically  targeted  to  mobile  device  use  

A  mobile  only  template  viewed  on  a  desktop.    NoIce  how  the  design  is  very  streamline  and  replicates  the  “mobile  UI”  one  would  expect  on  a  naIve  phone  applicaIon.  

Example  of  Mobile  Only  Site  User  interface  and  design  specifically  targeted  to  mobile  device  use  

The  same  template  on  a  mobile  phone  screen  size.    As  you  can  see  the  simplificaIon  of  buZons  and  content  are  well  suited  for  the  mobile  phone  dimensions.