 |
As most of you may already know, every second Tuesday of a month we send out an email newsletter to our subscribers (over 50,000 at the moment). Every newsletter issue contains exclusive, short articles that present recent design techniques, freebies as well as useful resources and tools. We work hard to make every issue special and useful, interesting and entertaining, and therefore your feedback is very important to us. (Feel free to take a look at the latest newsletter issue).
Today, we’re particularly pleased to announce that our Smashing Newsletter is turning one year old tomorrow (yaaaaay!). To celebrate this special day, we’d like to give away some remarkable, must-have books. Besides, we’d like to look back at the last year and present you a selection of the most interesting articles from our previous issues. And, just for the record, the next issue is coming up tomorrow.
The Smashing Newsletter has always been free of charge. We fully respect your privacy, and we would never share your data with third parties, nor would we ever spam you. You have our word. Join us today!
Subscribe to the Smashing Email Newsletter Now!
How Can You Win a Book?
Easy! Just share your thoughts about the newsletter in the comment section below to this post! What’s your opinion of newsletters in general? Who reads newsletters these days anyway? Is it a useful resource? Why do you read newsletters and which ones are you subscribed to?
Please do share your honest thoughts and personal opinion on the matter. In the end, we’ll randomly choose six readers who will win the book of their choice:
- Hardboiled Web Design
by Andy Clarke
Five Simple Steps, 390 pages - Stunning CSS3: A Project-Based Guide to the Latest in CSS
by Zoe Mickley Gillenwater
New Riders Press, 320 pages - Making Ideas Happen
by Scott Belsky
99%, 256 pages - Art: The Definitive Visual Guide
by Dorling Kindersley
Dorling Kindersley Ltd., 612 pages - Ordering Disorder: Grid Principles for Web Design
by Khoi Vinh
New Riders, 180 pages - The Book of Symbols: Reflections on Archetypal Images
by the Archive for Research in Archetypal Symbolism
Taschen Verlag, 810 pages
Exclusive Smashing buttons and stickers. The Smashing Animals are designed by the Twitter Whale creator Yiying Lu. Large view
Alternatively, you can also pick up the exclusive bundle of limited Smashing buttons and stickers.
The “Best Of” Smashing E-Mail Newsletters
For a year now, the Smashing Newsletter has delivered 183 short articles in total, which all of our email subscribers have received regularly. The ones below were their favorites:
Things I Learned About Browsers and the Web
For most of us, the Internet is a part of daily life, even if we don’t know everything there is to know about it. For things you’ve always wanted to know about the Web but were afraid to ask, we’ve found a book for you to flip through. Built in HTML5, this guide has it all, starting from the meaning of “Internet” all the way to open source and modern browsers.
The guide 20 Things I Learned About Browsers and the Web is a brief reminder for anyone who’s curious about the basics of browsers and the Web. The neat little red man was illustrated by Christoph Niemann. (ik)
ProCSSor: Hassle-Free, Cleanly Formatted CSS
Not all CSS mark-up is pretty and cleanly formatted. Beautiful code can make editing and maintaining a whole lot easier. Ideally, this should be done from the beginning, as you create the style sheet; but sometimes we have to work on style sheets created by other designers who format their code differently. If you’re on a deadline, spending the extra time reformatting a style sheet can be quite time-intensive and not much fun.
That’s where ProCSSor comes in. This online tool allows you to submit your CSS (either copy and paste the code, upload the file or point to a URL) and choose from formatting options. You can save options and reuse them any time you run code through ProCSSor. You can separate properties and selectors across multiple lines, indent up to four levels with either the space bar or Tab key and even sort properties. The tool also has a “Columnize” mode, which groups elements into columns, making for a more elegant style sheet; you need to deactivate “Fail-safe mode” to use it, though—keep in mind that juggling CSS properties can result in rendering problems in browsers. (cc) (vf)
What Can You Make Out of Paper?
Nothing beats paper when it comes to brainstorming, mind-mapping or simply jotting down notes. Paper, one of the “Four Great Inventions of Ancient China,” has become a vital material in many industries and cultures. No surprise, then, that many artists experiment with the resource in untraditional ways. Paper-folding techniques, such as origami, have been popular for ages. This ancient Japanese practice of turning a single piece of paper into a genuine work of art is definitely impressive.
One could go even further with paper and produce, for example, complex shapes and sculptures and models from it. That’s what Richard Sweeny does. Richard says that his objects “are simple to construct, yet complex in appearance, and efficient in the way they are produced, both in terms of construction time and material used.” We have a hard time believing that his models are not as difficult to create as they look; they are truly beautiful and captivating.
If you’re looking for more examples of paper modelling, then head on over to the artwork of Polyscene, and read the post “Masters of Paper Art and Paper Sculptures.” (cs)
Browser Details for Tech Support
As the operator of a website or online service, you know the problem: a gruff complaint to customer support because nothing works. And the customer, in his frustration, unfortunately forgets to provide further details.
Where does an admin or programmer begin when all they have to go on is “does not work” or “is broken”? You need details: about the customer’s browser and its configuration. A reasonable approach to the problem would be to start with some queries, which the non-specialist would be able to only partially answer: “Which browser? Well, uh… this Mozzarella.” “Cookies? I haven’t baked in years.”
When in doubt, send your customers to the website Support Details. Their data will be automatically read out of the browser (including Flash version, operating system, cookies, JavaScript status, screen resolution, browser size and more) and can be copied, sent directly to you via email or saved. The free service uses Flash but can also complete its task without it. (sl)
Smarthistory: Inspiration from Rediscovering Art History
Having Dr. Beth Harris and Dr. Steven Zucker as teachers, anyone would have picked art history as their favorite subject in school. Instead of relying on the large expensive textbooks usually used in class, these two professors decided to create their own audio guides to be used in the Museum of Modern Art and the Metropolitan Museum of Art. These podcasts are not lectures but rather discussions that take place in front of the work being discussed, on the actual premises of the museum. This innovative approach to art history is at the heart of Smarthistory, a free multimedia Web book that offers a perfect opportunity to review art history.
The website covers a wide variety of the artwork usually found in art history classes, ranging from ancient cultures to post-colonialism. In addition to the audio and video, Smarthistory contains articles and images organized by style and chronology. As a bonus, the user interface itself is worth looking at. The appealing design and intuitive navigation (which allows you to browse by era, style, artist and theme) makes this experience not only educational but enjoyable. (jb)
Insert a Layout Grid in Web Pages With #grid
While Photoshop and Fireworks are still the convention for designing websites, some designers are taking an alternative approach: creating mock-ups in actual mark-up (designing directly in the browser). In fact, many tools built into the browser can help you either prepare a quick mock-up or polish a nearly finished design. In particular, if you often do grid-based designs, you may find #grid extremely useful for adapting layout widths and alignments and for creating vertical rhythm on the page.
#grid is a little tool that inserts a grid onto the Web page. You can hold the grid in place and toggle it between the foreground and background. To display the grid, just press a hot key on your keyboard, and you can set your own short keys to switch views. #grid comes set up with a 980 pixel-wide container, with 20-pixel gutters, and assumes one lead of 20 pixels. You can download the source code (JavaScript and CSS) and use classes for multiple grids. (vf)
Free High-Quality HTML Email Templates
Designing HTML emails is tricky. Because of the lack of proper CSS support in many email clients, Web designers often have to resort to nasty coding techniques or restrict their emails to simple layouts. But emails — whether newsletters, corporate memos or communications based on generic templates — don’t have to be ugly and boring.
The Gallery of HTML Email Templates proves just that. The page presents 38 free HTML email templates (including PSD and HTML files), created by talented professional designers. Every template has been tested in more that 20 popular email clients, including Outlook 2010, Gmail, Lotus Notes, Apple Mail and the iPhone. All of the Photoshop documents are layered and ready to be tweaked. You can download all of the templates for free (320 MB) and use them for any private or commercial project. (vf)
Creating Dynamic Footnotes With CSS and jQuery
In body copy, footnotes can be a nice solution to hide content that is not directly relevant; for examples, linking to a citation source, explaining a particular term in detail or discussing something off-topic. In these situations, footnotes let readers jump to this information when they need it, while allowing the writer to focus on the important things and not get lost in details.
But in their simplest implementation – using sup tags and linking within the page – footnotes aren’t very user-friendly. They interrupt the experience, requiring the user to click the link, read the information and then return to the page with the browser’s “Back” button.
Lukas Mathis has come up with an elegant solution to improve this user experience: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it – i.e. when they move the cursor over the footnote symbol.
If the user’s browsing device doesn’t support mouse hovering, they can still jump to a footnote via its link. The script works in Firefox, Chrome, Safari, Opera and Internet Explorer 7+. Alternatively, you could try the accessible footnotes technique or BrandSpankingNew footnotes script. (vf)
LaunchList: The Designer’s Ultimate Website Check List
Every design project has many little details that one has to take care of before it goes live. Have you checked your content for spelling errors? Did you design a 404 page? What about the print style sheet? LaunchList helps you review important items before the big launch.
By default, the tool provides 28 items to be checked, but it also allows you to add custom items to the list. Each item can be commented on or crossed out. Once you’re done, you can send the report along with project’s details to multiple recipients via email. The email does not contain a direct link to the check list, but it has a plain text review of the things you have checked (along with your comments). If this tool is not flexible enough for you, you may want to look at the Ultimate Website Launch Checklist, which is also available as a PDF download. (vf)
Getting Creative… With Money
Paper money has been around for over a thousand years. The currency is familiar to us; we trust it, and we humans are creatures of habit, often hostile to change. But that hasn’t stopped designers and illustrators from experimenting with their own versions of these monetary staples.
Many designers dream of being offered the chance to redesign the banknotes of their local currency or even contribute new kinds of legal tender. With all of the currency types in the world today, some more intricate than others, there is certainly no lack of inspiration to draw from. But when designers let their imagination run loose and try their hand at designing money, there is no telling what they come up with. For example, Xavi García has created a banknote by hand that reminds the user of the effort that went into its creation, replacing the currency value with the amount of time the note took to create.
And Dowling | Duncan has proposed a complete revision of US currency. You can see this and more impressive money design submissions at the Dollar ReDesign Project website. (ks)
Rounded Images With CSS3 and jQuery
Have you ever tried to apply the border-radius and box-shadow properties to images? If you have, you probably noticed not only that modern browsers display corners differently, but that the corners look a bit unfinished and broken. Webkit displays rounded corners but does not support the inset box shadow. In Firefox, the border-radius doesn’t display at all (see the image below).
Nick La has come up with a solution to this problem. The idea is simple: wrap a span tag around the image element. Then, put the original image in the background with the background-image property, and then hide the original image by applying opacity: 0 to it. Or to make it easier, just embed a jQuery code to generate span tags for images on the fly (which you’ll find in his article).
The technique works with any image dimension and works even if the width and height attributes are not defined. Obviously, the user has to be using a modern browser to see the effect. (vf)
Unsuck It: Rebel Against Marketing Jargon
Have you ever read a company’s “About” page and were left wondering what exactly the company did? Or read a page that talked about all the features and benefits of a product and that tried to convince you that the product was the best thing since Wikipedia… but that didn’t really tell you a thing? Marketing and business jargon is confusing or meaningless at best, and completely unintelligible at worst.
That’s where Unsuck It comes in. Enter any jargony word, and the online tool deciphers it and returns the true (unsucked) meaning. It’s useful for figuring out what a company is actually trying to say or for rewriting the horrible copy that a client has handed to you for its website. (cc)
Exposing Deceptive Design Patterns
Plenty of bad website designs out there are hard to use and serve only to frustrate users when one thing after another doesn’t work as expected. In many cases, these websites are designed by people who don’t follow common usability guidelines and best practices. Some websites out there, though, are purposely unfriendly. The designers who created them were perfectly aware of the effect their decisions would have. In fact, they designed the interfaces to deliberately guide users to do things they wouldn’t normally do.
DarkPatterns.org aims to expose these black-hat designs whose sole aim is to misdirect and deceive visitors. Anti-usability design patterns that are currently identified on the website include the “Roach Motel,” “Bait and Switch,” “Privacy Zuckering” and “Forced Information Disclosure,” among others. Examples of each are included, and visitors can add their own in the comments on each page. It’s a great website to show clients when they ask you to implement a questionable “feature” on their website. (cc)
The Grammar Cheat Sheet
Creating and publishing content has never been easier. Many of us have stumbled across useful and inspiring websites, only to be shocked by the lack of even the most basic grammatical competency on the part of the author. Following a few simple pieces of advice to improve your copy does not take much effort. The Grammar Cheat Sheet by Alexander Ross Charchar serves as a great guide in the language jungle.
Never mix up your dashes again; learn how to set quotations marks; and remind yourself to keep paragraphs short and topical. Overall, it’s a nice little catalog of suggestions that would help every content creator meet the expectations of their audience. Take five minutes to peruse the sheet; your visitors will appreciate it! For a closer look at what else might go wrong, check out “The Trouble With EM ’n EN (and Other Shady Characters)” by Peter K Sheerin. (sp)
WordPress Admin Toolbar Bookmarklet: Blogger’s Little Helper
Small yet efficient, the WP-Toolbar bookmarklet will save a lot of clicks as you edit or update posts on your WordPress-powered blog. The bookmarklet gives you quick access to the entire administrative back-end directly in your browser’s window.
Just drag and drop the bookmarklet into your bookmarks toolbar. When visiting your website, just click on the bookmarklet, and the script will add a graphical toolbar menu to the top-right corner. The menu has icons for all of the back-end menus, including Dashboard, Pages, Media and Users. To make it disappear, just re-click the WP-Toolbar button.
Say you are reviewing a post from your blog and want to quickly add a picture: you don’t even have to navigate to the back end. Just click on the Media button and start directly uploading the image. (If you are not already logged in, you will need to do that first.)
The tool does not give you access to anything you don’t already have. And unfortunately, the WP Admin toolbar doesn’t allow you to edit a post or page that you have loaded in your browser: you will need to select it from the list of articles on the “Edit posts” page. Still, this tool will save you a couple of clicks by giving you quick access to the most important back-end options. There is also a GreaseMonkey script that automatically loads the toolbar when you visit a particular website. (mm)
Baker eBook Framework: Better eBooks for the iPad
The iPad has become the digital reading device of choice for many people, thanks in part to its iBooks app. However, how would one go about creating an eBook for iPad? Of course, there are many possibilities: you could just use InDesign, OpenOffice or Apple Pages to generate the book in the ePub format, however you may run into formatting problems.
Baker eBook Framework is a nice new alternative. Based on HTML5, Baker makes creating a book for the iPad as easy as coding a basic Web page… even easier, considering it comes with a full framework for you to use. The idea is to give designers a set of templates to build HTML5 pages with a fixed width of 768px and use the power of WebKit for styling and animations. The format of Baker is HPub, which is basically one folder, book/, that contains all of your HTML files, all enumerated . It even comes with information on how to get your book into the App Store. It’s all free and BSD-licensed. You can download a sample book made in Baker for free. (cc) (vf)
Friends of Type
Friends of Type helps you discover great fresh visual content. Four creative fellows are responsible for the project which features type artwork from artists around the world, yet mainly their personal work. The project values typographic design and serves as a sketchbook, archive as well as dialogue.
All the creative posts are mainly meant to log ideas and aid you with daily inspiration. The posts are sketches and ideas around visualized language: a habit born out of the real-time collaboration among type artists. Don’t forget to drop by every last week of the month, when a guest designer is featured. (ik)
Responsive Images and Context-Aware Image Sizing
Since Ethan Marcotte coined the term, responsive Web design has gained a lot of attention in the Web design community, mainly due to its remarkable potential for flexible layouts that respond to the browser’s viewport for the best user experience. The main problem with such designs, however, is figuring out how to serve small images to mobile devices and tablets and large ones to desktop displays. At the most basic level, using fluid images and browser scaling to adjust the size of images would be fine, but it raises performance and speed issues.
You could swap out different scaled images for different display sizes or use .htaccess files and some JavaScript to serve up different sized images based on the screen width. Another option is to use a service like TinySrc: merely prefix all large images in your source code with a TinySrc URL, and the tool does the rest.
Rumpetroll Experiment: Ever Wanted to Be a Tadpole?
Yeah, me neither. But that’s what Rumpetroll (Norwegian for “tadpole”) lets you do. The project is a multi-player experiment created with HTML5, Canvas, JavaScript and WebSockets. Rumpetroll lets you be a tadpole that swims around in a gigantic virtual pond. You can even chat with the other tadpoles.
While Rumpetroll doesn’t seem to have a real point, and we have no insight into why it was created, it is a very good example of what can be built with modern technologies such as HTML5 and Canvas. By the way, it’s a Github project, if you’re interested in diving into the code (pun totally intended). (cc)
Pop-Up Ping Pong
Developers are coming out with innovative games on what seems a daily basis. And sometimes we just need to take a break from our work and do something fun for a few minutes. Playing a quick game online is a great way to do this.
This new version of Pong is different from most online games. Rather than working in Flash or JavaScript, it works in pop-up windows. You get three pop-up windows to start. Two of the windows serve as sliders for the two players (you can play against another person or the computer) and one is the “ball.” You control your slider using the arrow keys or the A and Z keys. Other than that, it works just like an old-fashioned game of Pong. One tip: holding down a key to move seems to work very slowly (or not at all, at least on a Mac running Firefox); tapping the key repeatedly is better. Warning: sounds starts automatically. (cc)
Star Wars, Episode IV: Retold in Icons
Images can say more than words alone, and they can be a powerful tool for storytelling. Images engage and involve, they visualize data, and they condense large chunks of information in a compact and memorable way.
Star Wars is a legend. The story has been used for decades in a variety of ways: be it theatre performances or monochrome LEGO bricks, it still has a large and growing fan base. So while some fans are waiting for a new 3D version, there is now a convenient short form of the first part (which is the episode IV). And the best thing: it actually fits in this newsletter.
Wayne Dorrington’s Star Wars: Episode IV presents the whole story of Star Wars: Episode IV in… icons! Not a single word is used in the design. A nice example of vivid, creative and original artwork. It’s also just fun to remember a great movie this way. (sl), (vf)
Subscribe Now!
As mentioned, our Smashing Newsletter has always been and will remain free of charge. Our main goal is to keep our readers up to date on the latest trends in this ever-growing world called Web design.
Join us today and become a member of the Smashing family!
Subscribe to the Smashing Email Newsletter Now!
(sl), (ik), (al)
© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: newsletter