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

01. Beautiful Type: Inspirational Typography2
02. Little Big UI Details That Make the Difference3
03. The-M-Project: A New Framework For Cross-Platform Mobile Apps4
04. Responsive Images and Context-Aware Image Sizing5
05. Collection: Images, Words and More Inspiration6
06. The Email Address Obfuscation Debate7
07. 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.

Screenshot9

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.

Screenshot11

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

Screenshot14

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 apps15 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 design16 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 images17 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 Group18

You could swap out different scaled images19 for different display sizes or use .htaccess files20 and some JavaScript to serve up different sized images based on the screen width. Another option is to use a service like TinySrc21: 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)22 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.

Collection23

Collection24, 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?25

Superuser, a Q&A website for computer enthusiasts, has an interesting discussion about email obfuscation26, 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.txt27 is an initiative founded by a group of Spanish enthusiasts with the idea to give credit to the humans behind Web projects.

Humans.txt28

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

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9 http://beautifultype.net
  10. 10 http://beautifultype.net
  11. 11 http://littlebigdetails.com
  12. 12 http://littlebigdetails.com/
  13. 13 http://the-m-project.net
  14. 14 http://www.the-m-project.net
  15. 15 http://the-m-project.net/showcase.html
  16. 16 http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  17. 17 http://unstoppablerobotninja.com/entry/fluid-images
  18. 18 http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
  19. 19 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
  20. 20 http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
  21. 21 http://tinysrc.net/
  22. 22 http://www.craig-russell.co.uk/responsive-images-and-context-aware-image-sizing/
  23. 23 http://thoughtandtheory.com/collection/
  24. 24 http://thoughtandtheory.com/collection/
  25. 25 http://superuser.com/questions/235937/does-email-address-obfuscation-actually-work
  26. 26 http://superuser.com/questions/235937/does-email-address-obfuscation-actually-work
  27. 27 http://humanstxt.org/
  28. 28 http://humanstxt.org/

The Smashing Newsletter Team 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!

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top