Smashing Newsletter: Issue #50

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

Editorial

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 Meetup1, 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!

Editorial2

In the meantime, you can watch our video channel 3 and have a look on our photo album4. 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

01. CSS3 Bitmap Graphics5
02. Responsive Multi-Column Data Tables6
03. Presentations In The Browser: Visualize And Think Big7
04. One Minute With: Short Interviews With Designers8
05. A Lightweight Alternative For Database Management9
06. Dabblet: Interactive Testing Of CSS And HTML10
07. The Kernel: New Technology For Inquiring Minds11
08. Branding 10,000 Lakes12
09. New on Smashing Magazine13
10. Smashing Highlights14

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 demo15 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 Graphics16

If you are looking for some not-so-nostalgic techniques, have a close look at Justin Schwinghamer’s CSS3 Daft Punk LED demo17 animation or Cameron Adams’ interactive CSS3 dodecahedron18. 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 Tables19

Well, the creative guys behind Filament Group have. They’ve come up with a technique20 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 table21 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.js22 uses the power of CSS3 transforms and transitions that are supported by modern browsers.

Presentations In The Browser: Visualize And Think Big23

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 With24 is one such project that collects interviews with designers, developers and creatives.

One Minute With: Short Interviews With Designers25

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 Tycoon26 for startup stories and The Setup27 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 Adminer28 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 Management29

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 HTML30

Dabblet31 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-free32, 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 Kernel33 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 Minds34

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 Nutshell35. (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 Lakes36 project.

Branding 10,000 Lakes37

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

The Smashing team loves high-quality content and cares about the little details. Through our online articles, books and eBooks and 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

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