Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FEDeration July 2012
Lessons Learned Building a   Responsive Website
http://www.deloittedigital.com.au
Screenshots: http://www.deloittedigital.com.au/work
Our Approach• Designs for Mobile and Desktop view• Mobile First• JS Plugins    – jQuery 1.7.2    – FitVids jQuery Plugin  ...
CSS• Mobile style sheet written first  (< 507px width)• Media Queries stylesheet  containing Desktop styles (>  507px widt...
CSS• We have 3 main layouts   – Mobile, Tablet, Desktop• We actually have media query breakpoints at   –   0px   –   507px...
Custom JS• Swipe JS   – Not reliant on external frameworks (doesn’t need jQuery)   – Extended to include support for non-w...
Custom JS• Responsive Images   – Completely custom built responsive images script   – Can be extended using data attribute...
JS Frameworks• We have 3 main frameworks so the site works in IE   – Selectivizr      • Makes CSS3 selectors work in older...
Images• 6 different images per image   – Mobile/Mobile 2X   – Tablet/Tablet 2X   – Desktop/Desktop 2X• Very difficult to a...
Issues found• Large amounts of cross browser/device testing required   – A certain device rendered some page elements stra...
What would I do next time?• Less Boilerstrap JS Shimplate Frameworks   – Paul Irish removed Respond JS from the HTML5 Boil...
Other ways to implement• Mobile first, < IE9 get all styles      • Desktop first, < IE9 ignores    – Two stylesheets, one ...
Smoosh them together• Desktop first, < IE9 doesn’t get media queries    – Two stylesheets, one with media queries, one wit...
Which option is the best?
Depends on the client’s needs• Which version of the site has higher priority/larger number of visits  currently?    – This...
No matter if you developdesktop or mobile first…
UX, Content and Designshould be mobile first
Why mobile first?• A responsive website starts with a new content strategy. Content  should be minimized to remove fluff a...
Questions?
Upcoming SlideShare
Loading in …5
×

Lessons learned building a Responsive Website

2,889 views

Published on

Lessons learning from building a fully responsive website for Deloitte Digital (http://www.deloittedigital.com.au)

UPDATE: responsive images script does actually depend on jQuery - updated slide to reflect this.

Published in: Technology, Design
  • Be the first to comment

Lessons learned building a Responsive Website

  1. 1. FEDeration July 2012
  2. 2. Lessons Learned Building a Responsive Website
  3. 3. http://www.deloittedigital.com.au
  4. 4. Screenshots: http://www.deloittedigital.com.au/work
  5. 5. Our Approach• Designs for Mobile and Desktop view• Mobile First• JS Plugins – jQuery 1.7.2 – FitVids jQuery Plugin – Swipe JS (Modified)• JS for IE – Selectivizr – Modernizr – Respond JS Artwork: http://shoze.blogspot.com.au/2011/06/brorwser-wars.html
  6. 6. CSS• Mobile style sheet written first (< 507px width)• Media Queries stylesheet containing Desktop styles (> 507px width)• Site broke between 507px and 768px – Added a new Breakpoint between 508px and 767px – Dropped 3 column to 2 column – Realigned text below/above images instead of beside Screenshots: http://www.deloittedigital.com.au
  7. 7. CSS• We have 3 main layouts – Mobile, Tablet, Desktop• We actually have media query breakpoints at – 0px – 507px – 580px – 768px – 820px – 851px – 980px – 1380px• You need to be flexible
  8. 8. Custom JS• Swipe JS – Not reliant on external frameworks (doesn’t need jQuery) – Extended to include support for non-webkit browsers
  9. 9. Custom JS• Responsive Images – Completely custom built responsive images script – Can be extended using data attributes to resize at custom sizes – Requires jQuery
  10. 10. JS Frameworks• We have 3 main frameworks so the site works in IE – Selectivizr • Makes CSS3 selectors work in older versions of IE – Modernizr • Makes HTML5 elements work, does some feature detection for Video/CSS Transitions/Touch Capabilities – Respond JS • Makes Media Queries work for IE • IMPORTANT: It does this by A JAX loading the CSS again then parsing it – can cause issues with proxies/externally stored CSS/load times
  11. 11. Images• 6 different images per image – Mobile/Mobile 2X – Tablet/Tablet 2X – Desktop/Desktop 2X• Very difficult to automate• Created all images at Desktop 2X, then scaled – In some cases had to reposition/add whitespace to smaller versions of images
  12. 12. Issues found• Large amounts of cross browser/device testing required – A certain device rendered some page elements strangely, but same OS version on another device was fine• iPad downsamples images over 1024px by 1024px – To fix, use PNG (huge file size) or Progressive JPEGs – Quora: http://is.gd/H4HZ59• IE8 JS Frameworks – Everything worked fine on dev/staging – On production IE8 looked like Mobile site only – Combination of the three IE JS frameworks caused Respond JS to stop working, but only when the URL had www at the start. – Newer versions of Respond JS froze IE8 – Removed Font-Face from Modernizr
  13. 13. What would I do next time?• Less Boilerstrap JS Shimplate Frameworks – Paul Irish removed Respond JS from the HTML5 Boilerplate (https://github.com/h5bp/html5-boilerplate/issues/816) • Avoid the extra download cost for IE • Its awkward to develop mobile first • Most commonly used mobile browsers all support media queries anyway – You can get around using selectivizr by being smart about using CSS and writing custom JS to fix the edge cases• Don’t be responsive for < IE9 – IE users don’t deserve it. (plus < IE9 can’t support media queries) – Less issues related to the frameworks/less unknowns
  14. 14. Other ways to implement• Mobile first, < IE9 get all styles • Desktop first, < IE9 ignores – Two stylesheets, one with media – One stylesheet, < IE9 just ignores queries, one the @media queries as it doesn’t withouthttp://nicolasgallagher.co understand it m/mobile-first-css-sass-and-ie/ • Pros• Pros – No reliance on IE JS frameworks – No reliance on IE JS frameworks – Don’t need to use SASS/SCSS – Older mobile browsers see mobile site • Cons – < IE9 gets lots of unnecessary CSS• Cons – Older mobile browsers see – Requires SASS/SCSS desktop site – Can be confusing to build mobile first – < IE9 get lots of unnecessary CSS – Need to think lots about CSS inheritance
  15. 15. Smoosh them together• Desktop first, < IE9 doesn’t get media queries – Two stylesheets, one with media queries, one without – < IE9 only gets the first desktop only stylesheet, the rest get the additional ones with the media queries• Pros – No reliance on IE JS frameworks – Doesn’t require SASS/SCSS – < IE9 doesn’t download additional CSS• Cons – Mobile browsers that don’t support media queries, get the desktop site
  16. 16. Which option is the best?
  17. 17. Depends on the client’s needs• Which version of the site has higher priority/larger number of visits currently? – This should determine mobile/desktop first• Does the client care if < IE9 gets additional page downloads? – Mind you, it would be the same amount of downloads as the other browsers anyway• Does the client care if old mobile browsers see the desktop version? – This should determine mobile/desktop first• Does the site need to work without JavaScript?• Does the site need to be Accessible?
  18. 18. No matter if you developdesktop or mobile first…
  19. 19. UX, Content and Designshould be mobile first
  20. 20. Why mobile first?• A responsive website starts with a new content strategy. Content should be minimized to remove fluff and be more concise.• UX/Design mobile first gives you the important layout/content heirarchy – Tablet/desktop should just be a readjustment to layout• All versions of the site should contain the exact same content – Maybe some superfluous content can be removed from the mobile (e.g. ads)
  21. 21. Questions?

×