Tuesday, January 10, 2012

Smashing Newsletter #50: Responsive Design, CSS3, PHP, Branding

The email is not displayed properly? View the online version. Annoyed? Unsubscribe at any time.

The Smashing Email Newsletter

Issue #50, Tuesday, January 10th 2010 | 98,815 subscribers | Previous issues

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

Editorial

In the meantime, you can watch our video channel 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

01. CSS3 Bitmap Graphics
02. Responsive Multi-Column Data Tables
03. Presentations In The Browser: Visualize And Think Big
04. One Minute With: Short Interviews With Designers
05. A Lightweight Alternative For Database Management
06. Dabblet: Interactive Testing Of CSS And HTML
07. The Kernel: New Technology For Inquiring Minds
08. Branding 10,000 Lakes
09. New on Smashing Magazine


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 demo 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 Graphics

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

Well, the creative guys behind Filament Group have. They've come up with a technique 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 table 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)


Advertisement


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

One Minute With: Short Interviews With Designers

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 Tycoon for startup stories and The Setup 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 Adminer 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 Management

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 HTML

Dabblet 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-free, 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 Kernel 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 Minds

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)


Advertisement


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)


9. New on Smashing Magazine


Thank You For Reading!

We appreciate your time and support, dear subscribers. In this issue, we are happy to give away a fantastic type poster designed by Tom Davie to a lucky newsletter subscriber: Rebekah Hickey. Congratulations, Rebekah — you've got mail!

Yours sincerely,
The Smashing Family

Join our community: follow us on Twitter and join us on Facebook

The authors are: Iris Ljesnjanin (il), Talita Telma (tt), Ana Flasker (af), Stephan Poppe (sp), Cameron Chapman (cc), Luca Degasperi (ld), Andrew Rogerson (ar), Lisa Lang (ll), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Andrew Lobo (proofreading).

unsubscribe | update preferences | view it in your browser | sent via Mailchimp

No comments:

Post a Comment