Issue #57 | Tuesday, April 17th 2012 | 104,895 subscribers | Previous issues
Dear Friends,
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 form.
We look very much forward to your feedback!
Yours sincerely,
The Smashing Team
Table of Contents
01. Startups, This Is How Design Works
02. Text Your Own Old-School Digital Movie
03. Client-Side Caching For JavaScript
04. Nostalgia Strikes Back: Reinventing The Slideshow
05. No More Banding In Photoshop!
06. Easy Batch Image Resizing
07. Create Your Own Font Icon Bundles
08. Fluid Line-Height (Or Molten Leading)
09. Lists, Numbers And Data You May Need For Your Work
10. Smashing Highlights (From Our Archives)
11. New on Smashing Job Board
12. Recent Articles on Smashing Magazine
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 startups 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)
3. Client-Side Caching For JavaScript
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.
That's where locache.js comes in. It's a JavaScript caching framework for client-side caching in the browser using localStorage. The library has a memcache-similar API, no dependencies and is very small. And the best part: locache gracefully degrades when the browser doesn't support localStorage. So users with IE6 and IE7 will not get any errors, but as developers say, "caching attempts will be silently dropped and lookups will always appear to be a cache miss." You can provide an expiration time for cached objects as well. (cc)
Advertisement
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 action 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. (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)
Advertisement
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? Fontomas, 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), 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 min-width and 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.
Of course, manually adjusting line height for optimum readability across a bunch of media queries is time-consuming. The updates in the post provide some practical solutions, implemented with JavaScript. What would you be able to do with man/mix-width range media queries? (cc)
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)
10. Smashing Highlights (From Archives)
-
Useful Adobe Photoshop Techniques, Tutorials and Tools
Below you'll find an overview of new useful Adobe Photoshop techniques and tutorials that we've found and collected over the last months. We sincerely hope that at least some of the techniques presented there will help you improve your graphic design skills in Adobe Photoshop.
-
The Semantic Grid System: Page Layout For Tomorrow
CSS grid frameworks can make your life easier, but they're not without their faults. Fortunately, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently plaguing CSS grids.
-
Innovative Techniques To Simplify Sign-Ups and Log-Ins
In this article, we'd like to present a couple of new ideas that might be useful for your next designs. Please notice that before using these techniques, you should make sure that they make sense in the context in which you are going to use them.
11. New on Smashing Job Board
Here are the job openings published recently at our very own Smashing Job Board:
Web + Print = You at Orcutt | Winslow (Phoenix, Arizona)
We are looking for a well rounded designer who understands print design, user interface design for websites AND web applications. This designer will be responsible for assuring our print, website, and web application design all represent the brand of our company in a uniform manner. Candidates must demonstrate ability to create designs as well as to produce functional HTML and CSS code in a browser.
Senior JavaScript Developer at Elevate Studios (Chicago, IL)
Elevate is seeking a HTML5/JavaScript expert with at least 4 years of experience. The full time position will build, maintain and integrate custom interactive UI components into our new and existing sites.
Front End Web Developer working closely with Design Lead at Essential Travel (Soho, London)
We have an exciting opportunity to work within our small central London-based team, with a PLC for a parent company in the travel industry too. Have you got excellent front-end skills and are you looking for a new challenge? If you know your jQuery from your CSS and your HTML from your JavaScript, then we're looking for you!
12. Recent Articles on Smashing Magazine
