Responsive Design for Enterprise. July 2012

Transcription

1 Responsive Design for Enterprise July 2012

2 Contents Progressive enhancement 3 Responsive design 6 Combine the two 23 Lessons Learned: Deloitte Digital website 27 Impact on Time and Cost 39

3 Responsive Design is a subset of Progressive Enhancement And we ve been doing Progressive Enhancement for years

4 An escalator can never break: it can only become stairs - Mitch Hedberg

5 What is Progressive Enhancement Build a site for all browsers (and now devices) that supports the minimum. Progressively enhance the experience if the browser/device supports it Traditionally Now JS vs No-JS Touch vs Non-Touch Source: Deloitte Digital

6 Responsive websites respond to their environment

7 Deloitte Digital Source: 7

8 In the past: Elements on the page that ADAPT based on browser size The navigation on Bankwest.com.au repositions itself if you have a wide screen monitor Deloitte Digital

9 Now: Fully RESPONSIVE with full fluid width layout for all sizes The Deloitte Digital website was developed to be fully responsive up to 960px grid, then stops Deloitte Digital

10 Why should we care?

11 Over 12 million consumers are using smartphones in Australia That s over 50% of the population

12 By 2014, more Australians will access digital services via a smartphone than a computer.

13 A user should be able to see the same content regardless of device However the layout of the content could change depending on the form factor

14 Don t hide, reflow Mostly fluid Multi column layout with larger margins on big screens Fluid grid layout Stacks content vertically on mobile Most common pattern Deloitte Digital uses this approach (mostly) Source: Luke Wroblewski - Deloitte Digital

15 choiceresponse.com Deloitte Digital fivesimplesteps.com

16 Don t hide, reflow Column Drop Multi column layout for wider screens Drops columns as you get smaller Overall size of elements remains mostly the same size until you get down to the mobile view Source: Luke Wroblewski - Deloitte Digital

17 modernizr.com Deloitte Digital owltastic.com

18 Don t hide, reflow Layout shifter Multiple layouts for each screen size Requires significant amount of work for each design Is most effective Source: Luke Wroblewski - Deloitte Digital

19 foodsense.is Deloitte Digital bostonglobe.com

20 Don t hide, reflow Off Canvas Space off the screen is still used and based on actions on the page, the entire screen moves to show the new content Becoming quite popular on mobile apps and websites: Facebook (Navigation on the left) Google (list of services up top) Difficult to reach accessibility requirements Source: Luke Wroblewski - Deloitte Digital

21 barakobama.com Deloitte Digital Source: Luke Wroblewski

22 Should we serve all content to all devices?

23 It s becoming easier to move between devices Google Chrome on iphone, ipad, Android and Desktop have the ability to share tabs being viewed on other devices. ios 6 and Safari on OSX Mountain Lion will support this natively Deloitte Digital

24 BBC.co.uk Two different sites, standard and mobile doesn t redirect between sites Deloitte Digital

25 YouTube Separate sites for desktop and tablet and mobile (uses server side detection to serve slightly different content for tablet/mobile) redirects between each automatically Deloitte Digital

26 Boston Globe Fully responsive same content on each device, reflowed Deloitte Digital

27 Smashing Magazine Removes non-required content (e.g. ads) for smaller devices Deloitte Digital

28 Putting it all together Progressive Enhancement + Responsive Design = Awesome

29 How do you approach it? Build for Base Standard Accessibility Old versions of Internet Explorer Enhance for Browser Using CSS and JavaScript Respond to Environment (Device capabilities) Using JavaScript Deloitte Digital

30 Detecting touch and enhance the UX By detecting that the device viewing the website can support touch and multi-touch gestures The gallery on the Deloitte Digital website detects swipe gestures, but on desktop you can click the arrows instead. Deloitte Digital

31 Take a leaf out of Microsoft s book The Mobile/Tablet design methodology is to: Focus on the content Simplify the information design to suit the device Why can t the same apply to the desktop? Microsoft thinks so, and they are gambling on it with Windows 8 Deloitte Digital

32 What functionality can we use with HTML5? Currently: Geolocation Orientation (Accelerometer) Touch Gestures Near future (but not yet): Media Capture (Camera) Distant future: Augmented Reality? Deloitte Digital

33 Lessons learned building a responsive site

34 Our Approach Purely Agile (Around 6 weeks) Wireframes produced for mobile, tablet and desktop Designs produced for mobile and desktop view Worked very closely with designers during development Mobile build first, queries for other sizes Deloitte Digital

35 CSS Mobile stylesheet written first (<507px) Media Queries written for desktop (>507px) Layout broke between 507px and 768px Added breakpoints for tablet between 508px and 767px Readjust columns from 3 to 2 columns (aligned content above or below images) We have eight breakpoints You need to be flexible Deloitte Digital

