A couple of years ago, we received a lengthy email from one of our readers in South Africa. Back then, he was teaching digital communications and design in one of the local universities. The main difficulty of teaching, he explained, was the lack of up-to-date teaching materials, i.e. textbooks as well as exercise books were missing. For that reason, he would wake up earlier every single day, browse through the articles on Smashing Magazine, print out one of them, distribute copies at school, and discuss the topic of the article with his students. This was his way of introducing the concepts of design, and more specifically, Web design, to his students.
The moment after we read this email, it changed our lives forever. We clearly understood that what we do here at Smashing Magazine inspires and helps people all around the world, and would like to encourage you to make a difference today! Share your favorite tip or technique via social media, say a “Thank You!” to people who have helped you become better at what you do today, or just look out for friends and relatives who use a legacy browser and prompt them to upgrade—or upgrade the browser for them yourself.
Let’s make a difference today. In the end, if it’s just one single person who has sent you an email like the one we’ve received, it will be enough for you to know that you are changing the world for the better—one step at a time.
Once you’ve done this, please feel free to share your stories on Twitter using the hashtag
#smchange and let us know how you use Smashing Magazine in your work and how we can help you. Of course, you can also contact us via our contact form2.
We look very much forward to your feedback!
The Smashing Team
Table of Contents
- Startups, This Is How Design Works3
- Text Your Own Old-School Digital Movie4
- Nostalgia Strikes Back: Reinventing The Slideshow6
- No More Banding In Photoshop!7
- Easy Batch Image Resizing8
- Create Your Own Font Icon Bundles9
- Fluid Line-Height (Or Molten Leading)10
- Lists, Numbers And Data You May Need For Your Work11
1. Startups, This Is How Design Works
Good design requires time, patience, skills and attention to detail. Yet, what if you’ve got a nice idea and would like to test out your design skills? Or what if you’re about to launch a startup but want to make sure that it has a top-notch design, too? How can you spot a good designer among a dozen of job applications? And what does a good design mean anyway?
Wells Riley has prepared a comprehensive guide for startups13 about what design actually means and provides resources to help you find outstanding design talent—a handy reference for your friends, your colleagues and even for yourself. Among many other things, this guide explains the different kinds of design, important design qualities, and places where you can find great designers. It even features useful interviews with successful founders—a handy resource worth bookmarking and sharing! (vf)
2. Text Your Own Old-School Digital Movie
Do you remember when the peak of high-tech gaming was a game of ping pong simulated with a few dozen pixels? How many hours could that have been spent playing outdoors, developing a bit of athletic ability? Well, you can relive the days of two or three digit pixelation by watching (or even making) your own 8-bit movies on Pixelbuzz.tv.
The creators of this online 8-bit television have given the users an opportunity to text their own movies. Through 130 characters, each frame is encoded as text, so making your own little pixel movie is not necessarily that hard—but definitely laborious and time-consuming. With this idea, the project is joining the pixelation movement. So if you are really into pixels as well, you might get lost in them by watching movies on the site—most of them can be exported and reused as GIFs, too! (jc)
Server caching is useful for quick response times, but sometimes, especially when you are developing a Web application, you migh need to cache objects client-side rather than server-side. Maybe you need to cache something for offline use, or for reuse later.
4. Nostalgia Strikes Back: Reinventing The Slideshow
Long before Facebook, Flickr, and the Web in general, we used to congregate at a friend’s or family member’s living room to watch slides of our most recent vacation, wedding or other photo-worthy event. You would watch those pictures for hours, while somebody told you the stories that they depicted. In some cases, the memory of ‘”the good old days” is better than the actual slideshow was, but that’s nostalgia for you. Now Johannes Wagener and Katharina Birkenbach brought it back with a Youtube-style twist.
Story Wheel lets you create your own old-fashioned slideshow and record a story (audio) for it. In the fold of SoundCloud Labs, Story Wheel lets people share their Instragram picture stories on the Web. Whenever you feel nostalgic for those days of the clicking slide projector, you can just go on Wagener and Birkenbach’s website and wallow in other peoples’ slides (or even produce your own little themed story). (jc)
5. No More Banding In Photoshop!
Designers that work daily with Photoshop have frequently some annoying experience with gradient banding in a 16bit color mode. Thinking about a solution for this problem, the designer Jeff Broderick developed a technique that may also be useful for you.
The No More Banding Photoshop action17 is a free action that will help keeping the beautiful gradient effect you had in mind for your design. The document size will increase, but if you’ve been wondering on how to get rid of the banding effect, the result is definitely worth the inconvenience. (tt)
6. Easy Batch Image Resizing
You can batch process images in Photoshop, but that method is fairly resource-intensive, isn’t it? What if you are on the go and don’t have your machine nearby? Why not use a simple app that’s designed specifically for the basic processing of images—tasks such as cropping and resizing, adding borders, and adjusting JPEG quality?
That’s exactly what B.I.R.M.E.19 (Batch Image Resizing Made Easy) does. Just choose your settings for size, cropping dimensions, crop alignment, auto-height/auto-width, border thickness and JPEG quality, and then drag and drop your images to begin. It’s quick, easy and works perfectly in any browser! (cc)
7. Create Your Own Font Icon Bundles
Some fonts just don’t offer you the icons necessary to keep your project simple and straightforward—wouldn’t it be so easy if just one font would include all desired icons? Fontomas20, the “iconic font scissors”, does just that in three simple steps. First, load the icon fonts you want to combine. Then piece together the characters you need. Finally, rearrange the icons to fit your keyboard however you wish, and save the font—done!
Fontomas is released under the MIT license and does not have to be credited. The generated fonts are intended for Web usage, and should not be considered or distributed as independent artwork. However, it’s always a good idea to mention the original fonts as well, even if it’s not required. (sp)
8. Fluid Line-Height (Or Molten Leading)
So far, in our responsive designs, we tend to focus on adjusting layouts for available horizontal screen size and changing font size and the line length of type, but we haven’t quite discovered the possibilities of vertical adjustments, e.g.
line-height. In his short article, Molten Leading (or, Fluid Line-Height)22, Tim Brown suggests to explore a more comprehensive solution for responsive Web typography.
The line height, line length and font size should behave responsively as well, yet it’s quite difficult to achieve. In fact, adjusting any one of these elements without also adjusting the others is a recipe for uncomfortable reading, which is one reason designers have such a difficult time with fluid Web layout. According to Tim, what we need is a fluid way to set
line-height. Web designers should be able to define
line-height as a range, like we do with
max-width. So one of the solutions is to set a minimum width at which the adjustment starts, a maximum element width for where it stops, and a minimum and maximum line-height to adjust it through.
9. Lists, Numbers And Data You May Need For Your Work
Whenever you are designing a website that requires some input from users—be it Web forms, delivery addresses, or sign-up forms—you need data. Usually all information has to be in a specific format and language, which makes your work not so easy.
Sasa Stamenkovic has prepared a list of all the countries in all languages in the various formats—plain text, JSON, YAML, XML, HTML, CSV, SQL, PHP. The result is a large downloadable list of all countries. When used for your forms you’ll save a lot of time.
Another useful source is the Brighter Planet data sets. The available data covers raw data from various sources; different industries and sciences, such as the automobile and flight industries, ZIP codes, census data, climate data, etc. If you need some data samples for your upcoming project, you can surely find some useful data to work with using these resources. (jc)
The authors in this newsletter are: Stephan Poppe (sp), Cameron Chapman (cc), Talita Telma (tt), Jan Constantin (jc), Vitaly Friedman (vf), Iris Ljesnjanin (il).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://www.smashingmagazine.com/contact/
- 3 #a1
- 4 #a2
- 5 #a3
- 6 #a4
- 7 #a5
- 8 #a6
- 9 #a7
- 10 #a8
- 11 #a9
- 12 http://startupsthisishowdesignworks.com/
- 13 http://startupsthisishowdesignworks.com/
- 14 https://github.com/d0ugal/locache
- 15 https://github.com/d0ugal/locache
- 16 http://nomorebanding.com/
- 17 http://nomorebanding.com/
- 18 http://birme.net/
- 19 http://birme.net/
- 20 http://nodeca.github.com/fontomas/
- 21 http://nodeca.github.com/fontomas/
- 22 http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
- 23 http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
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 New York, on June 14–15, with smart design patterns and front-end techniques.