Creating Large-Scale Responsive Websites

Responsive User experienceserving two masters: creating large-scale responsive websites Paddy Callaghan and Keith Doyle

Paddy Callaghan Keith DoyleUniversity of Bradford Navopia@paddycallaghan @keithdoyleABOUT US

The Good Old Days• Best viewed on Netscape• Best viewed on Internet Explorer

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.

Responsive• It works on any browser or device

Smashing Magazine

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

Origins

Technical Definition• Fluid grids• Flexible images• Media queries

User Experience Definition• A content website which is complete and usable for any device and connection using a single URL per page

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

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’

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

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?

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?

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

User Experience Definition• A content website which is complete and usable for any device and connection using a single URL per page

Responsive Design University of Bradford http://www.bradford.ac.uk @paddycallaghanm.callaghan1@bradford.ac.uk

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

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

State of MobileHEERA Mobile Workshop(Higher Education External RelationsAssociation)The Mobile Web: What does it really mean?(7th December 2011)

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]

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

However…• These figures are dominated by apps, social networking and mobile gaming.What about the web sites?

HEERA Study – 21 HE’s took partMobile visits: Aug 10 - Sep 2011

HE v’s CommercialBlackberry issue, not being detected in Google analytics. Graph has been adjusted below.We as an institution were average

What about the UoB Analytics• Screen resolution showed small to tablet size

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.

UG Stats

UG StatsExcluding Windows, Mac, Linux and PlayStation 3

UG Stats• Clearing

Before

What we did• Keith at Navopia• New IA and design patterns• Designs/grids mocked up for mobile first

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! – ….

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

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)

Beyond the Framework - Mobile• Patterns: Auto-hide address bar on iPhone/ Android 1px drop If previous page = UG drop further than 1 px

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

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

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

Beyond the Framework - Mobile• Breadcrumb more usable• Skip to navigation• Videos using html5 and fall back

Whatusersdo – usability testing• Fortunate to get some usability testing done by Whatusersdo• Tested on – Desktop – iPhone – iPad – Samsung Galaxy

Feedback from videos

Issues• Image carousel• Tables• Naming of navigation items

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."

Keith DoyleNavopiaSTRATEGY

Can A Website Serve Two Masters?

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

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

Paddy Callaghan Keith DoyleUniversity of Bradford Navopia@paddycallaghan @keithdoyleTHANK YOU

http://iwmw.ukoln.ac.uk	573
http://storify.com	96
http://lanyrd.com	43
http://amplifiedeventbackupblog.wordpress.com	28
http://eventifier.co	17
http://eventamplifier.wordpress.com	3
http://us-w1.rockmelt.com	1
http://bottlenose.com	1

Creating Large-Scale Responsive Websites

by Keith Doyle on Jun 19, 2012

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 762

Statistics

Creating Large-Scale Responsive Websites Presentation Transcript