Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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

  1. SeeVolution: Real-Time Website Analytics2
  2. Guidelines for Mobile Web App Design3
  3. Single Input Log-In Form4
  4. Easily Convert Online Articles Into PDF5
  5. Study the History of Printing With Graphics Atlas6
  6. Free Sans-Serif Font: Ubuntu7
  7. 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 analytics

SeeVolution 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 CrazyEgg9. (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 Design10

The article “UI Guidelines for Mobile and Tablet Web App Design11” 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 form12, but what about using a single input box for both username and password?

Log-in Form13

Amrinder Sandhu has come up with the idea to enter both username and password in one input box14, 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 post15, too. (vf)

4. Easily Convert Online Articles Into PDF

Joliprint16 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 PDF17

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 Web2PDF18 a try. (sl)

5. Study the History of Printing With Graphics Atlas

Okay, let’s start exploring prints. Graphics Atlas19 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 Atlas20

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 project21 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: Ubunto22

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 Design23 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 Design24

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

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial 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. 1

    James Martin

    July 9, 2015 4:44 am

    This page provides best informational resource of web apps. I get lots of information regarding web apps from the links which mentioned in the post.


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top