This newsletter issue was sent out to 72,769 newsletter subscribers on November 22nd 2011. If you haven’t subscribed yet, feel free to subscribe to our email newsletter now. Thank you.
Goddag Smashing Magazine family! I just came back from a visit in Denmark. SmashingMag fan Alex Rock invited me for a tour through Copenhagen and introduced me to my Danish family. I have to admit, this time it is taking a bit longer to write my hello to you. I’m still suffering a major hangover after the second SmashingMag MeetUp with the awesome crowd from the BeyondTellerand conference. You should really become a member of our MeetUp! We have something smashing planned for December: Paul Irish is going to join us in Stuttgart on the 21st of December!
— Keep rocking! *meow*
02. Format Dates And Times With Moment.js
03. Getting Sticky With HTML5
04. Organize Projects And Tasks With Trello
05. The Battle Of The Fonts
06. Meaningful Interface Transitions
07. The Future Of Interaction Design
08. Running Titles Of 8/16 Bit Games
09. Food Illustrations By Lana Porter
Properly formatted dates and times are often a common headache when it comes to websites where users have to provide either a specific date (time) or a date (time) range. Of course, your interface should be forgiving and accept all meaningful input that your users provide — independent of the format they choose to use. But what you need apart from that is a fine-tuned control and the ability to manipulate how they’re formatted.
With the growing support of HTML5, more designers and developers have experimented ever since, creating useful but sometimes also not so useful techniques and demos. There are indeed no limits to creativity and there are definitely a good number of demos out there that will keep you busy for a while. For example, the “Sticky Thing“, created by Daniel Puhe, provides us with evidence that almost everything is possible.
This sticky “thing” can fly across whitespace and sticks to the borders of the browser’s viewport. You can adjust the stickiness, stiffness, size and gravity of it — and guess what else? It works offline as well as online, and runs both on iOS and Android. The experience is even more engaging on mobile devices with multi-touch sensitivity, gyroscope and which support HTML5 features. (af)
Keeping an eye on all projects happening at the same time in your company can be quite difficult and tiresome. A great project board to help you organize and follow your teams’ projects would be Trello, a collaboration tool that organizes your project(s) into boards and allows you to join them into lists as wished. You can easily add other members who are also working on the same project at one stage by dragging them into the list and follow all changes with the help of email updates and notifications.
Trello also supports attachments such as images, videos, twitter previews and includes comments, checklists, a voting system, labels and members. A bonus this tool offers are the public boards: these enable your customers to preview the current roadmap to a particular project and even allow public commenting as well as voting for all team members to see. (af)
It is time for your favorite font to stand its ground. Have you heard of the Font-Bot Project yet? The idea is to build robots out of a type face, showcase them and hope others put together a potential opponent. Once there are two font-bots ready to compete against each other, only thing left would be to “let the battle begin!”
Participating is not hard, the rules are clear: all robots must be built of type alone (letters A to Z). You may reflect and rotate the letters. You may not distort the letterforms in any way. You may use as many font families as you wish. As soulless as it is, you may beg for votes on your social profiles. Any kind of smack talking/showmanship is welcome. Keep it civil. So, sit down and put your bot together. May the best bot win. Let’s see if your font has what it takes to defend its corner. Fight! (sp)
In the last couple of years, the possibilities in interaction design have become more sophisticated and the difficulty in explaining their process to your client still remains. Does this sound like your reality? Then try to include some of the meaningful transitions created by Johannes Tonollo in your next UI design presentation and you’ll see how easy your life can get.
There are different categories in UI motion graphics which include orientation, spatial extension, awakening controls, highlight, feedback and feedforward. In each category, you will find more details and possibilities which are shown in an simple yet concise way. One thing is for sure: your next brainstorming session with your client will surely have a whole new perspective. (tt)
We tend to use more and more devices on a daily basis and seem to be depending even more on technology. Our lives have changed since all we need to do these days is simply touch or slide over a screen. This is something that Bret Victor has noticed and has brought up a good question to us all: Do we really know what human needs are and will be for the future to come?
A brief rant on the future of interaction design is a movie that shows us what the future people exactly use to interact with their future technology. There is a clear factor which is neglected by all of us: our human capabilities. What we, each and every one of us, are capable of. So be sure to ask yourself once again, “Do I really want our future to become just an interaction with pictures under glass?” (af)
Do you remember good old days when games used to have a limited color range, pixelated graphics and very simple, basic animations? The ability of game designers from the 80s and early 90s to create engaging gaming experiences using the (quite modest) available technology at that time is remarkable to say the least.
In particular, the running titles of 8/16 bit games often were masterpieces in their own right, with skillfully created 3D effects, impressive graphics and, of course, the titles of the games. Title Scream features dozens of intros from legendary games such as Prince of Persia, Sonic, Tetris, TheLegend of Zelda and Mortal Kombat. Now, this sure brings back memories! (af)
You’ve most probably seen a great variety on food artworks, such as paintings, drawings and even photograps. If you’ve had fun exploring these possibilities of food art, you will certainly provide your eyes with a treat by checking out this postcard exhibition by Simplifood.
With quite simple shapes and colors, Lana Porter manages to show the everyday items we usually have on our menus by adding little details which help differentiate a bagel with cream cheese from a slice of pineapple or a hot dog from a bratwurst. The perspectives and colors used are also very appetizing, so mind the warning: you might get very hungry by the end of the album! (tt)
The authors in this newsletter issue are: Stephan Poppe (sp), Cameron Chapman (cc), Talita Telma (tt), Luca Degasperi (ld), Lisa Lang (ll), Ana Flasker (af).
Every second Thursday we send out our lovely email newsletter with useful tips and techniques, recent articles and upcoming events. Thousands of readers have signed up already. Why don't you sign up, too, and get a free Smashing eBook as well?
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!
Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.
It's done. The Smashing Book #4, our brand new book with smart front-end techniques and design approaches. Written by respected designers and developers, neatly packed in a gorgeous hardcover.
Do you feel like your workflow is slowing you down? We might have just what you need. Our front-end, UX and RWD workshops in London, Zürich and Berlin. Read more...
Exciting things are happening and you should consider joining the talented staff at HIMSS as our Sr. Manager, Web Design & Online Standards as we are transforming…
Northeastern University Web Designer/Developer Requisition Number: STFR001261 Division/College: Marketing and Communications FT/PT: Full…