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 Africa2. In the meantime, our team hasn’t stopped working tirelessly to prepare a HUGE (but still secret) Christmas surprise and our next Smashing Meetup3. We’re very pleased to welcome Paul Irish (@paul_irish4) and Christian Heilmann (@codepo85) 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 Twitter6 and join us on Facebook7 as well as Google+8 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 Calendar9
02. More Pleasant Apache Browsing10
03. Saving Pays Off!11
04. Subway Map Visualization jQuery Plugin12
05. Zara Picken’s Vintage Illustrations13
06. Graph Paper Generator14
07. Vertical Centered Responsive Images15
08. How To Pick A Great Designer16
09. Dive Into Interaction Design17
10. Chemical Design18

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 calendar19 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 Calendar20

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 calendar21. 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. h5ai22 changes all that.

More Pleasant Apache Browsing23

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. SaveUp24 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!25

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 Plugin26

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

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 stream29. 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 Generator30

Print Free Graph Paper31 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 Images32

There are many ways to make images responsive33, and nobody can agree on a single unique and universal technique. Solemone developed another technique ,Overflow image with vertical centering34 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 guide35 on what to really look for, and what not to look for, in a designer.

How to Pick a Great Designer36

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

Dive Into Interaction Design38

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

Chemical Design 40

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

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://www.flickr.com/photos/68892449@N05/6465348679/in/photostream
  3. 3 http://www.meetup.com/The-SmashingMagazine-Meetup/events/42026332/
  4. 4 http://twitter.com/#!/paul_irish
  5. 5 http://twitter.com/#!/codepo8
  6. 6 http://twitter.com/smashingmag?pk_campaign=NL0612&pk_kwd=NL-Tw
  7. 7 https://www.facebook.com/smashmag?pk_campaign=NL0612&pk_kwd=NL-Fb
  8. 8 https://plus.google.com/u/0/116812091267698107544/posts?pk_campaign=NL0612&pk_kwd=NL-g%2B
  9. 9 #a1
  10. 10 #a2
  11. 11 #a3
  12. 12 #a4
  13. 13 #a5
  14. 14 #a6
  15. 15 #a7
  16. 16 #a8
  17. 17 #a9
  18. 18 #a10
  19. 19 http://www.jepija.com/blog/a-clean-calendar-in-css3-jquery/
  20. 20 http://www.jepija.com/blog/a-clean-calendar-in-css3-jquery/
  21. 21 http://www.jepija.com//blog/projects/CSS3-calendar/
  22. 22 http://larsjung.de/h5ai/
  23. 23 http://larsjung.de/h5ai/
  24. 24 https://www.saveup.com/
  25. 25 https://www.saveup.com/
  26. 26 http://www.kalyani.com/2010/10/subway-map-visualization-jquery-plugin/
  27. 27 http://www.kalyani.com/2010/10/subway-map-visualization-jquery-plugin/
  28. 28 http://www.splitpersonality.at/2011/11/zara-picken/
  29. 29 http://www.flickr.com/photos/zaraillustrates/
  30. 30 http://www.printfreegraphpaper.com/
  31. 31 http://www.printfreegraphpaper.com/
  32. 32 http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/
  33. 33 http://www.cloudfour.com/responsive-imgs-part-2/
  34. 34 http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/
  35. 35 http://folyo.me/guides/how_to_pick_a_great_designer
  36. 36 http://folyo.me/guides/how_to_pick_a_great_designer
  37. 37 http://designarray.com/
  38. 38 http://designarray.com/
  39. 39 http://veerle.duoh.com/design/article/international_year_of_chemistry_2011
  40. 40 http://veerle.duoh.com/design/article/international_year_of_chemistry_2011

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.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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 http://print-graph-paper.com/ all the papers and sizes are listed right on it’s homepage.

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top