Smashing Newsletter: Issue #52
This newsletter issue was sent out to 99,458 newsletter subscribers on Tuesday, February 7th 2012.
Last week we had the great opportunity of meeting some of our fabulous Smashing Magazine fans in Basel, Switzerland. Have a look at our photos1 and videos2 — we had so much fun and look very much forward to meeting new faces in the upcoming meetup! We’re also busy organizing a CSS Master Class3 with the one and only Jens Grochtdreis! For those who plan to attend, please note that the regular meetup will take place after the workshop. More details regarding the location will be announced very soon, so be sure to stay in touch via our Meetup site4!
In today’s newsletter issue, we’ve tried our best to include various topics to match everyone’s different interests. Be sure to read this issue until the end — we have some fantastic tickets to give away! And in case you’ve been wondering where our Smashing Cat is at the moment, you might be surprised to hear that it’s been riding dragons5 in Japan. Thanks again to Mr.HideMan for the lovely tour around his city!
Table of Contents
01. Spicing Up Your Navigation Menu With CSS36
02. Free Font Family: Exo Font Family7
03. Design Seeds: For All Those Who Love Color Palettes8
04. Is it The Section Or The Aside? An HTML5 Element Flowchart9
05. Pain-Free Cross-Browser Debugging And Testing10
06. Get Inspired With Paul Roger’s Artwork11
07. WordPress Snippets For Faster Development12
08. Exploring The Beauty Of Content: Contents Magazine13
09. The Restart Page: A Tribute To Operating Systems14
A very simple CSS navigation technique16 allows you to add an image for every menu item and slide it out on hover. Essentially, it uses very basic HTML, CSS transitions and the
nth-child selector. A very simple and useful technique — especially if you are working on a portfolio site, a gallery site or a slideshow. (vf)
Free quality fonts always come in handy. However, because creating a rich typeface always requires a lot of time and attention, typographers rarely release them for free — which is perfectly understandable. But there is a way for type designers to actually release fonts for free and still get some revenue for their work.
For example, Free Exo Font Family18 is a successful Kickstarter project which made it possible for Natanael Gama from Portugal to create and release the typeface publicly. Exo is a comprehensive geometric sans serif font family with nine weights — both in Regular and in Italic. Each font comes with many OpenType features such as small caps, ligatures, alternates, oldstyle figures, tabular figures and fractions. Both OTF-version and source files are available to download for free — now that’s the power of community at play! (vf)
Our universe offers us a huge variety of tones and hues, but we seem to pick similar palettes every time we start a new design. Does this happen to you, too? Then maybe it’s time for you to explore the endless possibilities of color palettes on Design Seeds19
In her blog posts, Jessica — a passionate lover of colors and color palettes — features palettes for various situations: travel, fashion, furniture materials, decoration, among others. You can search by color value or the overall theme of a palette. So for your next project (or even your new house) this may be a site worth revisiting for a delightful color combination. (tt)
As a relatively new specification, HTML5 still has quite a few myths and misconceptions which lead one to misuse its technology. New semantic elements introduce a better way to define the content of web pages, yet not all of them are very convenient nor straightforward. Do you know exactly when each element should be used (and when not)? Don’t fear, the Doctor is to the rescue.
HTML5 Doctor has created HTML5 Elements Flowchart22 to illustrate the correct and semantic way of using the new HTML5 elements, such as
article. Print it out and hang it on the wall for future reference — it will surely come in handy. (ld)
Still doubting whether your web app or website is ready for the public? Or are you still looking for a suitable testing environment? Pay Sauce Labs23 a visit. This service provides useful tools for testing almost anything possibly designed for the Web. OnDemand allows you to run selenium tests of your apps in the Sauce Labs cloud. This testing environment features more than 35 possible browser/OS combinations, supports multiple programming languages or CI servers and even provides video footage or screenshots of your tests.
If you’re looking to thoroughly test a website, be sure to check out Scout. It provides developer tools for more than 35 browser/OS combinations, gives you an incident report at the end of each session and offers 45 minutes of free testing each month. If you want your website and app to be bulletproof before launching it, Sauce Labs could be the right solution for you. (sp)
Artistic inspiration can arise from different channels: music, sports, work, leisure. But when it comes to graphic art, the majority of people will get their ideas through visual stimuli. If you are among those who need daily creative input, you might find what you are looking for among these illustrations by Paul Roger25.
These posters are beautiful examples of vintage style graphic design mixed with a refined metaphoric spice. And if you’re looking for carefully curated collections of inspiration, take a close look at designworklife27, a side project by the creative minds behind the design agency Seamless Creative. (tt)
WordPress is arguably one of the most powerful CMSes out there, not to mention the most popular. And it’s no wonder considering just how much you can do with it. Between plugins and custom coded themes, you can make WordPress do virtually anything you want.
WP-Snippets29 make it easier to find the custom codes that you need to make your WordPress site do what you want it to. The snippets offer everything from disabling all comments, adding support for post formats, and adding multiple custom menus. There are also more advanced functions available for both the front-end and admin area of your site. (cc)
Instead of presenting useful tidbits of knowledge, many sites force the reader to glean cunningly hidden information through a mountain of visual data. This often exhausting exercise of reading online often results in a tossed salad of diverse information, where an article on postmodern art seems to somehow be related to dating (or whatever current popular pop-up ads endorse).
So, if you’d like to learn about conten and content strategy practices, take a look at Contents Magazine31. You’ll find inspiration, motivation and a good visual example of how to integrate content strategies into visually pleasing, non-distracting frameworks. They showcase helpful notions and interesting articles on the role of content in Web development. (jc)
Now, this one brings back memories: do you remember restarting your good ol’ Windows 95 in MS-DOS mode, with HIMEM testing for extended memory? If not, The Restart Page32 provides a great opportunity to relive those magical moments.
The site allows you to fully interact with the windows from a shutdown system, whether you prefer to restart the computer, leave it on standby, or run it on MS-DOS mode. Furthermore, the original sounds are provided as well. Certainly not very practical, but quite a nostalgic project to play with during a lunch break! (vf)
Thank You For Reading!
As always, we sincerely appreciate your time and support. As mentioned above, we’re giving away two tickets to the upcoming Web-5 Conference34 in France. Web-5 is going to take place in April 2012. If you want one of those tickets, feel free to send us an email35 — we’ll be drawing the two lucky winners by the end of the week!
Stay tuned for more giveaways and prizes in the upcoming newsletter issues! The next one is due on the 21st of February. See you then!
The Smashing Family
The authors of this newsletter are: Stephan Poppe (sp), Talita Telma (tt), Vitaly Friedman (vf), Iris Ljesnjanin (il), Lisa Lang (ll), Cameron Chapman (cc), Luca Degasperi (ld), Jan Constantin (jc).
- 1 http://www.flickr.com/photos/68892449@N05/sets/72157629115483441/
- 3 http://www.meetup.com/The-SmashingMagazine-Meetup/events/51371192/
- 4 http://www.meetup.com/The-SmashingMagazine-Meetup/
- 5 http://www.flickr.com/photos/68892449@N05/6829210581/in/photostream
- 6 #a1
- 7 #a2
- 8 #a3
- 9 #a4
- 10 #a5
- 11 #a6
- 12 #a7
- 13 #a8
- 14 #a9
- 15 http://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/
- 16 http://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/
- 17 http://www.ndiscovered.com/index.php/exo-font-family
- 18 http://www.ndiscovered.com/index.php/exo-font-family
- 19 http://design-seeds.com/index.php/search
- 20 http://design-seeds.com/index.php/search
- 21 http://html5doctor.com/downloads/h5d-sectioning-flowchart.png
- 22 http://html5doctor.com/downloads/h5d-sectioning-flowchart.png
- 23 https://saucelabs.com/
- 24 https://saucelabs.com/
- 25 http://paulrogersstudio.com/?section=gallery&gallery_id=27
- 26 http://paulrogersstudio.com/?section=gallery&gallery_id=27
- 27 http://www.designworklife.com/
- 28 http://wp-snippets.com/
- 29 http://wp-snippets.com/
- 30 http://contentsmagazine.com/
- 31 http://contentsmagazine.com/
- 32 http://www.therestartpage.com/
- 33 http://www.therestartpage.com/
- 34 http://www.web-5.org/en/#.Ty_IBuNSQ5s
- 35 mailto:email@example.com