Responsive design allows websites to be viewed on any device by automatically adjusting layouts. The document discusses creating large-scale responsive websites that serve both desktop and mobile users well. It defines responsive design as providing complete content across all devices and connections using a single URL. While technical aspects like fluid grids and media queries are important, usability must be a top priority through efficient and effective layouts on mobile. The strategy discussed is to make responsive design the standard, focus on modern browsers and devices first, and introduce changes in phases.
2. Paddy Callaghan Keith Doyle
University of Bradford Navopia
@paddycallaghan @keithdoyle
ABOUT US
3. The Good Old Days
• Best viewed on Netscape
• Best viewed on Internet Explorer
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.
7. Who Is Responsive?
• Aberystwyth University
• University of Bedfordshire
• University of Bradford Undergraduate Study
• University of Glamorgan
• University of Lancaster
• University of Sussex IT Services
navopia.co.uk/acuk
10. User Experience
Definition
• A content website which is complete and
usable for any device and connection
using a single URL per page
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. 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. 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. 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. 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. 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. User Experience
Definition
• A content website which is complete and
usable for any device and connection
using a single URL per page
18. Responsive Design
University of Bradford
http://www.bradford.ac.uk
@paddycallaghan
m.callaghan1@bradford.ac.uk
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. State of Mobile
HEERA Mobile Workshop
(Higher Education External Relations
Association)
The Mobile Web: What does it really mean?
(7th December 2011)
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.
24. 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
25. However…
• These figures are dominated by apps, social
networking and mobile gaming.
What about the web sites?
26. HEERA Study – 21 HE’s
took part
Mobile visits: Aug 10 - Sep 2011
27. HE v’s Commercial
Blackberry issue, not being detected in Google analytics. Graph has been adjusted below.
We as an institution were average
28. What about the UoB
Analytics
•
Screen resolution showed small to tablet size
29. 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.
34. What we did
• Keith at Navopia
• New IA and design patterns
• Designs/grids mocked up for mobile first
35. 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!
– ….
36. 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
37. 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 leaving
them as is if their width is the same as the device’s width (in either portrait or landscape mode)
38. Beyond the
Framework - Mobile
• Patterns:
Auto-hide address bar on
iPhone/ Android 1px drop
If previous page = UG
drop further than 1 px
39. 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
40. 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
41. Beyond the
Framework - Mobile
Content
• 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
42. Beyond the
Framework - Mobile
• Breadcrumb more usable
• Skip to navigation
• Videos using html5 and
fall back
43. Whatusersdo –
usability testing
• Fortunate to get some usability testing done
by Whatusersdo
• Tested on
– Desktop
– iPhone
– iPad
– Samsung Galaxy
46. Thanks
"...very attractive as a student to see it working
on my iPhone, and it’s an institution that
relates to me as it can work in
my format and does appreciate what
I want out of a university and how it can benefit
me."
49. 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
50. 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
51. Paddy Callaghan Keith Doyle
University of Bradford Navopia
@paddycallaghan @keithdoyle
THANK YOU
Hinweis der Redaktion
Ask who has got a responsive site?Who is planning a responsive site?
May 25 2010The original: http://www.alistapart.com/articles/putyourcontentinmypocket/ August 28 2007
Full Content - Does not include branding - Does not include navigation elements - Does include images
Touch Gestures - hover - proximity
Older Browsers: - e.g. IE6 - May rely on adaptive techniques (Progressive enhancement)Ultra-wide displays - May have more padding
Dial-up: - what do they do now?1G and 2G: - e.g. Edge - what is the use case?
Browser sniffing: - not really responsive
Hi everyone, My name is Paddy Callaghan and I’m going to tell you a little about making one of our sites responsive.The site is by no means finished, we are always looking to improve so if you have any feedback please do let me know.I’m basically going to cover our investigation stage and what we did as an outcome from that.
Ok, so here is basically my take on what you can do for mobile usersNothingAn appA mobile specific websiteOr build a responsive one.
HEERA who are the Higher Education External Relations AssociationConducted some research last year to see what the current state was for mobile usage and in particular how HE fits in with this.Around 21 HE institutions submitted data of which we were one.
As expected, the global market is showing a lot of mobile use.But for me the most important part here is that even though feature phones still outsell smart phones (at the time of this research) It is smart phones that is the fastest growth area.
And as this shows, mobile internet users are predicted to be more than desktop some time near 2014.
And here are some more numbers showing the UK market and as expected it is a swing between Apple and Android platforms.
Majority of them figures though take into account apps, social networking and gaming, so what about websites?
This graph shows the mobile visits for the 21 HE websitesThe trend is rising as you can see
But we are still a lot off of commercial sites but you can see both following the same trendAlso, for all of you looking into your own stats, there was an issue with Blackberry during this time where the browser was not identified by Google properly and was sometimes classed as (not set)This has since been fixed by Blackberry
Smart phone OS’s are on the up with the expected increase being various apple products and AndroidSymbian OS is the only one showing any real declineThe screen sizes ranged from small to tablet
Armed with these numbers and trends we decided that we needed to think about tackling mobile, and because of rise in smart phone use in particular, we decided to try a responsive approach, and then that we try this on our Undergraduate site thinking of all the prospective students using the smart phones.
So in the year before we did our new design, we see roughly one and a half million page views, a million unique with average time on page of just over a minute
If I removed Windows, Mac, Linux (and of course Playstation 3 – this surprised me) you can see the number of those visitors using a Mobile OS is quite high, much less than the whole picture (roughly 5%)but still too great to ignore by far, and also that the average time on page is slightly greater at 1.20 this is I think the commuters on the bus (to refer back to a previous talk) or at home on the sofa???
In fact, over clearing week we had 8 thousand unique page views alone.
Ok, so before the redesign we did nothingThe site worked fine, but needed to be constantly zoomed in and out.User experience suffered.
We decided to work with Keith to plan developing a responsive website.We both agreed on his idea that one site can serve multiple devices which for us would mean not developing a new version of a site and only having to maintain oneHe designed some ideas, layouts and IAs, using the mobile first principal and gave us ideas on some ‘patterns’ for better usability
There were many ways to achieve this, however as a lot of work has been done in the web community on frameworksSo we decided to pick one that met our needs and develop that furtherBased on the mock ups, structure and what we wanted to achieve the Foundation Framework fitted the bill.
When we tested our site on Ipads, the desktop version almost worked perfectly as is.So we decided not to put time in effort making changes for change sake, so with the exception of a few navigation css tweaks it was left pretty much the same as the desktop version.So then in our media queries, we could just target mobile screen sizes
There are some extra things that will need to be done as our site is unique to us, as is yours to you and so we built patterns and features onto the frameworkAlso, there are things that the framework didn’t automatically come with.For example, my download of foundation did not have the viewport setting of initial scale = 1 to override the default image sizing. This combined with percentages in the css will allow the images to scale per device
There is also techniques to make better use of the visible viewing area, in particular iphones that keep the address bar on page loadSimply by doing an auto scroll of 1px the phone will detect movement and the address bar will vanish.I have tried a subtle extra trick also. Seeing as the top is made up of the banner, logo and university links it is taking up space that is not always needed. So I have made tried to make it auto scroll further if the previous page was an undergraduate page. But not taking them straight to the content. I wanted the users not to miss anything in its entirety so they can see the bottom of the logo and have no need to scroll up unless they wanted to.Which brings me to the ....
... The navigation options.The top main nav for the university is not necessary to be always visible, we are after all trying to keep the visitors within the UG site. And only link them to other university areas when the need is there so we serve the menu as a select field.One of the quick easy features for the Foundation framework is that it allows you to very easily switch the order of content in css. So we displayed the navigation at the bottom after the page content.We didn’t actually do this switch so to speak for mobile, we actually applied it for desktop and tablet. Having the ‘copy’ as close to the top of the html document is better for SEO so in our html it comes first anyway. We added to the mobile version a skip to nav link. I opted for it to scroll, again so that the copy of the page was always visible. A user may have thought they were on the wrong page only to see the content and realise they weren’t, or perhaps just may simply see something that they then decide they did want to see, perhaps a video.
What we also found was that the default framework didn’t make all the fonts as small as they can be.Devices like the iPhone with the retina display will allow you to go smaller than you thought and be very readable.And with android devices you could also allow the phones that support higher resolution screens to customise scaling also
One of the big ones for us though was what to do around content.A lot of people think that you need different shorter version and/or a specific mobile site with mobile content.We disagreed with that, and as the main point of our site is information we decided to not really hide or replace any content. After all, if it is too much content then there is too much content for the desktop also. This all came about when building our site structure so that we can leave the content the same.Although, if there is a bit of scrolling, it is not that strange these days, the day of the page fold for content I think is gone. Just look at the amount of scrolling we do on twitter and facebookAlso we can make better use of the breadcrumb, which sometimes gets overlooked on desktop browsers.....
Here is an example of a page.The breadcrumb now frames the page almost acting as a header and title area, plus allowing the user to quickly go back, or to skip straight to navigation for other areas.We are also currently finishing off a new video template based on a combination of geoIP location and html5 with video fallback. This will hopefully mean that when it is done our videos should work across all mobile browsers, and also give us the option to serve them in places such as China as we predominantly use YouTube which is blocked.
We were very lucky thanks to Keith and Lee from whatusersdo to get some remote usability testingThe site was tested on desktop, Iphone, Ipad and a Samsung
First thing, the overall response and comments were very positive much to my reliefDesktop – won’t say too much about this as this is about responsive and the feedback was generally positive – however there are things we are going to change based on the results so that is greatIpad – the user that tested this was also one of the iphone testers, and so he knew already that the mobile was responsive. His comments regarding the Ipad were positive saying that there was no need not to serve the desktop version as it fit and worked perfectly – although it was only one review, I felt a little glad about my choice to leave it like that.Phones – Noticed that the site was responsive, liked this and on the occasion when the links went to a none responsive site outside of the UG area they felt a little disappointed.I would seriously get these tests done if you can, they were very eye opening.
The tests did highlight some things to look at, some minor concerns.The image carousel loads quite slow and stacked on top of each other at first. Although, some users did use this area as a navigation object which surprised me I think we will look at serving something different there.Tables, we actually made the table slightly smaller so that it fits on the display better – there is also css tricks you can do to allow horizontal scrolling for tables which will allow you to keep all the data in place and not shrink the table text any more than you want to. However, based on one particular feedback, about having to scroll back up to see the column header I am thinking of flipping it on its axis for mobile and repeating the headings with each cell.Also, we noticed that on mobiles, the menu items need to be better named. For example we asked the users to find out about research, and they didn’t seem to find the correct page as it said ‘researchers’. On the desktop you’re happy enough to try a page, but on a mobile you could see and hear the users feeling a little lost with this particular task.
And to finish off with, this was a quote from one user that I think really validates the effortThanks
Responsive as standard - Not applications - Not people with huge budgets - May involve a mobile-first redesign (BBC Sport home page)Adaptive - Mostly about modern desktop browsers, tablets and smartphones - But not blackberrys - If speed is an issue, maybe it’s an application and should have a separate mobile site, e.g. About UoB