Design To Deployment Jon Hicks

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@

@

@


layout@

@

@



IE6

CSS

+

=


layout@

@

@


IE6

CSS

+

Link to the CSS<link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />



<style type="text/css">@import/**/"css/ layout.css";</style>


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


Typeface Choice


Typeface Choice


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/

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

Technology

Design To Deployment Jon Hicks