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.

Editorial

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!

Editorial4

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

01. CSS Tube Map5
02. A Converter Tool For Multiple Mobile Densities6
03. Branding Lessons From The Master7
04. Hide And Show Passwords On Demand8
05. Merging Loading Indicators To Improve UI9
06. ASCII Art Is Back10
07. 100 Cameras In Pixels11

121. 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 Map13, 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 Map14

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)

152. 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 Densities16

Travis from Teehan-Lax has set out to make this task easier. In his article on “Designing For Multiple Mobile Densities17“, 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)

183. 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 119 and Part 220.

Branding Lessons From The Master21

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)

224. 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 November23, 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: hideShowPassword24.

Hide And Show Passwords On Demand25

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 GitHub26. (cm)

275. 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 UI28

Perhaps we can do a bit better than that. A perfect example is Hakim El Hattab’s Ladda29, 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)

306. 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 Back31

WelcomeMat32 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.

337. 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 Collection34. You got to be serious to come up with these 100 pixelated camera illustrations. You got to be Bill Brown35.

100 Cameras In Pixels36

Bill is a guy who makes long, rambling videos of getting himself a haircut37 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 houses38 and
8-bit videogames
39 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).

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 https://twitter.com/smashingconf
  3. 3 http://www.smashingconf.com
  4. 4 https://smashingconf.com/
  5. 5 #a1
  6. 6 #a2
  7. 7 #a3
  8. 8 #a4
  9. 9 #a5
  10. 10 #a6
  11. 11 #a7
  12. 12 #
  13. 13 http://www.csstubemap.co.uk/
  14. 14 http://www.csstubemap.co.uk/
  15. 15 #
  16. 16 http://www.teehanlax.com/blog/density-converter/
  17. 17 http://www.teehanlax.com/blog/density-converter/
  18. 18 #
  19. 19 http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077
  20. 20 http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309
  21. 21 http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077
  22. 22 #
  23. 23 http://www.lukew.com/ff/entry.asp?1653
  24. 24 http://blog.cloudfour.com/hide-show-passwords-plugin/
  25. 25 http://www.lukew.com/ff/entry.asp?1653
  26. 26 https://github.com/cloudfour/hideShowPassword
  27. 27 #
  28. 28 http://lab.hakim.se/ladda/
  29. 29 http://lab.hakim.se/ladda/
  30. 30 #
  31. 31 http://welcomemat.co/
  32. 32 http://welcomemat.co
  33. 33 #
  34. 34 http://b.illbrown.com/camera/
  35. 35 http://b.illbrown.com/about.html
  36. 36 http://b.illbrown.com/camera/
  37. 37 http://b.illbrown.com/about.html
  38. 38 http://b.illbrown.com/work/nolahomes/
  39. 39 http://b.illbrown.com/work/videogames/

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!

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    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

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