Highlights of Week 10/2010
Posted by Michael Gaigg
Another week of fantastic articles! A little digging (or reading my blog 
) will save you time and buying books hehe.
- 15 Desktop & Online Wireframing Tools (by Tom Walker) - I use Balsamiq Mockups, what about you?
- User Experience Books Free to Read Online (by Simon Whatley) - yes, free
- The Future of Wireframes (by Nishant Kothary) - in Nishant's words: holy guacamole!
- Do’s and Don’ts of Usability Testing (by Demetrius Madrigal and Bryan McClain) - my take-away: don't jump to conclusions, that truly is a beginner mistake.
- How to Increase Conversions on any Website in 45 Minutes (by Andrew Follett) - improvement can happen in less than an hour, keep it down to the top 3 items!
- 43 Essential Controls for Web Applications (by Theresa Neil) - just being able to name them properly (not to mention program them) is a huge communication plus.
- How to Choose Right CSS Frameworks (by Joel Reyes) - a must read for any web programmer. Know at least one css framework really well.
- Why you only need to test with five users (explained) (by Jeff Sauro) - I mean, really well explained.
- Email verification – is your call-to-action strong enough? (by Harry Brignull) - it's tough to lose customers that WANT to be customers. Consider lazy registration as well!
- "Call to Action" Buttons: Guidelines, Best Practices and Examples (by hongkiat) - Another really important article. Talks about size, color, labels etc.
Highlights of Week 07/2010
Posted by Michael Gaigg
- 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
Highlights of Week 03/2010
Posted by Michael Gaigg
- Embedding User Experience in the Product Development Lifecycle (by Mike Hughes) - yes, users are not the only influencers during requirments.
- Tools for concatenating and minifying CSS and JavaScript files in different development environments (by Robert Nyman) - not much to add here...
- A Brief History of Eye-Tracking (by David Leggett) - really brief and easy to digest!
- Download Woven Fabric Social Media icons (by Jon Cavan) - if you love icons as much as I do you need to get these social media icons as reported by Webdesigner Depot
- The Simplicity of Helvetica (by Cameron Chapman) - what's all the buzz about Helvetica? If you still don't know a must read...
- 20 User Experience Books you should own (by Bradley Hebdon) - Excellent compilation and well worth a skim through.
Design Guidelines: Print Stylesheet
Posted by Michael Gaigg
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, ...).
Results of applying a print stylesheet to the page
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
Posted by Michael Gaigg
Following up my blog entry on How to Create a Color Palette for your Website I stumbled over a fascinating color scheme generator: ColoRotate.
Screenshot of 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
Lazy registration
Lazy registration with filled out information
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
Posted by Michael Gaigg
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/
Design Guidelines: Pagination
Posted by Michael Gaigg
One thing I hear from visual designers over and over again: 'Those Usability guys destroy our creative possibilities'. While I understand the desire to live in complete design heaven I want to strongly emphasize the need for a usable design heaven. Every thing in this world has a certain affordance, i.e. it affords to do something which we need to design for. A chair for example affords to be seated on, designers are therefore constrained to design chairs in a way that supports the human body while sitting. Now, does that restrict creativity in chair design? Without doubt NO, numerous examples show that thousands of different chairs exist but all have one common goal: to support the task on hand - which is seating a person!
Variety of chairs showing the existence of a usable design heaven
Designing page elements like pagination is not different. Navigation options must be visible and the pagination must be intuitive. Creative solutions can still be user-friendly as shown in smashingmagazine's Pagination Gallery.
But now, here are the
Design Guidelines for Pagination
- Provide large clickable areas
- Don’t use underlines
- Identify the current page and don't hyperlink it
- Space out page links
- Provide Previous and Next links
- Use First and Last links (where applicable)
- Only use Last links when they make sense
- Put First and Last links on the outside
- Provide a reasonable number of pagination links
- Eclipse missing or endless pages
Code Sample / Template
End results (from http://digg.com/):
<div class="pagination">
<span class="nextprev">« Previous</span>
<span class="current">1</span>
<a title="Go to page 2" href="/page2" mce_href="/page2">2</a>
<a title="Go to page 3" href="/page3" mce_href="/page3">3</a>
<a title="Go to page 4" href="/page4" mce_href="/page4">4</a>
<a title="Go to page 5" href="/page5" mce_href="/page5">5</a>
<a title="Go to page 6" href="/page6" mce_href="/page6">6</a>
<a title="Go to page 7" href="/page7" mce_href="/page7">7</a>
<a title="Go to page 8" href="/page8" mce_href="/page8">8</a>
<a title="Go to page 9" href="/page9" mce_href="/page9">9</a>
<a title="Go to page 10" href="/page10" mce_href="/page10">10</a>
<span>…</span>
<a title="Go to page 252" href="/page252" mce_href="/page252">252</a>
<a title="Go to page 253" href="/page253" mce_href="/page253">253</a>
<a title="Go to Next Page" class="nextprev" href="/page2" mce_href="/page2">Next »</a>
</div>
.pagination {
margin: 5px 0;
line-height: 2em;
}
.pagination span {
}
.pagination a:hover {
background-color: #7F7FB2;
color: #FFF;
}
.pagination a, .pagination a:visited, .pagination a:active {
border: 1px solid #CCC;
background-color: #F2F2F7;
font-weight: normal;
padding: 2px 5px;
text-align: center;
color: #000;
text-decoration: none;
}
.pagination .selected {
background-color: #7F7FB2;
color: #FFF;
font-weight: bold;
}
References
- Ates, F. Pagination 101 - Rules for good pagination. http://kurafire.net/log/archive/2007/06/22/pagination-101
- Rønn-Jensen, J. Usability of Pagination Links. http://justaddwater.dk/2008/01/03/usability-of-pagination-links
- Showcase, D. Pagination Gallery: Examples And Good Practices. http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices
- Yahoo!. Design Pattern Library: Item Pagination. http://developer.yahoo.com/ypatterns/pattern.php?pattern=itempagination
Recent Posts
- 500+ Free Stunning PC Icons August 31, 2010
- Highlights of Week 32/2010 August 16, 2010
- How to use the Google Font API August 10, 2010
- Secret of Pixar’s Success [Link] August 6, 2010
- Esri listens to their Users and changes Pronunciation of its Name August 3, 2010
- Highlights of Week 30/2010 August 2, 2010
Categories
Accessibility (13)
- Code Samples & Tips (4)
- Design Guidelines (11)
- Go figure (7)
- Good News (11)
- Here and there (11)
- This Week’s Highlights (23)
- Usability & UCD (14)
- Web Design (13)
Popular Posts
- Make it easy for your customers to throw money at you!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Section 508: WCAG 1.0 or WCAG 2.0?
- Go figure: 10 Comic Strips that have Something in Common
- Powerpoint Wireframe Stencils as Free Download
People that inspire me
- Björn Seibert
- Boxes and Arrows
- Bruce Temkin
- Christian Heilmann
- David Leggett
- Gez Lemon
- Hannes Schmiderer
- Harry Brignull
- Henny Swan
- Jared Smith
- Jared Spool
- John Rhodes
- Joshua Porter
- Kel Smith
- Scott Berkun
- The Access Pond
Tags
What I'm Doing...
- Top 20 Wireframe Tools http://t.co/zRBd0W0 via @garmahis 1 week ago
- RT @wpzoom 500 Free Icons: WPZOOM Social Networking Icon Set http://bit.ly/aEGdUJ 2 weeks ago
- RT @esriuc GIS: Designing Our Future. The concept of GeoDesign is really taking off, keep an eye out. http://bit.ly/9TioWQ 3 weeks ago
- 1400 super cool web icons by FatCow: http://bit.ly/ctskcU 3 weeks ago
- [JOB OPENING] User Interface Engineer, http://bit.ly/ui-engineer-position 2010-07-30
- More updates...
Posting tweet...