Breaking the Box: Pushing the Boundaries of UX with Drupal
-
Upload
acquia -
Category
Technology
-
view
1.429 -
download
0
Transcript of Breaking the Box: Pushing the Boundaries of UX with Drupal
![Page 1: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/1.jpg)
BREAKING THE BOXPushing the Boundaries of User Experience with Drupal
![Page 2: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/2.jpg)
![Page 3: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/3.jpg)
NICE TO MEET YOU!
Jason Cranford TeagueManaging Director,User Experience
![Page 5: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/5.jpg)
OUT OF THE BOX?
![Page 6: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/6.jpg)
DRUPAL COMMONS
![Page 7: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/7.jpg)
DRUPAL COMMONS
![Page 8: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/8.jpg)
DRUPAL COMMONS
![Page 9: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/9.jpg)
BE PROGRESSIVE
![Page 10: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/10.jpg)
Pixel Perfect
![Page 11: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/11.jpg)
PIXEL PERFECTWeb sites HAVE to look EXACTLY
the same on every browser and every version.
![Page 12: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/12.jpg)
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.
![Page 13: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/13.jpg)
Responsive Design
CSS3 ADVANTAGESReduces reliance on images for visual design
Adds new visual design capabiliIes
Improves interacIon design
Increases content versaIlity
![Page 14: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/14.jpg)
Responsive Design
PROGRESSIVE ENHANCEMENT MEANSBasic content should be accessible to all browsers
Basic funcIonality should be accessible to all browsers
Enhanced layout is provided by externally linked CS
![Page 15: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/15.jpg)
Responsive Design
WHY PROGRESSIVE ENHANCEMENTSites are faster to develop
Code is cheaper to maintain and modify
Designs are more versaIle
Pages generally load faster and work faster
![Page 16: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/16.jpg)
800 LB. GORILLACSS3 is NOT supported by any current version of
Internet Explorer Before Version 9
![Page 17: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/17.jpg)
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.
![Page 18: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/18.jpg)
Responsive Design
THE DOWNSIDE FOR OLDER BROWSERSNo rounded corners
No drop shadows
Fewer embellishments
Less advanced interacIon
…BUT the site sIll works!
![Page 19: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/19.jpg)
![Page 20: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/20.jpg)
![Page 21: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/21.jpg)
DESIGN TO RESPOND
![Page 22: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/22.jpg)
“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 Tech13 september 2011
![Page 23: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/23.jpg)
By 2015, a multi-screen solution will not be a luxury. It will be a necessity.
![Page 24: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/24.jpg)
Responsive Design
SOLUTIONS: SEPARATE MOBILE SITE OR MOBILE APPm.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
![Page 25: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/25.jpg)
Responsive Design
PROBLEMS: SEPARATE MOBILE SITE OR MOBILE APPSignificant 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
![Page 26: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/26.jpg)
![Page 27: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/27.jpg)
Desktop ExperienceCredit: flickr -‐ MeganMorris / CC License: NC-‐SA
![Page 28: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/28.jpg)
Desktop ExperienceCredit: flickr -‐ MeganMorris / CC License: NC-‐SA
![Page 29: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/29.jpg)
Tablet ExperienceCredit: flickr -‐ shareski / CC License: NC-‐SA
![Page 30: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/30.jpg)
Tablet ExperienceCredit: flickr -‐ shareski / CC License: NC-‐SA
![Page 31: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/31.jpg)
Smartphone ExperienceCredit: flickr -‐ Yourdon / CC License: NC-‐SA
![Page 32: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/32.jpg)
Smartphone ExperienceCredit: flickr -‐ Yourdon / CC License: NC-‐SA
![Page 33: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/33.jpg)
Hardware
Interac+onEnvironment
Time2(peak)User2Focus
Orienta+onSensors
Desktop
big$screenpower$supplyconsistent$networkkeyboard$and$mousesi5ng$(chair$and$desk)work$and$home8am$:$7pmextended$tasksmul=:taskfixedno
Tablet
medium&screenba-eryinconsistent&networkdirect&touchrelaxedhome5pm&8&10pmshort&taskssingle&taskportrait&and&landscapeyes
Smartphone
small%screenba+eryinconsistent%networkdirect%touchon%the%gohome,%idling,%workall%dayshort%taskssingle%taskportrait%and%landscapeyes
![Page 34: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/34.jpg)
From Desktop…Googlehttp://freedomhouse.org/
Web Page Title
![Page 35: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/35.jpg)
…To Tablet…
![Page 36: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/36.jpg)
…To Smart Phones.
![Page 37: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/37.jpg)
Responsive Design
RESPONSIVE DESIGN, AKA:ReacIve Design
AdapIve Design
Reflexive Design
Fluid Design
Flexible Design
![Page 38: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/38.jpg)
![Page 39: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/39.jpg)
![Page 40: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/40.jpg)
![Page 41: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/41.jpg)
![Page 42: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/42.jpg)
Responsive Design
BUILT ON WEB STANDARDSXHTML or HTML5
CSS3
Media Queries
![Page 43: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/43.jpg)
MEDIA QUERIES
![Page 44: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/44.jpg)
!!!!Hey!!May!I!see!your!site?
MEDIA QUERIES
![Page 45: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/45.jpg)
!!!!Hey!!May!I!see!your!site?
Yep!%But%first,%can%you%tell%me%how%large%your%screen%is?
MEDIA QUERIES
![Page 46: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/46.jpg)
!!!!Hey!!May!I!see!your!site?
Yep!%But%first,%can%you%tell%me%how%large%your%screen%is?
My#screen#is#768#pixels#wide.#
MEDIA QUERIES
![Page 47: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/47.jpg)
!!!!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.
MEDIA QUERIES
![Page 48: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/48.jpg)
![Page 49: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/49.jpg)
Responsive Design
PROBLEMS: SEPARATE MOBILE SITESignificant 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
![Page 50: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/50.jpg)
Responsive Design
SOLUTION: PROGRESSIVE ENHANCEMENTMinimal 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
![Page 51: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/51.jpg)
Responsive Design
FUTURE FRIENDLYBuilt on Web Standards
Delivers styles based on the capabiliIes of the device
Supported by Safari, Firefox, Opera, Chrome and IE8+
![Page 52: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/52.jpg)
A multi-screen solution is not a luxury. It’s a necessity.
![Page 53: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/53.jpg)
CHOOSING THEMES
![Page 54: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/54.jpg)
Responsive Design
WHAT WE WERE LOOKING FORHTML5
CSS3
Responsive layout grid
Device specific controls & budons
Universal transiIons
![Page 55: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/55.jpg)
Drupal Omega Theme
![Page 56: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/56.jpg)
Responsive Design
OMEGA—DEFAULTDrupal 7 Ready
Fully Responsive Grid layouts based
HTML5 or XHTML
Apply custom CSS
hdp://drupal.org/project/omega
![Page 57: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/57.jpg)
Responsive Design
MOJO - ALTERNATIVEDrupal 7 Ready
Responsive Layouts
HTML5 or XHTML
Apply custom CSS
hdp://drupal.org/project/mojo
![Page 58: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/58.jpg)
Responsive Design
F1 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
![Page 59: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/59.jpg)
Device specific menus
![Page 60: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/60.jpg)
Navigation links turned into buttons
![Page 61: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/61.jpg)
Googlehttp://freedomhouse.org/
Web Page Title
Universal Transitions
![Page 62: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/62.jpg)
UX MODULES
![Page 63: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/63.jpg)
Flex Sliderhttp://www.woothemes.com/flexslider/
![Page 64: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/64.jpg)
Flex Sliderhttp://www.woothemes.com/flexslider/
![Page 65: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/65.jpg)
Style Guidehttp://drupal.org/project/styleguide
![Page 66: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/66.jpg)
Fenceshttp://drupal.org/project/fences
![Page 67: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/67.jpg)
THANKS!QUESTIONS AND ANSWERS
67
![Page 68: Breaking the Box: Pushing the Boundaries of UX with Drupal](https://reader034.fdocuments.us/reader034/viewer/2022052322/557874f1d8b42a14628b4d15/html5/thumbnails/68.jpg)