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

This newsletter issue was sent out to 128,316 newsletter subscribers on Tuesday, January 1st 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


Do you remember the days when we needed a set of images to create rounded corners for boxes in our designs? Remember when the brand new, shiny border-radius property was announced and how sad we all were that we couldn’t use it “right away”? We kept waiting for Godot, also known as “universal cross-browser support,” to come, and we waited patiently and stubbornly. We were mistaken, Godot wasn’t about to come anytime soon.


However, what did come was a rapid pace of innovation in Web standards. Many exciting CSS Level 3 features are available today, and most of them have fantastic fallback by default. Once being experimental, they are now the de-facto standard — prompting us to always think of the fallback to ensure that they don’t break layouts. In fact, we all can remove some unnecessary prefixes to make our code just a bit cleaner. As David Storey reminds us in his article, today we can update our CSS3 code3 and hence review our coding habits and practices for 2013.

Since Opera added support for some -webkit- prefixes, you might want to reorder the position of your -o- prefixed properties. border-radius doesn’t really need any prefix any longer; for box-sizing and box-shadow you probably need only the -moz and -webkit prefixes now. And you might want to update the gradient and flexbox syntaxes as well.

Revise and update your base stylesheets today to make sure that you avoid maintenance issues in your projects throughout the year. And don’t wait for the perfect, universal browser support: it will never come.

— The Smashing Editorial Team

Table of Contents

  1. The Web Design Process, Illustrated4
  2. The Stranger, Santa And The Grog5
  3. Typing Accent Characters, The Easy Way6
  4. 3-D Chess With HTML, CSS And JavaScript7
  5. Collaborative Work For… Everything!8
  6. Music History in GIFs9
  7. Smashing Highlights (From Archives)10
  8. Recent Articles on Smashing Magazine11
  9. New on Smashing Job Board12

1. The Web Design Process, Illustrated

Tired of bending over books to explain how you work at a party? Looking for a more interesting and exciting way to get the meaning of your workflow? Why not use a thrilling visualization that gets the point across? That’s what A Website Named Desire is for — a picture that illustrates the non-linear and highly erratic nature of the web design process in the real world.

The Web Design Process, Illustrated

This colorful, large, interactive illustration wants to help the world understand what it takes to bring a website to life. Looking at the place in the illustration is like peering into a Lego wonderland of a Web design agency. Everybody can explore a scene starring 26 Web professionals, including a project manager, who you can follow on a chaotic journey through kick-offs, sign-offs, war room meetings and lots of other things that can go haywire.

The project created by MIX Online celebrates the creators of the Web, and the chances are high that you might find your own character in there. Look at what you do from a different angle and smile about matters which may upset you in real life. Unfortunately, the interactive illustration requires a Silverlight plugin, but you can also learn about how the poster was created13.(ea)

2. The Stranger, Santa And The Grog

Holidays are almost over, and if you are one of the lucky ones who got all their presents delivered on time, you could help Santa to accomplish his task and deliver the rest of the packages. While it might be difficult to help him out in the real world, it’s not that difficult online, especially if you have a couple of minutes to spare anyway.

The Stranger, Santa And The Grog

The Stranger, Santa and the Grog is a little addictive game that kindly asks to you to help the flying Santa aim and throw the presents through the chimney. It sounds easier than it is, and finding the right angle and the right speed can be quite a challenge. Now this could also be a funny little game to play while you are waiting for the mailman to arrive with your remaining presents! (tts)

3. Typing Accent Characters, The Easy Way

We all know the drill: you want to type special characters into an input field, yet you don’t have the characters on your keyboard. You search for the character online, and then copy and paste it into the input field. Next accented character — and the journey starts again. Wouldn’t it be better if the designer took care of providing the access to alternate characters as you type them?

Typing Accent Characters, The Easy Way14

Long Press jQuery plugin15 eases the writing of accented and rare characters by allowing users to have a typing experience similar to iOS and Android. Users can focus on a form field and hold a key to display alternate characters. It’s possible to pick a letter by using the mouse wheel, hovering over it with the mouse, or using the arrow keys. Not every Web form will need the plugin, but it might be a good fit if many users will want to use accented characters on your site — of course you’ll have to explain how it works as well. The plugin is released under the MIT license and is available on GitHub16. (vf)

The Smashing Library: the annual subscription to Smashing Magazine's eBooks17

4. 3-D Chess With HTML, CSS And JavaScript

