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 prefixes2 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 #44 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 book5 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)
Table of Contents
- Making Links Smarter6
- Are You Afraid Of The Big Bad Command Line?7
- Email Subject Lines8
- Automating Workflow: Tools And Techniques9
- Typography Among The Clouds10
- Multi-Line Padded Text11
- Lightweight Social Buttons12
- A Guide To Making Things (Vol. 1)13
- Goodies: Free Font And Free Pictograms14
- The Power Of A Simple Grid15
- Eye Candy For Lettering Lovers16
- Vintage Beauty17
1. Making Links Smarter
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 out19 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 idea20, and Ben Edwards has also put together a Sparkicons project on GitHub21. 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)
2. Are You Afraid Of The Big Bad Command Line?
You don’t have to! There’s now a great resource available that can help you learn and understand terminal commands! Explainshell22, 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 Pitfalls24. 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)
3. Email Subject Lines
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 Zeitgeist26 monitors subject lines and tracks ongoing trends; Mailchimp’s Subject Line Data27 provides some details about what works and doesn’t work in subject lines; CampaignMonitor suggests using symbols in some cases28; and Adestra provides a Subject Line Analysis Report (PDF)29 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)
4. Automating Workflow: Tools And Techniques
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 Workflow30, 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 Productivity32, Addy shares tips dedicated specifically for mobile. This should keep you covered for the next weekend, or perhaps even until Christmas! (sh)
5. Typography Among The Clouds
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 Documentation34. 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)
6. Multi-Line Padded Text
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 solutions35 (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)
7. Lightweight Social Buttons
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 plugin38 or Social Share Privacy39 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 snippets40 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)
8. A Guide To Making Things (Vol. 1)
The folks at Fieldwork are all about making things, so they decided to make A Guide to Making Things41 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)
9. Goodies: Free Font And Free Pictograms
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 typeface43, 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 pictorgrams45 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)
10. The Power Of A Simple Grid
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 Krasnopolski46 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)
11. Eye Candy For Lettering Lovers
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 Lettering47.
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)
12. Vintage Beauty
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 Vintage50. 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)
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).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://www.456bereastreet.com/archive/201311/cutting_down_on_vendor_prefixes/
- 3 https://www.smashingmagazine.com/books/#the-smashing-book-4
- 4 https://www.smashingmagazine.com/smashing-book-4-new-perspectives/
- 5 https://www.smashingmagazine.com/smashing-book-4-new-perspectives/
- 6 #a1
- 7 #a2
- 8 #a3
- 9 #a4
- 10 #a5
- 11 #a6
- 12 #a7
- 13 #a8
- 14 #a9
- 15 #a10
- 16 #a11
- 17 #a12
- 18 https://github.com/benedfit/sparkicons
- 19 http://www.markboulton.co.uk/journal/sparkicons
- 20 http://andydavies.me/blog/2013/01/14/implementing-sparkicons/
- 21 https://github.com/benedfit/sparkicons
- 22 http://explainshell.com/
- 23 http://explainshell.com/
- 24 http://bash.cumulonim.biz/BashPitfalls.html
- 25 http://emailzeitgeist.com/
- 26 http://emailzeitgeist.com/
- 27 http://blog.mailchimp.com/subject-line-data-choose-your-words-wisely/
- 28 http://www.campaignmonitor.com/resources/will-it-work/symbols/
- 29 http://www.adestra.com/resources/downloadable-reports/2013-subject-line-analysis-report/
- 30 https://speakerdeck.com/addyosmani/automating-front-end-workflow
- 31 https://speakerdeck.com/addyosmani/automating-front-end-workflow
- 32 https://speakerdeck.com/addyosmani/mobile-workflow
- 33 http://ti.arc.nasa.gov/m/profile/adegani/Flight-Deck_Documentation.pdf
- 34 http://ti.arc.nasa.gov/m/profile/adegani/Flight-Deck_Documentation.pdf
- 35 http://css-tricks.com/multi-line-padded-text/
- 36 http://css-tricks.com/multi-line-padded-text/
- 37 http://cferdinandi.github.io/social-sharing/
- 38 http://filamentgroup.com/lab/socialcount/
- 39 https://github.com/panzi/SocialSharePrivacy
- 40 http://cferdinandi.github.io/social-sharing/
- 41 http://volumes.madebyfieldwork.com/making/
- 42 http://volumes.madebyfieldwork.com/making/
- 43 http://www.behance.net/gallery/South-Rose-Free-Typeface/10522583
- 44 http://www.behance.net/gallery/South-Rose-Free-Typeface/10522583
- 45 http://www.behance.net/gallery/Pictograms-Giveaway-Reloaded/12025813
- 46 https://twitter.com/krasnalinsky
- 47 http://theartofhandlettering.tumblr.com/
- 48 http://theartofhandlettering.tumblr.com/
- 49 http://vintagemeohmy.com
- 50 http://vintagemeohmy.com/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.