Smashing Newsletter: Issue #93

This newsletter issue was sent out to 160,655 newsletter subscribers on Thursday, September 19th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

“Rules are made to be broken,” as the old saying goes. Well, why not break some, look beyond the black box and experiment? However, while creative chaos is fruitful for visual explorations and creative work, rigid constraints can be just as helpful in your workflow. Front-end methodologies such as BEM give us a concise way to structure and organize our code, but do we follow the same process in other areas of our daily routine? What about our PSD2s? What about our invoices or folders that contain illustrations for our clients? Do you use any naming conventions3 that help you find your files whenever you need them?

Editorial4

A couple of weeks ago (for the very first time in a long time) I sat down to reconsider how we actually organize our work here at Smashing Magazine. Now, this may sound like a little unnecessary detail, but the way you name your keyboard shortcuts, files or how you structure folders can help streamline processes and move all distractions out of the way. At the same time, you can also ensure that the end result doesn’t need an extra polish once you’ve passed the deadline (nobody does this anyway, right?). Once the SmashingConf 20135 was over, it was a pleasant surprise to realize that all files were in the right order and structure, so no cleaning up was necessary. When was the last time you felt the same way? Honestly?

What naming conventions do you use? Share your insights with us using the hashtag #smname6. And happy tweaking!

— Vitaly (@smashingmag)

Table of Contents

01. Free Font: Born Typeface7
02. Another Take On Off-Canvas Navigation8
03. Making The Best Out Of Your… Favicon!9
04. Credit Card Payment Within A Single Input Field10
05. Printing Shipping Labels The Easy Way11
06. Wait! What’s That Font Called?12
07. Throughout The Dark Corners Of The Web13
08. Flashback To The Present14
09. Advice From Designers15
10. Exploring Visual Trends In Contemporary Graphic Design16
11. Smashing Workshops In Berlin And London17

181. Free Font: Born Typeface

What happens when a type designer moves to a new big city and ends up meeting lots of amazing people from different cultures and different parts of the world? Obviously, this is how new typefaces emerge. Well, at least that’s how it worked for Carlos de Toro.

Free Font: Born Typeface19

Carlos designed and released Born, a free “Mediterranean” humanist typeface20 based on traditional calligraphic forms with a large x-height, and hence offering high legibility even in small sizes. Born Regular includes 262 glyphs, with uppercase, lowercase, alternative glyphs, ligatures, uppercase numerals, symbols and punctuation marks. Unfortunately, only Regular weight is available so far. The font is available for both private and commercial projects, but to download it, a tweet is required. Definitely a nice addition to your font library! (vf)

212. Another Take On Off-Canvas Navigation

We’ve all been there: we have a navigation to include in narrow views, but we don’t want to make the interface crowded, so we hide it behind a navigation icon. When a user clicks on the icon, the navigation is revealed. In fact, there are many solutions for this pattern, and off-canvas navigation is just one of them.

Another Take On Off-Canvas Navigation22

In fact, off-canvas navigation is a beast with many faces. The navigation could slide in from the side23 or you could have a variety of sidebar transition effects24 with simple CSS transitions. But perhaps you’d like the navigation to slide in from the left and the actual view to become smaller and slide to the right? Matt Hoiland has released a demo for Social Feed iOS 7 menu25 that does just that, and you can check a working HTML sample page26, too. A nice addition to what we can do with off-canvas navigation. The script does use jQuery though, but perhaps you’d be able to replace it with vanilla JavaScript or even CSS transitions? (vf)

273. Making The Best Out Of Your… Favicon!

Have you ever noticed how little free space there is available on most websites, Web services and programs? Once you take a closer look, you’ll see that there is still room to add some UX. For example, how about a favicon? Even though it’s only 16×16 or 32×32 pixels, a favicon offers great potential. In Gmail for example, you can activate an option in Google Labs to have the favicon notify you of unread emails.

