Webstock Workshop: Creating Simple

Workshop Creating simple NEW! Daniel Burka Webstock 2010

Alternative titles... Web apps, still v. hard to use Practical simplicity Concepts that seem to work

I’m dburka digg ﬂickr twitter clustershot last.fm Weblog: deltatangobravo.com Email: daniel@deltatangobravo.com

What do I do? Co-founder silverorange, creative dir. Digg, co-founder Pownce, dir. of design Tiny Speck

What’s a web designer? UX, IA, Interaction designer, Creative Dir, Prod. manager, Designer, Webmaster

What do you do? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com

What do you do? Designer, developer, product, entrepreneur, something else? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com

What do you do? Designer, developer, product, entrepreneur, something else? In-house or freelance? Credit: “The 56 Geeks” by Scott Johnson, myextralife.com

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

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

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

A. Get the basics out of the way

A. Get the basics out of the way 1. Starting simple, staying simple

A. Get the basics out of the way 1. Starting simple, staying simple 2. Techniques for masking complexity

A. Get the basics out of the way 1. Starting simple, staying simple 2. Techniques for masking complexity 3. Easing people into complex systems

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

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?

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’

Start simple Easier to grok, more engaging

“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 deﬁne 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

Pave the cowpaths Start simple, watch how people actually use your app Don’t even try to predict everything Credit: Phil Gyford

Point Reyes Station, California, April 2009 Not a failure... a perfect opportunity

Focus on THE thing Why are people REALLY on your site or this page? Credit: Flickr user ‘ihtatho’

~ 1024/768

Remove as much as you can Is something REALLY necessary? Often a tough debate. Credit: Flickr user ‘pgoyette’

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’

Required reading....

Hide what you can’t remove Contextual links and secondary content are candidates Credit: Flickr user ‘aftab’

The MEGA dropdown Bigger is better in this instance Credit: Flickr user ‘ /mrpunto’

Give options in sequence Only an option for logical sequences – handy sometimes Credit: Flickr user ‘ r o s e n d a h l’

Strongly consider ﬂow You don’t need eye-tracking software to remove impediments Credit: Flickr user ‘Mister V’

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.

The problem...

Show, don’t tell Showing is much more enticing (usually)

Date a little bit before committing Credit: Flickr user ‘Ben Haisch’

Date a little bit before committing Get your users invested before you propose Credit: Flickr user ‘Ben Haisch’

What kind of commitment are you looking for? Credit: Flickr user ‘Voxphoto’

What kind of commitment are you looking for? Maybe you don’t need to go all the way on your ﬁrst date. Credit: Flickr user ‘Voxphoto’

What kind of commitment are you looking for? Maybe you don’t need to go all the way on your ﬁrst date. Simplify sign-up by having less of it! Credit: Flickr user ‘Voxphoto’

E-commerce example

Learning from games

Learning from games Good games educate and involve you at the same time.

Questing

? ?? ? ? ? ?

PHP + CSS = True love Credit: Flickr user ‘Buttersweet’

PHP + CSS = True love (Almost) everything you’ve always wanted to do with CSS Credit: Flickr user ‘Buttersweet’

How is this simpler? Set base variables for colors, widths, fonts, etc. Write complex properties once and repeat Use basic arithmetic Logically separate ﬁles yet one http request In short, avoid creating a mess

Getting started 1 of 2 First task is to turn your css ﬁles into php ﬁles <?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; }

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 ?>

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; }

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; }

Isolate our variables Make a new ﬁle... say vars-css.php <?php $base_shade = '#e6e6e6'; $base_color = '#333'; $highlight_color = '#c00'; $full_width = '960px'; ?>

Include it Now simply include it into your php/css ﬁle(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; }

Now we can share Make several php/css ﬁles that all share the same variables.

Cool... we’ve got vars Ok, so what else can we do with variables?

Other variables Font-family declarations <?php $font-base = ‘“Lucida Grande”, Verdana, Arial, sans-serif’; $font-decorative = ‘Museo, Georgia, “Times New Roman”, serif’; ?>

Other variables Complex sets of properties <?php $inline_block = ‘display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline;’; ?>

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)?> }

Simpler HTTP Requests Many CSS ﬁles make organization simpler, but...

Simpler HTTP Requests We can simply include them all into one css ﬁle = 1 http request

One ﬁle to rule them all... Consolidate in any order in a central ﬁle. <?php header("Content-type: text/css"); include 'base-css.php'; include 'text-css.php'; include 'template-css.php'; ?>

CSS3 today Credit: Flickr user ‘yago1.com’

CSS3 today (Some) CSS3 is read for public consumption. Credit: Flickr user ‘yago1.com’

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 aﬀect layout!

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); }

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...

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); }

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); }

Advanced selectors Do zebra striping, the simple way

http://www.alistapart.com/articles/zebrastripingdoesithelp/

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; }

Your issues... What’s been challenging you lately?