Smashing Newsletter: Issue #80
If you’ve been a Smashing Newsletter subscriber for a while now, you most probably already know that we’ve started introducing a series of thoroughly selected high-quality eBooks in the Smashing Library2. Paul Boag’s “Client Centric Web Design” eBook will be available in the first week of April in PDF, EPUB and Kindle (DRM-free) formats.
Further updates concerning eBooks written by well-respected designers and developers in the industry will be announced in our newsletters, mailings and on Twitter4. Also, we’ve been busy organizing a variety of full-day workshops5 for you. Be sure to stay tuned — we’re sure you won’t be disappointed!
The Smashing Team
Table of Contents
01. Your Own CSS Creatures6
02. Type It Right: Quotes and Accents7
03. The Secret UX Ingredient8
04. Double, Triple (Or More) Your Conversion Rates9
05. Free Printable Paper Templates For Sketching10
06. StyleDocco: A Tool For Creating Stylesheets The Easy Way11
07. Isometrify: A Free Custom Panel For Photoshop12
08. Shapes Of Cities13
09. What Would Responsive TV Look Like?14
10. Old Handcraft Meets Rock15
161. Your Own CSS Creatures
Can you imagine a colorful set of animated confetti, in which each one has a color, a personality and other striking attributes? What if you could create your own little round buddy to be part of this fiesta?
In fact, you can: Bennet Feely’s project CSS Creatures18 allows you to simply send out a tweet with your chosen characteristics, and, in less than 20 seconds, your new friend will appear among his siblings. Apparently, the creatures are generated from 100% all-natural HTML5 and fresh-squeezed CSS3, so if you really love the characters, you can take them home with you and add them to your personal site! (tts)
192. Type It Right: Quotes and Accents
Quotes & Accents22 is a wonderful guide on all the useful Mac keyboard shortcuts that crown your letters with accents and frame them with the right quotation marks. Now you won’t have to go on a long, exhaustive search if you want write “El Niño” the right way — that is, if you have any wish to so. And, by the way, you can type em-dashes and smart quotes by pressing on a “hyphen” and a “quote”-character on your iOS devices, too! (jc)
233. The Secret UX Ingredient
What do the creators of Clear, Mailbox and Sunrise have in common? They’ve discovered a simple formula that works for their apps and keeps users interested, despite their simplicity. How did they manage that?
Matthew Moore wrote a fascinating short article on “branded interactions”25. He describes how some simple interactions become almost synonymous with the app they were most successfully used in. As Matthew writes, “when the interaction is unique, your users can begin to associate that interaction with your product.” If you can own an interaction, that’s a very strong level of branding in today’s interface-filled world. It wouldn’t hurt to take a look at his other articles, either. They are well-written, witty and thought-provoking. (jc)
264. Double, Triple (Or More) Your Conversion Rates
If you design websites for a living, it’s very likely that at some point you’ve dealt with (and maybe struggled with) building a well-performing landing page. You may have racked your brain to find the best strategy to increase conversion rates. Would you like to see how others have tackled this? In Step-by-step landing page copywriting27, Nathan Barry takes you through the process of writing and designing the landing page of ConvertKit28.
There’s a lot of value to take away from Nathan’s post: you get detailed insights into a real-life landing page design — a learning process with lots of advice and feedback on conversion rate optimization and copywriting. Plus, you can follow up by reading dozens of comments which are just as interesting. Many relevant and important points and questions are raised here, such as the advantages of A/B testing, what psychology says about appealing pricing schemes and whether or not you can actually build trust if you ask for your visitors’ email addresses prematurely. (ea)
305. Free Printable Paper Templates For Sketching
Thinking of graph paper (also known as grid paper or millimeter paper), most of us will probably remember math class. Graph paper is printed with fine lines arranged in a regular grid and works well for drawing, sketching or plotting functions. It’s commonly used in engineering but can come handy for many other purposes as well. It’s a great way to align your art project sketches or wireframes, for example.
Graph paper is available in stationery shops, but — as is the case with so many other things — you can also get it online. Paperkit32 is a set of free printable graph paper templates. Highly customizable, the set has its own toolbar which lets you adjust settings such as grid lines, margin size, stroke color and width, as well as paper size, to generate the exact type of graph paper that you need. Once you’ve chosen your settings, you can download your customized template and immediately print it, or save it for your next project. Paperkit is available as dotted or lined paper, too. (ea)
336. StyleDocco: A Tool For Creating Stylesheets The Easy Way
You probably came across style guides recently, yet have you thought about a simple and quick way to generate them right from your code, especially if you develop in the browser anyway? StyleDocco34 generates style guide documents from your stylesheets by parsing your stylesheet comments through Markdown.
You can simply write example HTML snippets in your stylesheet comments, prefixed with 4 spaces or between code fences (“`). StyleDocco will then display a preview using the applied styles on your example HTML code. The previews are displayed in a resizable iframe, so that you can display your responsive design at different viewport sizes. StyleDocco is free open source software, and can be download from GitHub. It was inspired by original Docco36 by Jeremy Ashkenas and Knyle Style Sheet37. (ml)
387. Isometrify: A Free Custom Panel For Photoshop
Some people love to make others’ lives easier, and Kamil Khadeyev is certainly one of those people. On his blog, he shares a custom panel for Photoshop39 that helps to transform objects with isometry and generate a custom-sized grid for them. Right now it uses an angle of isometry of 26.565 degrees, which is common for most pixel art work, but Khadeyev is working on an option to let the user define the angle. The panel is intended to be used with shape layers only, which means that you can use raster graphics but the result will not be perfect. The pixel grid snapping also still has some minor issues, but moving them manually shouldn’t be a problem.
So far, the panel has three buttons for transforming shapes either to the right, the left or the top. There is also a button for an isometric grid pattern. But that’s not all. Khadeyev has already planned for more options such as extruding and moving shapes. You’re welcome to suggest more ideas. (ml)
418. Shapes Of Cities
Every large city around the world has some architectural monuments which differentiates it from other cities. These monuments are so strongly associated with the cities that it’s possible to recognize them just with a simple silhouette.
In Yoni Alter’s project Shapes of Cities43 you can explore the overlapping outlines of many buildings. The artist used different colors to enable you to distinguish one from another, and the result is a flashy collection of city postcards. It might be a fun game to try to recognize a city from its shapes. Try it out! (tts)
449. What Would Responsive TV Look Like?
What if your TV responded to your viewing habits, adapted to the screen size and even detected your accessibility needs? For one, you might never get off your couch, but you might also leave your kids in front of the TV without being too worried about nightmares over bedtime.
In his article on Responsive Television46 Bryan Clark proposes a vision of what a TV version of responsive design could be. Adaptation to different screen sizes is the least of it — and most likely the easiest part to implement right now. Clark imagines a much wider range of customization options for the different elements on the screen — such as a bigger sports ticker — as well as smarter accessibility detection and HAL-like awareness. Kids won’t be able to watch the horror movie from behind their parents’ backs anymore because the TV detects what they are trying to watch and pauses (oh, the injustice!). An interesting read, whether you approve or not. (jc)
4710. Old Handcraft Meets Rock
There is probably nothing more inspiring than watching other creative designers and craftsmen in their creative process. Designer and traditional sign-writer David A. Smith48 is one of these passionate artists whose enthusiasm is contagious. Filmmaker Danny Cooke49 has captured Smith’s love for the special but nearly forgotten turn-of-the-century craft of creating reverse glass signs and gilded mirrors in a stunning 20-minute film.
The film51 accompanies Smith as he creates the cover artwork to John Mayer’s “Born and Raised” album. Sneak a peak into his creative routine from the first hand sketches to the application of fragile gold leaf on a finished glass panel. Watching this ephemera trading card-style work of art come to life is a magical and inspiring trip back in time. A definite must-see for every artist! (cm)
The authors in this newsletter are: Talita Telma-Stöckle (tts), Jan Constantin (jc), Esther Arends (ea), Melanie Lang (ml), Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Clarissa Peterson (proofreading).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://shop.smashingmagazine.com/smashing-library-complete.html
- 3 https://shop.smashingmagazine.com/smashing-library-complete.html
- 4 https://twitter.com/SmashingLibrary
- 5 https://shop.smashingmagazine.com/workshops/?pk_campaign=Shopfront-Workshop-banner-7%2F3%2F2013
- 6 #a1
- 7 #a2
- 8 #a3
- 9 #a4
- 10 #a5
- 11 #a6
- 12 #a7
- 13 #a8
- 14 #a9
- 15 #a10
- 16 #
- 17 http://bennettfeely.com/csscreatures/
- 18 http://bennettfeely.com/csscreatures/
- 19 #
- 20 http://jessicahische.is/awesome
- 21 http://quotesandaccents.com/
- 22 http://quotesandaccents.com/
- 23 #
- 24 http://www.matthewmooredesign.com/branded-interactions/
- 25 http://www.matthewmooredesign.com/branded-interactions/
- 26 #
- 27 http://nathanbarry.com/step-by-step-landing-page-copywriting/
- 28 http://convertkit.com/
- 29 http://nathanbarry.com/step-by-step-landing-page-copywriting/
- 30 #
- 31 http://paperkit.net/
- 32 http://paperkit.net/
- 33 #
- 34 https://github.com/jacobrask/styledocco
- 35 https://github.com/jacobrask/styledocco
- 36 https://github.com/chjj/marked
- 37 https://github.com/kneath/kss
- 38 #
- 39 http://blog.kam88.com/en/isometrify.html
- 40 http://blog.kam88.com/en/isometrify.html
- 41 #
- 42 http://yoniishappy.com/index.php?/design/shapes-of-cities/
- 43 http://yoniishappy.com/index.php?/design/shapes-of-cities/
- 44 #
- 45 http://bryanjclark.com/bryanjclark/responsive-television
- 46 http://bryanjclark.com/bryanjclark/responsive-television
- 47 #
- 48 http://www.davidadriansmith.com
- 49 http://www.dannycooke.co.uk
- 50 http://vimeo.com/60647216
- 51 http://vimeo.com/60647216