Smashing Newsletter: Issue #7
This newsletter issue was sent out to 26,559 newsletter subscribers on April 27th 2010.
Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1, of course.
Table of Contents
01. Elastic: A Visual Theme Editor for WordPress2
02. Creating Dynamic Footnotes With CSS and jQuery3
03. Free Payment Icon Set (10 Free Icons)4
04. Typographic Accents Made Easy5
05. Pixuffle: Shuffle Pixels Into Unique Compositions6
06. Generating a Starter CSS from HTML Mark-Up7
07. Get Out for Once: Look at an Online Garden8
Elastic9 is a visual theme editor and engine for WordPress. In reality, it’s a new way to look at themes for WordPress. It allows virtually anyone with a modicum of technical skill to edit their WordPress theme. A new theme layout can be created literally in a minute or so (see the demo10 or slideshow presentation11), everything based on a grid layout with a defined size. Creating a layout is as simple as dragging and dropping boxes, resizing them and then specifying the type of content each should contain (header, footer, content, sidebar). It also aims to be developer-friendly.
It’s still in early stages of development and has been released under the GPL license. Currently, Elastic is available in version 0.0.313. It’s also in the process of being completely rewritten to make it less restrictive to developers and more tightly integrated in WordPress’ core. In the meantime, it’s worth a try and might meet your needs as is. (cc)
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 solution15 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 technique16 or BrandSpankingNew footnotes script17. (vf)
One can hardly build an e-commerce website without trustworthy and recognizable e-commerce icons. Payment Icons18 in particular might come in handy to convey your message and fit the context. The guys over at Webiconset have just released this set of 10 high-quality icons for use in both private and commercial projects.
The set includes PNG icons for Visa, MasterCard, American Express, Cirrus and PayPal. Gold Coin icons and shopping carts are also provided. The icons are available in resolutions of 32×32, 48×48 and 64×64 pixels. (cs)
Do you often find the need to edit body copy or emails in foreign languages with funny characters that for some reason do not display properly from the local keyboard? Then have a look at TypeIt20. The online tool will save you a lot of time and vexation. Don’t strain your brain trying to think of hotkeys like Alt + 134; stop hunting around for special characters in a word processor as you use an email client or instant messaging service. The service allows you to add typographic accents and special characters (e.g. punctuation marks) as you’re typing.
Instead of clicking on buttons for the accents, you can also use pre-defined shortcuts, like Control + N, to insert the characters: just point your cursor to the desired character and you’ll see a tooltip.
Also, you can switch between character sets while typing; you can use bold, italics, underlining and superscript; and you can change the font and size. TypeIt was developed by the Polish translator Tomasz P. Szynalski. The tool has full keyboard support for Internet Explorer 6+, Firefox, Safari, Opera and Chrome. (mm)
For some, it is just another Web gadget. For others, Pixuffle22 is an inspiring and creative online Web art tool. We think it is always good to present experimental applications that are relevant to imaginative design, and this one fits the bill.
Once you uploaded an image, the tool allows you to sort the parts of the picture by moving squares (parts of the image) around. Pixuffle shuffles the pixels’ positions in a playful puzzle interface. The generated images can be encoded in anything from ByteArrays to JPG files (using Alchemy’s C++ module), and they can be saved to your computer or posted to the Pixuffle Flickr gallery24. The project is open source, so developers can download the full code for image processing, encoding and uploading. The tool can be used online: no download is necessary. No other plug-ins are needed either. (cs)
Primer25 is one of those little tools that make life easier for the Web developer. The tiny generator works online and has only one function: it extracts from an HTML page (copying and pasting will do) a framework of classes and IDs that can be used as the foundation of an external style sheet. This can be wonderful if you work by first doing the structure in HTML, and then the forms and colors in the style sheet.
Primer undercoats your CSS by pulling all of your classes and IDs and putting them in a starter style sheet. Now, just paste your HTML to get started. (sl)
Posts like “Unusual Places to Look for New Ideas” and “Out of the Box Ways to Find Inspiration” are proliferating in the blogosphere. Of course, stepping away from the computer for a while and looking at what the real world has to offer is great. But admit it, wouldn’t you love to be able do that on your computer, too?
As unlikely as it sounds, GardenPuzzle28 is an online garden-planning tool. Choose from one of the many beautiful sceneries and arrange plants and trees into a garden of your own. If you have a genuine interest in the field, this is a great resource because each plant comes with a short description. You can try for the best one for your IRL garden, depending on climate and soil conditions. But above all, the tool is about organization of space, and that’s good for Web designers to practice, isn’t it?
The authors in this newsletter are: Vitaly Friedman (vf), Sven Lennartz (sl), Christina Sitte (cs), Cameron Chapman (cc), Manuela Müller (mm).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 #a7
- 9 http://elastictheme.org/
- 10 http://elastictheme.org/2009/11/15/wordcamp-nyc-slides-and-demo/
- 11 http://www.slideshare.net/drylk/elastic-why-wysiwyg-is-the-future-of-wordpress-themes
- 12 http://elastictheme.org/
- 13 http://downloads.wordpress.org/plugin/elastic-theme-editor.0.0.3.zip
- 14 http://ignorethecode.net/blog/2010/04/20/footnotes/
- 15 http://ignorethecode.net/blog/2010/04/20/footnotes/
- 16 http://www.likewowonline.net/web/dev/accessible-footnotes.html
- 18 http://www.webiconset.com/payment-icon-set/
- 19 http://www.webiconset.com/payment-icon-set/
- 20 http://www.typeit.org/
- 21 http://www.typeit.org/
- 22 http://www.pixuffle.net/
- 23 http://www.pixuffle.net/
- 24 http://www.flickr.com/photos/pixufflegallery
- 25 http://www.primercss.com/
- 26 http://www.primercss.com/
- 27 http://gardenpuzzle.com/
- 28 http://gardenpuzzle.com/