Mobile and Responsive Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Mobile and Responsive Design

on

  • 1,378 views

On Jan. 24, Renata Sinn presented on considerations for mobile sites and responsive design at a lunch and learn event at Creed Interactive in St. Paul, MN.

On Jan. 24, Renata Sinn presented on considerations for mobile sites and responsive design at a lunch and learn event at Creed Interactive in St. Paul, MN.

Statistics

Views

Total Views
1,378
Views on SlideShare
254
Embed Views
1,124

Actions

Likes
0
Downloads
3
Comments
0

4 Embeds 1,124

http://www.creedinteractive.com 1063
http://dev.creedinteractive.com 35
http://creedinteractive.com 21
http://ci3.dev 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile and Responsive Design Presentation Transcript

  • 1. 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   …tablet  sales    are  expected  to   in  2012…   exceed  100  million  this  year…  
  • 2. Mobile  Sites  &  Responsive  Design   Building  and  designing  for  the  future   Desktop   Tablet   Phone   The  Mobile  Experience   Mobile  Site   Full  Spectrum  User  Experience  
  • 3. The  Mobile  Experience  at  a  Glance   Experience  PlaIorms   •  Must  be  downloaded  by  the  user   APPLICATION   •  Runs  naIvely  on  the  device   (APP)   •  Most  costly  to  develop   •  m.sitename.com    -­‐or-­‐    sitename.com/mobile   MOBILE  SITE   •  Can  be  a  whole  separate  code  base  specifically  for   mobile     RESPONSIVE   •  URL  stays  the  same   DESIGN/CODE   •  Fluid  design  and  code  base  allows  for  adaptaIon   across  mulIple  screen  sizes   STOP!
  • 4. Fundamentals  of  Mobile  InteracIons   THE  WHO:  Understanding  human  needs  and  moPvaPon   Let’s  take  one  step  back   before  we  blindly  take   ten  steps  forward.   Image  source  wikipedia.org   Maslow’s  hierarchy  of  needs  
  • 5. Fundamentals  of  Mobile  InteracIons   THE  WHO:  Understanding  the  needs  of  the  mobile  user  Mobile  strategy  should  leverage  and  address  the  user’s  needs.   Extra  features/UI  enhancements   ENHANCE   PERFORM   Performance/Speed   INTERACT   Read/Share/Buy   ACCESS   See/Navigate   Kristofer  Layon’s  hierarchy  of  mobile  moPvaPon  
  • 6. Thinking  Full  Circle  about  Mobile   NUTS  AND  BOLTS:  Bringing  all  the  players  to  the  table   Business   MOBILE   SOLUTION   Design   Development  
  • 7. Thinking  Full  Circle  about  Mobile   BUSINESS:  Point  of  Entry   WHERE   •  We  don’t  have  a  website  and  are  creaIng   one  from  scratch.   ARE  WE   •  We  have  a  legacy  site  and  are  adding   Business   NOW   mobile  enhancements.   WHERE   •  We  don’t  have  a  website,  but  only  care   about  our  mobile  users.   ARE  WE   •  We  have  a  legacy  site,  but  want  to  re-­‐ GOING?   build  and  redesign  the  enIre  site.  
  • 8. Thinking  Full  Circle  about  Mobile   BUSINESS:  Why,  What  &  How?   •  Why  is  a  mobile  experience  good  for   business?   WHY   •  What  are  the  business  objecIves  for  the   mobile  experience?   Business   WHAT   •  What  content  is  important?   HOW   •  How  do  we  want  the  user  to  interact  with  the   content?   •  What  kind  of  resources  do  we  have  for   mobile  development?  
  • 9. Thinking  Full  Circle  about  Mobile   CHOOSING  A  SOLUTION:  Design  and  Development   MOBILE  SITE   Business   Design   WHY   WHAT   HOW   Development   RESPONSIVE   DESIGN/CODE   hZp://googlemobileads.blogspot.com  
  • 10. Thinking  Full  Circle  about  Mobile   DESIGN  ELEMENTS  of  the  mobile  experience   WHY   Design   +   WHAT   ENHANCE   HOW   PERFORM  First  and  foremost  a  user  needs  to  be  able  to  access  the  experience.   INTERACT  •  Limited  and  Big  NavigaIon  •  Shorter  Elements   ACCESS  •  UIlizaIon  of  whitespace  •  Be  aware  of  content  length  and   presentaIon   •  Build  in  gradual  UI  enhancements  •  Limit  images  within  content   (mobile  first  thinking)  
  • 11. Thinking  Full  Circle  about  Mobile   DEVELOPMENT  ELEMENTS  of  the  mobile  experience   WHY   Development   +   WHAT   ENHANCE   HOW   PERFORM   Building  with  Responsive  Design   INTERACT  •  Media  queries  •  Image  re-­‐sizing,  mobile  specific  images   ACCESS  •  Flexible  grids/fluid  CSS  •  Limit/restrict  Flash  •  Implement  gradual  enhancement  
  • 12. 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/  
  • 13. Responsive  Design  Fundamentals   The  flexible  layout  and  responsive  behaviors   NAVIGATION Responsive  Design   CONTENT Viewed  at  Desktop   Dimensions.    NoIce   the  various  areas   called  out  in  blue.   ASIDE
  • 14. Responsive  Design  Fundamentals   The  flexible  layout  and  responsive  behaviors   NAVIGATION Responsive  Design  Viewed  at   Tablet  Dimensions.    NoIce   CONTENT how  the  navigaIon  has   adjusted  to  accommodate  the   smaller  size  and  how  the  aside   slides  below  the  content  since   it’s  of  less  importance.   ASIDE
  • 15. Responsive  Design  Fundamentals   The  flexible  layout  and  responsive  behaviors   Responsive  Design  Viewed  at   Phone  Dimensions.    NoIce   how  the  navigaIon  has  again  NAVIGATION adjusted  to  accommodate  the   ASIDE smaller  size.    The  navigaIon   links  remain  large  for  ease  of   use  with  touch  devices.    The   aside     CONTENT
  • 16. 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.  
  • 17. 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.