Breaking the Box: Pushing the Boundaries of UX with Drupal

transcript

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

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

Tablet ExperienceCredit: flickr -‐ shareski / 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

Media Queries

MEDIA QUERIES

!!!!Hey!!May!I!see!your!site?

MEDIA QUERIES

Yep!%But%first,%can%you%tell%me%how%large%your%screen%is?

MEDIA QUERIES

My#screen#is#768#pixels#wide.#

MEDIA QUERIES

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

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/

Style Guidehttp://drupal.org/project/styleguide

Fenceshttp://drupal.org/project/fences

THANKS!QUESTIONS AND ANSWERS

Breaking the Box: Pushing the Boundaries of UX with Drupal

Technology