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

This newsletter issue was sent out to 123,560 newsletter subscribers on Tuesday, November 6th 2012. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


When it comes to responsive Web design, we tend to focus on finding solutions and workarounds for layouts, but there are many other issues that have to be addressed as well. How do we handle Web forms? How should checkout processes adapt? How do we deal with heavy Web fonts on mobile? What about loading images for high resolution displays2 and performance optimization in general? What about modernizing existing websites, i.e. through responsive retrofitting3? What about responsive image maps, newsletters and user interfaces on mobile?


There are many issues that still don’t have proper solutions. Perhaps you’ve experimented with some of these problems in your recent projects? What worked for you, what didn’t work out and why? We’d love you to share your insights, your stories, your case-studies with Smashing Magazine’s audience, and we’ll pay you a honorarium for your time and efforts as well. We’re looking forward to your stories and case studies! Just contact us via Twitter5 or our contact form6 — we’ll get back to you right away!

With only the surface of the upcoming issues scratched, these will be interesting, responsive times indeed!

— Smashing Editorial

Table of Contents

  1. Shaken, Not Stirred7
  2. Powerful Shortcuts For Your Text Editor8
  3. Emulate To Your Heart’s Content (On Android)9
  4. It’s Time For Better Restaurant Websites!10
  5. Format And Manipulate Numbers With Numeral.js11
  6. Magazine Of Curated Q&A Threads12
  7. Bookkeeping Made Easy13
  8. Emails, The Good Ol’ Way14
  9. Bitmaps Of The Alphabet15

1. Shaken, Not Stirred

He’s driving along narrow alleys, screeching around corners, at times on three or even two wheels without ever really loosing his cool. 007 has driven all sorts of cars — some phenomenal, others not. Evans Halshaw created a beautiful one-page-scroll-me-tribute website to James Bond’s cars — including the newest ones — with the help of HTML5, CSS and JavaScript.

Shaken, Not Stirred16

Decide on your favorite James Bond 007 Cars17 from 50 years of Bond movies. In addition to information on each car model, the movie in which each car appeared and some movie trivia, you can download colorful wallpaper of the cars. While not the most useful of websites, it does engage fond memories of one of the most glamorous, action-packed movie series of all times. (jc)

2. Powerful Shortcuts For Your Text Editor

Do you want to improve your writing, editing or coding process? Geoffrey Grosenbach has put together a list of shortcuts that come in handy when editing code. You don’t have to learn hundreds of commands, but rather just these six text manipulations that turn out to be real timesavers.

Powerful Shortcuts For Your Text Editor

In the blog post Commanding Your Text Editor, you’ll learn how to delete whole words, how to make new lines without even moving the cursor, how to improve your search, how to indent code automatically and how to use auto-completion. Whether you are a Textmate, Vim, Emacs or Sublime Text user, the list features the shortcuts you need. You will wonder how you ever got your work done without these nifty tricks. (cm)

3. Emulate To Your Heart’s Content (On Android)

Designing and developing mobile phone apps is fun, and if an app idea is good, it can be a lucrative passive income or even warrant its own business. As designers, we have to calculate the expense of having at least several differently-sized mobile devices on hand. Nothing can replace testing on actual devices, which is why many open device labs have emerged. But sometimes this may just be too expensive. What if you are looking for bugs and problems on devices that are not available in the open device lab? Wouldn’t it be great if there was one good mobile phone emulator for popular OS and device sizes to preview your site before you actually start debugging?

Emulate To Your Heart's Content (On Android)18

The creators of Manymo19 thought so too. So they developed a browser-based mobile phone emulator that can match OS versions and screen sizes of 99% of Android devices. For now, it’s still in beta testing and free to use. In fact, you can automate testing on dozens of different device sizes. Because it’s a drop-in replacement for local emulators, it can be used with your tools, just as you would on your local machine. A great development tool for professionals on a budget — at least to detect problems and issues in devices that you have no access to otherwise. (jc)

4. It’s Time For Better Restaurant Websites!

You know that situation: you are out on the town with your partner or friends, and you feel like eating out in a nice restaurant. You already know what kind of food you want. But where to go? You decide to search online. You pull your phone out of your pocket and look up some websites. All you want is to quickly browse the food menu, find out where the restaurant is located and what its opening hours are. Sounds simple. What you get instead is mostly complex: Flash intros, PDF food menus full of images which make for extremely slow loading times, or no menu at all. If only that restaurant had used Happy Tables20, you could have had sushi!

It's Time For Better Restaurant Websites!21

The concept of Happy Tables is straightforward: An easily manageable Web package aimed at restaurant businesses; mobile optimization — very important, considering restaurant queries are usually spur-of-the-moment events looked up on a mobile phone; and search engine optimization for better Google search visibility. A pro account is available as well, with features such as event management, sub-users for staff and the ability to add your own custom CSS.

