BREAKING THE BOXPushing the Boundaries of UserExperience with Drupal
NICE TO MEET YOU!   Jason	  Cranford	  Teague     Managing	  Director,      User	  Experience	  
OUT OF THE BOX?
DRUPAL COMMONS
DRUPAL COMMONS
DRUPAL COMMONS
BE PROGRESSIVE
Pixel Perfect
PIXEL PERFECT         Web	  sites	  HAVE	  to	  look	  EXACTLY	  the	  same	  on	  every	  browser	  and	  every	  version.
PROGRESSIVE ENHANCEMENTWeb	  sites	  do	  NOT	  have	  to	  look	  exactly	  the	  same	  on	  every	                     ...
Responsive DesignCSS3 ADVANTAGES Reduces	  reliance	  on	  images	  for	  visual	  design	   Adds	  new	  visual	  design	...
Responsive DesignPROGRESSIVE ENHANCEMENT MEANS Basic	  content	  should	  be	  accessible	  to	  all	  browsers Basic	  fu...
Responsive DesignWHY PROGRESSIVE ENHANCEMENT Sites	  are	  faster	  to	  develop Code	  is	  cheaper	  to	  maintain	  and...
800 LB. GORILLACSS3	  is	  NOT	  supported	  by	  any	  current	  version	  of	                Internet	  Explorer	  Befor...
WHO WILL THIS EFFECT?  Less	  than	  15%	  of	  Web	  surfers	  world	  wide	  use	  IE	  8	  and	                        ...
Responsive DesignTHE DOWNSIDE FOR OLDER BROWSERS No	  rounded	  corners No	  drop	  shadows Fewer	  embellishments Less	  ...
DESIGN TO RESPOND
“Between	  2010	  and	  2015,	  the	  number	  of	  U.S.	  mobile	  Internet	  users	  will	  increase	  by	  a	  compound...
By 2015, a multi-screensolution will not be a luxury.It will be a necessity.
Responsive DesignSOLUTIONS: SEPARATE MOBILE SITE OR MOBILE APP m.mysite.org	  or	  www.mysite.mobi App	  in	  Android	  or...
Responsive DesignPROBLEMS: SEPARATE MOBILE SITE OR MOBILE APP Significant	  Extra	  Development Must	  target	  each	  devi...
Desktop Experience                 Credit:	  flickr	  -­‐	  MeganMorris	  /	  CC	  License:	  NC-­‐SA
Desktop Experience                 Credit:	  flickr	  -­‐	  MeganMorris	  /	  CC	  License:	  NC-­‐SA
Tablet Experience   Credit:	  flickr	  -­‐	  shareski	  /	  CC	  License:	  NC-­‐SA
Tablet Experience   Credit:	  flickr	  -­‐	  shareski	  /	  CC	  License:	  NC-­‐SA
Smartphone Experience                   Credit:	  flickr	  -­‐	  Yourdon	  /	  CC	  License:	  NC-­‐SA
Smartphone Experience                   Credit:	  flickr	  -­‐	  Yourdon	  /	  CC	  License:	  NC-­‐SA
Desktop                  Tablet                   SmartphoneHardware      big$screen               medium&screen          ...
From Desktop…                                   Web Page Title        http://freedomhouse.org/                    Google
…To Tablet…
…To Smart Phones.
Responsive DesignRESPONSIVE DESIGN, AKA: ReacIve	  Design AdapIve	  Design Reflexive	  Design Fluid	  Design Flexible	  Des...
Responsive DesignBUILT ON WEB STANDARDS XHTML	  or	  HTML5 CSS3 Media	  Queries
MEDIA QUERIES
MEDIA QUERIES!!!!Hey!!May!I!see!your!site?
MEDIA QUERIES!!!!Hey!!May!I!see!your!site?  Yep!%But%first,%can%you%tell%  me%how%large%your%screen%is?
MEDIA QUERIES!!!!Hey!!May!I!see!your!site?  Yep!%But%first,%can%you%tell%  me%how%large%your%screen%is? My#screen#is#768#pi...
MEDIA QUERIES!!!!Hey!!May!I!see!your!site?  Yep!%But%first,%can%you%tell%  me%how%large%your%screen%is? My#screen#is#768#pi...
Responsive DesignPROBLEMS: SEPARATE MOBILE SITE Significant	  Extra	  Development Must	  target	  each	  device	  separatel...
Responsive DesignSOLUTION: PROGRESSIVE ENHANCEMENT Minimal	  Extra	  Development AutomaIcally	  targets	  the	  media,	  n...
Responsive DesignFUTURE FRIENDLY Built	  on	  Web	  Standards Delivers	  styles	  based	  on	  the	  capabiliIes	  of	  th...
A multi-screensolution is not a luxury.It’s a necessity.
CHOOSING THEMES
Responsive DesignWHAT WE WERE LOOKING FOR HTML5 CSS3 Responsive	  layout	  grid Device	  specific	  controls	  &	  budons U...
Drupal Omega Theme
Responsive DesignOMEGA—DEFAULT Drupal	  7	  Ready Fully	  Responsive	  Grid	  layouts	  based HTML5	  or	  XHTML Apply	  c...
Responsive DesignMOJO - ALTERNATIVE Drupal	  7	  Ready Responsive	  Layouts HTML5	  or	  XHTML Apply	  custom	  CSS hdp://...
Responsive DesignF1 UX “SPECIAL SAUCE” Custom	  “out	  of	  the	  box”	  theme	  that	  can	  be	  quickly	     tailored	 ...
Device specific menus
Navigation links turned into buttons
Web Page Titlehttp://freedomhouse.org/                    GoogleUniversal Transitions
UX MODULES
Flex Sliderhttp://www.woothemes.com/flexslider/
Flex Sliderhttp://www.woothemes.com/flexslider/
Style Guidehttp://drupal.org/project/styleguide
Fenceshttp://drupal.org/project/fences
THANKS!     QUESTIONS AND ANSWERS67
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Upcoming SlideShare
Loading in...5
×

