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