Modern Web Design 2012

Mobile First & Responsive Web Design.

Lecture slides for the course T-121.5300 User Interface Construction at Aalto University.

Transcript

1. 7.11.2012 Jani Mäkelä
2. • IE6 was released in 2001 – Usage share peaked in 2004 at over 90% • Web developers had no reason to support other browsers • Some companies even blocked other browsers – ”Only IE is supported”
3. • IE’s usage share dropped to below 80% by the end of 2007 • Firefox grew to ~15% – Most websites were still only made for IE • IE7 was released 5 year after IE6 in 2006 – ”Our customers don’t need tabbed browsing” – Dropping support for IE6 has only recently become a viable option – IE6 still has a usage share of over 20% in China http://www.ie6countdown.com/
5. • Chrome: 30.01% • IE: 28.77% • Firefox: 19.70% • Safari (desktop + mobile): 9.56% • Opera (desktop + mobile): 3.74% • Android: 3.02% • Mobile total: 12.03%
7. • Mobile web usage is growing very fast • Smartphones are getting better, faster and cheaper • Tablets replacing desktop? • Since mid-2011 people spend more time on their mobile devices than on their PCs • By 2013 Gartner predicts more people will use mobile devices to get online than PCs http://mashable.com/2011/12/16/mobile-website-tips/
9. “The simple guideline is whatever you are doing - do mobile first” Eric Schmidt http://www.lukew.com/ff/entry.asp?1270
10. “The PC is over. It will linger, but increasingly as a relic.” MG Siegler http://massivegreatness.com/mobile
11. • Luke Wroblewski coined the term in 2009 • Mobile first is the idea that websites and apps should be designed and built for mobile first and other device types second http://www.lukew.com/ff/entry.asp?933
12. • Mobile is exploding • Mobile forces you to focus • Mobile extends your capabilities http://www.lukew.com/ff/entry.asp?933
13. • Having a smaller screen forces you to focus on what is important • Just because desktop screens are larger doesn’t mean you need to fill them with unimportant things – Sometimes this referred to as “adding value” • Only add things that are actually important to the user
14. http://xkcd.com/773/
15. • Mobile devices give access to capabilities that are not usually available on desktops – Location detection (GPS / mobile data) – Accelerometer / Gyroscope – Touch screens – Etc.
16. • Native apps have access to more systems resources currently, but more capabilities are being added all the time to mobile browsers • Current advantages of native apps – Better performance – Camera – Address book – Etc. • Native apps are easier to put on the home screen of mobile devices
17. • Doing a native mobile app doesn’t mean you don’t need a mobile optimized website • Making a native app for every platform is most likely not possible – Requires a lot of resources • Links point to websites
18. ”The biggest mistake we made as a company was betting too much on HTML5 as opposed to native” Mark Zuckerberg http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-was-betting-too-much-on-html5/
19. • Which devices and browsers do your users use your site on? • Who, where and why they use your site? • Do users want quicker access to certain tasks on mobile than on the desktop?
20. • Screen sizes are too small to waste on huge amounts of navigation • Get people the information they need first • Relevant and well-placed navigation allows users to explore other parts of the site without taking over too much of the screen
21. • Mobile devices used to surf the web are in growing proportion touch screen phones • Make the icons touch friendly by making them large enough • Apple recommends touch targets of 44 x 44 points – On normal screens 1 point = 1 pixel – On retina screens 1 point = 2 pixels • Microsoft recommends touch targets of 9mm/34px – Minimum recommendation is 7mm/26px – Minumum space between targets is 2mm/8px http://www.lukew.com/ff/entry.asp?1085
22. • Unlike on desktops, hover options are not available on touch screen devices • Options for replacing hover actions – On screen – Tap/swipe – On separate screen – Remove completely
23. • Serve the same website to them as desktop users? • Serve a separate mobile versions of the website? – For example m.hs.fi & mobile.theverge.com
24. • Mobile sites are lighter so they can be loaded with slower connections • Mobile sites have less clutter so the necessary information can be fitted on a small screen – “When people access sites using mobile devices, their measured usability is much higher for mobile sites than for full sites.” http://www.useit.com/alertbox/mobile-vs-full-sites.html
25. • Mobile sites tend to be stripped down versions of the regular site – With mobile usage growing so fast, can you really leave some users without all the features? • Is it useful to have the same content in two different places? – Sending a link to the mobile site will usually take you to the mobile version even on a desktop http://mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/
26. http://xkcd.com/869/
27. • Screen sizes are getting bigger and smaller • Should the site be also optimized for tablets? • Is it reasonable to make 3 or more different versions of the site? • There will always be screen resolutions the site is not optimized for
31. How should you optimize a site for all the different screen resolutions?
33. • Ethan Marcotte coined the term in 2010 • RWD allows a website to scale to all screen resolutions without having to make separate sites for different resolutions • RWD is quickly becoming very popular – For example yle.fi/uutiset & bostonglobe.com http://www.alistapart.com/articles/responsive-web-design/
34. • Fluid layouts • Flexible images • Media queries
35. • CSS for a typical fixed width page #container { margin: 0 auto; width: 960px; } #main { float: left; width: 600px; } #side { float: right; width: 320px; }
36. • The example CSS works well when the horizontal resolution of the screen is 1024 pixels and larger. However… – Mobile and old desktop screen have widths under 1024 pixels – Browser windows are not always full screen – Long pages require scroll bars reducing the usable width • What is needed is a layout that can resize itself according to the size of the viewport
37. • Fluid layouts remove fixed pixel values and replace them with relative values • Relative values are calculated with the following formula: target / context = result
38. • The previous CSS modified to a fluid layout #container { margin: 0 auto; width: 90%; } #main { float: left; width: 62.5%; /* 600px / 960px */ } #side { float: right; width: 33.33333333%; /* 320px / 960px */ }
39. • Text adapts well to fluid layouts • Images by default do not – Images need to scale according to the size of their container
40. • CSS that prevents media from being larger than their container img, embed, object, video { max-width: 100%; }
41. • When scaling images IE7 and Firefox 2 on Windows have problems with image rendering – AlphaImageLoader Filter corrects this for IE7 • Alternatively the overflow property in CSS can be used to crop images http://clagnut.com/sandbox/imagetest/
42. • Websites can adapt to different screen sizes with fluid layouts and flexible images • At some point though the site will still break • No design scales well beyond the context for which it was designed for • Different CSS is needed for the different contexts
43. • CSS2 introduced media types as a solution for different CSS needs of different devices • The different types were – Screen – Print – Handheld – All • Browsers were suppose to identify with one of these types and be served a different CSS file depending on the type
44. • Problems with media types: – At first mobile browsers didn’t support media types – When they finally supported them, few sites had handheld specific CSS files. This lead to mobile browsers to read screen CSS files by default – One CSS file for all handheld devices just isn’t enough
45. • Because of the shortcomings of media types CSS3 introduced media queries • Each media query consists of two parts – A media type – A query consisting of a feature and a value wrapped in parentheses
46. • Example of a media query @media screen and (min-width: 1024px) { body { font-size: 100%; } }
47. • Media queries are used to adapt the website’s CSS for different viewport sizes and other conditions • Changes to the CSS should be made either when the layout breaks or if the layout seems too spacious or tight • It is also normal to use media queries to hide certain elements when going to smaller viewports
48. • It’s a debate that is still going on • While RWD is growing in popularity it is not automatically always the right solution • Decide on a case by case basis http://www.lukew.com/ff/entry.asp?1390 http://www.lukew.com/ff/entry.asp?1631
49. ”Your visitors don’t give a shit if your site is responsive. They don’t care if it’s a separate mobile site. They don’t care if it’s just a plain ol’ desktop site. They do give a shit if they can’t get done what they need to get done. They do give a shit when your site takes 20 seconds to load. They do care when interactions are awkward and broken.” Brad Frost http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
50. • Even with RWD it’s not possible to fit as much information on a mobile screen as it is on a desktop • On the other hand, do desktop users need much more information than mobile users? • Think mobile first
52. • Mobile is where all the growth is currently – Design websites and apps mobile first • Embrace the restrictions of mobile devices – Focus on what is really important to the users • Making native apps can make the experience of services even better, but people will still also use the mobile site
53. http://www.abookapart.com/
54. • http://www.alistapart.com/articles/responsive- web-design/ • http://www.html5boilerplate.com • http://www.initializr.com • http://www.stuffandnonsense.co.uk/projects/ 320andup/ • http://www.responsive.is • http://www.mediaqueri.es
55. Jani Mäkelä @janimakela jani.makela@gmail.com