The email is not displayed properly? View the online version. Annoyed? Unsubscribe at any time.
Issue #52, Tuesday, February 7th 2012 | 99,458 subscribers | Previous issues
Editorial
Dear Readers,
Last week we had the great opportunity of meeting some of our fabulous Smashing Magazine fans in Basel, Switzerland. Have a look at our photos and videos — 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 Class 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 site!
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 dragons in Japan. Thanks again to Mr.HideMan for the lovely tour around his city!
Table of Contents
01. Spicing Up Your Navigation Menu With CSS3
02. Free Font Family: Exo Font Family
03. Design Seeds: For All Those Who Love Color Palettes
04. Is it The Section Or The Aside? An HTML5 Element Flowchart
05. Pain-Free Cross-Browser Debugging And Testing
06. Get Inspired With Paul Roger's Artwork
07. WordPress Snippets For Faster Development
08. Exploring The Beauty Of Content: Contents Magazine
09. The Restart Page: A Tribute To Operating Systems
10. New on Smashing Magazine
11. Smashing Highlights
1. Spicing Up Your Navigation Menu With CSS3
Do you remember those days when we used nasty JavaScript libraries with onMouseOver effects for "advanced" navigation menus? Comparing those nasty techniques with the simplicity and power of CSS3, we understand how far we have actually come up in our industry over all those years. Mary Lou's technique for a sliding navigation with images is a vivid example for that.
A very simple CSS navigation technique 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)
2. Free Font Family: Exo Font Family
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 Family 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)
Advertisement
3. Design Seeds: For All Those Who Love Color Palettes
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 Seeds
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)
4. Is it The Section Or The Aside? An HTML5 Element Flowchart
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 Flowchart to illustrate the correct and semantic way of using the new HTML5 elements, such as aside, section or article. Print it out and hang it on the wall for future reference — it will surely come in handy. (ld)
5. Pain-Free Cross-Browser Debugging And Testing
Still doubting whether your web app or website is ready for the public? Or are you still looking for a suitable testing environment? Pay sauceLABS 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 sauceLABS 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, sauceLABS could be the right solution for you. (sp)
Advertisement
6. Get Inspired With Paul Roger's Artwork
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 Roger.
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 designworklife, a side project by the creative minds behind the design agency Seamless Creative. (tt)
7. WordPress Snippets For Faster Development
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-Snippets 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)
8. Exploring The Beauty Of Content: Contents Magazine
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 Magazine. 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)
Advertisement
9. The Restart Page: A Tribute To Operating Systems
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 Page 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)
10. New on Smashing Magazine
- How To Use Custom Post Types To Organize Online Marketing Campaigns
- Freebie: St. Valentine's Day Icon Set (10 PNG/PSD Icons)
- Ten Things To Think About When Designing Your iPad App
- Desktop Wallpaper Calendar: February 2012
- The Future Of Screen Typography Is In Your Hands
- Limiting The Visibility Of WordPress Posts Via Usernames
- The UX Research Plan That Stakeholders Love
- How To Deliver Exceptional Client Service
- What Successful Products Teach Us About Web Design
11. Smashing Highlights
- The Art and Science of the Email Signature
It's a shame how often email signatures are done poorly nowadays. Many people want their signature to reflect their personality, provide pertinent information and more, but they can easily go overboard. - Clever PNG Optimization Techniques
This article provides you with a good number of useful techniques that will help you optimize your PNG-images. The techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. - Useful HTML-, CSS- and JavaScript Tools and Libraries
Be sure to check out this post! Here you will find some really valuable tools that will help you save your precious time, automate mundane tasks and hence help you focus on more important things.
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 Conference 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 email — 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!
Yours sincerely,
The Smashing Family
No comments:
Post a Comment