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.

1. FEDeration July 2012

2. Lessons Learned Building a
Responsive Website

3. http://www.deloittedigital.com.au

4. Screenshots: http://www.deloittedigital.com.au/work

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. 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. 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. Custom JS
• Swipe JS
– Not reliant on external frameworks (doesn’t need jQuery)
– Extended to include support for non-webkit browsers

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. 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. 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. 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. 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. 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. 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. Which option is the best?

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. No matter if you develop
desktop or mobile first…

19. UX, Content and Design
should be mobile first

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. Questions?