Smashing Newsletter: Issue #32
This newsletter issue was sent out to 55,115 newsletter subscribers on April 26th 2011.
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. A Boilerplate Extension for Tiny Screens2
02. Follow the Sun on Your Desktop3
03. Wall Fingerings by Judith Braun4
04. Pixel Proliferation: Manage Screen Resolutions Easier5
05. Diptych, Triptych and N-tych for Photoshop6
06. DropDo: Easy and Smart File Sharing7
07. ASCII Character Pronunciation Rules8
08. A Paper Record Player9
In practice, many Web designers start out with a desktop layout and then adapt it for mobile devices. Sometimes, especially if the website is relatively small, that works just fine. Other times, not so much. You end up with a mobile website that just doesn’t work well and is desperately trying to look lightweight while being very bloated. Plus, your mobile device wastes time and resources loading desktop-specific assets that users of mobile devices will never even see.
320 and Up11 is an HTML5 Boilerplate extension that starts out with a tiny mobile style sheet and adapts the styles from that for larger screen sizes. Time and resources aren’t wasted on loading assets that mobile users will never see. The most basic style sheet contains only reset, color and typography styles, and assets are added from there. Check out the 320 and Up website at different window sizes and devices to see for yourself. (cc)
Let your computer follow the sun throughout the day. Why would you want to do that, you ask? Computer screens glow all day long, no matter what time it is. The later the day, the more exhausting it is to stare at your screen. f.lux12 makes your display adapt to the lighting of the room you are in, all the time. During sunset, your screen mimics room light, and in the morning the tint resembles sunrise and its natural light.
Configuring f.lux is easy: simply tell the control panel what kind of lighting your office has and where you live. The rest is taken care of automatically. Try it; it might save you one or another night in front of the computer or even enhance your natural bio-rhythm. The free tool is available for Windows, Mac and Linux. (sp)
Whoever thought art could be painted only with brushes was wrong. Judith Braun uses her bare fingers to create minimalist patterns, gradients and abstract forms. With the help of charcoal, she has created an unusual technique to achieve abstract forms and bilateral symmetry.
By using both hands simultaneously at arm’s reach, Judith Braun15 exploits the inherent symmetry of her body to make gestural inscriptions: a simple yet powerful technique that captures her passion for art and her attempts at new methods in abstract art. (il)
With the increasing popularity of Web-enabled devices, the requirements for our work keep changing and thus reshape our design processes. From small mobile screens to large office displays and to huge TV monitors, a website just has to be presented in a meaningful, responsive way. But how do we deal with all that devices and screen resolutions?
Punchcut has come up with a Pixel Proliferation Tool Set18 that will help you to manage screens resolutions more easily. The .zip file contains a collection of PS5 marquee-tool presets for common screen resolutions, covering fixed-screen resolution sizes, ratios for less common resolutions and standard ratios. Also, a collection of layered CS5 PSDs provides common devices for computing and design presentations. Finally, there is a reference chart for resolutions and design landscape. Get the Punchcut tool set now and be ready for the next clients who have special requirements for their new website. (sp)
Every photographer and Web designer who has spent time arranging images and photographs knows that scaling and resizing takes time. But even existing templates are unnecessary when you try out Reimund Trost’s latest little Tych Panel for Photoshop19. It completely automates the n-Tych creation process, and it has a lot of layouts to choose from. “Tych Panel comes with a fresh aroma of speed and feel of simplicity.”
Here’s how it works. After installation, the panel is available through the Adobe extensions manager. Once open, just select the images you want to use, tell the panel your target width for the whole Tych, and then select the quality of the automatically resized images and whether you want the single images to be saved separately. Each image will be opened in a separate layer, and the document will be ready to be tych’d!
Pick a Tych variant, and you are ready to go. Applying the script repeatedly will add further rows and columns to your layout. (sp)
File sharing gets easier by the minute. DropDo22 is a smart file viewer that lets you upload images, documents, code, audio files and video files to share with friends and families. And why do they call it “the smart file viewer”? Because your friends do not even have to download the file! They can listen to or view it directly in the browser, without saving anything to their hard drive.
Simply upload a file or enter a URL and hit “Enter.” Uploads are currently limited to 25 MB per file and are indefinitely accessible if they meet DropDo’s terms and conditions. Multiple file uploads will probably be included in the premium membership that is soon to come. (sp)
Most programmers would recognize ASCII characters on a website and know how to use them in their own work. But how many know what to call all those characters? Could you have a conversation about those characters with another programmer and actually be able to understand each other? Do you know what a quadrathorpe is? What about a scratchmark? Prime? What about square and unsquare? Did you even know there were so many varied words to describe all those common ASCII characters?
ASCII Pronunciation Rules for Programmers25 gives a pretty thorough rundown of common and not-so-common names for ASCII characters. It’s a useful guide if you’re ever at a loss when listening to another programmer speak about coding. (cc)
There are some sleek invitation cards out there, and this is surely one of them: a wedding invitation with a paper record integrated in it that amplifies the sound of a sewing needle moving along the grooves of a flexidisc record. Kelli Anderson26 and her boyfriend Daniel have come up with a remarkable way to invite Karen and Michael’s loved ones to their wedding.
Not only did they design a fine cover for the invitation card, but they managed to bring the simple paper card to life with Karen and Michael’s wedding song, which they composed themselves. And to think this is only a taste of what’s to come. (il)
The authors are: Vitaly Friedman (vf), Iris Ljesnjanin (il), Stephan Poppe (sp), Cameron Chapman (cc).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 #a7
- 9 #a8
- 10 http://stuffandnonsense.co.uk/projects/320andup/
- 11 http://stuffandnonsense.co.uk/projects/320andup/
- 12 http://stereopsis.com/flux/
- 13 http://stereopsis.com/flux/
- 14 http://judithannbraun.com/default3.asp
- 15 http://judithannbraun.com/default3.asp
- 16 http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions
- 17 http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions
- 18 http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions
- 19 http://lumens.se/tychpanel/
- 20 http://lumens.se/tychpanel/
- 21 http://lumens.se/tychpanel/
- 22 http://dropdo.com/
- 23 http://dropdo.com
- 24 http://www.codinghorror.com/blog/2008/06/ascii-pronunciation-rules-for-programmers.html
- 25 http://www.codinghorror.com/blog/2008/06/ascii-pronunciation-rules-for-programmers.html
- 26 http://kellianderson.com/blog/2011/04/a-paper-record-player/
- 27 http://kellianderson.com/blog/2011/04/a-paper-record-player/