Design To Deployment

Slide 1: HELLO FOWD!

Slide 2: HICKSDESIGN From Design to Deployment (a day of cheesophile.com)

Slide 3: I CHEESE

Slide 4: FLAT HICKS CHEESE

Slide 8: Breakfast: SET UP!

Slide 10: Setup a Local Server MAMP HEADDRESS

Slide 11: Morning: CONTENT!

Slide 13: h1

Slide 14: h1 h4

Slide 15: h1 h4 ul

Slide 16: h2 h1 h4 ul

Slide 17: h2 h3 h1 h4 ul

Slide 18: h2 h3 h2 h1 h4 ul

Slide 19: h2 h3 h2 h1 h3 h4 ul

Slide 20: h2 h3 h2 h1 h3 h4 h3 ul

Slide 21: h2 h3 h2 h1 h3 h4 h3 ul h2

Slide 22: h2 h3 h2 h1 h3 h4 h3 ul h2 h4

Slide 23: h2 h3 h2 h1 h3 h4 h3 ul h2 h4 h4

Slide 24: content.html Blog Reviews Cheese Map Guides Stockists Directory News Little Wallop launches If you've been watching Alex James…

Slide 25: 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…

Slide 26: Doctype HTML 4 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd"> XHTML Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

Slide 27: Page titles Homepage: <title>Welcome to Cheesophile!</title> Subpage: <title> Little Wallop Launches | News | Cheesophile.com </title>

Slide 28: Skip Links <a href="#content" title="Skip past the navigation" id="skipLink"> Skip to the content </a>

Slide 30: Afternoon: STYLING!

Slide 31: j$k GREAT DEBATE! EMS vs PIXELS FLUID vsFLASH FIXED HTML vs

Slide 32: Which Browsers to Support?

Slide 33: Y! Graded Browser Support 3 2 9 6 7 "Support does not mean that everybody gets the same thing. Expecting two users using di erent browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web. " h p://developer.yahoo.com/yui/articles/gbs/

Slide 35: HTML CSS

Slide 36: HTML + CSS basic.css <link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />

Slide 37: HTML + = CSS basic.css <link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />

Slide 38: HTML + CSS layout <style type="text/css"> @import/**/"css/layout.css";</style>

Slide 39: HTML + @ + reset @ + CSS typography layout @import url(reset.css); @import url(typography.css);

Slide 40: HTML + @ + reset = @ + CSS typography layout @import url(reset.css); @import url(typography.css);

Slide 41: @ layout + @ reset HTML @ typography

Slide 42: @ layout + @ reset HTML @ typography + CSS IE6

Slide 43: @ layout + @ reset HTML @ typography + = CSS IE6

Slide 44: 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>

Slide 45: 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%;

Slide 46: Snippets img { border:0; } input { vertical-align:middle; } .clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

Slide 48: Typeface Choice Helvetica, Calibri, Verdana, Arial, Sans-serif

Slide 49: Typeface Choice Roquefort, Brie, Red Leicester, Supermarket-Cheddar

Slide 50: Typeface Choice Gabriel Coulet Roquefort, Roquefort, Cropwell Bishop Stilton, Stilton, Any-old-Blue-Cheese

Slide 51: Typeface Choice Cornish Yarg Cheese Cornish Yarg Cheese Cornish Yarg Cheese Cornish Yarg Cheese Cornish Yarg Cheese

Slide 52: Typeface Choice “HelveticaNeue-Heavy”, “Helvetica 85 Heavy”, Helvetica, Arial, Sans-serif

Slide 56: Le er spacing Cheesophile Cheesophile letter-spacing { -1px; }

Slide 57: Heading Line-Height Cheesophile has launched line-height { 1.4em}

Slide 58: Heading Line-Height Cheesophile has launched line-height { 1.2em}

Slide 60: Background

Slide 61: Background 640k

Slide 62: Background 640k 184k

Slide 63: Background 640k 184k 72k!!

Slide 64: Background 68k

Slide 66: Styling Skip Links #skipLink { display: block; padding: 10px 20px; position: absolute; top:0; left: -999px; } #skipLink:focus { left: 0; }

Slide 67: Styling Skip Links

Slide 68: Styling Skip Links

Slide 69: Two o’clockses: TEA!

Slide 70: 29digital.net/grid/

Slide 72: gridlayouts.com

Slide 75: Grid Framework .column { margin: 0 15px 15px 0; float: left; } .last { margin: 0 0 15px 0 ; } .span1 { width: 60px; } .span2 { width: 135px; } (etc…)

Slide 76: Grid Framework Multiple Classes: <div class="column span3"> … </div> <div class="column span4 last"> … </div>

Slide 78: Transparent PNGs 8 bit Alpha PNG Transparent GIF

Slide 80: Transparent PNGs Repeated 5x5px 8 bit Alpha PNG .box { background: none; filter:progid:DXImageTransform.Micros oft.AlphaImageLoader(src='/img/ overlay.png', sizingMethod='crop'); }

Slide 85: Evening: BUGHUNTING!

Slide 90: hasLayout ‘hasLayout’ is the key to understanding all your problems in IE, but what is it?

Slide 93: <div>

Slide 94: <div>

Slide 95: <div> hasLayout

Slide 96: ie6.css div, li { zoom:1; }

Slide 97: GOLDEN RULES Don’t be tempted to apply hacks globally with star selector: * Try and understand the problem before hacking: h p://www.positioniseverything.net/

Slide 98: ‘POPULAR’ Bugs Element missing? Apply position:relative to it. Floated element with twice the amount of margin? Apply display:inline to it.

Slide 100: 3px Text Jog

Slide 102: Midnight: DEPLOYED!

Slide 103: hicksdesign.co.uk/journal/ design-to-deployment cheesophile.com

Slideshare.net (beta)