Highlights of Week 07/2010
- The Skinny on CSS Attribute Selectors (by Chris Coyier) - CSS attribute selectors are really useful and I've been using them for ages; here a nice summary by Chris.
- Common Misconceptions about Web Designers (by Shannon Noack) - working odd hours? When was the last time I've seen day-light?
- CSS files downloaded twice in Internet Explorer with protocol relative URLs (by Robert Nyman) - and Robert gives three nice (and trivial) examples on how to avoid it.
- Create a Clean and Professional Web Design in Photoshop (by Waheed Akhtar) - Step-by-step guide for Photoshop geeks. Really basic but a nice start.
- Is Web accessibility a human right? (by Vlad Alexander) - excellent article; and Ian Pouncey's response: Accessibility is a human right.
- How to Make Your Small Business Geolocation-Ready (by Leah Betancourt) - jump on the train of geographically optimized interaction!
- The Browser Choice Screen for Europe: What to Expect, When to Expect It (by Dave Heiner) - Microsoft finally bowed to pressure by the EU (better late than never).
- 25 Beautiful Examples of “Coming Soon” Pages (by Tyler Denis) - get inspired; and Walter offers similar A Collection of “Coming Soon” Web Pages
Design Guidelines: Print Stylesheet
One of the most elegant techniques in web design is the use of a print stylesheet to control the style of a webpage on a hardcopy. Being so easy and cheap it is by far the most undervalued technique out there.
Often overseen bonuses are
- adding copyright statements or thank you notes,
- controlling which elements should not be seen (remove menu, commercials,...) and
- in general ensure that the printed page is legible (contrast especially for links, fonts, ...).
Design Guideline for a Print Stylesheet
- Make page legible
- Use serif font family (e.g. Georgia)
- Use points (e.g. 12pt)
- Ensure good contrast (e.g. color: #000; background: #FFF)
- Maximize paper use (e.g. width: 100%)
- Hide elements not relevant to print (e.g. display: none)
- Add content relevant to print (e.g. spell out links, thank you note)
- Use correct markup to reduce amount of styling (e.g. h1, h2,...)
How it works
Embed an extra stylesheet designed for print media into the page.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
This stylesheet takes effect when a user invokes the print function of the browser and overrules style elements in other stylesheets on the page.
Then either provide a button or link that triggers a javascript function to print the page or have the user go through the browser's menu, even print preview would show you the expected layout already.
<a href="#" onclick="window.print();return false;">Print page</a>
I know, evil javascript, but hey, if turned on it works cross-browser (except IE6 with multiple IE versions installed).
Code sample
I recognize that many samples can be found on the web but I also found them incomplete in many cases. I don't claim to be compete myself, but I really like with what I came up with and most of all would like to hear your comments and feedback or even better references or links where you applied it to.
index.htm
<html>
<head>
<style type="text/css" media="all">
@import "main.css";
</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<div id="wrapper">
<div id="statement">Legal statement and thank you note.</div>
<div id="header">Header</div>
<div id="content">Content plus <a href="http://link.com/">Link</a></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
main.css
/**
Elements
*/
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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family: Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/**
Classes
*/
/**
IDs
*/
#wrapper {
background: #FFFFFF none repeat scroll 0%;
margin: 0pt auto;
width: 600px;
}
#header {
border: 1px solid #CCC;
margin: 5px;
padding: 5px;
}
#content {
border: 1px solid #CCC;
background: #EEE;
margin: 5px;
padding: 5px;
height: 200px;
}
#footer {
border: 1px solid #CCC;
margin: 5px;
padding: 5px;
}
a:link, a:visited {
border-bottom:1px dotted;
color:#AE4F0C;
font-weight:bold;
text-decoration:none;
}
a:visited {
color:#333333;
}
a:hover, a:focus {
border-bottom-style:solid;
color:#D03900;
}
a:focus {
/*background:#FFFFCC none repeat scroll 0%;*/
}
#statement {
display: none;
}
print.css
body {
font-family: Georgia, serif;
background: #FFF;
color: #000;
font-size: 12pt;
}
#wrapper, #content {
width: auto;
height: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: #000;
background: transparent none;
}
#content {
margin: 10px;
}
#header, #menu, #sidebar, #footer, .noprint {
display: none;
}
#statement {
display: block;
border: 1px solid #666;
padding: 10px;
}
a:link, a:visited {
color: #781351;
background: transparent;
text-decoration: underline;
}
a:link:after, a:visited:after {
content: " [" attr(href) "] ";
}
References:
- Coyier, C. (2008, 3 3). CSS-Tricks Finally Gets A Print Stylesheet. Retrieved 9 1, 2009, from CSS Tricks: http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/
- Meyer, E. (2002, 5 10). CSS Design: Going to Print. Retrieved 9 1, 2009, from A List Apart: http://www.alistapart.com/articles/goingtoprint/
- Walsh, D. (2008, 2 27). Optimize Your Links For Print Using CSS — Show The URL. Retrieved 9 1, 2009, from david walsh blog: http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url
- webcredible. (2007, 9). Print stylesheet - the definitive guide. Retrieved 9 1, 2009, from webcredible: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
ColoRotate – 3D color scheme generator with social component
Following up my blog entry on How to Create a Color Palette for your Website I stumbled over a fascinating color scheme generator: ColoRotate.
What is ColoRotate
Set into motion by Michael Douma, the executive director of the Institute for Dynamic Educational Advancement, ColoRotate is a Flash-based application with a custom 3D display engine for visualization. When other palette generators are primarily focusing on the 2D color wheel, ColoRotate uses a prism to display color, luminescence, saturation, and brightness all in once. I found it very easy and intuitive to use and was able to produce a harmonious color palette within seconds (well, not that it was for any special purpose) and export the colors as CSS to my clipboard.
Community
Here comes the part that I love: Sign in using your google account to save and share schemes. Yes, that means one can in reverse search, get inspired and re-use existing user-generated schemes.
Loving it.
Note on the side: Loving even more the lazy registration process
Facit
Go, check it out. It's not just another tool in your design toolbox. Look out for the Creative Suite 4 (CS4) plugin to come and start showcasing your palettes and discuss them with the community.
Best Practices for Accessible Stylesheets
Cascading Style Sheets (CSS), or short Stylesheets, is a language used to describe the presentation (that is, the look and formatting) of a document written in a markup language like HTML.
The stylesheet language as described in CSS level 2 revision 1 helps to separate presentation from structure and thus adds flexibility to the look and feel of a web page. Stylesheets are useful for the following reasons:
- Can be re-used for many documents
- Saves download times by caching by the browser
- Presentational changes are fast and easy and only in one document
- Development can be done independently from content and logic
- Increases ability to program for device independence
- Application of different styles for different output formats (e.g. print)
Basic Rules
- Add Stylesheets whenever possible (minimize number of stylesheets)
- Use them consistently across all pages
- Use linked stylesheets rather than embedded styles; avoid inline stylesheets
- Stylesheets do not substitute correct and meaningful structure
Best Practices
Level 1
| Description | W3C | 508 | Example |
|---|---|---|---|
| Organize documents so they may be read without style sheets | 6.1 | d | Ensure that important content appears in the document object and is not generated by style sheets (i.e. through :before and :after pseudo-elements). |
Level 2
| Description | W3C | 508 | Example |
|---|---|---|---|
| Use style sheets to control layout and presentation | 3.3 | n/a | <HEAD> <TITLE>Drop caps</TITLE> <EM class="highlight" title="provide STYLE element">STYLE</EM> type="text/css"> .dropcap { font-size : 120%; font-family : Helvetica } </EM class="highlight" title="provide STYLE element">STYLE</EM>> </HEAD> <BODY> <P><SPAN class="dropcap">O</SPAN>nce upon a time... </BODY> |
Level 3
| Description | W3C | 508 | Example |
|---|---|---|---|
| Create a style of presentation that is consistent across pages | 14.3 | n/a | A consistent style of presentation on each page allows users to locate navigation mechanisms more easily but also to skip navigation mechanisms more easily to find important content. |
Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="BaseStyleSheet.css" />
</head>
<body>
Hello World
</body>
</html>
/* Base CSS Document */
/**
Elements
*/
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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family: Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/**
Classes
*/
/**
IDs
*/
References
- Chisholm. W., Vanderheiden, G., Jacobs, I.; CSS Techniques for Web Content Accessibility Guidelines 1.0; http://www.w3.org/TR/WCAG10-CSS-TECHS/