Making The Best Out Of Your... Favicon!28

If you like the idea and are interested in more options of how dynamic elements can be added to favicons, then you should definitely check out Favico.js29, a Javascipt plugin developed by Miroslav Magda30. It allows a favicon to go through different types of transitions and can even change its color. And believe it or not, Favico.js even lets your favicon play an HTML5 video and webcam live stream! (ea)

314. Credit Card Payment Within A Single Input Field

Mobile designers have been advised to avoid text input for years. But not anymore! Square Wallet has introduced a new approach to the credit card input field on mobile. This particular technique seamlessly moves from the credit card number input to other details, such as expiration date, CVV and ZIP code — everything done within a single input field!

Credit Card Payment  Within A Single Input Field32

Payment Info33” runs on a script that automatically detects the credit card type and changes the icon accordingly — no separate fields added! If the card number is validated, it moves left and displays only the last four digits. Luke Wroblewski34 has written more about this technique on his blog, and a video of the demo is also available. (ml)

355. Printing Shipping Labels The Easy Way

If it’s one thing we can all agree on, it would be that email was indeed a great invention. You type a message, click on “Send” and it is immediately delievered to the recipient. Could you think of anything more comfortable? Imagine you had to post a conventional letter each time you hit that “Send” button instead — the tedious task of waiting in a queue at the post office in order to get a few stamps. Luckily enough, technical progress has saved us countless hours. However, there are still those shipping labels left that you have to get at the post office, but isn’t this also something we can take care of ourselves?

Printing Shipping Labels The Easy Way36

Well, thanks to ezsendit37, we can! Currently in its development phase, ezsendit‘s goal is to save us precious time by offering an easy way to print stamps and shipping labels ourselves — from anywhere — be it via phone or tablet. This service will first be available for the three biggest US postal services and accessible without any registration or login required. Apart from pre-filling addresses from ZIP or current location, other features will include showing you the closest drop-off point. Sound good? Well, why not encourage the team by giving them a virtual push via their landing page38. If you don’t, you may regret it while standing in that long line next time! (cm)

396. Wait! What’s That Font Called?

Do you ever find yourself asking what fonts are being used on a particular website? Well, since it has never been easier to deconstruct designers’ decisions, the folks at Typ.io40 have taken it into their own hands and have revealed various type choices for everyone to see. You can browse through, upload a site or even search for a specific font.

Wait! What's That Font Called?41

This is a great tool to explore font combinations, too. The designers have also tallied up the most popular fonts, most popular header fonts, most popular contents fonts, etc. So, why not give it a bash? And, in no time at all, you could learn what works and explore the pairings that you’d never thought would work together. Not enough? Well, you might want to check out Google Web Fonts We Love42 and Just My Type43 for further beautiful type pairings. (sh)

447. Throughout The Dark Corners Of The Web

What happens when every member of a digital agency comes together and takes a week-long sabbatical from client work? Something like Dungeons and Developers45 can come to life! It’s a talent tree for Web developers in which you can select a character and send it on a dark journey starting at “HTML” and ending at the “Web Development Mastery” level. Throughout the journey, you come across lots of challenges such as CSS, JS Libraries, Prototyping and UX.

Throughout The Dark Corners Of The Web46

At each stage on the path there’s a door to a new technology which will unlock once your character has learned the needed skills. Dungeons and Developers is not only a great visualization of a talent tree for any Web developer, it’s also a great educational resource. Each rank in the tree includes useful links to websites where you can learn the skills you need to be able to pass on to the next level. Great for anyone who’s ready to explore the world of Web Design!

Dear folks at 35247, you’re definitely an inspiration to many designers and developers out there — “Race to 3:5248” was a brilliant idea! (ea)

498. Flashback To The Present

Stamps, old coins, antiques, Kinder Surprise figures — there are hundreds of things one can collect. Having a passion for photography, copywriter and journalist Katharina Zimmermann has found her own field of interest: old and extraordinary store fronts50.

