CSS Resources for Layout

How C.R.A.P is Your Site Design?
Exploring the Limits of CSS Layout helps you understand common issues hopefully before you run into one of these situations.

They're All in the Same Gang

Oh, a link to Vitamin again. Yeah, yeah, yeah, what is that? I'll get to it later. And why is it listed among the likes of alistapart, eric myer, mezzoblue?

Answer: Their Advisory Board consists of...
*Dan Cederholm: SimpleBits
Thomas Fuchs: Script.aculo.us
Cal Henderson: Flickr
*Molly E. Holzschlag: molly.com
*Shaun Inman: Mint
Jeffrey Kalmikoff: Threadless
*Eric Meyer: meyerweb.com
*Mike Rundle: 9rules
*Dave Shea: CSS Zen Garden & mezzoblue
*Jeff Veen: Google
*Ryan Carson: Carson Systems

*all authors on alistapart and/or referenced in alistapart articles

They're all in the same gang!

So I will start to map out the Gang connection starting with ALA as a connection source:
ALA
}SimpleBits -- Dan Cederholm
}Mint -- Shaun Inman
}9rules -- Mike Rundle
}CSS Zen Garden -- Dave Shea
}mezzoblue -- Dave Shea
}Adaptive Path -- Jeff Veen
}Zeldman Presents -- Jeffery Zeldman
}HappyCog -- Jeffery Zeldman
}Various -- Ryan Carson, Eric Meyer, Molly E. Holzschlag

Resolve Your Domain Name and DNS Problems

When testing to make sure a domain name is resolving correctly, here is your tool box:
DNS Stuff to look up DNS, Reverse DNS, whois, and you know... stuff.
You can also ping the URL to get it's IP address

http://www.networksolutions.com/whois/index.jsp
WHOIS Search provides domain registration information from Network Solutions

Icon - ography

[Fireside Chat] Icon designers (Part 3 of 3)
Josh: Well, our ongoing side project is IconBuffet: http://www.iconbuffet.com/. It’s morphed into this freaky social-type-network for designers and creative types

Icon Design: Anti-Aliasing

CSS for Print

Quick Link: Going to Print

Standards Compliant
W3C CSS Print Profile [css3]
W3C Paged Media [css3]
W3C XHTML Print DTD

CSS Print Media

Seperate styles will need to be added for printing. You have options on how you can add them to your code:

Link (preferred)

link rel="stylesheet" type="text/css" media="print" href="print.css" /
Import
@import url(paged.css) print,projection;
Embed
STYLE type="text/css"
@media print {
BODY {font-size: 10pt; line-height: 120%; background: white;}
}
@media screen {
BODY {font-size: medium; line-height: 1em; background: silver;}
}
/STYLE

Remove the Extras
#header, #footer, #nav { display: none; }

"What I do is gang up all the things we don’t want to print in a single block at the top of the sheet. I always know where the 'don’t print' stuff is, and removing another thing from the printout is as easy as adding the class or ID selector to the common display: none; rule." - Jason Fried (getting things done the simple way) [3]

Floats Don't Always Print
Well, they only print from Gecko-based browsers. So cross-browser printing means stopping the floats.
#floatedContent { float: none; }

Bye, Bye Backgrounds
Get rid of background images and colors by setting your body background to white and all other content with background images or colors to transparent. Remember to update your font colors also when you were using light font on a dark background.
body { background: white; }
#contentWithBackgrounds { background: transparent; }

Print Readability
Use points and serif fonts (Georgia, Times New Roman) for print. All font sizes that are not relative (% or em) to the body font size will have to be adjusted (ex. 12px changed to 12pt; 14px changed to 14pt).
body { font-size: 12pt; font-family: serif;}

Control the Print Layout with Your Margins

"Unfortunately, some browsers have trouble handling padding appropriately, so it’s currently a better idea to move things around with margins whenever possible." - Eric Meyer [1]

Visible Links
Ideally you would want your links to stand out and be referenced in the print version.
This example provided by Eric Meyer at the least will show your links as bold, underlined text and at the most will show as red text with the linked URL displaying next to the hyper linked text. Gecko-based browsers give the most ideal results.

a:link, a:visited
{
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}

#content a:link:after, #content a:visited:after
{
content: " (" attr(href) ") ";
font-size: 90%;
}

#content a[href^="/"]:after
{
content: " (http://www.yourURL.com" attr(href) ") ";
}

Replace http://www.yoururl.com/ with the site's URL.

Paper Size

"We chose 535 pixels as the maximum dimension for the page layout because that is the widest table that will print on standard letter size or A4 paper " - Yale Style Manual [5]

Resources

[1] Going to Print

[2] Print Different

[3] Little CSS print stylesheet tip

[4] W3C Paged media

[5] Yale Style Manual - dead link

Read More

• 
  Applying CSS from Screen to Print to Handheld – Part 1: Preparation and Groundwork
• 
  Ben Meadow Croft gives you templates that include print style sheets

Related Topics: Email for Print

HTML Symbols & ASCII Characters

ASCII CHARACTERS

Site Speed Optimization

http://www.websiteoptimization.com/services/analyze/

deprecated HTML

Commonly used tags by WYSIWYG's
align="center"
center tags
border attribute
target attribute
marginheight attribute

name attribute: replaced with the id attribute. (In transitional documents both name and id can be used, but a name without an id is not allowed).

Resources:
W3C Attributes Chart: has a column to note which attributes are deprecated

Designing An Email That Will Be Printed

Delivery

Don't just attach an HTML file and a bunch of images to a message and hit “send.”
Don't just paste all your code into your email application, either.

Use a Multipart/Alternative MIME Format so that your mail transfer agent bundles your HTML code, PLUS a plain-text version of the message, together into one email.

Layout