36 Responsive Images JavaScript Custom built JavaScript library (requires jquery) to swap images out based on screen size and pixel density Only loads the exact image required other scripts always load the mobile version first, then swap it out with the higher resolution Site looks great on Retina display MacBook Pro on day one Deloitte Digital

37 Images 6 different images per image Mobile/Mobile 2x Tablet/Tablet 2x Desktop/Desktop 2x Very difficult to automate Some newer CMS s have image manipulation tools included We didn t just scale, but also have different images for each device Created all images at 2x first, then scaled down Deloitte Digital

38 Which way should you build your site? Which version of the site has higher priority/larger number of visits currently? This should determine mobile/desktop first Do you 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? Deloitte Digital

39 Responsive vs. Device Experiences Responsive web design Single URL for all versions of the site Use if: You want layout adjustment across devices You can live without complete optimisation for specific devices You don t have access to serverside solutions You don t trust device detection Device Experiences URL for each version of the site Use if: You want maximum optimization for each type of device You want the ability to serve completely different UX and features to each type of device You re comfortable with device detection Source: Luke Wroblewski - Deloitte Digital

40 No matter if you build mobile or desktop first UX and Content should be the first thing you think about

41 Content strategy A responsive website starts with a new content strategy. Content should be to the point, concise and not contain fluff to make it fill up a page. Developing your UX/Design mobile first gives you the important layout/content hierarchy Tablet/desktop should just be a readjustment to layout All versions of the site should contain the same content for the user Superfluous content can be hidden from smaller screens (e.g. ads) Deloitte Digital

42 How does this impact the cost/time of build Not as much as you would think

43 Increase in time and cost? In Development Slightly Increased UX and Functional Spec to take impact of breakpoints for various devices into consideration Significantly Increased Design and Front-End Development (FED need to be involved from the start, and Designers needs to be involved during development) Minimal additional effort for Back-End Development Significantly increased Testing (Cross Browser and Cross Device) In Production No additional effort for writing content Significant increase in image production (6x images for each image) Deloitte Digital

44 However, compare this to multiple sites In Development Significantly less UX/Functional requirements time required. Only one functional specification required, wireframes are reflow of each site Less Design work required, as you are reflowing the assets already created for other devices instead of two/three separate designs Less Front-End Development required, you are starting from a baseline site, and just making changes for each version Significantly decreased Back-End Development. You only need to make one back end site instead of multiple Similar amount of functional and interface testing (Cross Browser and Cross Device) Significantly less Accessibility testing In Production Need to write content specifically for each site Same amount of time required for image production Deloitte Digital

45 What about page tracking? We now can accurately track the total number of visits to our site across all devices, rather than needing to look between different analytics accounts/sites We can use existing tracking tools like Google Analytics or Omniture. We can filter the results: By individual device By operating system By screen resolution By custom attributes that we can pass through (e.g. touch) Deloitte Digital

46 Thank you, Questions? Deloitte Digital

47 General information only This presentation contains general information only, and none of Deloitte Touche Tohmatsu Limited, its member firms, or their related entities (collectively the Deloitte Network ) is, by means of this presentation, rendering professional advice or services. Before making any decision or taking any action that may affect your finances or your business, you should consult a qualified professional adviser. No entity in the Deloitte Network shall be responsible for any loss whatsoever sustained by any person who relies on this presentation. About Deloitte Deloitte refers to one or more of Deloitte Touche Tohmatsu Limited, a UK private company limited by guarantee, and its network of member firms, each of which is a legally separate and independent entity. Please see for a detailed description of the legal structure of Deloitte Touche Tohmatsu Limited and its member firms. Deloitte provides audit, tax, consulting, and financial advisory services to public and private clients spanning multiple industries. With a globally connected network of member firms in more than 150 countries, Deloitte brings world-class capabilities and deep local expertise to help clients succeed wherever they operate. Deloitte's approximately 170,000 professionals are committed to becoming the standard of excellence. About Deloitte Australia In Australia, the member firm is the Australian partnership of Deloitte Touche Tohmatsu. As one of Australia s leading professional services firms. Deloitte Touche Tohmatsu and its affiliates provide audit, tax, consulting, and financial advisory services through approximately 5,400 people across the country. Focused on the creation of value and growth, and known as an employer of choice for innovative human resources programs, we are dedicated to helping our clients and our people excel. For more information, please visit our web site at Liability limited by a scheme approved under Professional Standards Legislation. Member of Deloitte Touche Tohmatsu Limited 2012 Deloitte Touche Tohmatsu. All rights reserved.

48