Smashing Newsletter: Issue #20


This newsletter issue was sent out to 44,273 newsletter subscribers on October 26th 2010.

Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1, of course.

Table of Contents

01. SeeVolution: Real-Time Website Analytics2
02. Guidelines for Mobile Web App Design3
03. Single Input Log-In Form4
04. Easily Convert Online Articles Into PDF5
05. Study the History of Printing With Graphics Atlas6
06. Free Sans-Serif Font: Ubuntu7
07. Thirty Conversations on Design8

1. SeeVolution: Real-Time Website Analytics

Identifying trouble areas of a website can be hard. Finding out why some sections seem to go unnoticed by users while others get all the traffic is one of a website owner’s many tasks. Website analytics can be difficult to decipher, and “hot spots” are often the hardest areas to identify.

Website analytics9

SeeVolution10 offers free website analytics software aimed at tackling precisely this problem. The software tracks and records visitors’ mouse clicks and scrolling, displaying the data on an overlay heat map.

Less popular areas are colored in blue, while high-activity zones appear in hot white. The map can help you rearrange less used sections of your website and make full use of the parts that receive the most attention. SeeVolution Web analytics launched in August of this year and is still in beta. Signing up is free, and all you need to do is register your domain and add a little JavaScript tracking code to the pages you want to record. A more popular alternative service is CrazyEgg11. (ks)

2. Guidelines for Mobile Web App Design

The mobile Web is everywhere. And every mobile user expects the best possible experience on their respective mobile device. Web designers and developers should meet their expectations, then, by adhering to the official user interface and usability guidelines of each mobile platform.

Mobile Web App Design12

The article “UI Guidelines for Mobile and Tablet Web App Design13” presents a comprehensive list of links to official user interface and user experience guidelines from various manufacturers. The guidelines include samples, tips and descriptions of common weaknesses for mobile platforms such as iPhone, iPad, Android, BlackBerry, Symbian, webOS and Mee Go. Many of the guidelines focus on native application development, but they can be applied to design of mobile applications in general, too. (tb)

3. Single Input Log-In Form

Users do not like filling in Web forms. The fewer the input fields they have to fill in to perform an action, the better the user experience and higher the completion rate. So, it makes perfect sense for designers to experiment with Web form design and try out new approaches that would improve or simplify the registration, sign-up or check-out process. Designers are already experimenting with combining log-in and sign-up fields into one form14, but what about using a single input box for both username and password?

Log-in Form15

Amrinder Sandhu has come up with the idea to enter both username and password in one input box16, separated by a special character. This holds two advantages: the one less input field saves space, and the user can type in their credentials instantly without having to shift focus. But what if the special character used as the separator is contained in the username? And how do you address the fact that browsers and password managers would not know how to handle and cache the fields? And what are the security and accessibility implications — for example, would using the standard input control to capture and mask the password be more secure?

This method seems to produce more usability problems than solutions. Still, it is worth considering. Perhaps you can come up with an elegant solution that addresses these issues? Don’t forget to read the comments on the blog post17, too. (vf)

4. Easily Convert Online Articles Into PDF

Joliprint18 is an online tool that generates PDFs from Web pages. Granted, it is not the only tool that does this, but it is easy to use and versatile. People can use it as a bookmarklet, pulling it into the Favorites toolbar of their browser and clicking as needed. Joliprint generates a clear, reader-friendly two-column layout, free of ads and navigation elements, and it does it pretty well. Sometimes it removes too much content, though, such as readers’ comments.

Convert to PDF19

Website owners can make use of Joliprint with an embed code, bypassing any plug-ins or server-side scripts. Six different buttons are available. There is also an API, and Joliprint works in Google Reader. The tool is free, although the outputted PDFs contain a short vertical line crediting the generator. If you’d like an alternative, give Web2PDF20 a try. (sl)

5. Study the History of Printing With Graphics Atlas

Okay, let’s start exploring prints. Graphics Atlas21 presents the history of printing technologies by guiding you through the print types and techniques that have been used over the centuries. The project’s creators are developing and deploying sustainable practices for the preservation of images and cultural property.

Printing with Graphic Atlas22

Graphics Atlas is a virtual study collection that showcases printing processes from early woodcuts to modern digital print. The print-identification tool guides you through a number of explorations that replicate the experience of identifying prints using common tools. Among other things, you’ll learn about such printing techniques as relief, letterpress, gravure, silver-dye bleach, dye sublimation and direct thermal. The object explorer allows you to view two images side by side to compare traits across processes. Characteristics such as size, format, color, texture, sheen and layer structure are explained as well. (cs)

6. Free Sans-Serif Font: Ubuntu

Everyone loves new fonts, right? Well, the Ubuntu project23 has released a new typeface: the Ubuntu Font Family. It’s an attractive sans-serif font, with four weights and styles (regular, italic, bold and bold italic). Technical design work was done by Dalton Maag.

Free Font: Ubunto24

What sets this font apart from many other high-quality typefaces is that both the TrueType and OpenType files, along with the design files, are distributed under an open license. The creators are expressly encouraging those who download the files to modify, experiment with, improve on and share the fonts. (cc)

7. Thirty Conversations on Design

Designers around the world are constantly confronted by new challenges in their daily work. One of the main challenges is how to design in a way that improves people’s lives. Thirty Conversations on Design25 is an online archive that will serve as a source of inspiration for years to come, a place where the public can post comments and discuss the extent to which design has actually shaped people’s lives.

Conversations on Design26

The website features videos in which architects, designers, authors and leaders of famous brands share their thoughts on design. The 30 participants were all asked to identify the one design that has inspired them most and to identify the problem that design should solve next. The diversity of creative professionals who are interviewed shows how much design permeates our lives every day. (ik)

The authors are: Vitaly Friedman (vf), Sven Lennartz (sl), Iris Kopic (ik), Thomas Burkert (tb), Christina Sitte (cs), Cameron Chapman (cc), Katrin Svana (ks).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26

↑ Back to top Tweet itShare on Facebook

The Smashing Newsletter Team prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' Web with the latest tips and tricks for designers and Web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top