HELLO FOWD!
HICKSDESIGNFrom Design toDeployment(a day of cheesophile.com)
I ♥ CHEESE
FLAT HICKS ♥ CHEESE
Breakfast:SET UP!
Setup a Local Server  MAMP         HEADDRESS
Morning:CONTENT!
h1
h1     h4
h1     h4ul
h2h1     h4ul
h2   h3h1     h4ul
h2   h3                    h2h1     h4ul
h2   h3                         h2h1                  h3     h4ul
h2   h3                         h2h1                  h3     h4                    h3ul
h2   h3                         h2h1                  h3     h4                    h3ul                         h2
h2   h3                              h2h1                       h3     h4                         h3ul                    ...
h2   h3                              h2h1                       h3     h4                         h3ul                    ...
content.htmlBlogReviewsCheese MapGuidesStockists DirectoryNewsLittle Wallop launchesIf youve 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>	...
DoctypeHTML 4 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">XHTML Transit...
Page titlesHomepage:<title>Welcome to Cheesophile!</title>Subpage:<title>       Little Wallop Launches | News |       Chee...
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 vsFLASHHTML vs        FIXED
Which Browsers to Support?
Y! Graded Browser Support     3          2           9         6           7"Support does not mean that everybody getsthe ...
HTMLCSS
HTML  +  CSSbasic.css <link rel="stylesheet" href="css/basic.css"  type="text/css" media="screen" />
HTML  +  CSS            =basic.css <link rel="stylesheet" href="css/basic.css"  type="text/css" media="screen" />
HTML  + CSS layout<style type="text/css"> @import/**/"css/layout.css";</style>
HTML  +         +   @   reset CSS     +   @   typographylayout@import url(reset.css);@import url(typography.css);
HTML  +         +   @   reset CSS     +   @   typography                              =layout@import url(reset.css);@impor...
@ layoutHTML       +   @ reset           @ typography
@ layout HTML           +     @ reset                 @ typography  +  CSS   IE6<!--[if IE 6]><link href="/css/ie6.css" ty...
@ layout HTML           +     @ reset                 @ typography  +  CSS      =   IE6<!--[if IE 6]><link href="/css/ie6....
Link to the CSS<link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" /><!-- comment to stop FOUC in i...
Reset the CSS/* Eric Meyers Reset CSS rules */html, body, div, span,applet, object, iframe,h1, h2, h3, h4, h5, h6, p, bloc...
Snippetsimg { border:0; }input { vertical-align:middle; }.clear:after {    content: ".";    display: block;    height: 0; ...
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 ChoiceCornish Yarg CheeseCornish 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
Letter spacingCheesophileCheesophileletter-spacing { -1px; }
Heading Line-HeightCheesophilehas launchedline-height { 1.4em}
Heading Line-HeightCheesophilehas launchedline-height { 1.2em}
Background
Background640k
Background640k     184k
Background640k     184k   72k!!
Background             68k
Styling Skip Links#skipLink {	 display: block;	 padding: 10px 20px;	 position: absolute;	 top:0;	 left: -999px;}#skipLink:...
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: 60...
Grid FrameworkMultiple Classes:<div class="column span3">    …</div><div class="column span4 last">    …</div>
Transparent PNGs8 bit Alpha PNG    Transparent GIF
Transparent PNGs  Repeated 5x5px 8 bit Alpha PNG  .box {    background: none;  filter:progid:DXImageTransform.Micros  oft....
Evening:BUGHUNTING!
hasLayout    ‘hasLayout’ is the key  to understanding all yourproblems in IE, but what is it?
<div>
<div>
<div>   hasLayout
ie6.cssdiv, li {    zoom:1;}
GOLDEN RULES  Don’t be tempted to apply hacks  globally with star selector: *  Try and understand the problem  before hack...
‘POPULAR’ Bugs  Element missing?  Apply position:relative to it.  Floated element with twice the  amount of margin?  Apply...
3px Text Jog
Midnight:DEPLOYED!
hicksdesign.co.uk/journal/  design-to-deploymentcheesophile.com
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Design To Deployment
Upcoming SlideShare
Loading in …5
×

Design To Deployment

2,440 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,440
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
26
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Design To Deployment

  1. 1. HELLO FOWD!
  2. 2. HICKSDESIGNFrom Design toDeployment(a day of cheesophile.com)
  3. 3. I ♥ CHEESE
  4. 4. FLAT HICKS ♥ CHEESE
  5. 5. Breakfast:SET UP!
  6. 6. Setup a Local Server MAMP HEADDRESS
  7. 7. Morning:CONTENT!
  8. 8. h1
  9. 9. h1 h4
  10. 10. h1 h4ul
  11. 11. h2h1 h4ul
  12. 12. h2 h3h1 h4ul
  13. 13. h2 h3 h2h1 h4ul
  14. 14. h2 h3 h2h1 h3 h4ul
  15. 15. h2 h3 h2h1 h3 h4 h3ul
  16. 16. h2 h3 h2h1 h3 h4 h3ul h2
  17. 17. h2 h3 h2h1 h3 h4 h3ul h2 h4
  18. 18. h2 h3 h2h1 h3 h4 h3ul h2 h4 h4
  19. 19. content.htmlBlogReviewsCheese MapGuidesStockists DirectoryNewsLittle Wallop launchesIf youve been watching Alex James…
  20. 20. 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 youve been watching Alex James…
  21. 21. DoctypeHTML 4 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">XHTML Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  22. 22. Page titlesHomepage:<title>Welcome to Cheesophile!</title>Subpage:<title> Little Wallop Launches | News | Cheesophile.com</title>
  23. 23. Skip Links<a href="#content" title="Skip past the navigation" id="skipLink">Skip to the content</a>
  24. 24. Afternoon:STYLING!
  25. 25. j$kGREAT DEBATE!EMS vs PIXELSFLUID vsFLASHHTML vs FIXED
  26. 26. Which Browsers to Support?
  27. 27. Y! Graded Browser Support 3 2 9 6 7"Support does not mean that everybody getsthe same thing. Expecting two users usingdifferent browser software to have an identicalexperience fails to embrace or acknowledgethe heterogeneous essence of the Web. "http://developer.yahoo.com/yui/articles/gbs/
  28. 28. HTMLCSS
  29. 29. HTML + CSSbasic.css <link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />
  30. 30. HTML + CSS =basic.css <link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />
  31. 31. HTML + CSS layout<style type="text/css"> @import/**/"css/layout.css";</style>
  32. 32. HTML + + @ reset CSS + @ typographylayout@import url(reset.css);@import url(typography.css);
  33. 33. HTML + + @ reset CSS + @ typography =layout@import url(reset.css);@import url(typography.css);
  34. 34. @ layoutHTML + @ reset @ typography
  35. 35. @ layout HTML + @ reset @ typography + CSS IE6<!--[if IE 6]><link href="/css/ie6.css" type="text/css" rel="stylesheet" /><![endif]-->
  36. 36. @ layout HTML + @ reset @ typography + CSS = IE6<!--[if IE 6]><link href="/css/ie6.css" type="text/css" rel="stylesheet" /><![endif]-->
  37. 37. 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]-->
  38. 38. 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%;
  39. 39. Snippetsimg { border:0; }input { vertical-align:middle; }.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
  40. 40. Typeface Choice Helvetica, Calibri, Verdana, Arial, Sans-serif
  41. 41. Typeface Choice Roquefort, Brie, Red Leicester, Supermarket-Cheddar
  42. 42. Typeface Choice Gabriel Coulet Roquefort, Roquefort, Cropwell Bishop Stilton, Stilton, Any-old-Blue-Cheese
  43. 43. Typeface ChoiceCornish Yarg CheeseCornish Yarg CheeseCornish Yarg CheeseCornish Yarg CheeseCornish Yarg Cheese
  44. 44. Typeface Choice “HelveticaNeue-Heavy”, “Helvetica 85 Heavy”, Helvetica, Arial, Sans-serif
  45. 45. Typeface Choice “HelveticaNeue-Heavy”, “Helvetica 85 Heavy”, Helvetica, Arial, Sans-serif
  46. 46. Typeface Choice “HelveticaNeue-Heavy”, “Helvetica 85 Heavy”, Helvetica, Arial, Sans-serif
  47. 47. Typeface Choice “HelveticaNeue-Heavy”, “Helvetica 85 Heavy”, Helvetica, Arial, Sans-serif
  48. 48. Letter spacingCheesophileCheesophileletter-spacing { -1px; }
  49. 49. Heading Line-HeightCheesophilehas launchedline-height { 1.4em}
  50. 50. Heading Line-HeightCheesophilehas launchedline-height { 1.2em}
  51. 51. Background
  52. 52. Background640k
  53. 53. Background640k 184k
  54. 54. Background640k 184k 72k!!
  55. 55. Background 68k
  56. 56. Styling Skip Links#skipLink { display: block; padding: 10px 20px; position: absolute; top:0; left: -999px;}#skipLink:focus { left: 0; }
  57. 57. Styling Skip Links
  58. 58. Styling Skip Links
  59. 59. Two o’clockses:TEA!
  60. 60. 29digital.net/grid/
  61. 61. gridlayouts.com
  62. 62. Grid Framework.column { margin: 0 15px 15px 0; float: left;}.last { margin: 0 0 15px 0 ; }.span1 { width: 60px; }.span2 { width: 135px; } (etc…)
  63. 63. Grid FrameworkMultiple Classes:<div class="column span3"> …</div><div class="column span4 last"> …</div>
  64. 64. Transparent PNGs8 bit Alpha PNG Transparent GIF
  65. 65. Transparent PNGs Repeated 5x5px 8 bit Alpha PNG .box { background: none; filter:progid:DXImageTransform.Micros oft.AlphaImageLoader(src=/img/ overlay.png, sizingMethod=crop); }
  66. 66. Evening:BUGHUNTING!
  67. 67. hasLayout ‘hasLayout’ is the key to understanding all yourproblems in IE, but what is it?
  68. 68. <div>
  69. 69. <div>
  70. 70. <div> hasLayout
  71. 71. ie6.cssdiv, li { zoom:1;}
  72. 72. GOLDEN RULES Don’t be tempted to apply hacks globally with star selector: * Try and understand the problem before hacking: http://www.positioniseverything.net/
  73. 73. ‘POPULAR’ Bugs Element missing? Apply position:relative to it. Floated element with twice the amount of margin? Apply display:inline to it.
  74. 74. 3px Text Jog
  75. 75. Midnight:DEPLOYED!
  76. 76. hicksdesign.co.uk/journal/ design-to-deploymentcheesophile.com

×