Modern Web Design 2014

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

Transcript

1. MODERN WEB DESIGN 12.11.2014 Jani Mäkelä
2. INTERNET EXPLORER 6 2001-2014 9 %
3. 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
4. http://gs.statcounter.com/#browser-ww-monthly-200807-201410 THE FALL OF IE
5. http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200807-201410-bar MOBILE VS DESKTOP
6. 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
7. 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/
8. MOBILE FIRST
9. – Eric Schmidt “The simple guideline is whatever you are doing - do mobile first” http://www.lukew.com/ff/entry.asp?1270
10. – 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/
11. – MG Siegler “The PC is over. It will linger, but increasingly as a relic.” http://massivegreatness.com/mobile
12. 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
13. WHY GO MOBILE FIRST? 1. Mobile is exploding 2. Mobile forces you to focus 3. Mobile extends your capabilities
14. MOBILE GROWTH http://www.forbes.com/sites/louiscolumbus/2013/09/12/idc-87-of-connected-devices-by-2017-will-be-tablets-and-smartphones/
15. 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
16. WHAT’S ACTUALLY IMPORTANT http://xkcd.com/773/
17. 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.
18. 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
19. – 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/
20. – 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
21. – 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
22. 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?
23. 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
24. - 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/
25. 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/
26. MOBILE SITE PROBLEMS http://xkcd.com/869/
30. RESPONSIVE WEB DESIGN
31. 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/
32. THE THREE INGREDIENTS OF RWD 1. Fluid layouts 2. Flexible images 3. Media queries
33. 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;   }
34. FIXED LAYOUTS
35. 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
36. 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
37. 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  */   }
38. FLUID LAYOUTS
39. 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
40. FLEXIBLE IMAGES CSS that prevents media from being larger than their container img,   embed,   object,   video  {     max-­‐width:  100%;   }
41. FLEXIBLE IMAGES
42. 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
43. 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
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. 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
46. 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
47. 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
48. MEDIA QUERIES
49. 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/
50. 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
51. – 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/
52. SUMMARY
53. MOBILE IS WHERE ALL THE GROWTH IS
54. EMBRACE THE RESTRICTIONS OF MOBILE DEVICES
55. NATIVE VS WEB
56. FURTHER READING
57. THANKS! @janimakela jani.makela@gmail.com