Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webstock Workshop: Creating Simple

16,817 views

Published on

Slides from a 3-hour workshop presented at Webstock 2010 in Wellington NZ by Daniel Burka.

Published in: Technology

Webstock Workshop: Creating Simple

  1. Workshop Creating simple NEW! Daniel Burka Webstock 2010
  2. Alternative titles... Web apps, still v. hard to use Practical simplicity Concepts that seem to work
  3. I’m dburka digg flickr twitter clustershot last.fm Weblog: deltatangobravo.com Email: daniel@deltatangobravo.com
  4. What do I do? Co-founder silverorange, creative dir. Digg, co-founder Pownce, dir. of design Tiny Speck
  5. What’s a web designer? UX, IA, Interaction designer, Creative Dir, Prod. manager, Designer, Webmaster
  6. What do you do? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
  7. What do you do? Designer, developer, product, entrepreneur, something else? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
  8. What do you do? Designer, developer, product, entrepreneur, something else? In-house or freelance? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
  9. What do you do? Designer, developer, product, entrepreneur, something else? In-house or freelance? Big, medium, little, lone gun? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
  10. What do you do? Designer, developer, product, entrepreneur, something else? In-house or freelance? Big, medium, little, lone gun? Love it, like it, hate it, or meh? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
  11. Ground rules Ask questions anytime... yell out if I don’t see your hand It’s more important to elaborate than to cover everything @reply me @dburka with things to cover if you’re not an out loud person
  12. A. Get the basics out of the way
  13. A. Get the basics out of the way 1. Starting simple, staying simple
  14. A. Get the basics out of the way 1. Starting simple, staying simple 2. Techniques for masking complexity
  15. A. Get the basics out of the way 1. Starting simple, staying simple 2. Techniques for masking complexity 3. Easing people into complex systems
  16. A. Get the basics out of the way 1. Starting simple, staying simple 2. Techniques for masking complexity 3. Easing people into complex systems 4. Simple code: PHP+CSS and CSS3 today
  17. A. Get the basics out of the way 1. Starting simple, staying simple 2. Techniques for masking complexity 3. Easing people into complex systems 4. Simple code: PHP+CSS and CSS3 today What else do you want to discuss?
  18. 1. Starting simple, staying simple. 2. Techniques for masking complexity. 3. Easing people into complex systems 4. Writing simpler CSS with basic logic. Credit: Flickr user ‘Swamibu’
  19. Start simple Easier to grok, more engaging
  20. “What’s the right approach to new products? Pick three key attributes or features, get those things very, very right, and then forget about everything else. Those three attributes define the fundamental Paul Buchheit essence and Creator, Gmail value of the Co-founder, Friendfeed product — the rest is noise.” Credit: Flickr user ‘Thomas Hawk’ http://paulbuchheit.blogspot.com/2010/02/if-your-product-is-great-it-doesnt-need.html
  21. Pave the cowpaths Start simple, watch how people actually use your app Don’t even try to predict everything Credit: Phil Gyford
  22. Point Reyes Station, California, April 2009 Not a failure... a perfect opportunity
  23. Point Reyes Station, California, April 2009 Not a failure... a perfect opportunity
  24. Point Reyes Station, California, April 2009 Not a failure... a perfect opportunity
  25. Point Reyes Station, California, April 2009 Not a failure... a perfect opportunity
  26. Focus on THE thing Why are people REALLY on your site or this page? Credit: Flickr user ‘ihtatho’
  27. ~ 1024/768
  28. Remove as much as you can Is something REALLY necessary? Often a tough debate. Credit: Flickr user ‘pgoyette’
  29. ?
  30. 1. Starting simple, staying simple. 2. Techniques for masking complexity. 3. Easing people into complex systems. 4. Writing simpler CSS with basic logic. Credit: Flickr user ‘Swamibu’
  31. Required reading....
  32. Hide what you can’t remove Contextual links and secondary content are candidates Credit: Flickr user ‘aftab’
  33. The MEGA dropdown Bigger is better in this instance Credit: Flickr user ‘ /mrpunto’
  34. Give options in sequence Only an option for logical sequences – handy sometimes Credit: Flickr user ‘ r o s e n d a h l’
  35. Strongly consider flow You don’t need eye-tracking software to remove impediments Credit: Flickr user ‘Mister V’
  36. by dburka 20 minutes ago Of course, what McCain is trying to avoid anyone noticing is that the problem isn't regulators failing to do their job; it's that that man he tapped to write his economic policy - Phil Gramm - removed oversight of the instruments that are laying waste to the finance sector from the regulators' job descriptions. Reply to this comment by marktrammell 16 minutes ago We all know McCain is incompetent when it comes to the economy, and that Phil Gramm sold out the finance sector. You would think they would have brought in someone with substance when Phil hit the road. 5 Replies to this comment by dburka 14 minutes ago We all know McCain is incompetent when it comes to the economy, and that Phil Gramm sold out the finance sector. You would think they would have brought in someone with substance when Phil hit the road. 5 Replies to this comment by kurtwilms 12 minutes ago We all know McCain is incompetent when it comes to the economy, and that Phil Gramm sold out the finance sector. You would think they would have brought in someone with substance when Phil hit the road.
  37. ?
  38. 1. Starting simple, staying simple. 2. Techniques for masking complexity. 3. Easing people into complex systems. 4. Writing simpler CSS with basic logic. Credit: Flickr user ‘Swamibu’
  39. The problem...
  40. The problem...
  41. The problem...
  42. The problem...
  43. Show, don’t tell Showing is much more enticing (usually)
  44. Date a little bit before committing Credit: Flickr user ‘Ben Haisch’
  45. Date a little bit before committing Get your users invested before you propose Credit: Flickr user ‘Ben Haisch’
  46. What kind of commitment are you looking for? Credit: Flickr user ‘Voxphoto’
  47. What kind of commitment are you looking for? Maybe you don’t need to go all the way on your first date. Credit: Flickr user ‘Voxphoto’
  48. What kind of commitment are you looking for? Maybe you don’t need to go all the way on your first date. Simplify sign-up by having less of it! Credit: Flickr user ‘Voxphoto’
  49. E-commerce example
  50. E-commerce example
  51. Learning from games
  52. Learning from games Good games educate and involve you at the same time.
  53. Questing
  54. Questing
  55. ?
  56. ? ?? ? ? ? ?
  57. 1. Starting simple, staying simple. 2. Techniques for masking complexity. 3. Easing people into complex systems. 4. Writing simpler CSS with basic logic. Credit: Flickr user ‘Swamibu’
  58. PHP + CSS = True love Credit: Flickr user ‘Buttersweet’
  59. PHP + CSS = True love (Almost) everything you’ve always wanted to do with CSS Credit: Flickr user ‘Buttersweet’
  60. How is this simpler? Set base variables for colors, widths, fonts, etc. Write complex properties once and repeat Use basic arithmetic Logically separate files yet one http request In short, avoid creating a mess
  61. Getting started 1 of 2 First task is to turn your css files into php files <?php header("Content-type: text/css"); ?> body { background: #efefef; color: #333; } .content { border: 1px solid #6f6f6f; padding: 15px; width 900px; padding: 30px; color: #333; margin: 0 auto; }
  62. Getting started 2 of 2 Link to your new php stylesheet <?php ?> <!DOCTYPE html> <html lang="eng"> <head> ! <meta charset="utf-8"> ! <title>Test</title> ! <meta name="description" content="" /> ! <meta name="keywords" content="" /> ! <link rel="stylesheet" type="text/css" media="all" href="base-css.php"> </head> <body> ! <div class="content"> ! ! I'm going to type stuff into here. ! </div> </body> </html> <?php ?>
  63. Now we’re talkin’ Let’s set some variables. <?php header("Content-type: text/css"); $base_shade = ‘#e6e6e6’; $base_color = '#333'; $highlight_color = ‘#c00’; $full_width = ‘960’; ?> body { background: #c00; } .content { border: 1px solid #c00; padding: 15px; width 900px; padding: 30px; color: #333; }
  64. Using variables <?php header("Content-type: text/css"); $base_shade = '#e6e6e6'; $base_color = '#333'; $highlight_color = '#c00'; $full_width = '960'; ?> body { background: <?=$base_shade?>; } .content { border: 1px solid <?=$highlight_color?>; padding: 15px; width 900px; padding: 30px; color: <?=$base_color?>; } input.button { padding: 4px 10px; background: <?=$highlight_color?>; color: #fff; }
  65. Isolate our variables Make a new file... say vars-css.php <?php $base_shade = '#e6e6e6'; $base_color = '#333'; $highlight_color = '#c00'; $full_width = '960px'; ?>
  66. Include it Now simply include it into your php/css file(s) <?php header("Content-type: text/css"); include 'vars-css.php'; ?> body { background: <?=$base_shade?>; } .content { border: 1px solid <?=$highlight_color?>; padding: 15px; width <?=$base_width - 30?>px; padding: 30px; color: <?=$base_color?>; } input.button { padding: 4px 10px; background: <?=$highlight_color?>; color: #fff; }
  67. Now we can share Make several php/css files that all share the same variables.
  68. Cool... we’ve got vars Ok, so what else can we do with variables?
  69. Other variables Font-family declarations <?php $font-base = ‘“Lucida Grande”, Verdana, Arial, sans-serif’; $font-decorative = ‘Museo, Georgia, “Times New Roman”, serif’; ?>
  70. Other variables Complex sets of properties <?php $inline_block = ‘display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline;’; ?>
  71. Getting fancy A simple function for border-radius properties <?php function radius($x) { return "-moz-border-radius: {$x}px; -webkit- border-radius: {$x}px; border-radius: {$x}px;"; } ?> .feature { background: #eeee; <?=radius(5)?> }
  72. Simpler HTTP Requests Many CSS files make organization simpler, but...
  73. Simpler HTTP Requests We can simply include them all into one css file = 1 http request
  74. One file to rule them all... Consolidate in any order in a central file. <?php header("Content-type: text/css"); include 'base-css.php'; include 'text-css.php'; include 'template-css.php'; ?>
  75. ?
  76. CSS3 today Credit: Flickr user ‘yago1.com’
  77. CSS3 today (Some) CSS3 is read for public consumption. Credit: Flickr user ‘yago1.com’
  78. CSS Transforms Scaling input.button { background: <?=$base_shade?>; padding: 5px 15px; font-family: <?=$font-decorative?>; color: <?=$link_color?>; <?=radius(3)?> font-weight: bold; } input.button:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); } See example... Doesn’t affect layout!
  79. CSS Transforms Rotating a.color-selector { <?=radius(5)?> background: red; width: 40px; height: 40px; <?=radius(5)?> } a.color-selector:hover { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); }
  80. CSS Transforms Rotate AND Scale!!! a.color-selector { <?=$inline_block?> background: red; width: 40px; height: 40px; <?=radius(5)?> } a.color-selector:hover { -webkit-transform: scale(1.1) rotate(2deg); -moz-transform: scale(1.1) rotate(2deg); } See example...
  81. RGBA Alpha != opacity Lack of IE and Firefox 2 support means it needs backup But... backup is pretty easy! Especially great for prototyping and lightening the load div.section { background: rgba(255,255,255,0.3); }
  82. RGBA Keep it simple, one png and one rgba background div.section { background: url(/img/light.png); background: rgba(255,255,255,0.3); } Or just go solid... (not quite as good, imo) div.section { background: rgb(180,180,180); background: rgba(255,255,255,0.3); }
  83. Advanced selectors Do zebra striping, the simple way
  84. http://www.alistapart.com/articles/zebrastripingdoesithelp/
  85. Advanced selectors Zebra stripes using nth-of-type selector table { border-collapse: collapse; } td { padding: 5px 10px; } table.zebra tr:nth-of-type(2n+1) td { background: #ddd; }
  86. ?
  87. Your issues... What’s been challenging you lately?
  88. I’m dburka digg flickr twitter clustershot last.fm Weblog: deltatangobravo.com Email: daniel@deltatangobravo.com
  89. What do I do? Co-founder silverorange, creative dir. Digg, co-founder Pownce, dir. of design Tiny Speck
  90. What’s a web designer? UX, IA, Interaction designer, Creative Dir, Prod. manager, Designer, Webmaster
  91. What do you do? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
  92. What do you do? Designer, developer, product, entrepreneur, something else? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
  93. What do you do? Designer, developer, product, entrepreneur, something else? In-house or freelance? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
  94. What do you do? Designer, developer, product, entrepreneur, something else? In-house or freelance? Big, medium, little, lone gun? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
  95. What do you do? Designer, developer, product, entrepreneur, something else? In-house or freelance? Big, medium, little, lone gun? Love it, like it, hate it, or meh? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
  96. Ground rules Ask questions anytime... yell out if I don’t see your hand It’s more important to elaborate than to cover everything @reply me @dburka with things to cover if you’re not an out loud person
  97. A. Get the basics out of the way
  98. A. Get the basics out of the way 1. Starting simple, staying simple
  99. A. Get the basics out of the way 1. Starting simple, staying simple 2. Techniques for masking complexity
  100. A. Get the basics out of the way 1. Starting simple, staying simple 2. Techniques for masking complexity 3. Easing people into complex systems
  101. A. Get the basics out of the way 1. Starting simple, staying simple 2. Techniques for masking complexity 3. Easing people into complex systems 4. Simple code: PHP+CSS and CSS3 today
  102. A. Get the basics out of the way 1. Starting simple, staying simple 2. Techniques for masking complexity 3. Easing people into complex systems 4. Simple code: PHP+CSS and CSS3 today What else do you want to discuss?

×