Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #48

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 now1. 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!

Christmas Smashing Cat

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 Twitter2 and join us on Facebook3 as well as Google+4 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

  1. An Animated CSS3 And jQuery Calendar5
  2. More Pleasant Apache Browsing6
  3. Saving Pays Off!7
  4. Subway Map Visualization jQuery Plugin8
  5. Zara Picken’s Vintage Illustrations9
  6. Graph Paper Generator10
  7. Vertical Centered Responsive Images11
  8. How To Pick A Great Designer12
  9. Dive Into Interaction Design13
  10. Chemical Design14

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 calendar15 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.

An Animated CSS3 and jQuery Calendar16

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 calendar17. 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. h5ai18 changes all that.

More Pleasant Apache Browsing19

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. SaveUp20 rewards you for increasing your savings and reducing your debt at almost any bank in the US. SaveUp membership is free of charge.

Saving Pays Off!21

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.

Subway Map Visualization jQuery Plugin22

Nik Kalyani’s Subway Map Visualization jQuery Plugin23 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.

Zara Picken's Vintage Illustrations

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 stream24. 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?

Graph Paper Generator25

Print Free Graph Paper26 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?

Vertical Centered Responsive Images27

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 centering28 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 guide29 on what to really look for, and what not to look for, in a designer.

How to Pick a Great Designer30

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/Array31.

Dive Into Interaction Design32

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 Chemistry33 confirms this.

Chemical Design 34

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).


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5 #a1
  6. 6 #a2
  7. 7 #a3
  8. 8 #a4
  9. 9 #a5
  10. 10 #a6
  11. 11 #a7
  12. 12 #a8
  13. 13 #a9
  14. 14 #a10
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Thanks for featuring my guide on how to pick a designer! Feel free to leave comments over on the site if you have any additional questions :)

  2. 2

    Great stuff…Thanks for sharing

  3. 3

    Very interesting articles in this newsletter. Thank you very much :D

  4. 4

    Thanks for all the suggestions! I wanted to suggest another site for graph paper because I like to draw big and it offers graph paper up to poster size. Assuming you have a printer big enough to print it. It’s all the papers and sizes are listed right on it’s homepage.

  5. 5

    Jeannette Eccles

    May 2, 2016 2:23 pm

    Valuable writing , I was fascinated by the points – Does anyone know if I could access a sample template form copy to fill in ?


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top