Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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

  1. A Boilerplate Extension for Tiny Screens2
  2. Follow the Sun on Your Desktop3
  3. Wall Fingerings by Judith Braun4
  4. Pixel Proliferation: Manage Screen Resolutions Easier5
  5. Diptych, Triptych and N-tych for Photoshop6
  6. DropDo: Easy and Smart File Sharing7
  7. ASCII Character Pronunciation Rules8
  8. A Paper Record Player9

1. A Boilerplate Extension for Tiny Screens

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.

A Boilerplate Extension for Tiny Screens10

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)

2. Follow the Sun on Your Desktop

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.

Follow the Sun13

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)

3. Wall Fingerings by Judith Braun

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.

Wall Fingerings by Judith Braun14

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)

4. Pixel Proliferation: Manage Screen Resolutions Easier

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?

Pixel Proliferation16

Pixel Proliferation17

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)

5. Diptych, Triptych and N-tych for Photoshop

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.”

Diptych, Triptych and N-tych20

Diptych, Triptych and N-tych21

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)

6. DropDo: Easy and Smart File Sharing

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.

DropDo: Easy and Smart File Sharing23

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)

7. ASCII Character Pronunciation Rules

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 Character Pronunciation Rules24

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)

8. A Paper Record Player

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.

A Paper Record Player27

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. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9 #a8
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top