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 #26

This newsletter issue was sent out to 49,056 newsletter subscribers on February 1st 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. Beautiful Type: Inspirational Typography2
  2. Little Big UI Details That Make the Difference3
  3. The-M-Project: A New Framework For Cross-Platform Mobile Apps4
  4. Responsive Images and Context-Aware Image Sizing5
  5. Collection: Images, Words and More Inspiration6
  6. The Email Address Obfuscation Debate7
  7. Humans.txt: We are People, Not Machines8

1. Beautiful Type: Inspirational Typography

If you spend most of your time looking at design galleries and showcases, you can start to feel like you’ve seen everything out there. Finding fresh, new inspiration for your designs can be challenging, so when you are on the search for some specific artistic direction (e.g. typography), it can get even harder.


Beautiful Type10 regularly showcases artworks with a main focus on typography. Included is everything from posters to packaging, in a wide variety of styles. This gallery is a Tumblr blog, so if you’re on Tumblr, be sure to follow them. (cc)

2. Little Big UI Details That Make the Difference

Quite often, it’s the little things that make the world a better place… or, in the language of Web design, that improve the look, feel and user experience of websites.


That’s why Your Neighbours, a Berlin-based Web design studio, has launched a simple but useful tumblog Little Big Details12 that features tiny details that improve the user experience of websites and mobile apps. You’ll find some useful design techniques found by your colleagues across the Web. Also, share your favorite little things on the website as well. The collection is already very useful, with more design examples submitted every single day. (mm)

3. The-M-Project: A New Framework For Cross-Platform Mobile Apps

The-M-Project is a new HTML5 JavaScript framework for writing cross-platform mobile apps and that targets iOS, Android, BlackBerry and webOS platforms. This project is built on all of the UI and core files of jQuery Mobile. In addition, The-M-Project provides a build tool, called Espresso, that is written in JavaScript using node.js.


Espresso makes it easy to structure source code and then build and run it on a built-in server. The project team has put together sample apps that showcase the possibilites of this new framework. (tb)

4. Responsive Images and Context-Aware Image Sizing

Since Ethan Marcotte coined the term, responsive Web design13 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 images14 and browser scaling to adjust the size of images would be fine, but it raises performance and speed issues.

Responsive Images: Experimenting with Context-Aware Image Sizing technique by Flament Group15

You could swap out different scaled images16 for different display sizes or use .htaccess files17 and some JavaScript to serve up different sized images based on the screen width. Another option is to use a service like TinySrc18: merely prefix all large images in your source code with a TinySrc URL, and the tool does the rest.

Another interesting technical solution is to use a server-side script (PHP)19 to serve up images of several different resolutions. The idea is that within the PHP script, a nested array is used that lists images files and their relative percentage scales. In HTML, the image src attribute would be set to get the requested image id, but with no scale specified. A JavaScript calculates the percentage width of the image relative to the maximum width of the container, and this figure is then appended to the end of the src attribute as the scale parameter. It’s an interesting technique that could be adapted to other contexts. The comments in the article contain some nice ideas and suggestions on how the technique can be improved. (vf)

5. Collection: Images, Words and More Inspiration

Finding inspiration when you’re just not feeling creative is a challenge for most designers. The ever-elusive “muse” is often temperamental and can disappear right when you need it most. That’s why keeping links of inspirational sources handy at all times is a good idea.


Collection21, from Thought and Theory, is just one such resource. It pulls together images, words, video, sound and objects that could serve as inspiration for designers. The design of the website itself is also pretty cool, with a twist on the traditional grid layout. (cc)

6. The Email Address Obfuscation Debate

There’s been a lot of discussion about email address obfuscation and whether it’s really effective at preventing spammers from getting your address. The discussion is taking place across Twitter and blogs. Everyone seems to have an opinion on whether it works and what the best method is.

Does email address obfuscation actually work?22

Superuser, a Q&A website for computer enthusiasts, has an interesting discussion about email obfuscation23, with opinions from a number of users. Included also are different techniques for accomplishing obfuscation, empirical data about its effectiveness and links to other discussions and articles. One interesting technique is to use the obscure unicode-bidi and direction CSS properties and write the email address backwards: for example, moc.elpmaxe@zyx. Plenty of interesting ideas worth learning and discussing. (cc)

7. Humans.txt: We are People, Not Machines

Hundreds and thousand of new websites are published every day, many of them part of the corporate world. Few of these companies like to grant visible credit to the authors of their content. What you will find on every website, though, is robots.txt, a file full of keywords and information for search bots. Why do robots get their own file but authors do not? Humans.txt is an initiative founded by a group of Spanish enthusiasts with the idea to give credit to the humans behind Web projects.


Start your own humans.txt now and stick it in the website’s root folder, right next to robots.txt. Fill the file with whatever info about the contributors you like. Be a part of the initiative and help establish the standard for humans.txt! (sp)

The authors are: Vitaly Friedman (vf), Thomas Burkert (tb), Stephan Poppe (sp), Cameron Chapman (cc), Manuela Müller (mm).


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

↑ 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