Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Creating Large-Scale Responsive Websites
Ähnlich wie Creating Large-Scale Responsive Websites (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Creating Large-Scale Responsive Websites
- 1. Responsive User experience serving two masters: creating large-scale responsive websites Paddy Callaghan and Keith Doyle
- 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.
- 5. Responsive • It works on any browser or device
- 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
- 8. Origins
- 9. Technical Definition • Fluid grids • Flexible images • Media queries
- 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
- 19. www.bradford.ac.uk/undergraduate Work in progress – please report any issues ! (m.callaghan1@bradford.ac.uk) • Approaches for mobile • Should we? • What we did • Feedback from user testing
- 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]
- 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.
- 30. UG Stats
- 31. UG Stats Excluding Windows, Mac, Linux and PlayStation 3
- 33. Before
- 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
- 45. Issues • Image carousel • Tables • Naming of navigation items
- 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."
- 48. Can A Website Serve Two Masters?
- 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