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 #86

This newsletter issue was sent out to 156,423 newsletter subscribers on Tuesday, June 11th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


You’ve probably already heard — the Smashing Conference is on its way! Two single-track conference days, three full-day workshops, 16 excellent speakers, and only 300 available seats. We’ll be announcing more information via @smashingconf2 in the upcoming weeks — be sure to stay tuned via the SmashingConf 2013 website3, too!


We’d be honoured to welcome you in our home town Freiburg, on September 9–11th 2013, at the foot of the legendary, beautiful Black Forest in Southern Germany. Let us know whether you’ll be attending via Twitter using the hashtag #smashingconf!

We look forward to meeting you,
The Smashing Team

Table of Contents

  1. CSS Tube Map4
  2. A Converter Tool For Multiple Mobile Densities5
  3. Branding Lessons From The Master6
  4. Hide And Show Passwords On Demand7
  5. Merging Loading Indicators To Improve UI8
  6. ASCII Art Is Back9
  7. 100 Cameras In Pixels10

1. CSS Tube Map

The iconic Tube Map of the London Underground network can be found on an infinite number of souvenir articles and has also inspired many artists and designers. One of these is CSS Tube Map11, which displays a replica built in HTML5 and CSS3 (and a tiny bit of jQuery). It uses no images so even the symbols are styled and arranged with CSS.

CSS Tube Map12

Each tube line consists of an unordered list, stations and connections (including name and symbol) are list items. The project by John Galantini was completed in five weeks, in about 120 hours of his spare time. All elements are positioned absolutely. It’s definitely not be the most practical CSS example to be used in your projects, but the effort is worth commending. Be prepared, though: you probably have never seen so many… creative HTML elements on a website. (ml)

2. A Converter Tool For Multiple Mobile Densities

Displays with high densities have been around now for some time and they definitely came to stay. Although this development is greatly enhancing the quality of our screens, at the same time it can create some headache for designers and developers who are determined to provide a great experience for all of their customers using every type of screen resolution. Keep in mind that it is not just about Retina and non-Retina displays; Android devices have evoled from low density, ldpi, all the way to extra high density, xhdpi, as well.

A Converter Tool For Multiple Mobile Densities13

Travis from Teehan-Lax has set out to make this task easier. In his article on “Designing For Multiple Mobile Densities14“, he explains the complexity and the variety of high density displays (just in case you haven’t learned that much about the issue so far). It’s time to dismiss your calculator! Simply type in height and width of any density and instantly see the dimensions of the other densities. It currently supports the major density groups: non-retina/mpdi, hdpi, retina and xhdpi. (ml)

3. Branding Lessons From Google

How exactly does a brand like Google become so strong? What are the secrets behind creating a memorable, consistent brand identity? And in general, how does Google, as a large company, shape their brand? If you’d love to find out, then lucky you! You now have the chance to take a peek at the principles that Google’s designers apply when they create their icons, logos and illustrations — the Google Visual Assets Guidelines – Part 115 and Part 216.

Branding Lessons From The Master17

Geometric shapes, front facing and pixel-perfect icons – these are just some of the formulas that you’ll come across in Google’s lesson on brand shaping. You’ll also be able to see some very interesting examples of how-to’s and how not-to’s, and even find out about fine details such as Google’s icons proportions and color palette.

The resource is essentially a case study by Creative Lab, a design agency that has created a set of guidelines which help Google’s designers and vendors to produce high-quality work and also helps strengthen Google’s identity. A very concise and informative breakdown of guidelines which all serve to maintain Google’s branding concept of visual coherence. (ea)

4. Hide And Show Passwords On Demand

We usually take it for granted that whenever we enter a password the only thing we get to see are little dots instead of characters. Although this can be a a real struggle, especially on a mobile device, most designers still stick to that convention. But perhaps the benefits of this default aren’t as high as we thought. As Luke Wroblewski documented last November18, masked passwords increase login failures while not providing any further security. So what to do then? A nice alternative for starred out passwords comes from Tyler Sticka and the team at Cloud Four: hideShowPassword19.

Hide And Show Passwords On Demand20

Once implemented (both jQuery and Zepto plugins are available), you can let your users decide whether they want to have their password displayed or not during the login process. What’s really nifty about hideShowPassword is the “innerToggle” feature showing a hide/show control inside the input field. You can style it as you like, with some text or even a symbol. The plugin is waiting for you on GitHub21. (cm)

5. Merging Loading Indicators To Improve UI

You know the drill: A user patiently fills in a Web form, submits the data, and finds herself staring on a grey lightbox with a progress bar, or perhaps a semi-transparent circle that looks a bit like real-time auto-update. What happened to the data? Is it being submitted? Submitting data is a very crucial moment in the user experience, so leaving users wondering what’s going on probably isn’t a good idea.

Merging Loading Indicators To Improve UI22

Perhaps we can do a bit better than that. A perfect example is Hakim El Hattab’s Ladda23, a UI concept which merges loading indicators into the action that invoked them. This means that when a user clicks on a submit button, the button itself changes, providing users with an immediate feedback upon submit. The tweak might be very subtle, but it does make the experience a bit smoother. Definitely worth bookmarking! (vf)

6. ASCII Art Is Back

Have you ever stumbled upon an interesting Easter Egg waiting for you in the source code of a website? Well, this is probably not something you should do in production code, but if you do want to give your code some personality, why not try out something… different for a change? Let’s say… adding ASCII art welcome mats for HTML on your own blog or side project?

ASCII Art Is Back24

WelcomeMat25 is a resource dedicated to just that. You can copy and paste ASCII art into your code, and you can also contribute your own ASCII mats. The project came out of an experiment by Zac Halbert on creating a responsive prototype using Jekyll, Foundation and SASS/Compass. And according to him, he learned a lot along the way.

7. 100 Cameras In Pixels

Take a guy whose desire is deeply rooted in nostalgia and who has a passion for making pixel art and put one and one together. You will get something like The Camera Collection. You got to be serious to come up with these 100 pixelated camera illustrations. You got to be Bill Brown.

100 Cameras In Pixels

Bill is a guy who makes long, rambling videos of getting himself a haircut every year. Besides, he’s a graphic and Web designer who must be more than loving what he’s doing. You can easily kill hours scrolling through all his amazing creations. Besides his camera collection, he also made a New Orleans houses and 8-bit videogames pixel collection. All of them are free to download under a Creative Commons license. You can do anything with them, but please give Bill credit somewhere. (ea)

The authors in this newsletter are: Cosima Mielke (cm), Esther Arends (ea), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research).


  1. 1
  2. 2
  3. 3
  4. 4 #a1
  5. 5 #a2
  6. 6 #a3
  7. 7 #a4
  8. 8 #a5
  9. 9 #a6
  10. 10 #a7
  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

↑ 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

    Stanimir Genov

    June 12, 2013 9:23 am

    Used to love this newsletter. Now it seems to only deliver old info and uninteresting articles.
    I mean.. come on.. the first entry has been used in another newsletter more than a month ago..
    Please try to provide info that is actually usable and not just “a nice read” during coffee breaks..


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