Design To Deployment

25 %
75 %
Information about Design To Deployment

Published on April 20, 2008

Author: hicksdesign

Source: slideshare.net

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 h4

h2 h3 h2h1 h3 h4 h3ul h2 h4 h4

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> <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…

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">

Page titlesHomepage:<title>Welcome to Cheesophile!</title>Subpage:<title> Little Wallop Launches | News | Cheesophile.com</title>

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 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/

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);@import url(typography.css);

@ layoutHTML + @ reset @ typography

@ layout HTML + @ reset @ typography + CSS IE6<!--[if IE 6]><link href="/css/ie6.css" type="text/css" rel="stylesheet" /><![endif]-->

@ layout HTML + @ reset @ typography + CSS = IE6<!--[if IE 6]><link href="/css/ie6.css" type="text/css" rel="stylesheet" /><![endif]-->

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%;

Snippetsimg { 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 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: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 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.AlphaImageLoader(src=/img/ overlay.png, sizingMethod=crop); }

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 hacking: http://www.positioniseverything.net/

‘POPULAR’ Bugs Element 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

Add a comment

Related presentations

Related pages

Design, Deployment and Performance of 4G-LTE Networks ...

eBook Shop: Design, Deployment and Performance of 4G-LTE Networks als Download. Jetzt eBook herunterladen & bequem mit Ihrem Tablet oder eBook Reader lesen.
Read more

Exchange Server 2013 - Design, Deployment and Migration

Get started with Microsoft Exchange Server 2013. Learn about the new features, how to install the server roles, high availability, management, and more.
Read more

Virtual SAN Design and Deployment Guide - DataCore

DataCore Virtual SAN Design and Deployment Guide DataCore Virtual SAN Design and Deployment Guide 2 | P a g e Table of Contents INTRODUCTION ...
Read more

IP6FD: IPv6 Fundamentals, Design & Deployment | CISCO ...

IP6FD: IPv6 Fundamentals, Design & Deployment Seminar in Berlin, Frankfurt, Hamburg, München/Hallbergmoos : alle unsere offenen Seminare, Inhouse-Seminare ...
Read more

Azure Information Protection deployment roadmap | Azure ...

Choose the deployment roadmap that's applicable for your organization and that matches the subscription functionality and features that you need:
Read more

dict.cc Wörterbuch :: deployment :: Deutsch-Englisch ...

Englisch-Deutsch-Übersetzung für deployment im Online-Wörterbuch dict.cc (Deutschwörterbuch).
Read more

Coaching: IPv6 Fundamentals, Design & Deployment - Springest

Haben Sie an "IPv6 Fundamentals, Design & Deployment" teilgenommen? Schreiben Sie dann eine Bewertung! Als Dankeschön für Ihre Bewertung spendet ...
Read more

Design Deployment | LinkedIn

View 65784 Design Deployment posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn.
Read more

SAP BusinessObjects Design Studio 1.6 SP03 – SAP Help ...

SAP BusinessObjects Design Studio enables application designers to create analysis applications and dashboards – based on SAP NetWeaver BW, SAP HANA and ...
Read more

Creative Suite Enterprise Deployment | Adobe Developer ...

Purpose: Enable enterprise administrators to deploy Adobe Creative Suite 4 products, using CS4 deployment packages, with little to no help from Adobe support.
Read more