wde08 bulletproof a to z
Post on 15-May-2015
1.848 Views
Preview:
DESCRIPTION
TRANSCRIPT
A-Zby Dan Cederholm
I M P L E M E N T I N G D E S I G N
BULLETPROOFBULLETPROOF
SimpleBits
HAND-CRAFTED PIXELS & TEXT.
CRAFTSMANSHIP
VERMONT
A product labeled ‘Made in Vermont’— whether herb-infused maple syrup, pineapple pepper jam, or chai water buffalo yogurt—is worth 10 percent more than the same product made elsewhere.”
“
—BOSTON GLOBE, The brand called Vermont
http://boston.com/news/globe/ideas/articles/2003/10/12/the_brand_called_vermont
When something is well-crafted, it reflects that a human
was behind its design.
CRAFTSMANSHIPin IMPLEMENTATION
HTML CSS Javascript GIF JPG PNG
CASE STUDY
• Bulletproof
• Progressive enrichment
• Reevaluating past methods
BULLETPROOF
• Flexibility
• Adaptable to multiple scenarios
• Adding detail without complexity
BROWSER
LANDSCAPE
PROGRESSIVE ENHANCEMENT
{ behavior }
PROGRESSIVE ENRICHMENT
{ style }
REALLY COOL STUFF THAT DOESN’T WORK IN IE :(
REEXAMINING PAST METHODS & HABITS
CASE STUDY
• Bulletproof
• Progressive enrichment
• Reevaluating past methods
MY LOCAL COFFEE SHOP
http://www.flickr.com/photos/dankamminga/1678248602/
I LOVE COFFEE.
POWER OF THE BEAN™
82ºICED
16ºHOT
ICEDORHOT.COM
Aa
ANCHOR LINKS WITH META INFORMATION
A
{ bulletproof }
<li><a href="/latte">Latte <em>12</em></a></li>
li a { display: block; position: relative; }
li a em { position: absolute; top: 0; right: 0; }
<li><a href="/latte"><em>12</em> Latte</a></li>
li a { display: block; }
li a em { float: right; }
<li> <a href="/latte"> <span>Latte</span> <em>12</em> </a></li>
li a { display: block; overflow: hidden; }li a span { float: left; }li a em { float: right; }
Bb
BORDER-RADIUS
B
{ progressive enrichment }
.mod { border-radius: 4px 4px; }
CSS3
CSS3
.mod { -webkit-border-radius: 4px 4px; -moz-border-radius: 4px 4px; }
Vendor-Specific Properties
#nav li a { float: left; padding: .5em 1em; color: #fff; background: #dd5543; -webkit-border-radius: .4em .4em; -moz-border-radius: .4em .4em; }
glass.png
#nav li.selected a { float: left; padding: .5em 1em; color: #fff; background: #dd5543 url(glass.png) repeat-x 0 50%; -webkit-border-radius: .4em .4em; -moz-border-radius: .4em .4em; }
Firefox 2
screen.css
master.css
enriched.css
ie.css
#nav li a { float: left; padding: .5em 1em; color: #fff; background: #dd5543; }
master.css
#nav li a { border-radius: .4em .4em; -webkit-border-radius: .4em .4em; -moz-border-radius: .4em .4em; }
enriched.css
#nav li a { border-radius: .4em .4em; -webkit-border-radius: .4em .4em; -moz-border-radius: .4em .4em; }
enriched.css
div.mod,ol.cities li,#nav li a { border-radius: .4em .4em; -webkit-border-radius: .4em .4em; -moz-border-radius: .4em .4em; }
enriched.css
WHAT ABOUT OTHER BROWSERS?
Can get away with FF2 if contrast is low enough.
Degrades nicely.
Great for prototyping before carving out images.
Cc
COLOR TRANSPARENCYWITH RGBa
C
{ progressive enrichment }
a.city-over { background-color: #000; opacity: .7; }
Opacity
(sets opacity value for the element and all of its children)
a.city-over { background-color: rgba(0,0,0,.7); }
RGBa
(sets opacity value for background-color only)
a.city-over { background-color: #000; background-color: rgba(0,0,0,.7); }
RGBa
a.city-over { background-color: #000; }
master.css
a.city-over { background-color: rgba(0,0,0,.7); }
enriched.css
Tiled PNG would reach more browsers.
RGBa great for protoyping.
Dd
DO WEBSITES NEED TO LOOK EXACTLY
THE SAME IN EVERY BROWSER?
D
Websites don’t need to look exactly
the same in every browser.
DECISION-MAKERS WHO GET IT
D
for this nifty new avatar, which
perfectly captures the goulish-like
quality found in me and other insane
people.
for blogging about CakePHP.
for picking up the tab last night at
the Gulu Gulu.
OWES 4 BEERS
Kevin Cornell
3 days ago
snookca
1 week, 3 days ago
beep
3 weeks ago
for a really awesome idea
for creating such a fun little app
(foamee)
for foamee Dan (buuuurp)
IS OWED 36 BEERS
ginader
21 hours, 2 minutes ago
xybermatthew
1 day, 15 hours ago
juque
1 day, 18 hours ago
simplebitsDan Cederholm • Massachusetts • Twitter profile
the pub people how-to faq store
h1:before { content: url(/img/left.gif); }h1:after { content: url(/img/right.gif); }
for this nifty new avatar, which
perfectly captures the goulish-like
quality found in me and other insane
people.
for blogging about CakePHP.
for picking up the tab last night at
the Gulu Gulu.
OWES 4 BEERS
Kevin Cornell
3 days ago
snookca
1 week, 3 days ago
beep
3 weeks ago
for a really awesome idea
for creating such a fun little app
(foamee)
for foamee Dan (buuuurp)
IS OWED 36 BEERS
ginader
21 hours, 2 minutes ago
xybermatthew
1 day, 15 hours ago
juque
1 day, 18 hours ago
simplebitsDan Cederholm • Massachusetts • Twitter profile
the pub people how-to faq store
IT’S OK
Tiny visual enhancements that do not affect layout.
Techniques that make our lives easier.
Ee
EASY-CLEARING FLOATS
E
{ reexamining past methods }
FLOATS = FLEXIBILITY
2008
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget augue. Praesent ac purus. Ut risus. Ut mauris ligula, dictum vulputate, ornare id, suscipit at, nisi. Quisque et est et urna consectetuer adipiscing. Mauris ac arcu. Sed quis enim eu elit faucibus vehicula. Aliquam sodales dui sit amet ligula. Vivamus leo.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget augue. Praesent ac purus. Ut risus. Ut mauris ligula, dictum vulputate, ornare id, suscipit at, nisi. Quisque et est et urna consectetuer adipiscing. Mauris ac arcu. Sed quis enim eu elit faucibus vehicula. Aliquam sodales dui sit amet ligula. Vivamus leo.
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
easy-clearing
http://positioniseverything.net/easyclearing.html
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
easy-clearing
<div class="clearfix">
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
Lil’ bit better
<div class="group">
Multiple classes
<ol class="cities group">
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
master.css
/* IE6 */* html .group { height: 1%; }
/*IE7 */*:first-child+html .group {
min-height: 1px;}
ie.css
* /_**(.)/*+:@//\*+html!~/rofl**/ { clear: please !reallyeffingimportant; }
IE8?
IE8?
SUPPORTS GENERATED CONTENT!
<ol class="cities group">
<ol class="cities group">
<div class="mod group">
<form id="loc" class="group">
<div id="header" class="group">
Ff
FRAMEWORKS
F
master.css
ie.css
A TESTIMONIAL FOR RESET.CSS
margin: 0; 66padding: 0; 89
155
MTV.com
Gg
GRIDLASTICNESS
G
{ bulletproof }
gridius • lasticus • nessinus
GRID LAYOUT USING EMS
The gut.
#wrap { width: 50em; }
#content { width: 30em; }
#sidebar { width: 20em; }
Em-based layouts force you to ensure ultimate flexibility
Em/pixel values make more sense when using
the 62.5% method
body { font-size: 62.5%; }
Setting a base
#nav { font-size: 1em } 10px#content { font-size: 1.2em } 12px#sidebar { font-size: 1em } 10px#footer { font-size: 0.9em } 9px
Base of 10
#main { width: 10em; 100px margin: 0 1em; 10px border-top: .2em solid #000; 2px }
Widths, margins & padding
Avoid setting width and font-size on the
same element
#main { width: 30em; 300px font-size: 1em }
#secondary { width: 30em; 450px font-size: 1.5em }
Adjusting text size may throw off the grid
Set a max-width on elastic layouts
#wrap { max-width: 100%; }
16em 16em 16em 16em2em 2em 2em
THINK MODULAR{ from the outside in }
Xscope
http://iconfactory.com/software/xscope
Hh
HORIZONTAL GRID? SURE. VERTICAL GRID? SORT OF.
H
Use classes for main columns
#main#secondary
#header
#header
.group
.main.secondary
.group
.main.secondary
Ii
IE8 BETA STILL REFUSES TO RESIZE TEXT SET IN PIXELS
I
{ reexamining past methods }
WTF?
body { font-size: 12px; }
STILL USING RELATIVE UNITS
body { font-size: 62.5%; }
h1 { font-size: 2em; }
PAGE ZOOM?
TEXT SIZE TOOLS ARE STILL THERE
ENSURES FLEXIBILITY (NOT JUST TEXT)
Jj
JQUERY
J
// Toggle search stufffunction togglifySearch(){ $("#loc-adv a").click(function(){ $("#map").slideToggle("slow"); return false; });}
Familiar selector syntax
<script src="js/jquery.js" type="text/javascript"></script>
Kk
KITTY.(invisible pool!)
Ll
.last
L
{ bulletproof }
ul.lst li.last { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
<li class="last">
// Add .last class to certain listsfunction addLast(){ $('ul.lst li:last').addClass('last');}
Behavior or presentation?
Mm
M
MUST SKIP A FEW LETTERS IF WE’RE
GOING TO GET THROUGH THIS
Nn
Oo
Pp
Rr
Ss
SHIFTING BACKGROUNDS (PARALLAX SCROLLING FOR THE LAZY)
S
How to recreate Silverback’s parallax effect
http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax
#header { background: #913b3b url(../img/ fire.gif) repeat-x -80% 0; }
Position background with a negative percentage
Tt
Uu
UR STATS
U
YO
WHEN CAN WE ______?
The answer is simple: when your site’s (or sites’ if you have more than one) user logs tell you that you can. Not before then. The user stats from other sites, or from global-aggregation surveys, are worse than useless.
“
”—ERIC MEYER
http://simplebits.com/notebook/2004/12/17/ie5.html#comment53
IE7 SAFARI FIREFOX OPERA IE6
IE7 SAFARI FIREFOX OPERA IE6
THANK YOU.
simplebits.com/publications/speak/a-z/a-z.pdf
top related