Highlights of Week 02/2012
Starting into the new year with a short list of high quality links. As always, your feedback and suggestions are greatly welcome 
Cheers!
- Cross Browser HTML5 Progress Bars In Depth (by Zoltan “Du Lac” Hawryluk)
- 15 Web Design Trends to Watch Out For in 2012 (by Jake Rocheleau)
- Profiling CSS for fun and profit. Optimization notes (by kangax)
- Google Maps: Designing the Modern Atlas (by Willem Van Lancker)
- Password strength verification with jQuery (by Jim Nielsen)
Highlights for Week 48/2011
- 15 Responsive CSS Frameworks Worth Considering (by Paul Andrew)
- Complexity and User Experience (by Jon Bolt)
- Origins of the Apple Human Interface
- Internet Visionary Paul Otlet - Networked Knowledge, Decades Before Google (by Meike Laaff)
- The Anatomy of an Experience Map (by Chris Risdon)
- A Complete Color Spectrum of Web Design Inspiration (by Chris Spooner)
Minimalist Web Design: How Minimal is Too Minimal? (by Delwin Campbell)
Highlights of Week 30/2011
- How To Create a Slick Features Table in HTML & CSS (by Chris Spooner) - very slick
- 10 Absentee UX Features on Top e-Commerce Sites (by Paul Bryan) - co-shopping? en espanol?
- 6 tips to create better one-page websites (by Kendra Gaines)
- 10 Unmissable TED Videos For Designers (by Alvaris Falcon) - love TED, and you should too
- 20 jQuery Tutorials Teaching Super Cool Visual Effects (by Chris Spooner) - that's why you must love jQuery
- Requirements-Driven Software Development Must Die (by Fred Beecher) - nice approach with really good arguments, but with any workflow it seems just a little bit off
- 70+ Awesome Tumblr themes (by Cameron Chapman) - got tumblr? get a theme - and a life ...and follow me on tumblr
- Examples of Sites where localStorage should or is being used (by Chris Coyier) - localStorage is to HTML5 what isolated storage is to Silverlight
- jQuery plugin: Chosen (by Harvest) - go check it out, nothing else to say
- Freelance Web Development: 9 Tips for Better Project Management (by Kelli Shaver) - you do freelance work? enhance your productivity with these tips, very nice!
Highlights of Week 22/2011
- User-interface, user-experience & usability explained (by Bernard Schokman) - I think the title is misleading, it's more about "Practical design principles for UI/UX/Usability Design"
- 10 Important UI Design Considerations for Web Apps (by Marc Gayle) - try polishing the little things to make your app truly awesome
- Tools for Facilitating Feedback on Prototypes and Wireframes (by David Leggett) - What's your favorite? Why?
- How to Identify the Best Design Problems (by Joshua Porter) - About the importance of prioritization.
- A Guide to CSS Colors in Web Design (by Alexander Dawson) - Once again a great guide by Alexander; contrast, shades, hues, transparency and co.
- 40 Beautiful and Elegant WordPress Themes of May 2011 (by Madalin Tudose) - very nice collection, wordpress has come a long way and so did its front-end designers
- HOW TO: Add the +1 Button to Your WordPress Site (by Christina Warren) - if you like it or not, here is the +1 Button integration...
- Why You Should Buy Your First 5000 Twitter Followers (by Rohit) - ethical or not... love or not love... with a little help from your friends
- So you think you can build a website? (by Vitamin in Talent) - a really handy flowchart to determine if your idea will result in a great website
- The ultimate HTML5 resource guide (by Cameron Chapman) - what else to say? ultimate resouce guide!
- (More) Useful Web Usability Testing Tools (by hongkiat) - What are your experiences with these tools? Which one is your favorite? Why?
Highlights of Week 42/2010
- Information Architecture 101: Techniques and Best Practices (by Cameron Chapman) - good summary and references.
- 40+ Useful Online Generators For Web Designers (by Cameron Chapman) - here another one by Cameron - a MUST-READ references list for web designers.
- Data Visualization with CSS: Graphs, Charts and More (by bellefoong via hongkiat) - pure HTML/CSS charting examples, yes, that means copy-paste...
- The A-Z List for Web Designers (by Alexander Dawson) - love this alphabet soup, nothing really surprising, but that's maybe why i like it so much
- Slideshow Patterns in Modern Web Design (by Joel Reyes) - slideshows become more and more prominent - so here are some patterns used widely
- Useful Calendar & Date Picker Scripts For Web Developers (by hongkiat) - collection of calendars
- 10 Random CSS Tricks You Might Want to Know About (by Catalin Rosu) - *background-color? give me a break IE...
- Introducing HTML5 Web Sockets – taking bidirectional communication on the web to the next level (by Robert Nyman) - pushing data to the client? wow-wow-wow!
- Designing Websites Under Information Technology Restrictions (by Maria Malidaki) - the article argues that technology restrictions are challenges that can be solved - I would argue that restrictions are blessings
Highlights of Week 10/2010
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
- 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, ...).
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
About Me
Michael Gaigg is Lead UI Engineer in Esri's Professional Services Division.
He has been designing map application for over 10 years and can't stop thinking about improving them.
Categories
- Accessibility (16)
- Code Samples & Tips (15)
- Conclusions (6)
- Design Guidelines (12)
- Designing Map Interfaces (5)
- Go figure (9)
- Good News (25)
- Here and there (29)
- Map Applications (12)
- This Week's Highlights (53)
- Usability & UCD (27)
- Web Design (28)
Popular Posts
- 10 Webpage Design Lessons learned from a trip to Las Vegas… seriously!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
- Job Posting: User Interface (UI) Engineer at ESRI
- Dashboard Design
