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 browser and every version… …but should take full advantage of each browser’s capabili8es to deliver the best possible experience.
Responsive DesignCSS3 ADVANTAGES Reduces reliance on images for visual design Adds new visual design capabiliIes Improves interacIon design Increases content versaIlity
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
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
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 DesignTHE DOWNSIDE FOR OLDER BROWSERS No 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 ﬁrst stagnate, then gradually decline. —The Daily Tech 13 september 2011
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 iPhone Store Design opImized for mobile devices Subset of full site targeted at mobile users App can take advantage of speciﬁc device features like geolocaIon and accelerometer
Responsive DesignPROBLEMS: SEPARATE MOBILE SITE OR MOBILE APP Signiﬁcant Extra Development Must target each device separately May require mulIple code bases for diﬀerent pla^orms May require separate content management Expensive to maintain and update
Responsive DesignBUILT ON WEB STANDARDS XHTML or HTML5 CSS3 Media Queries
MEDIA QUERIES!!!!Hey!!May!I!see!your!site? Yep!%But%ﬁrst,%can%you%tell% me%how%large%your%screen%is?
MEDIA QUERIES!!!!Hey!!May!I!see!your!site? Yep!%But%ﬁrst,%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%ﬁrst,%can%you%tell% me%how%large%your%screen%is? My#screen#is#768#pixels# wide.# Then%you%get%the%tablet% styles.
Responsive DesignPROBLEMS: SEPARATE MOBILE SITE Signiﬁcant Extra Development Must target each device separately May require mulIple code bases for diﬀerent pla^orms May require separate content management Expensive to maintain and update
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
Responsive DesignFUTURE FRIENDLY Built on Web Standards Delivers styles based on the capabiliIes of the device Supported by Safari, Firefox, Opera, Chrome and IE8+
A multi-screensolution is not a luxury.It’s a necessity.
Responsive DesignWHAT WE WERE LOOKING FOR HTML5 CSS3 Responsive layout grid Device speciﬁc controls & budons Universal transiIons
Drupal Omega Theme
Responsive DesignOMEGA—DEFAULT Drupal 7 Ready Fully Responsive Grid layouts based HTML5 or XHTML Apply custom CSS hdp://drupal.org/project/omega
Responsive DesignMOJO - ALTERNATIVE Drupal 7 Ready Responsive Layouts HTML5 or XHTML Apply custom CSS hdp://drupal.org/project/mojo
Responsive DesignF1 UX “SPECIAL SAUCE” Custom “out of the box” theme that can be quickly tailored for a customer’s needs Device speciﬁc 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
Web Page Titlehttp://freedomhouse.org/ GoogleUniversal Transitions