Your SlideShare is downloading. ×
0
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Design To Deployment

1,976

Published on

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

No Downloads
Views
Total Views
1,976
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HELLO FOWD!
  • 2. HICKSDESIGNFrom Design toDeployment(a day of cheesophile.com)
  • 3. I ♥ CHEESE
  • 4. FLAT HICKS ♥ CHEESE
  • 5. Breakfast:SET UP!
  • 6. Setup a Local Server MAMP HEADDRESS
  • 7. Morning:CONTENT!
  • 8. h1
  • 9. h1 h4
  • 10. h1 h4ul
  • 11. h2h1 h4ul
  • 12. h2 h3h1 h4ul
  • 13. h2 h3 h2h1 h4ul
  • 14. h2 h3 h2h1 h3 h4ul
  • 15. h2 h3 h2h1 h3 h4 h3ul
  • 16. h2 h3 h2h1 h3 h4 h3ul h2
  • 17. h2 h3 h2h1 h3 h4 h3ul h2 h4
  • 18. h2 h3 h2h1 h3 h4 h3ul h2 h4 h4
  • 19. content.htmlBlogReviewsCheese MapGuidesStockists DirectoryNewsLittle Wallop launchesIf youve been watching Alex James…
  • 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. 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. Page titlesHomepage:<title>Welcome to Cheesophile!</title>Subpage:<title> Little Wallop Launches | News | Cheesophile.com</title>
  • 23. Skip Links<a href="#content" title="Skip past the navigation" id="skipLink">Skip to the content</a>
  • 24. Afternoon:STYLING!
  • 25. j$kGREAT DEBATE!EMS vs PIXELSFLUID vsFLASHHTML vs FIXED
  • 26. Which Browsers to Support?
  • 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. HTMLCSS
  • 29. HTML + CSSbasic.css <link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />
  • 30. HTML + CSS =basic.css <link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />
  • 31. HTML + CSS layout<style type="text/css"> @import/**/"css/layout.css";</style>
  • 32. HTML + + @ reset CSS + @ typographylayout@import url(reset.css);@import url(typography.css);
  • 33. HTML + + @ reset CSS + @ typography =layout@import url(reset.css);@import url(typography.css);
  • 34. @ layoutHTML + @ reset @ typography
  • 35. @ layout HTML + @ reset @ typography + CSS IE6<!--[if IE 6]><link href="/css/ie6.css" type="text/css" rel="stylesheet" /><![endif]-->
  • 36. @ layout HTML + @ reset @ typography + CSS = IE6<!--[if IE 6]><link href="/css/ie6.css" type="text/css" rel="stylesheet" /><![endif]-->
  • 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. 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. Snippetsimg { border:0; }input { vertical-align:middle; }.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
  • 40. Typeface Choice Helvetica, Calibri, Verdana, Arial, Sans-serif
  • 41. Typeface Choice Roquefort, Brie, Red Leicester, Supermarket-Cheddar
  • 42. Typeface Choice Gabriel Coulet Roquefort, Roquefort, Cropwell Bishop Stilton, Stilton, Any-old-Blue-Cheese
  • 43. Typeface ChoiceCornish Yarg CheeseCornish Yarg CheeseCornish Yarg CheeseCornish Yarg CheeseCornish Yarg Cheese
  • 44. Typeface Choice “HelveticaNeue-Heavy”, “Helvetica 85 Heavy”, Helvetica, Arial, Sans-serif
  • 45. Typeface Choice “HelveticaNeue-Heavy”, “Helvetica 85 Heavy”, Helvetica, Arial, Sans-serif
  • 46. Typeface Choice “HelveticaNeue-Heavy”, “Helvetica 85 Heavy”, Helvetica, Arial, Sans-serif
  • 47. Typeface Choice “HelveticaNeue-Heavy”, “Helvetica 85 Heavy”, Helvetica, Arial, Sans-serif
  • 48. Letter spacingCheesophileCheesophileletter-spacing { -1px; }
  • 49. Heading Line-HeightCheesophilehas launchedline-height { 1.4em}
  • 50. Heading Line-HeightCheesophilehas launchedline-height { 1.2em}
  • 51. Background
  • 52. Background640k
  • 53. Background640k 184k
  • 54. Background640k 184k 72k!!
  • 55. Background 68k
  • 56. Styling Skip Links#skipLink { display: block; padding: 10px 20px; position: absolute; top:0; left: -999px;}#skipLink:focus { left: 0; }
  • 57. Styling Skip Links
  • 58. Styling Skip Links
  • 59. Two o’clockses:TEA!
  • 60. 29digital.net/grid/
  • 61. gridlayouts.com
  • 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. Grid FrameworkMultiple Classes:<div class="column span3"> …</div><div class="column span4 last"> …</div>
  • 64. Transparent PNGs8 bit Alpha PNG Transparent GIF
  • 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. Evening:BUGHUNTING!
  • 67. hasLayout ‘hasLayout’ is the key to understanding all yourproblems in IE, but what is it?
  • 68. <div>
  • 69. <div>
  • 70. <div> hasLayout
  • 71. ie6.cssdiv, li { zoom:1;}
  • 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. ‘POPULAR’ Bugs Element missing? Apply position:relative to it. Floated element with twice the amount of margin? Apply display:inline to it.
  • 74. 3px Text Jog
  • 75. Midnight:DEPLOYED!
  • 76. hicksdesign.co.uk/journal/ design-to-deploymentcheesophile.com

×