Rely on styles within the TABLE, TD, H1, H2, P, A, and other tags.

Rather than use a p tag, use a font tag with br tags to create the paragraphs

Redefine the font tag inside and after each anchor tag

Create a gutter around the frame (wrapper) table by setting the width to a percentage and/or using the cellpadding to at least 5.

Avoid colspans

Be sure TD cell widths have accurate widths

Email layouts will have to be left-aligned in Lotus Notes

Use those deprecated tags like background= and bgcolor= instead of CSS

The recomended width is 400 - 500 px which is less than the width recomended for printing.

Look Good at 194 pixels wide for AOL users

Tables are recomended and as few as possible. DIVs usually fail and are not usually supported.

Tweak the cellpadding and cellspacing attributes of the HTML tables instead of style="padding: 5px 5px 5px 5px;"

Padding style in the content TDs is set at 10 pixels all round for Google

Browser based emails strip out your HTML, HEAD, and BODY tags. Which means that you should use embedded or inline styles placed below the body tag and that no styles can be placed on the body tag. CSS is not supported well in gmail so it is recommended to test without CSS.

For background color of email, put all content inside a table with the preferred color & style the table width at 98% because Yahoo needs the 1% cushion on both sides.

No CSS-positioning

Required: Gmail requires inline styles.

Images paths are to be absolute paths to images hosted on your server.

In your plain text layout, you’ll want to enter a hard return after each line gets about 60 characters long and create dividers with special characters (ie. *, -, and _). Don't use periods to create divider lines.

Outlook 2007 will not support background images, background colors on nested tables/divs, floats, positions, and poor support on padding & margin attributes.

Required: an extra line break or two after the final HTML tag for AOL & O2000 users

Test with placeholder images for apps that block images and don't use alt tags so that placeholders show up.

Don't start any line with a period. Some ISPs use email servers that will strip any content below a line in your email that starts with a period.

Placing the closing td tag right after (on the same line as) the IMG tag eliminates the annoying and mystifying 1 pixel gap.

Content

Required: use your title tags

Required: an opt-out link

No JavaScript, or ActiveX, or embedding

Use target="_blank"

No free hosted images

"List a valid, physical mailing address. The more contact information you provide, the more reputable your email will look."

Required: Use a legitimate working reply-to with your company domain.

Test

Test in as many email applications as possible! (AOL, Yahoo, Yahoo!Mail Beta, Hotmail, Gmail, Outlook 2003, Outlook 2000, Outlook Express, Thunderbird, Apple Mail, Apple’s Entourage, Lotus Notes 6.5.3 and 6.5.4, Eudora 6.2)

Test for free with a MailChimp free trial account

You can use a downloadable validator to test what actually will work in Outlook 2007 Word Based Email Viewer.

Print

<style type="text/css">
h1{
page-break-before: always;
}
</style>

OR

<DIV style="page-break-after:always"> … </DIV>

Yale Style Manual choses 535 px as the max width because that is the widest table that will print on standard letter size paper. Our width should be no wider than 500px for an email so we are already print friendly.

Resources

HTML Email Design from Mail Chimp

Email Newsletter Design Archives

Microsoft takes email design back 5 years

Email Design Gallery

How To Code HTML Email Newsletters (All New Version)

Style in Email

Quick Tip: Testing your email design with images turned off

Pre Gmail and Outlook 2007, ALA Optimism: CSS and Email, Kissing in a Tree

HTML Emails - Taming the Beast

Review: 10 Emails with Images-Off

Mail Chimp Directory:

What Email Applications Should You Test?

HTML Email Tips for Web Designers

Top HTML Email Coding Mistakes

Tools:

MailChimp Inbox Inspector

Creating Images to become the next IMG

File Types:

GIF (more widely used than png)

• best used for bitmap images, line art, and images with a large area of solid color
• lossless
• transparency needs BG color assigned
• supported in all browsers
• 8-bit 256 colors
• capable of animation

JPG

• best used for photographic images and color patterns
• lossy (sharp edges will appear blurred)
• NO transparency
• supported in all browsers
• millions of colors
• No animation

PNG (becoming an increasingly popular replacement for GIF)

• best used for high quality transparent images (especially on a background that is not solid)
• lossless
• fully transparent; smoother edges than GIF
• Browser Compatibility Issues: The easiest way to PNG support in IE6
• millions of colors (doesn't support CMYK)
• No animation

Tutorials for Images to Create:

Random Lines Made With Mesh (AI) - Veerle

• Mod Lines
• Retro
• 70's Roller Disco
• Simple Shapes
• Geometric
• Clean

Resources:

More information on Web Graphics

Trick Out Your A HREF

Resources:
rev & ref attributes: Boost Your Hyperlink Power

CSS:
Styling Links

Lorem Ipsum Generators

The one I normally use was down today. It's good to always have a back up.
My Back Up: http://www.lorem-ipsum.info/generator3

Translucent DIVs

This focuses on the background of div being a transparent color because it will be overlapping a background image on the body.

Both background and text will be transparent if you don't use positioning or a transparent png for background image.

Start with high contrast between text and background colors to prevent visability issues. Both background and text will be transparent but it should still look good if your transparency is not too low and you choose colors that have a high contrast.

div.transparentDIV
{
background-color: #000000; /* dark background*/
filter: alpha(opacity=70); /* 70 percent opacity */
-moz-opacity: 0.7;
opacity: 0.7;
}

div.transparentDIV *
{
filter: alpha(opacity=100); /* everything in the div to have an opacity at 100 percent */
-moz-opacity: 1;
opacity: 1;
color: #FFFFFF; /* white text */
}

Resources:
CSS Transparency for Internet Explorer (IE), Mozilla and Safari
Background transparency in CSS

Displaying Gallery Images

Awesome Box