Breaking the Box: Pushing the Boundaries of UX with Drupal
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Breaking the Box: Pushing the Boundaries of UX with Drupal

on

  • 1,598 views

 

Statistics

Views

Total Views
1,598
Views on SlideShare
1,469
Embed Views
129

Actions

Likes
0
Downloads
14
Comments
0

2 Embeds 129

http://www.acquia.com 128
http://itde.vccs.edu 1

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

Breaking the Box: Pushing the Boundaries of UX with Drupal Presentation Transcript

  • 1. BREAKING THE BOXPushing the Boundaries of UserExperience with Drupal
  • 2. NICE TO MEET YOU! Jason  Cranford  Teague Managing  Director, User  Experience  
  • 3. OUT OF THE BOX?
  • 4. DRUPAL COMMONS
  • 5. DRUPAL COMMONS
  • 6. DRUPAL COMMONS
  • 7. BE PROGRESSIVE
  • 8. Pixel Perfect
  • 9. PIXEL PERFECT Web  sites  HAVE  to  look  EXACTLY  the  same  on  every  browser  and  every  version.
  • 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. Responsive DesignCSS3 ADVANTAGES Reduces  reliance  on  images  for  visual  design   Adds  new  visual  design  capabiliIes Improves  interacIon  design Increases  content  versaIlity
  • 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. 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. 800 LB. GORILLACSS3  is  NOT  supported  by  any  current  version  of   Internet  Explorer  Before  Version  9
  • 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. Responsive DesignTHE DOWNSIDE FOR OLDER BROWSERS No  rounded  corners No  drop  shadows Fewer  embellishments Less  advanced  interacIon …BUT  the  site  sIll  works!
  • 17. DESIGN TO RESPOND
  • 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. By 2015, a multi-screensolution will not be a luxury.It will be a necessity.
  • 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. 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. Desktop Experience Credit:  flickr  -­‐  MeganMorris  /  CC  License:  NC-­‐SA
  • 23. Desktop Experience Credit:  flickr  -­‐  MeganMorris  /  CC  License:  NC-­‐SA
  • 24. Tablet Experience Credit:  flickr  -­‐  shareski  /  CC  License:  NC-­‐SA
  • 25. Tablet Experience Credit:  flickr  -­‐  shareski  /  CC  License:  NC-­‐SA
  • 26. Smartphone Experience Credit:  flickr  -­‐  Yourdon  /  CC  License:  NC-­‐SA
  • 27. Smartphone Experience Credit:  flickr  -­‐  Yourdon  /  CC  License:  NC-­‐SA
  • 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. From Desktop… Web Page Title http://freedomhouse.org/ Google
  • 30. …To Tablet…
  • 31. …To Smart Phones.
  • 32. Responsive DesignRESPONSIVE DESIGN, AKA: ReacIve  Design AdapIve  Design Reflexive  Design Fluid  Design Flexible  Design
  • 33. Responsive DesignBUILT ON WEB STANDARDS XHTML  or  HTML5 CSS3 Media  Queries
  • 34. MEDIA QUERIES
  • 35. MEDIA QUERIES!!!!Hey!!May!I!see!your!site?
  • 36. MEDIA QUERIES!!!!Hey!!May!I!see!your!site? Yep!%But%first,%can%you%tell% me%how%large%your%screen%is?
  • 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. 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. 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. 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. 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. A multi-screensolution is not a luxury.It’s a necessity.
  • 43. CHOOSING THEMES
  • 44. Responsive DesignWHAT WE WERE LOOKING FOR HTML5 CSS3 Responsive  layout  grid Device  specific  controls  &  budons Universal  transiIons
  • 45. Drupal Omega Theme
  • 46. Responsive DesignOMEGA—DEFAULT Drupal  7  Ready Fully  Responsive  Grid  layouts  based HTML5  or  XHTML Apply  custom  CSS hdp://drupal.org/project/omega
  • 47. Responsive DesignMOJO - ALTERNATIVE Drupal  7  Ready Responsive  Layouts HTML5  or  XHTML Apply  custom  CSS hdp://drupal.org/project/mojo
  • 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. Device specific menus
  • 50. Navigation links turned into buttons
  • 51. Web Page Titlehttp://freedomhouse.org/ GoogleUniversal Transitions
  • 52. UX MODULES
  • 53. Flex Sliderhttp://www.woothemes.com/flexslider/
  • 54. Flex Sliderhttp://www.woothemes.com/flexslider/
  • 55. Style Guidehttp://drupal.org/project/styleguide
  • 56. Fenceshttp://drupal.org/project/fences
  • 57. THANKS! QUESTIONS AND ANSWERS67