If you happen to love chess and love building websites, you just hit a jackpot. With the 3-D Hartwig chess set18 by Julian Garnier, you can combine both of your passions. The game is coded and built using only HTML, CSS and JavaScript. Before you make your move, you can preview your options by clicking on a chess piece. You can even select different themes.

3-D Chess With HTML, CSS And JavaScript19

The lighting effects are done with Photon20, and Chess.js21 is used for move generation and validation. Unfortunately, the demo works only in WebKit browsers, but perhaps you’d like to add support for other browsers as well? A great experiment that pushes the boundaries of what we can do on the Web. (ml)

5. Collaborative Work For… Everything!

As designers and developers, we should never work in silos. Collaboration is necessary, yet usually it’s quite difficult, especially if team members are working remotely. Wouldn’t it be great to have a tool that would allow you to screen share and work in the same Photoshop mock-ups, Web applications and text editors — think of it like Google Docs for any application on your computer? Well, now there is a tool for that.

Collaborative Work For... Everything!

PowWow is an application that allows you to screen share and work within any application with your colleagues. You can interact with the same application simultaneously by having multiple mouse pointers for every user. It worked fairly well in our tests. For example, you could share a text editor for pair programming or code reviews, or write emails collaboratively in an email application. To use PowWow, every collaborator has to install the application on their local machine.

So far only a Mac version is available, and the tool is in public beta, so things might break. Now that’s a little helper that can relieve the headache from many projects! (vf)

6. Music History in GIFs

The last years celebrated the return of the wonderful artifact of the Web — good ol’ animated GIFs. Remember rainbow ribbons? Well, suddenly their younger revivals were all over the place again, whether displaying short scenes from movies, lazy kitties, ecstatic hamsters or playful children. But what about creating something a bit more… well, meaningful out of the GIF legacy?

Music History in GIFs22

Meet Music History in GIFs23, a collection of 8-bit animated GIFs dedicated to famous music videos and important events in the history of music. The animations are short, yet memorable, and it’s easy to recognize the events by watching their animated replicas. An interesting way to use GIFs to portray interesting moments in the history of human culture. What about creating something similar for the evolution of the Web? (vf)

The Mobile Book: a brand new printed book on best practices for mobile.24

7. Smashing Highlights (From Archives)

  • Learning To Use The :before And :after Pseudo-Elements In CSS25
    This article is aimed primarily at those of you who have seen some of the cool things done with pseudo-elements but want to know what this CSS technique is all about before trying it yourself.
  • Exporting From Photoshop26
    Saving images to multiple scales — as required by iOS and other platforms — adds complication to the process. But there are ways to streamline or automate the exporting process.
  • The Design Matrix: A Powerful Tool For Guiding Client Input27
    Competitor reviews can devolve into cherry-picking sessions that spawn “frankencomps” rather than provide helpful feedback. And mood boards don’t help to articulate or prioritize design goals. With a design matrix, you can guide discussions and establish clear direction.

8. Recent Articles on Smashing Magazine

9. New on Smashing Job Board

Here are the job openings published recently at our very own Smashing Job Board34:

  • front-end designer (Bologna, Italy)35 at Blacktrend (Bologna, Italy)
    Blacktrend is a wannabe famous digital marketing agency and crazy ideas incubator. Our goal is to make any brand tasty, clean, cool and explosive for the online audience. Blacktrend is also the owner of The Web-Gang’s brand that is going to be an online reality-show featuring the first web agency on-the-road.

  • Web Graphic Design & Content Manager, Stanford Law School36 at Stanford University School of Law (Stanford, CA)
    This position is responsible for graphic design and content for both Web and print projects. The Graphic Design and Content Manager also provides project coordination and graphics support to other members of the law school on a project-by-project basis.

  • Product UI Designers Needed—Innovative Digital Startups and Boutiques37 at Vitamin T (New York, NY)
    Let us introduce you to inspired, cutting-edge Agile startup environments and visionary digital agencies. Our clients’ perks include hands-on high-tech field trips, breakfast buffets, “Prototype Tuesdays”, and stock options.

The authors in this newsletter are: Esther Arends (ea), Talita Telma Stöckle (tts), Melanie Lang (ml), 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 #a1
  5. 5 #a2
  6. 6 #a3
  7. 7 #a4
  8. 8 #a5
  9. 9 #a6
  10. 10 #a7
  11. 11 #a8
  12. 12 #a9
  13. 13
  14. 14
  15. 15
  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
  35. 35
  36. 36
  37. 37

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

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

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