webstock workshop: creating simple

CreatingsimpleDaniel Burka

Workshop

Webstock 2010

NEW!

Practical simplicity

Alternative titles...

Concepts that seem to work

Web apps, still v. hard to use

I’m dburkadigg flickr twitter clustershot last.fm

deltatangobravo.com

[email protected]

Weblog:

Email:

mailto:[email protected]








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?

What do you do?



In-house or freelance?

What do you do?




Big, medium, little, lone gun?

What do you do?





Love it, like it, hate it, or meh?

Ground rulesAsk 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


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.


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 define the

fundamental

essence and

value of the

product — the rest is noise.”

Credit: Flickr user ‘Thomas Hawk’

Paul BuchheitCreator, Gmail

Co-founder, Friendfeed

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

Credit: Phil Gyford

Don’t even try to predict everything

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’





3. Easing people into complex systems.

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 flow

You don’t need eye-tracking software to remove impediments

Credit: Flickr user ‘Mister V’

by dburka 20 minutes ago

by marktrammell 16 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

Reply to this comment

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 kevinrose 10 minutes ago

We all know McCain is incompetent when it comes to the economy, and that Phil Gramm sold out

the finance sector.


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.

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’


Maybe you don’t need to go all the way on your first date.



Maybe you don’t need to go all the way on your first date.


Simplify sign-up by having less of it!

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 files yet one http request

In short, avoid creating a mess

Getting started 1 of 2First task is to turn your css files into php files

<?phpheader("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 2Link 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.

<?phpheader("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<?phpheader("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 variablesMake a new file... say vars-css.php

<?php$base_shade = '#e6e6e6';$base_color = '#333';$highlight_color = '#c00';$full_width = '960px';?>

Include itNow simply include it into your php/css file(s)

<?phpheader("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 shareMake several php/css files that all share the same variables.

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

Other variablesFont-family declarations

<?php

$font-base = ‘“Lucida Grande”, Verdana, Arial, sans-serif’;

$font-decorative = ‘Museo, Georgia, “Times New Roman”, serif’;

?>

Other variablesComplex sets of properties

<?php

$inline_block = ‘display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline;’;

?>

Getting fancyA 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 RequestsMany CSS files make organization simpler, but...

Simpler HTTP RequestsWe can simply include them all into one css file = 1 http request

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

?>

CSS3 today

Credit: Flickr user ‘yago1.com’

CSS3 today (Some) CSS3 is read for public consumption.

Credit: Flickr user ‘yago1.com’

CSS TransformsScaling

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!

CSS TransformsRotating

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

RGBAAlpha != 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);}

RGBAKeep it simple, one png and one rgba background

div.section { background: url(/img/light.png); background: rgba(255,255,255,0.3);}

div.section { background: rgb(180,180,180); background: rgba(255,255,255,0.3);}

Or just go solid... (not quite as good, imo)

Advanced selectorsDo zebra striping, the simple way

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



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

I’m dburkadigg flickr twitter clustershot last.fm

deltatangobravo.com

[email protected]

Weblog:

Email:







