Smashing Newsletter: Issue #48

• By The Smashing Editorial
• December 6th, 2011
• Smashing Newsletters
• 3 Comments

This newsletter issue was sent out to 73,446 newsletter subscribers on December 6th 2011. If you haven’t subscribed yet, feel free to subscribe to our email newsletter now. Thank you.

Look Out For The Merry Smashing Christmas!

Goeiedag Smashing Magazine family! It’s cold and rainy in my German home town Freiburg and I’m missing sunny Johannesburg — thanks to lovely SmashingMag fan Retha Scholtz I had the pleasure to spent a couple of warm days in South Africa. In the meantime, our team hasn’t stopped working tirelessly to prepare a HUGE (but still secret) Christmas surprise and our next Smashing Meetup. We’re very pleased to welcome Paul Irish (@paul_irish) and Christian Heilmann (@codepo8) in Stuttgart on 21st of December. Don’t miss out and come over, it is going to be smashing!

Also, has the Christmas spirit reached you yet? Have you thought of getting your colleagues at the office an appropriate gift or are you still on the lookout for worthy presents and offers? Let us help you out — we have a Christmas special coming up, maybe just what you have been looking for.

Be the first to find out what we have in store for you; who gets golden tickets and why you should set your alarms. Until we’ve prepared everything for the next week, follow us on Twitter and join us on Facebook as well as Google+ to assure you are in the loop. Until then, you can work through a CSS3 and jQuery calendar, dive into interaction design and play with a graph paper generator — everything after the fold. And… jump!

 —  See you soon! Stay smashing! *meow*

Table of Contents

01. An Animated CSS3 And jQuery Calendar
02. More Pleasant Apache Browsing
03. Saving Pays Off!
04. Subway Map Visualization jQuery Plugin
05. Zara Picken’s Vintage Illustrations
06. Graph Paper Generator
07. Vertical Centered Responsive Images
08. How To Pick A Great Designer
09. Dive Into Interaction Design
10. Chemical Design

1. An Animated CSS3 And jQuery Calendar

When it comes to the design of small elements such as breadcrumbs, pagination and calendars, having some techniques that are ready to use when you actually need them is handy. One CSS3 and jQuery calendar was started by Jepija as part of a larger project to create a shared calendar-subscription service. It includes a lot of useful features for designers and developers, including elegant animations and color-coded event markers. You can customize the color, length and padding of events with CSS.

It also includes a jQuery accordion so that you can expand each week to view events in more detail. You can view a demo of the calendar. There is a downside, though. The code for the calendar isn’t very semantic, so tweaking the script first before using it in production is required. (cc)

2. More Pleasant Apache Browsing

Most people would not consider the default file structure on an Apache server pleasant to look at or fun to use. The structure is utilitarian, purely function over form. h5ai changes all that.

h5ai attempts to make the experience of browsing Apache Web directories more pleasant. You can view files in either a tree layout or icon layout, complete with breadcrumb navigation. There’s even a slide-out tree viewer so you can quickly access the entire file structure regardless of how deep you’ve navigated. It’s available in either a JavaScript or PHP version, and configuring it is simple. (cc)

3. Saving Pays Off!

Now here is something that you won’t see that often online: a new kind of rewards program pays off every time you make a financially smart decision that improves your bank balance, reduces your expenditures or even helps you get out of debt. SaveUp rewards you for increasing your savings and reducing your debt at almost any bank in the US. SaveUp membership is free of charge.

So, how does it work? With every smart financial transaction you make, whether saving money or paying down a debt, you are rewarded with SaveUp credits. The credits you earn give you a daily chance to win cash, cars, vacations and a jackpot of up to $2 million. The more you save and reduce debt, the greater your chance of winning big! (sp)

4. Subway Map Visualization jQuery Plugin

If you often deal with government projects, university departments or any websites of sophisticated organizations, every now and again you’ll be asked to design a nice visualization that would explain the various divisions, structures and internal hierarchy of those organizations. Where would you start? Well, creating a Subway Map-alike visualization is an option worth considering.

Nik Kalyani’s Subway Map Visualization jQuery Plugin provides a framework for creating subway-alike maps to convey real-world ecosystems, e.g. evolution of a product’s design features. The plugin uses HTML5 Canvas for map rendering and an unordered list as the markup. The plugin has a detailed documentation and demos that can be used and reused right away. (vf)

5. Zara Picken’s Vintage Illustrations

It’s remarkable how sharp an eye visual artists have for various things. They can find inspiration in unthinkable sources. The artist Zara Picken has managed to show an inspiring side of everyday objects with her patchwork of textures, scrapbook-look effects and vintage color palette.

Women with radio heads and pixelated images of old high-tech objects, such as a photo camera and a joystick from a 1990s video game, are examples of illustrations by Picken that you’ll see in her Flickr stream. Have a look, and you’ll see the creative side of everyday objects, too. (tt)

6. Graph Paper Generator

Have you ever searched for a special kind of scientific graph paper to suit a particular need, whether for math homework or a sketchbook, but couldn’t find it?

Print Free Graph Paper is a free online tool that generates various print-ready grids in PDF. You can generate engineering, logarithmic, polar, hexagonal, isometric and polar graphs in a few clicks, and you can also set parameters such as the gap between lines. (af)

7. Vertical Centered Responsive Images

Responsive Web design is here to stay. One of the biggest debates in responsive Web design has to do with images: how do you display them in various browser viewports and how do you make sure that a mobile browser doesn’t load fullscreen image if the image will be displayed on a small screen?

There are many ways to make images responsive, and nobody can agree on a single unique and universal technique. Solemone developed another technique ,Overflow image with vertical centering to vertically center a responsive image while leaving the aspect ratio intact, even at full screen.

The idea is simple. Just put your image in a container and set the width of your image to 100%. Then set the max-height of the container to a fixed value and hide the overlap by setting the overflow to hidden. If you now change the width of the container, you will see that the image adapts the container’s width but does not exceed the max-height. So here you go: now you have an image cropped at the bottom and it adapts the width of your container, but only at the bottom. And if you sparkle a bit of jQuery on top of it, you can steal the same amount of image information at both sides, bottom and top. (ld)

8. How To Pick A Great Designer

Yes, this guide will help you do exactly that: choose a great designer. Not everyone has an eye for visual design, and the golden ratio just doesn’t jump out at everyone. The guys at Folyo have put together a simple step-by-step guide on what to really look for, and what not to look for, in a designer.

Are you able to assess an applicant’s visual, structural and communication skills while evaluating their personality, experience and passion for the field? Follow the advice by Sacha Greif to get a designer you need, trust and deserve. A nice checklist for making your final decision: to hire or not hire. (sp)

9. Dive Into Interaction Design

The term “Interaction Design” (known also as IxD) was established in the mid-1980s, and the field only started to develop in the 1990s; since then, various applications of IxD have been developed every day. Various case-studies from the field are just a hint of the topics you’ll find on Design/Array.

You will read exclusive interviews with agencies and professionals working around the world in interaction design; you’ll follow ongoing discussions about design and development; and, if you are an interaction designer yourself, you’ll learn some interesting insights on how your colleagues behind the best Web and interaction design today work. Don’t miss the chance to share your opinion and spice up the discussion! (tt)

10. Chemical Design

When joined hand in hand, design and science can result in an explosion of color, shapes and ideas — without the environmental damage. The collection of designs by Simon C. Page titled International Year of Chemistry confirms this.

Atoms, ions, structures of elements, theories of relativity and combustion are among the themes of the creative graphics on display, all referencing major scientists in chemistry. In this centenary of the awarding of the Nobel Prize to Marie Curie, the only unforeseen effect you might feel from examining this collection is a spontaneous overflow of visual delight. (tt)

The authors in this newsletter issue are: Vitaly Friedman (vf), Stephan Poppe (sp), Cameron Chapman (cc), Iris Ljesnjanin (il), Talita Telma (tt), Luca Degasperi (ld), Lisa Lang (ll), Ana Flasker (af).