Tuesday, February 16, 2016

Smashing Newsletter #153: Responsive email design, storytelling and album covers

Front-end tools, clever tricks and eye candy. Issue #153 Tuesday, February 16th 2016 181,783 readers View in the browser

The Smashing Email Newsletter

Hello Friends,

At this time of year, it feels like Spring is just around the corner. This means fresh starts, green shoots, and of course... SmashingConf Oxford! Our line up is now in full bloom; we are delighted to welcome Patrick Hamann, Christopher Wright, and Tobias Frere-Jones on board to complete our busy schedule!


Topics covered will range from Modular Design, what best practices are becoming HTTP/2 anti-patterns, SVG, Web Animation API, Flexbox and much more.

In addition to all of this, we have five full day workshops, each lead by a leader in the field. We're especially excited about Rachel Nabors' brand-new workshop The DOM in Motion!

And if you'd like some insight into what else is in store for our attendees, just take a look at our Attendee Pack. This outlines all of the fun, learning and activities that we have in store...

You'd like to be part of it all? We'd love to see you there! Seats are limited and some workshops are close to selling out (or already full) so don't delay!; see you at the beautiful Town Hall.

With hopes to hang out in Oxford,

Cat, Cosima and Vitaly

Table of Contents

1. Give A New Life To Your Misprints
2. PCjs: A Trip Back To The Early-Days Of Personal Computing
3. Rethinking Digital Storytelling
4. A Rainbow Of Cover Artwork
5. A Bulletproof Responsive Email Framework
6. The Beauty Of Untranslatable Words
7. Upcoming Smashing Workshops
8. New On Smashing Job Board
9. Smashing Highlights (From Our Archives)
10. Recent Articles On Smashing Magazine

1. Give A New Life To Your Misprints

Do you know those moments when you pull a sheet of paper out of the printer, only to notice that the print didn't turn out as you expected it to? To get a second use of your misprints, the team behind RePrint has come up with a smart solution: providing calendar templates that you can print on the backside of your misprints.

Give A New Life To Your Misprints

The calendar templates come with weekly and monthly views, with the weekly view even offering room for notes. The design is minimalist, and perfect for keeping track of your to-dos and deadlines in busy times (cm)

2. PCjs: A Trip Back To The Early-Days Of Personal Computing

You're in the mood for some tech nostalgia? Well, then PCjs is your kind of thing. The open source project revives the times when computers came with a monochrome display and ran on 4.77Mhz and 64KB of RAM. And the best part: it's no showcase. You can actually interact with the machines right in your browser. The simulations of the Original IBM PC from 1981 and the OSI Challenger 1P from 1978 were written entirely in JavaScript and require no additional plugins — no Java, no Flash.

PCjs: A Trip Back To The Early-Days Of Personal Computing

The pre-configured machines are ready to run BASIC, DOS, Windows 1.01 and assorted non-DOS software, and, if that's not enough control for you yet, you can even build your own PC. The goal of the project is to help people understand how these early computers worked and to make it easy to experiment with them. It also provides a platform for running and analyzing older software. Now that's really a trip down Memory Lane. (cm)


3. Rethinking Digital Storytelling

The web technologies of today enable exciting storytelling opportunities. However, if you take a look at how little the content experience has changed over the last 15 years, it's time for some fresh thinking. One stellar example of how this can be done comes from Truth Labs. For a 3-part article series commissioned by The Atlantic about "Population Health", a concept to improve the health of communities, the Truth Labs team created a rich digital narrative. Its goal: to preserve the natural document scroll and reading flow while creating an experience that is different from a visual perspective. To bring it to life, they borrowed tools and strategies from filmmaking, but also established a set of design principles to support reading as the key tenet. A fascinating case study reveals a deeper look into the design process. A must-read.

Rethinking Digital Storytelling

Another one-of-a-kind storytelling experience comes from Joho's, an Austrian coffee roaster. The multimedia narrative harmoniously blends audio, video and photo material to take you on a trip to Brazil, to the origin of the coffee beans. You'll hear the birds chirping as you follow the farmer around the coffee plantation, the sound of roasted coffee beans getting bagged, and the busy streets and the traffic noise in the city. An experience for (almost) all senses. (cm)

4. A Rainbow Of Cover Artwork

By pairing hex color values with album cover art of 2015, you'll have the foundation for a very special project: Album Colors Of The Year. Marcos Rodriguez and Zé Felipe arranged some of last year's album releases by color to create a rainbow of cover artwork. Hovering over a cover displays the name of the artist and the album, along with the hex color value of its dominant color.

A Rainbow Of Cover Artwork

