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
- Shaken, Not Stirred7
- Powerful Shortcuts For Your Text Editor8
- Emulate To Your Heart’s Content (On Android)9
- It’s Time For Better Restaurant Websites!10
- Format And Manipulate Numbers With Numeral.js11
- Magazine Of Curated Q&A Threads12
- Bookkeeping Made Easy13
- Emails, The Good Ol’ Way14
- Bitmaps Of The Alphabet15
1. Shaken, Not Stirred
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.
In the blog post Commanding Your Text Editor19, 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?
The creators of Manymo21 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 Tables22, you could have had sushi!
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 Maestro24 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.
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.
Curaqion30 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.
Just sign up, take a photo of your receipt and let ExpenseMagic32‘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.
If you’re a big fan of letters the old-fashioned way, but you just have no time for writing dozens of them yourself, Handiemail34 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 Bitmaps35 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.
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 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://blog.netvlies.nl/design-interactie/retina-revolution/
- 3 http://mattstow.com/rwd-retrofit.html
- 4 http://blog.netvlies.nl/design-interactie/retina-revolution/
- 5 http://www.twitter.com/smashingmag
- 6 http://www.smashingmagazine.com/contact/
- 7 #a1
- 8 #a2
- 9 #a3
- 10 #a4
- 11 #a5
- 12 #a6
- 13 #a7
- 14 #a8
- 15 #a9
- 16 http://www.evanshalshaw.com/bondcars/
- 18 http://blog.peepcode.com/blog/2012/commanding-your-text-editor
- 19 http://blog.peepcode.com/blog/2012/commanding-your-text-editor
- 20 http://www.manymo.com/
- 22 http://www.happytables.com/
- 23 http://www.happytables.com/
- 24 http://menumaestro.me
- 25 http://numeraljs.com/
- 26 http://numeraljs.com/
- 27 http://josscrowcroft.github.com/accounting.js/
- 29 http://curaqion.com/
- 30 http://curaqion.com/
- 31 http://expensemagic.com
- 32 http://expensemagic.com
- 33 http://www.handiemail.com/
- 34 http://www.handiemail.com/
- 35 http://uppercasemagazine.com/beautifulbitmaps
- 36 http://uppercasemagazine.com/beautifulbitmaps