Minimal-first Design & Development

Transcript

1. Minimal first Design & Development Wednesday, October 9, 13
2. Any design or style wherein the simplest and fewest elements are used to create the maximum effect. min·i·mal·ism Wikipedia Wednesday, October 9, 13
3. Wednesday, October 9, 13
4. Wednesday, October 9, 13
5. Load Wednesday, October 9, 13
6. Luke Wroblewski http://www.lukew.com/ff/entry.asp?1732 The average page in 2013 weighs 1.4mb. The average load time of a top 2000 site is 6 to 10 seconds. Wednesday, October 9, 13
7. Earlier this month I bought 25 MB of data from my provider for $100 while traveling in Europe. This works out to [roughly] $4 per page. Tammy Everts http://www.webperformancetoday.com/2012/05/24/average-web-page-size-1-mb/ Wednesday, October 9, 13
8. https://twitter.com/philhawksworth/status/223805766161797121 Wednesday, October 9, 13
9. Radio signal goes to tower http://www.lukew.com/ff/entry.asp?1756 300-600ms on LTE, 600-3500ms on Edge Tower assigns a resource Data is returned Wednesday, October 9, 13
10. http://www.digitalmall.us/1150/smartphone-users-frustrated-with-mobile-web-experience/ 74% of mobile users will leave a site if it takes longer than 5 seconds to load. Wednesday, October 9, 13
11. http://www.slideshare.net/Strangeloopnet/velocity-eu-the-relationship-between-faster-mobile-sites-and-business-kpis-case-studies-from-the-mobile-frontier Faster mobile sites = more revenue. Wednesday, October 9, 13
12. http://www.lukew.com/ff/entry.asp?1756 Browser Load Order DOM rendered as bytes received. CSS constructed after file downloaded. JavaScript executed after file downloaded. Wednesday, October 9, 13
13. http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/ Wednesday, October 9, 13
14. Images Wednesday, October 9, 13
15. SVG Fallback on PNGs http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/ Grunticon http://filamentgroup.com/lab/grunticon/ Wednesday, October 9, 13
16. http://pngmini.com/lossypng.html Wednesday, October 9, 13
17. Data URI 6x slower on CPU, but faster perceived load time. http://www.html5rocks.com/en/mobile/responsivedesign/ Wednesday, October 9, 13
18. Perception Wednesday, October 9, 13
19. http://labs.ft.com/articles/ft-fastclick/ FT FastClick Touch interfaces have 300ms delay for double-tap zoom Remove delay on elements, fire click events after touchend window.addEventListener('load', function() { FastClick.attach(document.body); }, false); Wednesday, October 9, 13
20. http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown Wednesday, October 9, 13
21. 0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result. Jakob Nielsen http://www.nngroup.com/articles/response-times-3-important-limits/ Wednesday, October 9, 13
22. http://www.lukew.com/ff/entry.asp?1759 Perform Actions Optimistically Instagram photo upload. Change state before sending data. Deal with errors later. Animations can hide work. Wednesday, October 9, 13
23. Layout Wednesday, October 9, 13
24. Wednesday, October 9, 13
25. Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua. http://trentwalton.com/2012/06/19/fluid-type/ Wednesday, October 9, 13
26. http://fittextjs.com/ Wednesday, October 9, 13
27. http://www.nngroup.com/articles/let-users-control-font-size/ Let Users Control Font Size No absolute sizes. Default font should be big. Maximize contrast. Wednesday, October 9, 13
28. http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ Media Queries Forget 320/480/768/1024/1280. Some devices report inaccurate widths. Use content to determine breakpoints. Wednesday, October 9, 13
29. Accessibility Wednesday, October 9, 13
30. Wednesday, October 9, 13
31. 44 points Wednesday, October 9, 13
32. Facebook is second with 18%, and Safari is 3rd with 12%. Worth noting is that a lot of people are consuming web content from inside the Facebook app. Flurry http://blog.flurry.com/bid/95723/Flurry-Five-Year-Report-It-s-an-App-World-The-Web-Just-Lives-in-It Wednesday, October 9, 13
33. Power Users ESC Key Arrows Tab Index HJKL Wednesday, October 9, 13
34. Never disable mobile browser zoom. Wednesday, October 9, 13
35. Strategy Wednesday, October 9, 13
36. Wednesday, October 9, 13
37. body { ! font: 100%/1.4 "Noto Serif", Georgia, serif; ! -webkit-text-size-adjust: none; } #container { ! padding: 0 1em; ! margin: 0; } @media screen and (min-width: 37.500em) { body {font-size: 112.5%;line-height: 1.6;} #container {width:85%;} } @media screen and (min-width: 50.000em) { ! body {font-size: 125%;} } @media screen and (min-width: 64.375em){ ! body {font-size: 137.5%;} } @media screen and (min-width: 75.000em) { ! body {font-size: 150%;} } @media screen and (min-width: 106.875em) { ! body {font-size: 162.5%;} ! #container {max-width:1360px;} } Wednesday, October 9, 13
38. Static Sites Jekyll http://jekyllrb.com/ Pelican http://docs.getpelican.com/en/3.3.0/ Wednesday, October 9, 13
39. <a> Wednesday, October 9, 13
40. Load Images Perception Accessibility Strategy Wednesday, October 9, 13
41. Thanks. Wednesday, October 9, 13