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.

Editorial

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?

Editorial4

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

01. Shaken, Not Stirred7
02. Powerful Shortcuts For Your Text Editor8
03. Emulate To Your Heart’s Content (On Android)9
04. It’s Time For Better Restaurant Websites!10
05. Format And Manipulate Numbers With Numeral.js11
06. Magazine Of Curated Q&A Threads12
07. Bookkeeping Made Easy13
08. Emails, The Good Ol’ Way14
09. Bitmaps Of The Alphabet15

161. 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 Stirred17

Decide on your favorite James Bond 007 Cars18 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)

192. 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 Editor20

In the blog post Commanding Your Text Editor21, 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)

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

The creators of Manymo24 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)

254. 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 Tables26, you could have had sushi!

It's Time For Better Restaurant Websites!27

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

295. 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.js30

Numeral.js31 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.js32 as well as Useful JavaScript Libraries33 on Smashing Magazine. (ml)

346. 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 Threads35

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

377. 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 Easy38

Just sign up, take a photo of your receipt and let ExpenseMagic39‘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)

408. 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' Way41

If you’re a big fan of letters the old-fashioned way, but you just have no time for writing dozens of them yourself, Handiemail42 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)

439. 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 Bitmaps44 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 45

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

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://blog.netvlies.nl/design-interactie/retina-revolution/
  3. 3 http://mattstow.com/rwd-retrofit.html
  4. 4 http://blog.netvlies.nl/design-interactie/retina-revolution/
  5. 5 http://www.twitter.com/smashingmag
  6. 6 http://www.smashingmagazine.com/contact/
  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 http://www.evanshalshaw.com/bondcars/
  18. 18
  19. 19 #
  20. 20 http://blog.peepcode.com/blog/2012/commanding-your-text-editor
  21. 21 http://blog.peepcode.com/blog/2012/commanding-your-text-editor
  22. 22 #
  23. 23 http://www.manymo.com/
  24. 24
  25. 25 #
  26. 26 http://www.happytables.com/
  27. 27 http://www.happytables.com/
  28. 28 http://menumaestro.me
  29. 29 #
  30. 30 http://numeraljs.com/
  31. 31 http://numeraljs.com/
  32. 32 http://josscrowcroft.github.com/accounting.js/
  33. 33 http://coding.smashingmagazine.com/2012/09/23/useful-javascript-libraries-jquery-plugins-web-developers/
  34. 34 #
  35. 35 http://curaqion.com/
  36. 36 http://curaqion.com/
  37. 37 #
  38. 38 http://expensemagic.com
  39. 39 http://expensemagic.com
  40. 40 #
  41. 41 http://www.handiemail.com/
  42. 42 http://www.handiemail.com/
  43. 43 #
  44. 44 http://uppercasemagazine.com/beautifulbitmaps
  45. 45 http://uppercasemagazine.com/beautifulbitmaps

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

    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: http://www.typeform.com. 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

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