Breaking the Box: Pushing the Boundaries of UX with Drupal

1,491

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,491
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Breaking the Box: Pushing the Boundaries of UX with Drupal

  1. 1. BREAKING THE BOXPushing the Boundaries of UserExperience with Drupal
  2. 2. NICE TO MEET YOU! Jason  Cranford  Teague Managing  Director, User  Experience  
  3. 3. OUT OF THE BOX?
  4. 4. DRUPAL COMMONS
  5. 5. DRUPAL COMMONS
  6. 6. DRUPAL COMMONS
  7. 7. BE PROGRESSIVE
  8. 8. Pixel Perfect
  9. 9. PIXEL PERFECT Web  sites  HAVE  to  look  EXACTLY  the  same  on  every  browser  and  every  version.
  10. 10. PROGRESSIVE ENHANCEMENTWeb  sites  do  NOT  have  to  look  exactly  the  same  on  every   browser  and  every  version… …but  should  take  full  advantage  of  each  browser’s   capabili8es  to  deliver  the  best  possible  experience.
  11. 11. Responsive DesignCSS3 ADVANTAGES Reduces  reliance  on  images  for  visual  design   Adds  new  visual  design  capabiliIes Improves  interacIon  design Increases  content  versaIlity
  12. 12. Responsive DesignPROGRESSIVE ENHANCEMENT MEANS Basic  content  should  be  accessible  to  all  browsers Basic  funcIonality  should  be  accessible  to  all   browsers Enhanced  layout  is  provided  by  externally  linked  CS
  13. 13. Responsive DesignWHY PROGRESSIVE ENHANCEMENT Sites  are  faster  to  develop Code  is  cheaper  to  maintain  and  modify Designs  are  more  versaIle Pages  generally  load  faster  and  work  faster
  14. 14. 800 LB. GORILLACSS3  is  NOT  supported  by  any  current  version  of   Internet  Explorer  Before  Version  9
  15. 15. WHO WILL THIS EFFECT? Less  than  15%  of  Web  surfers  world  wide  use  IE  8  and   below.More  than  90%  of  mobile  web  surfers  use  a  modern  web   browser.
  16. 16. Responsive DesignTHE DOWNSIDE FOR OLDER BROWSERS No  rounded  corners No  drop  shadows Fewer  embellishments Less  advanced  interacIon …BUT  the  site  sIll  works!
  17. 17. DESIGN TO RESPOND
  18. 18. “Between  2010  and  2015,  the  number  of  U.S.  mobile  Internet  users  will  increase  by  a  compound  annual  growth  rate  of  16.6  percent  while  PCs  and  other  wireline  services  first  stagnate,  then  gradually  decline. —The  Daily  Tech 13  september  2011
  19. 19. By 2015, a multi-screensolution will not be a luxury.It will be a necessity.
  20. 20. Responsive DesignSOLUTIONS: SEPARATE MOBILE SITE OR MOBILE APP m.mysite.org  or  www.mysite.mobi App  in  Android  or  iPhone  Store Design  opImized  for  mobile  devices Subset  of  full  site  targeted  at  mobile  users App  can  take  advantage  of  specific  device  features  like   geolocaIon  and  accelerometer
  21. 21. Responsive DesignPROBLEMS: SEPARATE MOBILE SITE OR MOBILE APP Significant  Extra  Development Must  target  each  device  separately May  require  mulIple  code  bases  for  different   pla^orms May  require  separate  content  management Expensive  to  maintain  and  update
  22. 22. Desktop Experience Credit:  flickr  -­‐  MeganMorris  /  CC  License:  NC-­‐SA
  23. 23. Desktop Experience Credit:  flickr  -­‐  MeganMorris  /  CC  License:  NC-­‐SA
  24. 24. Tablet Experience Credit:  flickr  -­‐  shareski  /  CC  License:  NC-­‐SA
  25. 25. Tablet Experience Credit:  flickr  -­‐  shareski  /  CC  License:  NC-­‐SA
  26. 26. Smartphone Experience Credit:  flickr  -­‐  Yourdon  /  CC  License:  NC-­‐SA
  27. 27. Smartphone Experience Credit:  flickr  -­‐  Yourdon  /  CC  License:  NC-­‐SA
  28. 28. Desktop Tablet SmartphoneHardware big$screen medium&screen small%screen power$supply ba-ery ba+ery consistent$network inconsistent&network inconsistent%networkInterac+on keyboard$and$mouse direct&touch direct%touchEnvironment si5ng$(chair$and$desk) relaxed on%the%go work$and$home home home,%idling,%workTime2(peak) 8am$:$7pm 5pm&8&10pm all%dayUser2Focus extended$tasks short&tasks short%tasks mul=:task single&task single%taskOrienta+on fixed portrait&and&landscape portrait%and%landscapeSensors no yes yes
  29. 29. From Desktop… Web Page Title http://freedomhouse.org/ Google
  30. 30. …To Tablet…
  31. 31. …To Smart Phones.
  32. 32. Responsive DesignRESPONSIVE DESIGN, AKA: ReacIve  Design AdapIve  Design Reflexive  Design Fluid  Design Flexible  Design
  33. 33. Responsive DesignBUILT ON WEB STANDARDS XHTML  or  HTML5 CSS3 Media  Queries
  34. 34. MEDIA QUERIES
  35. 35. MEDIA QUERIES!!!!Hey!!May!I!see!your!site?
  36. 36. MEDIA QUERIES!!!!Hey!!May!I!see!your!site? Yep!%But%first,%can%you%tell% me%how%large%your%screen%is?
  37. 37. MEDIA QUERIES!!!!Hey!!May!I!see!your!site? Yep!%But%first,%can%you%tell% me%how%large%your%screen%is? My#screen#is#768#pixels# wide.#
  38. 38. MEDIA QUERIES!!!!Hey!!May!I!see!your!site? Yep!%But%first,%can%you%tell% me%how%large%your%screen%is? My#screen#is#768#pixels# wide.# Then%you%get%the%tablet% styles.
  39. 39. Responsive DesignPROBLEMS: SEPARATE MOBILE SITE Significant  Extra  Development Must  target  each  device  separately May  require  mulIple  code  bases  for  different   pla^orms May  require  separate  content  management Expensive  to  maintain  and  update
  40. 40. Responsive DesignSOLUTION: PROGRESSIVE ENHANCEMENT Minimal  Extra  Development AutomaIcally  targets  the  media,  not  the  device Will  work  across  pla^orms Same  content  management  across  all  media Easy  to  maintain  and  upgrade  with  overall  site Future  Friendly
  41. 41. Responsive DesignFUTURE FRIENDLY Built  on  Web  Standards Delivers  styles  based  on  the  capabiliIes  of  the  device Supported  by  Safari,  Firefox,  Opera,  Chrome  and  IE8+
  42. 42. A multi-screensolution is not a luxury.It’s a necessity.
  43. 43. CHOOSING THEMES
  44. 44. Responsive DesignWHAT WE WERE LOOKING FOR HTML5 CSS3 Responsive  layout  grid Device  specific  controls  &  budons Universal  transiIons
  45. 45. Drupal Omega Theme
  46. 46. Responsive DesignOMEGA—DEFAULT Drupal  7  Ready Fully  Responsive  Grid  layouts  based HTML5  or  XHTML Apply  custom  CSS hdp://drupal.org/project/omega
  47. 47. Responsive DesignMOJO - ALTERNATIVE Drupal  7  Ready Responsive  Layouts HTML5  or  XHTML Apply  custom  CSS hdp://drupal.org/project/mojo
  48. 48. Responsive DesignF1 UX “SPECIAL SAUCE” Custom  “out  of  the  box”  theme  that  can  be  quickly   tailored  for  a  customer’s  needs   Device  specific  menus  based  on  mobile  user  interface   best  pracIces NavigaIon  links  turned  into  budons  making  them   easier  to  use  with  touch-­‐screens Universal  TransiIons  for  a  smoother  user  experience
  49. 49. Device specific menus
  50. 50. Navigation links turned into buttons
  51. 51. Web Page Titlehttp://freedomhouse.org/ GoogleUniversal Transitions
  52. 52. UX MODULES
  53. 53. Flex Sliderhttp://www.woothemes.com/flexslider/
  54. 54. Flex Sliderhttp://www.woothemes.com/flexslider/
  55. 55. Style Guidehttp://drupal.org/project/styleguide
  56. 56. Fenceshttp://drupal.org/project/fences
  57. 57. THANKS! QUESTIONS AND ANSWERS67
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×