Adele's "25", for instance is a case of #afa289, Todd Terje's "It's It's Remix Time" screams #f717c8, and Björk's "Vulnicura" shines in #e7e459. In times when album covers often live rather unnoticed in the corner of our smartphone screens, it is nice to see their artwork in the center of attention for a change. A great place to seek fresh inspiration — or just discovering some new tunes to get you through a lengthy coding session. (cm)


5. A Bulletproof Responsive Email Framework

Designing responsive email newsletters is a daunting task, especially when you're just getting started. To help you overcome all those tricky pitfalls and hurdles that come with it, Glenn Smith built a comprehensive and bulletproof Email Framework.

A Bulletproof Responsive Email Framework

It provides pre-built options for grids, modules, typography, content blocks, alignment, spacing, buttons and images that you only need to copy and paste and stack on top of another to create your desired template structure. The framework supports over 40 email clients and has been thoroughly tested using Litmus. The perfect base to build upon, no matter how experienced you are with email design. (cm)

6. The Beauty Of Untranslatable Words

Verschlimmbessern, l'esprit d'escalier, iktsuarpok. They all are untranslatable words, words that have no counterpart in other languages, but which express moods, needs, feelings that we all have experienced before. Verschlimmbessern, for example, is a German expression for accidentally making something worse when you attempt to improve it. L'esprit d'escalier captures the feeling when you don't know how to answer humiliation in real time, when the witty or cutting retort that you should have delivered comes to mind only after you have left the gathering and are on your way down the stairs (escalier is French for stairs).

The Beauty Of Untranslatable Words

Or take iktsuarpok, that hardly pronounceable word from the first sentence. It's Inuit and expresses the feeling of edgy anticipation that makes you keep on looking out the window to see if an expected visitor is coming up the path. Isn't it just beautiful to now have a word for that familiar feeling? If you have a sweet spot for these kinds of things, then you'll love the list of untranslatable words that the Book Of Life has collected. It features thirty linguistic gems that make the inexpressible expressible. Beautiful. (cm)


7. Upcoming Smashing Workshops

With so many techniques, tools, style guides, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.

Upcoming Smashing Workshops

Full-Day Workshops at SmashingConf Oxford

Full-Day Workshops at SmashingConf San Francisco

Full-Day Workshops at SmashingConf New York

8. New On Smashing Job Board

Here are the recent job openings we've published on our Job Board:
  • Web Developer — Marketing at Sprout Social (Chicago, IL)
    "Sprout Social's Engineering team is looking for a Developer who is dedicated to delivering on interactive marketing projects across our organization. You will collaborate daily with other Engineers, Designers, and Marketers to develop concepts and bring web experiences to life through beautiful, semantic markup."

  • Web Developer at Kern Community College District (Bakersfield, CA)
    "KCCD is looking for an experienced PHP web developer that has experience developing for, deploying applications to, managing, and troubleshooting the LAMP stack. The ideal candidate has experience developing for and using the Drupal content management system, has experience with git version control, and some experience in devops/system administration work (Unix command line, bash scripting, caching systems, mysql database administration, etc.)"

  • Junior Front End Developer at Florida Atlantic University (Boca Raton, Florida)
    "Florida Atlantic University's Communications Department is looking for a collaborative Junior Front End Developer with a passion for web development to join their team, Boca Raton, FL. Are you able to juggle multiple projects? Do you love testing and putting your work through the wringer? If you want to get hands-on experience to build and improve your web skills, please apply for this opportunity to play a role in our growing department."

9. Smashing Highlights (From Our Archives)

  • Accessibility Originates With UX: A BBC iPlayer Case Study
    Not long after I started working at the BBC, I fielded a complaint from a screen reader user who was having trouble finding a favorite show via the BBC iPlayer's home page. The website had recently undergone an independent accessibility audit which indicated that, other than the odd minor issue here and there, it was reasonably accessible.

  • A Type Design Brief: What Is In It, And Why Does It Matter?
    Type design is equal parts suffering and euphoria. It is a walk along a winding road that goes on for many weeks and months before it's done. A type design brief is like a charter path: It asks you questions, and the answers will guide you to where you want to be.

  • Designing For The Reading Experience
    With the rise of web fonts as well as affordable hosted web font services and ready-made kits, typography is reclaiming its title as design queen, ruler of all graphic and web design. At the same time, for far too many designers, the main concern about typography today seems to be aesthetic in nature. The problem is, we tend to use typography and lettering as two interchangeable terms, which they are not.

10. Recent Articles On Smashing Magazine

Coding Articles

Design Articles


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Cosima Mielke (cm), (), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser

No comments:

Post a Comment