Alternatively, if you’re a restaurant owner and would like to just provide a readable menu on your website, Menu Maestro22 might prove to be just what you are looking for. The free service makes menu creation a cinch, and your online menu is automatically updated whenever you make changes. Maestro has a choice of dozens of professionally-designed menu templates that are both screen- and print-friendly, and make menu creation as easy as pie. Currently in private beta. (jc)

5. Format And Manipulate Numbers With Numeral.js

Here we go again: you know that the visitors to your site tend to get quite creative when entering numbers in your input fields, yet instead of getting on their nerves with error messages, you’d like to process the numbers and make sense of them “on-the-fly.” How do you do that? Now you have a solution to do just that.

Format And Manipulate Numbers With Numeral.js23

Numeral.js24 is a JavaScript library for formatting and manipulating numbers. The library allows you to format numbers as currency, percentages, time, or even plain old numbers with decimal places, thousands, and abbreviations. If numbers come in a formatted string, you can use the library to change their format, so they can be more useful to you. You can also create your own formatting languages and manipulate numbers or clone them.

Numeral.js requires Node.js to work. You can find a comprehensive overview of all commands and functions on the website. If you’re looking for an alternative, check Accounting.js25 as well as Useful JavaScript Libraries26 on Smashing Magazine. (ml)

6. Magazine Of Curated Q&A Threads

Learning from experts in the industry — people with rich, exquisite experiences and stories — often enriches our mindset and provides new perspectives on the things and people around us. There are plenty of Q&A websites (such as Stack Overflow or Quora) around the Web, but it’s great to get interesting threads and fascinating reads delivered to your inbox.

Magazine Of Curated Q&A Threads27

Curaqion28 is a free, monthly PDF magazine with select answers, stories and findings on various topics from Quora. Not all topics are interesting to designers or developers, but perhaps it will inspire you to create something similar for the design community? It might be worth the effort. (vf)

7. Bookkeeping Made Easy

Do receipts from business lunches overflow your wallet? Or are you hoarding them in a shoebox together with the cab and flight receipts from the last conference you went to? Then you might be in urgent need of ExpenseMagic, an app that turns your mountains of paper into expense reports.

Bookkeeping Made Easy29

Just sign up, take a photo of your receipt and let ExpenseMagic30‘s trained bookkeepers do the rest. They extract the receipt information and put it together in a neat expense report that you will receive by email once a month. A mileage feature and Dropbox and Evernote integration tops the service off. You can choose between a free basic account and monthly paid premium or corporate versions. Bookkeeping can be as easy as this. (cm)

8. Emails, The Good Ol’ Way

Gone are the days when we used to write letters by hand and send them off to our beloved friends and family. Nowadays, I feel tired after writing less than a single page, because I replaced writing with typing once I finished school. The Web allows us to communicate quickly and efficiently. Yet handwritten letters still have this personal touch to them and stand out in our daily flood of business emails and spam.

Emails, The Good Ol' Way31

If you’re a big fan of letters the old-fashioned way, but you just have no time for writing dozens of them yourself, Handiemail32 is the perfect service for you. Just submit your email and they will handwrite your lines and send them off to the real postbox of the recipient. The service is also provided the other way around — in case you have issues with typing. (ml)

9. Bitmaps Of The Alphabet

In computer science, a bitmap is a type of memory organization or image file format used to store digital images — a mapped array of bits. Beautiful Bitmaps33 is the work of 26 well-respected typographers, designers and illustrators, who were invited by UPPERCASE magazine to take the vestigial part of digital type, the bitmap, and transform it into something new and beautiful.

Bitmaps Of The Alphabet 34

Every artist was assigned one of the letters of the alphabet. Looking at their completed work, it is amazing to see how many diverse techniques and materials can be brought into creating a bitmap out of a simple letter. The website also presents insights into the design process of some of the artists. All artworks can be purchased as prints as well. (ea)

The authors in this newsletter are: Jan Constantin (jc), Cosima Mielke (cm), Melanie Lang (ml), Esther Arends (ea), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Clarissa Peterson (proofreading).


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a5
  12. 12 #a6
  13. 13 #a7
  14. 14 #a8
  15. 15 #a9
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34

↑ 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. 1

    Virgnia Zuluaga

    November 6, 2012 12:58 pm

    You mention responsive Webforms in the newsletter, but I did not see a link to an example or a piece of code that handles this nicely. In case you did not know I came across a service which proposes to create responsive webforms automatically: Has anyone else heard of it?

  2. 2

    A note on Numeral.js, it does not require node.js, as it works in both the browser and node. Thanks

  3. 3

    for responsive web forms, you can give a shot to which is probably the best option with Typeform for building responsive web forms and questionnaires in minutes.

  4. 4

    Zachary Romanelli

    May 4, 2016 12:46 am

    Timely article ! I was fascinated by the details . Does someone know if my business might grab a blank a form form to work with ?

    • 5

      shey samson

      May 4, 2016 1:32 pm

      Hi Zachary, my colleague completed a sample a form copy at this site


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