68
BREAKING THE BOX Pushing the Boundaries of User Experience with Drupal
| Date post: | 11-Jun-2015 |
| Category: |
Technology |
| Upload: | acquia |
| View: | 1,427 times |
| Download: | 0 times |
BREAKING THE BOXPushing the Boundaries of User Experience with Drupal
NICE TO MEET YOU!
Jason Cranford TeagueManaging Director,User Experience
OUT OF THE BOX?
DRUPAL COMMONS
DRUPAL COMMONS
DRUPAL COMMONS
BE PROGRESSIVE
Pixel Perfect
PIXEL PERFECTWeb 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
browser and every version…
…but should take full advantage of each browser’s capabili8es to deliver the best possible experience.
Responsive Design
CSS3 ADVANTAGESReduces reliance on images for visual design
Adds new visual design capabiliIes
Improves interacIon design
Increases content versaIlity
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
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
800 LB. GORILLACSS3 is NOT supported by any current version of
Internet Explorer Before Version 9
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.
Responsive Design
THE DOWNSIDE FOR OLDER BROWSERSNo rounded corners
No drop shadows
Fewer embellishments
Less advanced interacIon
…BUT the site sIll works!
DESIGN TO RESPOND
“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
By 2015, a multi-screen solution will not be a luxury. It will be a necessity.
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
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
Desktop ExperienceCredit: flickr -‐ MeganMorris / CC License: NC-‐SA
Desktop ExperienceCredit: flickr -‐ MeganMorris / CC License: NC-‐SA
Tablet ExperienceCredit: flickr -‐ shareski / CC License: NC-‐SA
Tablet ExperienceCredit: flickr -‐ shareski / CC License: NC-‐SA
Smartphone ExperienceCredit: flickr -‐ Yourdon / CC License: NC-‐SA
Smartphone ExperienceCredit: flickr -‐ Yourdon / CC License: NC-‐SA
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
From Desktop…Googlehttp://freedomhouse.org/
Web Page Title
…To Tablet…
…To Smart Phones.
Responsive Design
RESPONSIVE DESIGN, AKA:ReacIve Design
AdapIve Design
Reflexive Design
Fluid Design
Flexible Design
Responsive Design
BUILT ON WEB STANDARDSXHTML or HTML5
CSS3
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#pixels#wide.#
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.
MEDIA QUERIES
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
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
Responsive Design
FUTURE FRIENDLYBuilt on Web Standards
Delivers styles based on the capabiliIes of the device
Supported by Safari, Firefox, Opera, Chrome and IE8+
A multi-screen solution is not a luxury. It’s a necessity.
CHOOSING THEMES
Responsive Design
WHAT WE WERE LOOKING FORHTML5
CSS3
Responsive layout grid
Device specific controls & budons
Universal transiIons
Drupal Omega Theme
Responsive Design
OMEGA—DEFAULTDrupal 7 Ready
Fully Responsive Grid layouts based
HTML5 or XHTML
Apply custom CSS
hdp://drupal.org/project/omega
Responsive Design
MOJO - ALTERNATIVEDrupal 7 Ready
Responsive Layouts
HTML5 or XHTML
Apply custom CSS
hdp://drupal.org/project/mojo
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
Device specific menus
Navigation links turned into buttons
Googlehttp://freedomhouse.org/
Web Page Title
Universal 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 ANSWERS
67
