Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Web Design 2012

Jani Mäkelä
November 07, 2012

Modern Web Design 2012

Mobile First & Responsive Web Design.

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

Jani Mäkelä

November 07, 2012

More Decks by Jani Mäkelä

Other Decks in Design


  1. • 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”
  2. • 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/
  3. • 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%
  4. • 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/
  5. “The simple guideline is whatever you are doing - do

    mobile first” Eric Schmidt http://www.lukew.com/ff/entry.asp?1270
  6. “The PC is over. It will linger, but increasingly as

    a relic.” MG Siegler http://massivegreatness.com/mobile
  7. • 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
  8. • Mobile is exploding • Mobile forces you to focus

    • Mobile extends your capabilities http://www.lukew.com/ff/entry.asp?933
  9. • 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
  10. • Mobile devices give access to capabilities that are not

    usually available on desktops – Location detection (GPS / mobile data) – Accelerometer / Gyroscope – Touch screens – Etc.
  11. • 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
  12. • 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
  13. ”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/
  14. • 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?
  15. • 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
  16. • 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
  17. • 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
  18. • 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
  19. • 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
  20. • 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/
  21. • 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
  22. • 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/
  23. • CSS for a typical fixed width page #container {

    margin: 0 auto; width: 960px; } #main { float: left; width: 600px; } #side { float: right; width: 320px; }
  24. • 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
  25. • Fluid layouts remove fixed pixel values and replace them

    with relative values • Relative values are calculated with the following formula: target / context = result
  26. • 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 */ }
  27. • Text adapts well to fluid layouts • Images by

    default do not – Images need to scale according to the size of their container
  28. • CSS that prevents media from being larger than their

    container img, embed, object, video { max-width: 100%; }
  29. • 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/
  30. • 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
  31. • 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
  32. • 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
  33. • 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
  34. • Example of a media query @media screen and (min-width:

    1024px) { body { font-size: 100%; } }
  35. • 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
  36. • 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
  37. ”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/
  38. • 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
  39. • 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