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

This newsletter issue was sent out to 98,815 newsletter subscribers on Tuesday, January 10th 2012.


G’day, Smashing Magazine family!

I hope you all had a great start into the new year! 2012 is going to be another smashing year — we have planned so many exciting projects! Inspired by a huge response from our last Smashing Meetup, we’ll keep traveling around the world, so (hopefully) one day we’ll also stop by at your doorstep. Next stop is Basel, Switzerland. The Smashing team is looking forward to seeing you there!


In the meantime, you can watch our video channel 1 and have a look on our photo album. In the latter, you can also pass by and check out my latest postcard from Australia. Smashing Magazine’s fan Adam Lusted showed me around the stunning harbor of Sydney — what a lovely city!

For our today’s 50th issue, we have a quite small announcement to make: our team has been working tirelessly day and night to complete our first big project this year: Smashing Magazine’s redesign! Elliot Jay Stocks has been working for months with us to set new standards and push the boundaries of all technologies. So watch our site this week and we sincerely hope that this week is going be literally smashing! (ll)

Table of Contents

  1. CSS3 Bitmap Graphics2
  2. Responsive Multi-Column Data Tables3
  3. Presentations In The Browser: Visualize And Think Big4
  4. One Minute With: Short Interviews With Designers5
  5. A Lightweight Alternative For Database Management6
  6. Dabblet: Interactive Testing Of CSS And HTML7
  7. The Kernel: New Technology For Inquiring Minds8
  8. Branding 10,000 Lakes9
  9. New on Smashing Magazine10
  10. Smashing Highlights11

1. CSS3 Bitmap Graphics

CSS3 has opened many possibilities for creative Web designers. The trick is to connect the various dots available in CSS3 to produce remarkable results. Thomas Giannattasio has created a CSS3 bitmap graphics demo12 that doesn’t require any extra markup, images, canvas or data URIs. It’s drawn entirely with gradients that are sized precisely to pixel boundaries. As the developer says, “There are certainly more practical uses for this technique, but none quite as nostalgic.”

CSS3 Bitmap Graphics13

If you are looking for some not-so-nostalgic techniques, have a close look at Justin Schwinghamer’s CSS3 Daft Punk LED demo14 animation or Cameron Adams’ interactive CSS3 dodecahedron15. So, what are you capable of? (cc)

2. Responsive Multi-Column Data Tables

When it comes to responsive Web design, we need to carefully consider many design elements and adjust them to particular contexts. Responsive design isn’t just about images and layout, but also navigation menus, videos, forms, font sizes, links and even tables. In fact, have you ever thought about how you would adapt a complex multi-column data table from your desktop version for convenient viewing on a mobile device?

Responsive Multi-Column Data Tables16

Well, the creative guys behind Filament Group have. They’ve come up with a technique17 for always displaying a manageable subset of table columns for common screen sizes, and also for allowing the user to easily change the visibility of columns. Essentially, the technique displays a limited set of columns on smaller screens, while providing quick access to the hidden data. The technique uses JavaScript to adapt to smaller screens and Respond.js for cross-browser compatibility. And if you’re really fancy about tables, you might want to look at David Bushell’s responsive calendar table18 as well. (vf)

3. Presentations In The Browser: Visualize And Think Big

The days of boring presentations are over. Now, even your browser can get in on the game. Classic slide decks are limited, but you needn’t be restricted to them. Impress.js uses the power of CSS3 transforms and transitions that are supported by modern browsers.

Presentations In The Browser: Visualize And Think Big

With this library, you can position, rotate and scale as much as you like, even in 3-D. At this point, Impress.js isn’t quite supported on mobile, but if the user’s browser isn’t smart enough to display transitions or animations, Impress.js will provide a simple PDF-like slide deck. Bartek Szopka has done a great job of exploiting the possibilites of current technologies. And if you have ideas to further improve the script, then get started right away: it’s published under an MIT license. But remember: no tool will help you if you have nothing interesting to say! (sp)

4. One Minute With: Short Interviews With Designers

It’s always great to hear new insights from colleagues and to find out what makes them tick, what their workflows look like and what nifty little design tips, tricks and secrets they’ve learned from experience. Conor O’Driscoll’s One Minute With19 is one such project that collects interviews with designers, developers and creatives.

One Minute With: Short Interviews With Designers20

So far, the website features 24 interviews with letterers, logo designers, illustrators and artists. Each designer provides some information on their daily workflow and the particularities of their design process. They also present their favorite design tools as well as their hardware equipment. If you’re interested in even more interviews, check out Dorm Room Tycoon21 for startup stories and The Setup22 to learn what professionals use to get stuff done. (vf)

5. A Lightweight Alternative For Database Management

Do you use PHPMyAdmin to manage your databases? Are you tired of uploading all of its files every time you set up a server? Why not try Adminer23 instead? Adminer provides advanced database management in a single PHP file. It has a cleaner UI, better MySQL support and superior performance and security.

A Lightweight Alternative For Database Management24

Using the tool is simple: it is literally one file, ready to be uploaded to your server. It lets you create new databases and manage existing ones, with powerful functionality. Adminer is available for MySQL, PostgreSQL, SQLite, Microsoft SQL and Oracle. The tool is free for commercial and non-commercial use (Apache License or GPL 2). (cc)

6. Dabblet: Interactive Testing Of CSS And HTML

Quickly testing CSS is not as easy as it seems. And when new CSS3 features are involved, writing all of those vendor prefixes becomes especially time-consuming. Of course, you could use existing tools such as JSFiddle, but have you seen a tool targeted specifically to test CSS and HTML yet?

Dabblet: Interactive Testing Of CSS And HTML25

Dabblet26 is an interactive playground for quickly testing snippets of CSS and HTML code. The tool allows you to split the window vertically or horizontally to test code. And it uses -prefix-free27, so that you don’t have to add prefixes to the CSS. You can save your work in Github gists, embed it on other websites and share it with others. (ld)

7. The Kernel: New Technology For Inquiring Minds

While many try to break news to the world, The Kernel28 has found its niche. The publication offers comments, reports, analysis and thoughtful and amusing writing on technology, media and business: long-form, high-quality content that gets people thinking. Expert authors from various industries, media and businesses explain how new technologies will shape existing patterns. And you’ll also find pieces of a more general nature, as well as specific articles that aim to inflame discussions.

The Kernel: New Technology For Inquiring Minds29

The Kernel is big on entrepreneurs and is dedicated to following technologies and inventions that have what it takes to revolutionize industries. If you’re interested in a roundup of The Kernel’s best and hottest stories, be sure to sign up for its news bulletin, The Nutshell. (sp)

8. Branding 10,000 Lakes

Here as an idea for stubborn creative designers: look around and find something that you really dislike, and keep changing it every day. Or, if you are really stubborn, for the next years to come. Crazy? Well, that’s what Nicole Meyer committed to when she started the Branding 10,000 Lakes project.

Branding 10,000 Lakes

Apparently, lakes often have logos and, apparently, lake logos in Minnesota have a tendency to be, well, fairly ugly. This project was created to rethink how these logos could look like. Nicole publishes one logo for one Minnesota lake every single day. Now, that’s a nice side project that is simultaneously an exercise in logo design! (il)

The authors in this newsletter are: Stephan Poppe (sp), Cameron Chapman (cc), Luca Degasperi (ld), Vitaly Friedman (vf), Iris Ljesnjanin (il), Lisa Lang (ll).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9 #a8
  10. 10 #a9
  11. 11 #a10
  12. 12
  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

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  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