Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meeting Users Halfway with Responsive Web Design

Jamie Boyd
October 04, 2011

Meeting Users Halfway with Responsive Web Design

A presentation I gave at Social Media Week Glasgow 2011. In it I talked about social media, online content and recent client work my company did using responsive web design as a solution to optimise content for different devices.

Jamie Boyd

October 04, 2011
Tweet

More Decks by Jamie Boyd

Other Decks in Technology

Transcript

  1. We know what makes your customers click. Meeting Users Halfway

    with Responsive Web Design Jamie Boyd Social Media Week Glasgow, 2011
  2. We know what makes your customers click. Jamie Boyd @jamboid

    Senior Web Interface Developer at Equator @EquatorAgency #smwgla
  3. We know what makes your customers click. Social Objects I’m

     really  interested  in  the  concept  of  Social  Objects The  things  we  share  online  and  that  we  form  social  interac;ons  around...
  4. We know what makes your customers click. How do social

    networking services treat Social Objects? I  think  it’s  interes;ng  to  look  at  how  social  media  services  treat  social  objects. There’s  a  common  aspect  with  the  successful  ones...
  5. We know what makes your customers click. The Web is

    the universal medium for sharing Social Objects They  make  it  incredibly  easy  to  share  these  objects They  use  the  web  as  a  universal  medium  to  do  this  by  crea;ng  a  unique  place  for  each  object  to  live  with  its  own  permalink  address...
  6. We know what makes your customers click. Instagram Instagram  is

     a  recent  example  of  this iPhone-­‐only,  a  minimal  web  presence  at  first-­‐glance...
  7. We know what makes your customers click. And  can  be

     shared  in  an  op;mised  form...
  8. We know what makes your customers click. ...on  any  device

     with  a  modern  web  browser Arguably  a  more  important  part  of  the  experience  than  the  filters  and  ;lt-­‐shiHing  of  the  camera  app.
  9. We know what makes your customers click. Does your content

    respond to the user's context? The  same  is  true  of  places  like  Facebook  and  TwiJer,  content  anywhere,  op;mised  for  any  device This  begs  a  ques;on:  does  your  content  behave  in  the  same  way?...
  10. We know what makes your customers click. New devices and

    services optimised for them have created a powerful level of expectation in a very short time Because  social  media  is  seMng  expecta;ons  about  social  objects  and  how  they  behave  online This  has  happened  with  frightening  speed
  11. We know what makes your customers click. Websites and services

    need to respond to this expectation The  landscape  has  shiHed  under  everyones’  feet We  are  all  living  in  an  online  ecosystem  that  has  been  shaped  by  social  media  and  we  need  to  adapt  or  die...
  12. We know what makes your customers click. “Oh, nevermind... This

    site is desktop-optimised.” People  aren’t  thinking  this...
  13. We know what makes your customers click. “Oh, nevermind... This

    site is desktop-optimised.” “Oh, nevermind... This site is broken.” They’re  thinking  this...
  14. We know what makes your customers click. The idea that

    there is a “mobile web” is not really true anymore Old  ideas  about  the  shape  of  the  web  are  changing  too Mobile  is  no  longer  an  easily-­‐ignored  gheJo There  is  just  the  Web  that  works  and  the  Web  that  doesn’t...
  15. We know what makes your customers click. New devices with

    modern capabilities have erased comfortable stereotypes We  also  can’t  ignore  users  by  aJaching  comfortable  stereotypes  to  them People  are  using  the  web  everywhere,  for  everything So  where  does  that  leave  us  creators  of  the  web...
  16. We know what makes your customers click. A Complex World

    In  a  much  more  complex  world... We  need  to  respond  and  luckily  the  Web  itself  gives  us  a  way  to  do  this...
  17. We know what makes your customers click. A Complex World

    So Be Flexible We  need  to  let  go  of  control  and  learn  to  embrace  the  essen;al  nature  of  the  Web:  flexibility
  18. We know what makes your customers click. We now have

    the tools to create a single web that responds to the user's context and meets them halfway We  need  to  meet  users  halfway With  the  whole  web  to  chose  from,  they’ve  chosen  to  spend  their  ;me  and  aJen;on  on  our  content,  so  we  owe  them  that  at  least
  19. We know what makes your customers click. Part 2 Using

    Responsive Web Design to meet the user halfway So  how  do  we  start?
  20. We know what makes your customers click. “Responsive Web Design”

    Ethan Marcotte @beep A List Apart, 25th May, 2010 http://www.alistapart.com/articles/responsive-web-design/ A  breakthrough  occurred  in  May  of  last  year,  when  Ethan  MarcoJe  published  this  ar;cle  in  A  List  Apart where  he  outlined  a  way  to  create  single  web  experiences  that  op;mised  across  mul;ple  device  types
  21. We know what makes your customers click. Responsive Web Design

    A set of techniques that allows a website's layout to respond to the device it is being displayed on Ethan’s  vision  was  purposefully  limited Responsive  Web  Design  was  a  par;cular  technical  solu;on  to  the  problem  of  responding  to  a  device’s  display  characteris;cs  with  an  op;mised  layout
  22. We know what makes your customers click. Responsive Web Design

    is made up of 3 parts There  are  3  parts  to  this...
  23. We know what makes your customers click. 1. Fluid Grids

    As the screen changes size, the page content changes to fit Fluid  grids.   A  par;cular  layout  with  grow  wider  and  narrower  as  the  display  size  increases  and  decreases. Not  a  new  concept. Fluid  sites  have  been  around  for  as  long  as  the  web...
  24. We know what makes your customers click. 2. Flexible Images

    Images on the page scale with the fluid grid Flexible  images As  the  layout  grows  or  contracts,  the  images  on  the  page  scale  appropriately  and  don’t  break  the  layout The  ability  to  do  this  is  a  more  recent  development...
  25. We know what makes your customers click. 3. CSS Media

    Queries As screen size changes, the page contents reconfigure to provide an optimum layout CSS  Media  Queries The  secret  sauce  that  mixes  with  the  first  2  techniques  and  creates  something  special Media  Queries  allow  a  page  to  radically  alter  its  layout  based  on  the  screen  characteris;cs  such  as  size  and  resolu;on
  26. We know what makes your customers click. For the past

    year Equator have been working with Macdonald Hotels www.macdonaldhotels.co.uk MH  owns  and  manages  45  hotels  throughout  the  UK They  asked  Equator  to  help  them  redevelop  their  website  and  the  backend  systems  that  support  their  online  booking  process Part  of  their  brief  was  some  form  of  support  for  Mobile  users We  decided  that  a  using  RWD  was  the  way  to  deliver  this SHOW  SITE... So  how  did  we  do  this...
  27. We know what makes your customers click. Start with a

    solid foundation Started  with  a  strong  founda;on
  28. We know what makes your customers click. Web Standards +

    Progressive Enhancement Web  Standards  -­‐  Clean,  seman;cs  markup,  best  prac;ce  accessibility Progressive  Enhancement  -­‐  building  baseline  func;onality  that  could  be  enhanced  in  browsers  that  supported  more  advanced  technologies  like  HTML5,  CSS3  and  JavaScript
  29. We know what makes your customers click. Web Standards +

    Progressive Enhancement + Responsive Design RWD  was  a  natural  third  step...
  30. We know what makes your customers click. 5 things we

    learned I’d  like  to  talk  about  5  things  we  learned  from  the  design  and  development  process...
  31. We know what makes your customers click. Get wireframe and

    prototypes onto phones and tablets immediately
  32. We know what makes your customers click. We gained some

    fundamental design insights very early by getting onto the hardware Things that we missed in a resized browser window became obvious on a phone or tablet
  33. We know what makes your customers click. The user has

    to know where they are, but a small screen size limits what affordances you can give as the page loads
  34. We know what makes your customers click. The  advantage  of

     early  hardware  tes;ng  became  immediately  clear...
  35. We know what makes your customers click. First view of

    every page is going to be the same...
  36. We know what makes your customers click. Reduce the header

    to as small a size as possible and get page-identifying content on the screen when the page loads
  37. We know what makes your customers click. 3. Let the

    grid system do the heavy lifting
  38. We know what makes your customers click. The complexity began

    to increase rapidly, so we needed to simplify things...
  39. We know what makes your customers click. A well-defined set

    of grids + Generic Layout CSS = A framework that’ll do the heavy lifting for you
  40. We know what makes your customers click. The framework deals

    with aligning the component to the grid... We deal with laying out content within the components
  41. We know what makes your customers click. We need to

    create margins that set as different % values but that give identical pixel values
  42. We know what makes your customers click. Outer Container Width

    divided by Inner Component Width equals Multiplier for margins on subcomponents
  43. We know what makes your customers click. Keep component margins

    symmetrical and proportional Set margins on the smallest indivisible units
  44. We know what makes your customers click. Load low-resolution versions

    to create correctly proportioned placeholders
  45. We know what makes your customers click. Pay particular attention

    to breakpoints Layouts can be really stressed on the wrong side of these
  46. We know what makes your customers click. A breakpoint at

    a width of 480px triggers the phone layout
  47. We know what makes your customers click. A breakpoint at

    a width of 480px triggers the phone layout How does the layout behave at 481px?
  48. We know what makes your customers click. Create special cases

    if the content demands it Add intermediate breakpoints for these special cases
  49. We know what makes your customers click. Lessons... 1. Test

    on hardware 2. Keep the user orientated 3. Build a layout grid system 4. Optimise images 5. Be agile, improvise
  50. We know what makes your customers click. The impact on

    back-end development is minimal We  took  a  pragma;c  approach  mobile  op;misa;on The  complexity  of  the  back-­‐end  development  (data  management,  systems  integra;on)  meant  that  the  mobile  solu;on  had  to  be  low-­‐risk  from  the  back-­‐end  point  of  view RWD  is  also  low-­‐risk  from  a  front-­‐end  point  of  view Progressive  Enhancement,  easy  to  remove
  51. We know what makes your customers click. Responsive Design is

    not a silver bullet for a complete mobile strategy
  52. We know what makes your customers click. Be responsive, embrace

    flexibility, build the web the way it was always meant to be