This newsletter issue was sent out to 169,460 newsletter subscribers on Tuesday, December 3rd 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter anytime.
Front-end is a living, breathing creature. Clever techniques come and go, practices emerge, evolve and fade away, and we, as designers and developers, keep learning and adjusting our design processes. Probably the simplest example for this are CSS vendor prefixes. Recently, Roger Johansson proposed to cut down on vendor prefixes and use them only if the layout breaks. This means that we could drop prefixes in the cases of border-radius, box-shadow, background-origin, background-size and background-clip, and drastically reduce the number of prefixes for gradients and transitions. Of course, this will depend on the project you’re working on.
Aaron Gustafson has written a chapter in the Smashing Book #4 that focuses on adaptive, flexible components and building clean code that scales. The above illustration was designed by Anna Shuvalova.
You’ll have to keep in mind to add more prefixes and keep a reference in documentation if a large portion of your audience uses legacy browsers. In these situations, revisiting and maintaining the code cannot be an afterthought but instead has to be considered early on in the process.
We’ve covered a couple of nice strategies for achieving a better level of maintenance and scalable CSS architecture in the new Smashing book as well (plug, plug!), and would love to hear what your strategies and clever tricks for maintainable, scalable code are. Tweet us using the hashtag
smcode. Happy coding!
— Vitaly (@smashingmag)
01. Making Links Smarter
02. Are You Afraid Of The Big Bad Command Line?
03. Email Subject Lines
04. Automating Workflow: Tools And Techniques
05. Typography Among The Clouds
06. Multi-Line Padded Text
07. Lightweight Social Buttons
08. A Guide To Making Things (Vol. 1)
09. Goodies: Free Font And Free Pictograms
10. The Power Of A Simple Grid
11. Eye Candy For Lettering Lovers
12. Vintage Beauty
13. Workshops in London, UK
Sometimes the information that a link provides falls rather short. Will the link I just clicked on trigger the download of an HD video, will it open up a huge PDF file, or will it simply lead me to a plain text document? Knowing what we’ll get before we get it would come in quite handy sometimes, e.g. when we’re on a shaky edge connection or on data roaming.
Back in January, Mark Boulton pointed out that we need more meta data around our links to give us an indication of its content and behavior. Sparkicons, as he calls small, inline icons with additional link meta data, could be a solution for this issue. Andy Davies has implemented this idea, and Ben Edwards has also put together a Sparkicons project on GitHub. It comes with a little demo of what Sparkicons could look like: a tiny play button next to the link indicates for example a video, or a speech bubble gives a hint that the link will lead to a discussion. Convenient! (cm)
You don’t have to! There’s now a great resource available that can help you learn and understand terminal commands! Explainshell, brought to life by Idan Kamara, is a true encyclopedia for all of those confusing keywords and arguments you probably have stumbled upon. Instead of tediously collecting the meaning of each one of them, you can simply enter a command in the search field and Explainshell neatly explains what each argument exactly does — bit by bit.
Another valuable resource that knows how to tame that scary monster living in your command shell is Bash Pitfalls. The site lists common terminal issues and helps to prevent them. You may want to check it out whenever you’re stuck once again. Now, how is this scarier than Photoshop? (cm)
Email is still the most effective tool for connecting with customers, so no wonder that companies invest a lot of time into crafting dirty, nasty, hacky email newsletters. But even if your newsletter is well designed and well built (responsive, anyone?), it has to be opened first. The key is to use a good, clear, concise and inviting email subject line, of course.
There are a couple of websites that provide insights for selecting good email subject lines. For example, Litmus’ Email Zeitgeist monitors subject lines and tracks ongoing trends; Mailchimp’s Subject Line Data provides some details about what works and doesn’t work in subject lines; CampaignMonitor suggests using symbols in some cases; and Adestra provides a Subject Line Analysis Report (PDF) from the study of 2.2 billion emails. A lot of data to go through, with a lot of useful tips to get better and smarter with your subject lines. (vf)
Anyone feeling a bit bogged down in terms of their workflow? Well, Addy Osmani is a productivity madman who keeps collecting and sharing nifty tools for automated, speedy front-end workflow. In his presentation, Automating Workflow, Addy shares a plethora of tools, techniques and processes that he uses to automate the process of writing Web apps.
Not enough? Well, what about your workflow when developing mobile applications? In his other talk, Improving Your Mobile Web Development Productivity, Addy shares tips dedicated specifically for mobile. This should keep you covered for the next weekend, or perhaps even until Christmas! (sh)
Imagine sitting comfortably on your couch and reading an exciting book or article. Should you care about legibility and readability? Yes, you should. You really do want an ‘h’ to look like an ‘h’, not like a ‘b’. Reading the lines should not be straining or difficult. Well, imagine a different scene now. Imagine that you’re a pilot in a small cockpit flying a jet. Due to an emergency you quickly need to access information on a checklist to prevent a disaster. But what if you can’t read the checklist because you can’t tell whether it’s an ‘h’ or a ‘b’?
Even at 30,000 feet in altitude, legibility and readability remain crucial. Accessing and reading procedures in a cockpit has a significant impact on flight safety, so how does one effectively design this sort of documentation? Back in 1992, when flight-related documentation still meant masses of paper, an interesting piece of research was made on this particular topic and can be viewed online: On The Typography Of Flight-Deck Documentation. Today, the cockpit is mostly paper-free. Digital has replaced print in this regard. Nevertheless, after more than twenty years have passed by, some of the principles and aspects are as important to keep in mind even today. (ea)
Have you ever struggled with setting comfortable paddings on both ends of each subsequent line of text highlighted with background color? The highlighting part is easy to achieve with the
background-color property, but the padding (or the lack of it) can make or break the visual effect. There are a couple of solutions (none of them are very clean) but the final result might justify an extra line of code.
Here’s another tip: to make sure that the text doesn’t always starts on the same vertical axis, make sure to offset the parent element to the left with
position: relative; and
left: <negative value>px; to keep the text on the grid. (md)
Ah, the dreaded social buttons. Of course, we want content to be as easy to share as possible, and embedding the widgets and buttons as suggested by their services is tempting but really should be avoided at all costs — due to performance, of course. But are there any good alternatives? Sure.
We can use the SocialCount jQuery plugin or Social Share Privacy to load all those buttons when necessary and, more importantly, not load them when they aren’t necessary. But perhaps it’s perfectly enough to just include basic social CSS/HTML sharing snippets instead? They won’t show the count of tweets or likes, but they will provide your users with a simple way of sharing content, and you can make them as responsive and flexible as you like. A good and simple way to save you (and your users) an unnecessary number of HTTP requests. (vf)
The folks at Fieldwork are all about making things, so they decided to make A Guide to Making Things to document their creative process. “Be better, not bigger” and “Nothing is perfect, so let’s accept that and make version one” are a couple of the simple little pearls of wisdom they share along the way. This practical yet inspirational advice that they share is truly worth reading!
As a designer (or a maker for that matter) you periodically need to be reminded of such things. The guide is beautifully designed and leads you through the team’s creative process and imparts insights that can only be gleaned from experience. They also use SVG animations to bring life to the illustrations displayed on the website. So, how do you make things? Do you use any particular tips, tricks or techniques? Perhaps it’s worth sharing as well? (sh)
A well-designed typeface has a personality and a purpose. However, while a typeface can be a work horse, it doesn’t have to be. An experimental, personal typeface has its own purpose as well. Sydney Goldstein has designed a South Rose typeface, a free font that has been selected for the Communication Arts 2014 Typography Annual award. The typeface was inspired by exterior and interior pieces found in a church. One weight, South Rose Display, is available for free use.
Jamila Hodges has released a set of 70 free pictorgrams as well as a set of symbols that are all focused on stationary, electronics, science/health, business and related areas. The icons are available in 168×168px, single color and multicolor in .AI format. (vf)
What kind of artwork could you create based on not more than a quadrisected circle and two diagonals inscribed in a square? Guess what, you could create a poster series for movie enthusiasts! Michal Krasnopolski did just that. Based on this very simple grid, he created a minimalist poster series of 25 movies, including Lost Highway, Empire Of The Sun, The Hunt For The Red October, North By Northwest, and even the good old Jaws.
It’s fascinating to see that it doesn’t take much to create something so beautiful and meaningful. Likewise stunning are the effects of the colors Michal applied. “There’s an enormous strength in simplicity; the fewer elements, the more we engage our imagination.” (ea)
Believe it or not, nice typography has the power to make any heart leap for joy — whether it’s on the Web, or on a simple milk package. But the personal touch of hand lettering made with pencil on a piece of paper or with chalk on the smooth black surface of a restaurant’s chalkboard menu is something special. Here is a website to satisfy your hand-lettering needs (well, at least for a while): The Art Of Hand Lettering.
This Tumblr blog offers a beautiful collection of hand-lettered art that is unique, twirly and wonderfully inspirational. From pencil sketches to final prints and wall art, this resource is filled to the top with eye candy waiting to be explored. New inspiration guaranteed! (cm)
If you’re a designer living in the 21st century, you probably should always have every imaginable technical equipment at your fingertips, i.e. powerful computers running the latest software, apps, tools, tablets — you name it. But even with limited means and in times as early as the steam engine, design accomplished to shape the appearance of an entire era. Looking back at everyday objects of past centuries tells us a lot about the history of our own handicraft and, as a nice side effect, turns out to be quite inspiring for our own work. Ready for a trip back in time?
A huge collection of vintage that dates back to the 18th century can be found on Once New Vintage. Curated by Megan Cummins, the ever-growing vintage resource includes artefacts from printed catalogs, advertising and invoices, to tin cans, tobacco packets and soap boxes. For a better overview, each find is neatly labeled and categorized — not only by time period and project type but (since we are visual people) also by color, details and even typography. An infinite source for all our vintage needs! (cm)
Have you had a chance to check out our line-up of Smashing Workshops yet? If you happen to be in or around London, why not grab a seat at one of these full-day workshops:
|Front-End Warrior by Addy Osmani
Front-end tooling can dramatically increase your productivity. In this workshop, you’ll learn how to automate repetitive tasks, automate the setup and improve your workflow. Read more…
|Pragmatic UX by Marko Dugonjić
Learn how to use lightweight UX design tools to better understand your users’ needs, quickly prove your concepts, generate discussions, facilitate communication and make design decisions early on. Read more…
|Adaptive Interfaces by Aaron Gustafson
Aaron Gustafson will explain the ins and outs of crafting rich Web experiences that adapt to the capabilities and peculiarities of our customers and their devices, while maintaining your sanity in the process. Read more…
Would you like us to organize workshops in your city? Is there a particular topic that you’d like to master? Feel free to get in touch with Vitaly and we’ll be there before you know it!
The authors in this newsletter are: Cosima Mielke (cm), Shavaughn Haack (sh), Esther Arends (ea), Vitaly Friedman (vf), Marko Dugonjić (md), Iris Lješnjanin (il), 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!
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!