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?


What do you do?

In-house or freelance?


What do you do?


Big, medium, little, lone gun?


What do you do?


Big, medium, little, lone gun?

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


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


1. Starting simple, staying simple



2. Techniques for masking complexity




3. Easing people into complex systems





4. Simple code: PHP+CSS and CSS3 today





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

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’

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.

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 ﬁrst date.



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

Simplify sign-up by having less of it!


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

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
$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
$base_shade = '#e6e6e6';
$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';
$highlight_color = '#c00';
$full_width = '960px';
?>

Include it
Now simply include it into your php/css ﬁle(s)

<?php
include 'vars-css.php';
?>

body {
}
.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


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

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

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

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?

Webstock Workshop: Creating Simple

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie Webstock Workshop: Creating Simple

Ähnlich wie Webstock Workshop: Creating Simple (20)

Mehr von Daniel Burka

Mehr von Daniel Burka (18)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Webstock Workshop: Creating Simple