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