Flashback To The Present51

The recent photos on her blog have been taken in London, UK. If you browse through this collection, you may be helplessly tempted to start having nostalgic dreams of the “good old times”. Nevertheless, these gems are all one of a kind — just let them speak for themselves! (kv)

529. Advice From Designers

My business professor always used to stress that nothing is ever invented from scratch. New technology builds on current technology, and current components can be used to compose a new product. In the same way, art and design can also create a new composition of existing components and techniques. So? Fantastic things can come to life! Like Adrien Heury’s “Designers Checklist Advices53“, for example.

Advice From Designers54

Adrien Heury55 combined two articles together to create a large library of checklists from various designers around the world. Adrien would love to extend this little project of his, so get involved and share your favorite design checklist56 with him! (ml)

5710. Exploring Visual Trends In Contemporary Graphic Design

Graphic designer Wim Crouwel once said, “You are always a child of your time, you cannot step out of that.” Words that stay like an echo. Just like fashion and music, graphic design has always been influenced by trends and tendencies. For you, as a designer, this means a constant balancing act between being unique and hitting the zeitgeist. An enormous resource to help you stay on top of what’s going on in graphic design is Trend List6058.

Exploring Visual Trends In Contemporary Graphic Design59

Trend List6058 may look like a rather plain-looking website at first sight, however, it turns out to be a real treasure for any designer — Web folks included. It contains a collection of posters, books, catalogs, magazines and album covers. What makes it even more comprehensive is that Trend List also tries to spot when and where a trend has arisen and how it has developed over time. With new additions being made almost every day, the site is definitely worth bookmarking to check back every now and then. (cm)

6111. Smashing Workshops In Berlin And London

We can’t really help it, can we? As people who care about their craft, we want to keep getting better and smarter at it. We care — that’s what makes us who we are. If all of this sounds all too familiar to you, then join our upcoming full-day workshops62 and brush up your skills for good.

Workshops in Berlin, DE

  • Responsive Workflow by Stephen Hay63” with Stephen Hay
    Forget fixed-width Photoshop comps and overproduced wireframes. This full-day workshop shows you how to adapt to the responsive design paradigm and introduces a new, effective design workflow.
  • Product Launch64” with Rachel Andrew
    In this workshop you’ll learn what you need to know before launching and shipping any product. By the end of the day you should have an action plan tailored to your product idea, with clear next steps.
  • Sketching Interfaces65” with Eva-Lotta Lamm
    We will explore when and how to use sketching in the design process, how to make your sketches communicate more clearly and efficiently, and how to run a collaborative sketching session with a group of people.

More workshops in Berlin → 66

Smashing Workshops In Berlin And London67

Workshops in London, UK

  • Front-End Warrior68” with Addy Osmani
    Modern front-end tooling can help you automate the setup and usage of most front-end tools so you can spend more time building awesome sites and apps. Let’s see how we can make that happen.
  • Responsive Design69” with Vitaly Friedman
    In this full-day workshop, Vitaly will present practical techniques, clever tricks, responsive design patterns and useful front-end strategies from mid- to large-scale real-life responsive projects.
  • Photography70” with Dan Rubin
    A full day of theoretical and practical photography tuition that will start with a review of photo shooting techniques, equipment, troubleshooting photography problems and assessing your kit.

More workshops in London →71

We look forward to finally meeting you at one of the Smashing workshops! If you have any questions or workshop suggestions, please don’t hesistate to contact us and we’ll get back to you right away! (vf)

