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

Modern Web Design 2013

Jani Mäkelä
November 11, 2013

Modern Web Design 2013

Mobile First & Responsive Web Design.

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

Jani Mäkelä

November 11, 2013
Tweet

More Decks by Jani Mäkelä

Other Decks in Design

Transcript

  1. THE INTERNET EXPLORER YEARS •  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. THE FALL OF IE •  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 h"p://www.ie6countdown.com/  
  3. CURRENT USAGE SHARES (11/2013)   •  Chrome: 41.55% •  IE:

    27.98% •  Firefox: 18.09% •  Safari: 8.37% •  Opera: 1.2% •  Other: 2.81% h"p://gs.statcounter.com/#browser-­‐ww-­‐monthly-­‐201311-­‐201311-­‐bar  
  4. THE MOBILE WEB •  Mobile web usage is growing very

    fast –  Since mid-2011 people spend more time on their mobile devices than on their PCs –  In 2011 Gartner predicted that by 2013 more people will use mobile devices to get online than PCs –  At the current growth rate mobile usage will overtake desktop browsing in about 5 years •  Mobile only users –  Phones and tablets are replacing desktops h"p://mashable.com/2011/12/16/mobile-­‐website-­‐Eps/   h"p://blogs.hbr.org/2013/05/the-­‐rise-­‐of-­‐the-­‐mobile-­‐only-­‐us/  
  5. “The simple guideline is whatever you are doing - do

    mobile first” Eric Schmidt h"p://www.lukew.com/ff/entry.asp?1270  
  6. “I think PCs are going to be like trucks. Less

    people will need them. And this is going to make some people uneasy.” Steve Jobs h"p://www.engadget.com/2010/06/01/steve-­‐jobs-­‐live-­‐from-­‐d8/  
  7. “The PC is over. It will linger, but increasingly as

    a relic.” MG Siegler h"p://massivegreatness.com/mobile  
  8. MOBILE FIRST •  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 h"p://www.lukew.com/ff/entry.asp?933  
  9. WHY GO MOBILE FIRST? •  Mobile is exploding •  Mobile

    forces you to focus •  Mobile extends your capabilities h"p://www.lukew.com/ff/entry.asp?933  
  10. FOCUS •  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 –  Only add things that are actually important to the user •  The mobile version of your website is essentially a priority list
  11. MOBILE CAPABILITIES •  Mobile devices give access to capabilities that

    are not usually available on desktops –  Location detection (GPS / mobile data) –  Accelerometer / Gyroscope –  Touch screens –  Etc.
  12. NAVITE VS WEB •  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
  13. NAVITE VS WEB •  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
  14. ”The biggest mistake we made as a company was betting

    too much on HTML5 as opposed to native” Mark Zuckerberg h"p://techcrunch.com/2012/09/11/mark-­‐zuckerberg-­‐our-­‐biggest-­‐mistake-­‐with-­‐mobile-­‐was-­‐beNng-­‐too-­‐much-­‐on-­‐html5/  
  15. ” Web apps are the best way to reach the

    most possible people with the least effort; native apps are the best way to create the best possible experience.” John Gruber h"p://daringfireball.net/2013/04/web_apps_naEve_apps  
  16. KNOW YOUR USERS •  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?
  17. CONTENT FIRST •  Screen sizes are too small to waste

    on huge amounts of navigation, ads, etc. •  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
  18. TOUCH SCREENS •  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 h"p://www.lukew.com/ff/entry.asp?1085  
  19. EXAMPLE OF MOBILE RESTRICTIONS: HOVER •  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
  20. IMPLEMENTING A SEPARATE MOBILE SITE •  One way to serve

    the needs of mobile users is to create a separate mobile version of the site •  For example –  mobile.theverge.com
  21. THE PROS OF SEPARATE MOBILE SITES •  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.” h"p://www.useit.com/alertbox/mobile-­‐vs-­‐full-­‐sites.html  
  22. THE CONS OF SEPARATE MOBILE SITES   •  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 •  Creating a separate site causes the content to have two URLs h"p://mobile.smashingmagazine.com/2012/04/19/why-­‐we-­‐shouldnt-­‐make-­‐separate-­‐mobile-­‐websites/  
  23. OPTIMIZING FOR MORE DEVICES?   •  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
  24. RESPONSIVE WEB DESIGN •  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 •  A few examples of RWD –  www.yle.fi/uutiset –  www.bostonglobe.com h"p://www.alistapart.com/arEcles/responsive-­‐web-­‐design/  
  25. FIXED LAYOUTS •  CSS for a typical fixed width page

      #container  {    margin:  0  auto;    width:  960px;   }   #main  {    float:  left;    width:  600px;   }   #side  {    float:  right;    width:  320px;   }    
  26. FIXED LAYOUTS •  The example CSS works well when the

    horizontal resolution of the screen is 1024 pixels and larger. However… –  Mobile and old desktop screen typically 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
  27. FLUID LAYOUTS •  Fluid layouts remove fixed pixel values and

    replace them with relative values •  Relative values are calculated with the following formula: target / context = result  
  28. FLUID LAYOUTS •  The previous CSS modified to a fluid

    layout   #container  {    margin:  0  auto;    width:  93.75%;  /*  960px  /  1024px  */   }   #main  {    float:  left;    width:  62.5%;  /*  600px  /  960px  */   }   #side  {    float:  right;    width:  33.33333333%;  /*  320px  /  960px  */   }  
  29. FLEXIBLE IMAGES •  Text adapts well to fluid layouts • 

    Images by default do not –  Images need to scale according to the size of their container
  30. FLEXIBLE IMAGES •  CSS that prevents media from being larger

    than their container img,   embed,   object,   video  {    max-­‐width:  100%;   }  
  31. SCALING FLEXIBLE SITES •  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
  32. MEDIA TYPES •  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
  33. 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
  34. MEDIA QUERIES •  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
  35. MEDIA QUERIES •  Example of a media query #main,  #side

     {   width:  100%;   }     @media  screen  and  (min-­‐width:  800px)  {   #main  {    float:  left;    width:  62.5%;   }   #side  {    float:  right;    width:  33.33333333%;   }   }   /QDKNGUV[NGUHKTUV
  36. MEDIA QUERIES •  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 –  This should be used conservatively
  37. REASONS TO DO RWD •  RWD isn’t about supporting mobile

    devices, it’s about supporting all devices •  Lack of mobile users is not a reason to not do RWD –  Lack of RWD may be a reason why mobile users don’t come to your site –  “If you build it they will come” h"p://www.smashingmagazine.com/2013/10/30/selling-­‐responsive-­‐website-­‐design/  
  38. SEPARATE MOBILE SITE OR RWD? •  RWD is not automatically

    always the right solution –  Performance issues –  Cost •  Decide on a case by case basis •  Know your users and their needs h"p://www.lukew.com/ff/entry.asp?1390   h"p://www.lukew.com/ff/entry.asp?1631  
  39. ”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 h"p://bradfrostweb.com/blog/web/responsive-­‐web-­‐design-­‐missing-­‐the-­‐point/  
  40. CONTENT AND RWD •  Even with RWD it’s not possible

    to fit as much information on a mobile screen as it is on a desktop •  Remember to think mobile first
  41. CONCLUSIONS •  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 –  People will also still use the website with mobile devices