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.

Creating Large-Scale Responsive Websites

2,623 views

Published on

Talk at IWMW 2012

Published in: Technology
  • Be the first to comment

Creating Large-Scale Responsive Websites

  1. 1. Responsive User experienceserving two masters: creating large-scale responsive websites Paddy Callaghan and Keith Doyle
  2. 2. Paddy Callaghan Keith DoyleUniversity of Bradford Navopia@paddycallaghan @keithdoyleABOUT US
  3. 3. The Good Old Days• Best viewed on Netscape• Best viewed on Internet Explorer
  4. 4. Web 2.0• Best used with a mouse or by people with tiny little fingers on a Flash-enabled desktop or laptop web browser at least 1024 (or 1080) pixels wide on a broadband internet connection.
  5. 5. Responsive• It works on any browser or device
  6. 6. Smashing Magazine
  7. 7. Who Is Responsive?• Aberystwyth University• University of Bedfordshire• University of Bradford Undergraduate Study• University of Glamorgan• University of Lancaster• University of Sussex IT Servicesnavopia.co.uk/acuk
  8. 8. Origins
  9. 9. Technical Definition• Fluid grids• Flexible images• Media queries
  10. 10. User Experience Definition• A content website which is complete and usable for any device and connection using a single URL per page
  11. 11. User Experience Definition• A content website which is complete and usable for any device and connection using a single URL per page• Content Websites – Marketing, e-commerce, informational, intranets etc. – Not necessarily applications – Not necessarily site owners with massive budgets
  12. 12. User Experience Definition• A content website which is complete and usable for any device and connection using a single URL per page• Complete – Full content on any device – No ‘view desktop site’
  13. 13. User Experience Definition• A content website which is complete and usable for any device and connection using a single URL per page• Usable = Efficient and Effective – On mobile devices • No zooming or panning required • Works with touch gestures • Use of resized and collapsed elements
  14. 14. User Experience Definition• A content website which is complete and usable for any device and connection using a single URL per page• Devices – Definitely Modern Desktop Browsers, Tablets and Smartphones – Older browsers? Feature phones? Ultra-wide displays?
  15. 15. User Experience Definition• A content website which is complete and usable for any device and connection using a single URL per page• Speed is important – Definitely Network cable / Wi-Fi – Definitely 3G / 4G / Dongle – Dial-up? 1G and 2G?
  16. 16. User Experience Definition• A content website which is complete and usable for any device and connection using a single URL per page• Single URL per page – One Web – Shareable content – Usually without browser sniffing
  17. 17. User Experience Definition• A content website which is complete and usable for any device and connection using a single URL per page
  18. 18. Responsive Design University of Bradford http://www.bradford.ac.uk @paddycallaghanm.callaghan1@bradford.ac.uk
  19. 19. www.bradford.ac.uk/undergraduateWork in progress – please report any issues !(m.callaghan1@bradford.ac.uk)• Approaches for mobile• Should we?• What we did• Feedback from user testing
  20. 20. Approaches for mobile• Do nothing – my desktop site works• App – for specific data this works, not for website• Mobile website – Two separate designs must be maintained and updated. They can easily fall out of sync or out of date. – Often, two distinct sets of content must be maintained. – Not all content is generally available to mobile users compared to desktop users. – User-​​agent detection doesn’t always work, so the wrong site gets delivered• Responsive website – Same content – Design maintained in same place
  21. 21. State of MobileHEERA Mobile Workshop(Higher Education External RelationsAssociation)The Mobile Web: What does it really mean?(7th December 2011)
  22. 22. The global market• There are 5.3bn global phone subscribers, 77% of the world population [source: econsultancy, 2011]• Growth is led by China and India [source: econsultancy, 2011]• Feature phone sales still outnumber smartphone sales by 4:1 [source: econsultancy, 2011]• Smartphones are the fastest growing segment with Nokia expected to be replaced as the top OS by Android in 2011 [source: econsultancy, 2011]
  23. 23. UK Market• Smartphone usage is growing faster in the UK than in Europe (with the iPhone and Android dominant)• Nearly half of UK adults now own a smartphone [source: Kantar World Panel via the Guardian, November 2011]• In October 2011, Apple’s iPhone took a 42.8% share of smartphone sales due to the launch of the newest model, the iPhone 4S [source: Kantar World Panel via the Guardian, November 2011]• Over the last three months, Android dominated with a 46% share of the market [source: Kantar World Panel via the Guardian, November 2011]• Blackberry is the third player in the UK smartphone sector. Microsoft & Nokia are hoping an alliance reverses their fortunes
  24. 24. However…• These figures are dominated by apps, social networking and mobile gaming.What about the web sites?
  25. 25. HEERA Study – 21 HE’s took partMobile visits: Aug 10 - Sep 2011
  26. 26. HE v’s CommercialBlackberry issue, not being detected in Google analytics. Graph has been adjusted below.We as an institution were average
  27. 27. What about the UoB Analytics• Screen resolution showed small to tablet size
  28. 28. Decision• Mobile use is on the up• Trends show ‘smart phone’ use is up• Outcome: Try a responsive design• Because of audience we have chosen to trial Undergraduate site.
  29. 29. UG Stats
  30. 30. UG StatsExcluding Windows, Mac, Linux and PlayStation 3
  31. 31. UG Stats• Clearing
  32. 32. Before
  33. 33. What we did• Keith at Navopia• New IA and design patterns• Designs/grids mocked up for mobile first
  34. 34. How do we achieve this• Framework(s) Foundation: – Less Framework 4 • Allowed easy mobile & – Foundation non mobile classes – MQ Framework • Built in image carousel – Golden Grid • Ability to push and pull content to reorder very – 320 and up easily – Amazium • Would fit the designs! – ….
  35. 35. Using the framework• Choose who to target using CSS Media Queries• iPad – worked just like the desktop website (happy with this)• Target mobile devices only
  36. 36. Beyond the Framework – Mobile<meta name="viewport" content="width=device-width; initial-scale=1.0">Setting the initial-scale to 1 overrides the default to resize images proportionally, while leavingthem as is if their width is the same as the device’s width (in either portrait or landscape mode)
  37. 37. Beyond the Framework - Mobile• Patterns: Auto-hide address bar on iPhone/ Android 1px drop If previous page = UG drop further than 1 px
  38. 38. Beyond the Framework - Mobile• Hide main University nav (links to outside of UG site)• Move site nav after content (actually reverse - for SEO, we pull back up for desktop)• Skip to navigation link Skip not jump! Allow them to see the page, may have missed something
  39. 39. Beyond the Framework - Mobile• Fonts – go smaller than you think – iPhone – retina display – Android <meta name="viewport" content="target-densitydpi=device- dpi" /> Ability to customize browser scaling for high resolution (HDPI) screens if the phone supports it
  40. 40. Beyond the Framework - MobileContent• Mobile users don’t want to browse, they want to find• Don’t port all data across; port what is relevant to a mobile user (not always) – top nav bar, utility links, some image effects/galleries etc.• Scrolling horizontally is bad, but vertically not so. We are getting used to it, e.g facebook, twitter and the like• Our main reason for the website is information, if we can provide this in a way that is usable, then we should• We can use the breadcrumb better
  41. 41. Beyond the Framework - Mobile• Breadcrumb more usable• Skip to navigation• Videos using html5 and fall back
  42. 42. Whatusersdo – usability testing• Fortunate to get some usability testing done by Whatusersdo• Tested on – Desktop – iPhone – iPad – Samsung Galaxy
  43. 43. Feedback from videos
  44. 44. Issues• Image carousel• Tables• Naming of navigation items
  45. 45. Thanks"...very attractive as a student to see it workingon my iPhone, and it’s an institution thatrelates to me as it can work inmy format and does appreciate whatI want out of a university and how it can benefitme."
  46. 46. Keith DoyleNavopiaSTRATEGY
  47. 47. Can A Website Serve Two Masters?
  48. 48. Anti-Patterns• A desktop-first mentality• On a smartphone – Large text on a mobile device – Navigation filling the screen – Excessive branding – Excessive scrolling – Missing content – Reduced content / graphics• A Responsive site is not a mobile site
  49. 49. Strategy• Responsive as Standard• No Flash (sort of)• HTML5 & CSS3• Be adaptive and focus first on: – Modern Browsers – Modern Devices – Good Connection Speed• Phased Introduction
  50. 50. Paddy Callaghan Keith DoyleUniversity of Bradford Navopia@paddycallaghan @keithdoyleTHANK YOU

×