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 newsletter anytime.
“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 PSDs? What about our invoices or folders that contain illustrations for our clients? Do you use any naming conventions that help you find your files whenever you need them?
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 2013 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
#smname. And happy tweaking!
— Vitaly (@smashingmag)
01. Free Font: Born Typeface
02. Another Take On Off-Canvas Navigation
03. Making The Best Out Of Your… Favicon!
04. Credit Card Payment Within A Single Input Field
05. Printing Shipping Labels The Easy Way
06. Wait! What’s That Font Called?
07. Throughout The Dark Corners Of The Web
08. Flashback To The Present
09. Advice From Designers
10. Exploring Visual Trends In Contemporary Graphic Design
11. Smashing Workshops In Berlin And London
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.
Carlos designed and released Born, a free “Mediterranean” humanist typeface 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)
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.
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.
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.js, a Javascipt plugin developed by Miroslav Magda. 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)
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!
“Payment Info” 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 Wroblewski has written more about this technique on his blog, and a video of the demo is also available. (ml)
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?
Well, thanks to ezsendit, 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 page. If you don’t, you may regret it while standing in that long line next time! (cm)
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.io 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.
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 Love and Just My Type for further beautiful type pairings. (sh)
What happens when every member of a digital agency comes together and takes a week-long sabbatical from client work? Something like Dungeons and Developers 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.
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!
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 fronts.
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)
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 Advices“, for example.
Adrien Heury 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 checklist with him! (ml)
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 List.
Trend List 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)
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 workshops and brush up your skills for good.
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).
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!
Every second Thursday we send out our lovely email newsletter with useful tips and techniques, recent articles and upcoming events. Thousands of readers have signed up already. Why don't you sign up, too, and get a free Smashing eBook as well?
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!
Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.
It's done. The Smashing Book #4, our brand new book with smart front-end techniques and design approaches. Written by respected designers and developers, neatly packed in a gorgeous hardcover.
Do you feel like your workflow is slowing you down? We might have just what you need. Our front-end, UX and RWD workshops in London, Zürich and Berlin. Read more...
Exciting things are happening and you should consider joining the talented staff at HIMSS as our Sr. Manager, Web Design & Online Standards as we are transforming…
Northeastern University Web Designer/Developer Requisition Number: STFR001261 Division/College: Marketing and Communications FT/PT: Full…