The authors in this newsletter are: Esther Arends (ea), Melanie Lang (ml), Cosima Mielke (cm), Shavaughn Haack (sh), Kristina Vogt (kv), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://photoshopetiquette.com
  3. 3 https://news.layervault.com/stories/6096-what-naming-convention-do-you-use
  4. 4
  5. 5 http://lanyrd.com/2013/smashingconf/
  6. 6 https://twitter.com/search?q=%23smname&f=realtime
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a5
  12. 12 #a6
  13. 13 #a7
  14. 14 #a8
  15. 15 #a9
  16. 16 #a10
  17. 17 #a11
  18. 18 #
  19. 19 http://www.carlosdetoro.com/born-en/
  20. 20 http://www.carlosdetoro.com/born-en/
  21. 21 #
  22. 22 http://codepen.io/matthoiland/pen/vHFCk
  23. 23 http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
  24. 24 http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
  25. 25 http://codepen.io/matthoiland/pen/vHFCk
  26. 26 http://www.roblukedesign.com/projects/trunkExperiment/trunk.html
  27. 27 #
  28. 28 http://lab.ejci.net/favico.js/
  29. 29 http://lab.ejci.net/favico.js/
  30. 30 https://twitter.com/MiroslavMagda
  31. 31 #
  32. 32 http://zdfs.com/toscani/paymentInfo/
  33. 33 http://zdfs.com/toscani/paymentInfo/
  34. 34 http://www.lukew.com/ff/entry.asp?1667
  35. 35 #
  36. 36 http://ezsend.it
  37. 37 http://ezsend.it
  38. 38 http://ezsend.it/
  39. 39 #
  40. 40 http://www.typ.io/latest
  41. 41 http://www.typ.io/latest
  42. 42 http://typewelike.wirsindsmyk.de/
  43. 43 http://justmytype.co/
  44. 44 #
  45. 45 http://www.dungeonsanddevelopers.com/
  46. 46 http://www.dungeonsanddevelopers.com/
  47. 47 http://www.352media.com/
  48. 48 http://www.352media.com/blog/the-race-to-352-day-2-project-update/
  49. 49 #
  50. 50 http://fantasticshoppefronts.tumblr.com/
  51. 51 http://fantasticshoppefronts.tumblr.com/
  52. 52 #
  53. 53 http://adrien-heury.net/designers-checklists/
  54. 54 http://adrien-heury.net/designers-checklists/
  55. 55 http://www.adrien-heury.net/
  56. 56 mailto:adrien.heury@yahoo.fr
  57. 57 #
  58. 58 http://www.trendlist.org/
  59. 59 http://www.trendlist.org/
  60. 60 http://www.trendlist.org/
  61. 61 #
  62. 62 https://shop.smashingmagazine.com/workshops/?pk_campaign=Editorial-Newsletter-19-09-2013&pk_kwd=full-day-workshops
  63. 63 https://shop.smashingmagazine.com/smashing-workshop-stephen-hay-responsive-design-workflow.html?pk_campaign=Workshops-Mailing-17-09-2013&pk_kwd=stephen-hay
  64. 64 https://shop.smashingmagazine.com/smashing-workshop-shipping-your-product-berlin.html?pk_campaign=Workshops-Mailing-17-09-2013&pk_kwd=rachel-andrew
  65. 65 https://shop.smashingmagazine.com/smashing-workshop-sketching-interfaces.html?pk_campaign=Workshops-Mailing-17-09-2013&pk_kwd=eva-lotta-lamm
  66. 66 https://shop.smashingmagazine.com/workshops/#Berlin
  67. 67 https://shop.smashingmagazine.com/workshops/
  68. 68 https://shop.smashingmagazine.com/smashing-workshop-the-front-end-warrior-workshop-london.html?pk_campaign=Workshops-Mailing-17-09-2013&pk_kwd=addy-osmani
  69. 69 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-london.html?pk_campaign=Workshops-Mailing-17-09-2013&pk_kwd=vitaly-friedman
  70. 70 https://shop.smashingmagazine.com/smashing-workshop-seeing-the-shot.html?pk_campaign=Workshops-Mailing-17-09-2013&pk_kwd=dan-rubin
  71. 71 https://shop.smashingmagazine.com/workshops/#London

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

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

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