Smashing Newsletter: Issue #60
Here at Smashing Magazine, we embrace innovation and experimentation in every sense—be it in design, layout or content. We invite you to the Smashing Daily2—a new series on Smashing Magazine in which our dear colleague Vasilis van Gemert highlights the most recent Web design gems to help you stay on the top of what’s going on in the Web industry. You’ll find the link to the latest editions of the Smashing Daily in the sidebar of Smashing Magazine. As always, please feel free to provide us with feedback (
#smashingdaily on Twitter) and share your thoughts with us!
As many of you already know, we’ve been busy bees organizing the upcoming Smashing Conference4—a friendly, valuable and inspiring community event we hope you won’t miss out on! The conference will be taking place in our home town Freiburg, Germany, on September 17th-19th 2012. There are only a limited amount of tickets left, so get your ticket5 as soon as possible! We’d be honored to meet you there!
On a sidenote, we wanted to mention how sincerely grateful we are to everybody who has purchased our new Smashing Books6, as well as to those who have posted photos on Twitter or Facebook, or have written a review of the book(s). Your opinion is very important to us, and if you like the books, please spread the word to your friends and colleagues. Your support means the world to us!
— The Smashing Team
Table of Contents
01. Create The Illusion Of Stacked Elements With CSS37
02. Inspiration For Mobile Aficionados8
03. WorkFu: Social Job Board For The Network Age9
04. Should I Check My Emails?10
05. Creating Beautiful Résumés On The Fly11
06. Because Everybody Loves Freebies!12
08. Flow: Figure Out Where Your Users Go And When They Leave14
09. Beautiful Slide Decks On Note and Point15
Many of the visual effects that we used to carefully design in Photoshop, Fireworks or Illustrator only to later slice them and embed into our websites with nasty CSS hacks aren’t needed any longer these days. The advent of CSS3 leaves it to creative designers and developers to come up with smart CSS techniques to produce more flexible and responsive visual effects using simple CSS. Tom Kenny’s Stacked Elements technique with CSS16 is a wonderful example of that.
Tom Kenny used
:after pseudo-elements to produce a simple “stacked” look for images. The simple illusion is generated using a couple of images hidden underneath the one you can see. Rotate the
:after elements a bit with CSS transforms, and you’ve got the result you wanted to achieve! It’s important to note that currently only Firefox supports transitions on
:after, so if you’d like to integrate some fancy transitions, you’ll need to play around with jQuery or CSS hacks. (vf)
You spend a lot of time on the Web using your phone? Then you may have noticed how much more restrictive and challenging design for mobile actually is. If you are developing mobile apps for Android or iOS quite often, you might want to bookmark Meerl.li18—where exceptional mobile designers connect, show off their designs and promote themselves. In fact, the website is a great place to browse if you’d like to see how good-looking mobile apps can be.
You can leave feedback, find ideas or just catch up with the current developments in mobile development. Admittedly, not all the designs are exceptional, but you still might find quite a few beautiful gems in there. (jc)
You’ve just graduated from university, or just quit your old job, or even consider quitting your present one. Unless you’re highly talented, employers won’t necessarily line up at your door to offer you a highly payed, fascinating job or career. Most of us have to hit the many20 job21 boards22, put on ties and go through a grueling gauntlet of job interviews. WorkFu23 could be an interesting addition to those conventional job websites.
The interesting thing with this job website is that it doesn’t just present you with a list of jobs you might be suited for. Because you join up using your Twitter account, it also rates the job opportunities according to the connections you have to the potential employers or employees. This sets WorkFu apart from other websites—they acknowledge the importance of networking. So whether you’re looking for the best possible fit (as an employee or as an employer), or just want a place people can find you (should something really exciting come up), this might be the happening place to provide a profile. (jc)
The ubiquitous connection to the Web through diverse devices—computers, tablets, smartphones, or even TVs—makes it irresistible to look up your emails every now and again. But have you noticed an increase in the frequency you look at your inbox lately? If the answer to that question is “yes”, then we have a solution for you.
To check or not to check: that is the question behind the email flowchart26 by Wendy Macnaughton. In a very well-humored way, it helps you decide how urgent a peek into your inbox is depending on the situation you are in. Reading between the lines will show you (literally) that most of the time constant checking is unnecessary. Think twice before opening your email client next time! (tts)
You have an impressive career and remarkable experience behind you, yet a generic MS Word template doesn’t quite reflect the professionalism that you’d like your CV to reflect? You deserve something better than that! In fact, this is where Resumonk27 might be just the tool that you are looking for.
With this tool, you can fill in your details, choose one of the templates and save it as a PDF. The free version includes a couple of nice templates that you can use right away, while the pro version allows you to import your LinkedIn profile and get access to more resume templates. You might want to look into alternative tools such as JobSpice29 or LinkedIn Résumé Builder30. And if you’re looking for more resume ideas, check out our article on CVs31 as well as CVParade.com32. (vf)
Quality freebies are always difficult to find, yet once you have found them, they are always a valuable tool in your design arsenal. PixEden33 is a community that provides all kinds of beautifully crafted freebies. You will find print-ready resources such as logo sets, business cards and flyers, as well as Web design templates, icons, vectors and graphics. Register to download exclusive freebies or ask for a specific resource.
Another resource with a large number of freebies is Creative Market: Free Goods35. This section features a hand-picked selection of goodies that were submitted to Creative Market, a platform which gives designers an opportunity to promote and sell their work. You can find even more freebies on Orman Clark’s PremiumPixels36 as well. The resources are growing, so if you’re looking for freebies, make sure to visit them from time to time! (ml)
You might have used at least a couple of tools that help you visualize traffic activities on your website. Do you really need a new one? Well, maybe. Flow40 is a free analytics tool that uses flowcharts to show all the visitors of a certain webpage, and which pages they clicked to when they left this page. Clicking on the subsequent pages will bring up a new chart and new information. This will allow you to track every step users take through your website.
Imagine this situation: you have an opportunity to develop a design project and have to prepare a proposal. There are so many ideas for the content of the proposal, but how do you present them properly? Should you invest time for developing an extra design just for this presentation? Well, Note and Point42 can help you find the starting point you need.
On their site, Dave Ruiz and Christian curate beautiful presentations from Keynote, PowerPoint and SlideRocket, and provide a PDF deck for each presentation. You can reach for reference anytime, or if you have a beautiful presentation that you made yourself, just submit it and enrich the collection with your design! (tts)
The authors in this newsletter are: (vf), Jan Constantin (jc), Talita Telma Stöckle (tts), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), John von Bergen (proofreading).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://www.smashingmagazine.com/smashing-daily-10-touch-vector-git/
- 3 http://www.smashingmagazine.com/2012/05/25/first-smashing-conference-coming-community-event-web-designers/
- 4 http://www.smashingmagazine.com/2012/05/25/first-smashing-conference-coming-community-event-web-designers/
- 5 http://smashingconf.com/registration
- 6 http://www.smashingmagazine.com/books/
- 7 #a1
- 8 #a2
- 9 #a3
- 10 #a4
- 11 #a5
- 12 #a6
- 13 #a7
- 14 #a8
- 15 #a9
- 16 http://inspectelement.com/tutorials/create-the-illusion-of-stacked-elements-with-css3-pseudo-elements/
- 17 http://inspectelement.com/tutorials/create-the-illusion-of-stacked-elements-with-css3-pseudo-elements/
- 18 http://www.meer.li
- 19 http://www.meer.li/
- 20 http://www.authenticjobs.com/
- 21 http://jobs.37signals.com/
- 22 http://jobs.smashingmagazine.com
- 23 https://workfu.com/
- 24 https://workfu.com/
- 25 http://blogs-images.forbes.com/dell/files/2012/04/E-mail-graphic3.jpg
- 26 http://blogs-images.forbes.com/dell/files/2012/04/E-mail-graphic3.jpg
- 27 http://www.resumonk.com/
- 28 http://cvparade.com/
- 29 http://www.jobspice.com/home
- 30 http://resume.linkedinlabs.com/
- 31 http://www.smashingmagazine.com/2009/04/01/10-handy-tips-for-web-design-cvs-and-resumes/
- 32 http://cvparade.com/
- 33 http://www.pixeden.com/
- 34 http://www.premiumpixels.com
- 35 http://creativemarket.com/free-goods
- 36 http://www.premiumpixels.com
- 38 http://www.pockethotline.com
- 39 http://www.pockethotline.com
- 40 https://flow.mixpanel.com/
- 41 https://flow.mixpanel.com/
- 42 http://noteandpoint.com/
- 43 http://noteandpoint.com/