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
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)
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)
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)
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.
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
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)
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.
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)
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.
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
direction CSS properties and write the email address backwards: for example,
moc.elpmaxe@zyx. Plenty of interesting ideas worth learning and discussing. (cc)
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.
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 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 #a7
- 9 http://beautifultype.net
- 10 http://beautifultype.net
- 11 http://littlebigdetails.com
- 12 http://littlebigdetails.com/
- 13 http://the-m-project.net
- 14 http://www.the-m-project.net
- 15 http://the-m-project.net/showcase.html
- 16 http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
- 17 http://unstoppablerobotninja.com/entry/fluid-images
- 18 http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
- 19 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
- 20 http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
- 21 http://tinysrc.net/
- 22 http://www.craig-russell.co.uk/responsive-images-and-context-aware-image-sizing/
- 23 http://thoughtandtheory.com/collection/
- 24 http://thoughtandtheory.com/collection/
- 25 http://superuser.com/questions/235937/does-email-address-obfuscation-actually-work
- 26 http://superuser.com/questions/235937/does-email-address-obfuscation-actually-work
- 27 http://humanstxt.org/
- 28 http://humanstxt.org/