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

Modern Web Design 2014

Jani Mäkelä
November 12, 2014

Modern Web Design 2014

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

Jani Mäkelä

November 12, 2014
Tweet

More Decks by Jani Mäkelä

Other Decks in Design

Transcript

  1. A QUICK HISTORY OF IE6 2001 IE6 is released as

    part of Windows XP 2004 Usage share peaked with over 90% • Firefox 1.0 was released the same year • Usage share started slowly decreasing, but many sites were still only designed for IE for a long time 2006 IE7 was released 2014 Support for IE6 ended with Windows XP
  2. THE MOBILE WEB Since mid-2011 people spend more time on

    their mobile devices than on their PCs At the current rate of growth, mobile web usage will overtake desktop browsing globally in a few years By 2020 80% of the adults on earth will have a smartphone http://mashable.com/2011/12/16/mobile-website-tips/ http://ben-evans.com/benedictevans/2014/10/28/presentation-mobile-is-eating-the-world
  3. MOBILE ONLY USERS There’s a growing amount of people who

    don’t use traditional desktop computers for online access • Especially in developing countries “They can just use their desktop computer to do that.” http://blogs.hbr.org/2013/05/the-rise-of-the-mobile-only-us/
  4. – Eric Schmidt “The simple guideline is whatever you are

    doing - do mobile first” http://www.lukew.com/ff/entry.asp?1270
  5. – Steve Jobs “I think PCs are going to be

    like trucks. Less people will need them. And this is going to make some people uneasy.” http://www.engadget.com/2010/06/01/steve-jobs-live-from-d8/
  6. – MG Siegler “The PC is over. It will linger,

    but increasingly as a relic.” http://massivegreatness.com/mobile
  7. 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 http://www.lukew.com/ff/entry.asp?933
  8. WHY GO MOBILE FIRST? 1. Mobile is exploding 2. Mobile

    forces you to focus 3. Mobile extends your capabilities
  9. FOCUS Having a smaller screen forces you to focus on

    what’s 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
  10. MOBILE CAPABLITIES 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 VS WEB Native apps have access to more systems

    resources and have better performance 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 Links point to websites Native apps are easier to put on the home screen of mobile devices
  12. – Mark Zuckerberg “The biggest mistake we made as a

    company was betting too much on HTML5 as opposed to native” http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-was-betting-too-much-on-html5/
  13. – John Gruber “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.” http://daringfireball.net/2013/04/web_apps_native_apps
  14. – Nilay Patel “Apps are great, but The Verge is

    a website, and we want people to have the best experience with our content where it is created and designed to be viewed. Which is on the web. Because we’re a website.” http://www.theverge.com/2014/9/2/6096609/welcome-to-verge-2-0
  15. KNOW YOUR USERS Which devices do your users use? Where

    and why are they using your product? Do your users want quicker access to certain tasks on mobile than on the desktop?
  16. CONTENT FIRST Mobile 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
  17. - Jakob Nielsen “When people access sites using mobile devices,

    their measured usability is much higher for mobile sites than for full sites.” “Good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” http://www.nngroup.com/articles/mobile-site-vs-full-site/
  18. 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? Creating a separate site causes the content to have two URLs • Sending a link to the mobile site will usually take you to the mobile version even on a desktop http://www.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/
  19. 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 http://www.alistapart.com/articles/responsive-web-design/
  20. 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;   }
  21. 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
  22. 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
  23. 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  */   }
  24. FLEXIBLE IMAGES Text adapts well to fluid layouts, but images

    by default don’t Images need to scale according to the size of their container
  25. FLEXIBLE IMAGES CSS that prevents media from being larger than

    their container img,   embed,   object,   video  {     max-­‐width:  100%;   }
  26. SCALING FLEXIBLE SITES Websites can adapt to different screen sizes

    with fluid layouts and flexible images, but at some point the layout will still break Different CSS is needed for the different widths
  27. 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
  28. 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
  29. MEDIA QUERIES Because of the shortcomings of media types CSS3

    introduced media queries Media queries are used to adapt the CSS for different viewport sizes and other conditions Each media query consists of two parts 1. A media type 2. A query consisting of a feature and a value
  30. MEDIA QUERIES 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
  31. 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
  32. 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” http://www.smashingmagazine.com/2013/10/30/selling-responsive-website-design/
  33. WORD OF WARNING Responsiveish sites tend to work worse on

    mobile than non-responsive sites At worst badly implemented responsive websites are unusable on mobile • A typical case is having multiple fluid columns horizontally aligned If you’re going to make your site responsive, do it well
  34. – Brad Frost “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” http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/