View
10.911
Download
1
Category
Tags:
Preview:
Citation preview
HELLO FOWD!
From Design to Deployment (a day of cheesophile.com)
HICKSDESIGN
I ♥ CHEESE
FLAT HICKS ♥ CHEESE
Breakfast:SET UP!
Setup a Local Server
MAMP HEADDRESS
Morning:CONTENT!
h1
h1h4
h1
ul
h4
h1
ul
h2
h4
h1
ul
h2 h3
h4
h1
ul
h2h2
h3
h4
h1
ul
h2h2
h3
h3h4
h1
ul
h2h2
h3
h3
h3
h4
h1
ul
h2h2
h3
h3
h3
h2
h4
h1
ul
h2h2
h4
h3
h3
h3
h2
h4
h1
ul
h2h2
h4
h4
h3
h3
h3
h2
h4
content.html
BlogReviewsCheese MapGuidesStockists Directory
News
Little Wallop launches
If you've been watching Alex James…
content.html<ul> <li><a href="">Blog</a></li> <li><a href="">Reviews</a></li> <li><a href="">Cheese Map</a></li> <li><a href="">Guides</a></li> <li><a href="">Stockists Directory</a></li></ul>
<h2>News</h2>
<h3>Little Wallop launches</h3>
<p>If you've been watching Alex James…
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4 Strict
XHTML Transitional
Page titles
<title>Welcome to Cheesophile!</title>
<title>Little Wallop Launches | News | Cheesophile.com
</title>
Homepage:
Subpage:
Skip Links
<a href="#content" title="Skip past the navigation" id="skipLink">Skip to the content</a>
Afternoon:STYLING!
j$kGREAT
DEBATE!EMS vs PIXELSFLUID vs
FIXEDHTML vs FLASH
Which Browsers to Support?
http://developer.yahoo.com/yui/articles/gbs/
Y! Graded Browser Support
"Support does not mean that everybody gets the same thing. Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web. "
3 2 9 6 7
HTML
CSS
HTML
basic.css
+
<link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />
CSS
HTML
=basic.css
+
<link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />
CSS
HTML
<style type="text/css"> @import/**/"css/layout.css";</style>
+
layout
CSS
typography
HTML
@import url(reset.css);@import url(typography.css);
layout
+reset
CSS
@
@++
typography
HTML
@import url(reset.css);@import url(typography.css);
layout
+reset =CSS
@
@++
HTMLtypography+ reset
layout@
@
@
HTMLtypography+ reset
layout@
@
@
<!--[if IE 6]><link href="/css/ie6.css" type="text/css" rel="stylesheet" /><![endif]-->
IE6
CSS
+
=
HTMLtypography+ reset
layout@
@
@
<!--[if IE 6]><link href="/css/ie6.css" type="text/css" rel="stylesheet" /><![endif]-->
IE6
CSS
+
Link to the CSS<link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />
<!-- comment to stop FOUC in ie6pc -->
<style type="text/css">@import/**/"css/ layout.css";</style>
<!--[if IE 6]><link href="/css/ie6.css" type="text/css" rel="stylesheet" /><![endif]-->
Reset the CSS/* Eric Meyers Reset CSS rules */html, body, div, span,applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dd, dl, dt, li, ol, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; vertical-align: baseline;}a img, :link img, :visited img { border: 0;}table { border-collapse: collapse; border-spacing: 0;}ol, ul { list-style: none;}q:before, q:after,blockquote:before, blockquote:after { content: "";}
body { font-size: 75%; /* for IE */ font-family: sans-serif; line-height: 1.5em; color: #333; } html>body { font-size: 12px; line-height: 18px; } /* for the rest */
/*typography*/
a { font-weight: bold; color: #000; }a:link { }a:visited { }a:active { }a:hover { text-decoration: underline; } table, thead, tbody, tr, th, td {font-size:1em}
Snippets
img { border:0; }
input { vertical-align:middle; }
.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
Typeface Choice
Helvetica,Calibri,Verdana,Arial,Sans-serif
Typeface Choice
Roquefort, Brie, Red Leicester, Supermarket-Cheddar
Typeface Choice
Gabriel Coulet Roquefort, Roquefort, Cropwell Bishop Stilton, Stilton,Any-old-Blue-Cheese
Typeface Choice
Cornish Yarg Cheese
Cornish Yarg CheeseCornish Yarg CheeseCornish Yarg CheeseCornish Yarg Cheese
Typeface Choice
“HelveticaNeue-Heavy”,“Helvetica 85 Heavy”,Helvetica,Arial,Sans-serif
Typeface Choice
“HelveticaNeue-Heavy”,“Helvetica 85 Heavy”,Helvetica,Arial,Sans-serif
Typeface Choice
“HelveticaNeue-Heavy”,“Helvetica 85 Heavy”,Helvetica,Arial,Sans-serif
Typeface Choice
“HelveticaNeue-Heavy”,“Helvetica 85 Heavy”,Helvetica,Arial,Sans-serif
CheesophileCheesophile
letter-spacing { -1px; }
Letter spacing
Cheesophile has launched
line-height { 1.4em}
Heading Line-Height
Cheesophile has launched
line-height { 1.2em}
Heading Line-Height
Background
Background
640k
Background
640k 184k
Background
640k 184k 72k!!
Background
68k
Styling Skip Links
#skipLink { display: block; padding: 10px 20px; position: absolute; top:0; left: -999px;}
#skipLink:focus { left: 0; }
Styling Skip Links
Styling Skip Links
Two o’clockses:TEA!
29digital.net/grid/
gridlayouts.com
Grid Framework
.column { margin: 0 15px 15px 0;float: left;
}
.last { margin: 0 0 15px 0 ; }
.span1 { width: 60px; }
.span2 { width: 135px; } (etc…)
Grid Framework
<div class="column span3">…
</div>
<div class="column span4 last">…
</div>
Multiple Classes:
Transparent PNGs
8 bit Alpha PNG Transparent GIF
Transparent PNGs
Repeated 5x5px 8 bit Alpha PNG
.box { background: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/overlay.png', sizingMethod='crop');}
Evening:BUGHUNTING!
hasLayout
‘hasLayout’ is the key to understanding all your
problems in IE, but what is it?
<div>
<div>
<div> hasLayout
div, li { zoom:1;}
ie6.css
GOLDEN RULESDon’t be tempted to apply hacks globally with star selector: *
Try and understand the problem before hacking:http://www.positioniseverything.net/
‘POPULAR’ BugsElement missing? Apply position:relative to it.
Floated element with twice the amount of margin? Apply display:inline to it.
3px Text Jog
Midnight:DEPLOYED!
hicksdesign.co.uk/journal/ design-to-deploymentcheesophile.com
Recommended