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

Minimal-first Design & Development

Minimal-first Design & Development

Ryan Nystrom

October 09, 2013
Tweet

More Decks by Ryan Nystrom

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. Data URI 6x slower on CPU, but faster perceived load

    time. http://www.html5rocks.com/en/mobile/responsivedesign/ Wednesday, October 9, 13
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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