Tuesday, April 12, 2016

Smashing Newsletter #156: A11y, CSS Animations And Good Copy

A11y, CSS Animations And Good Copy. Issue #156 Tuesday, April 12th 2016 185,645 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

Last week we had a (tremendous!) SmashingConf in San Francisco, and we used the opportunity to talk to designers and developers in Silicon Valley to get a better understanding of their design culture and the atmosphere within the city. I was surprised by how often their focus on the commercial ventures was, as well as the importance of the growth of their product (investing in design and building really doesn't seem to play such a big role).

In a round of Q&A with Chris Heilmann, Jason Fried (the founder of Basecamp) stated multiple times that the growth and catering to all kinds of customers, such as enterprises, did not interest him. With a niche and a good customer base, you can build a successful product, without "angel" investors and exponential growth in hiring. Maybe sometimes it's not necessary at all.

We've all seen company owners rushing from one big idea to another, thinking of acquisition meetings and exit strategies too early. Instead, you should create, design, build and nourish the product you love (and stay with it!) — with or without venture capital. You might be happier this way.


That's what we are trying to do here, and what we've been doing for the past ten years. In fact, our upcoming SmashingConf Freiburg will mark and celebrate our 10th anniversary this September. Make sure to mark your calendars: the tickets will go on sale on Tuesday, April 24th, 2PM CET! We hope to see you there, and celebrate together.

Tick tock says the clock!
– Vitaly (@smashingmag)

Table of Contents

1. The Windows To The Soul Of The City
2. Screensavers That Aren't On Everybody's Screens
3. The Design Of Flags
4. Free eBook: The CSS Animations Pocket Guide
5. Fully Accessible Content Toggles
6. A Script To Test The Heading Outline Of Your Document
7. Just Good Email Copy
8. Upcoming Smashing Workshops
9. New On Smashing Job Board
10. Smashing Highlights (From Our Archives)
11. Recent Articles On Smashing Magazine

1. The Windows To The Soul Of The City

A window is a window is a window? Not at all. When you keep your eyes open strolling through the streets, you'll notice that no window is like the other, but together they reflect the uniqueness of a city. The Portuguese joy of living, Barcelona's Gothic history, Alpine culture — with his photo series "Windows of the World", photographer André Vicente Gonçalves captures a city's spirit, through, well, its windows.

The Windows To The Soul Of The City

André assembles photos of individual windows into a mosaic to create a building as diverse yet so connected as the city itself. Delicate balconies, sturdy brick walls, eye-catching colors — there are a lot of fantastic details to discover in André's photos, not only for architecture enthusiasts. And if that doesn't satisfy your hunger for architectural goodness yet, the sister project "Doors of the World" caters for more. (cm)

2. Screensavers That Aren't On Everybody's Screens

You've grown tired of your screensaver? Well, Screen Saver Supply just might have something new for you. Ten screensavers are at your choice, among them a trilogy celebrating the beauty of Apple's San Francisco typeface, a TV test screen that lets you add custom text, customizable stickers inspired by the famous Supreme Box Logo sticker, and a shuffle matrix with scaled up emojis.

Screensavers That Aren't On Everybody's Screens

Designed by Bjorn Johannson, you can download the screensavers for free — by paying with a hashtag for example, or take a look at Bjorn's ingenious and funny list of "free rules" instead to see if you match any other criteria to download his work for free. You can, of course, also support Bjorn by showing your appreciation the classical way and pay only $4.99. You decide. (cm)


3. The Design Of Flags

A mammoth project of a very special kind comes from the team behind the infographic agency ferdio. Fascinated by the design of country flags, they decided to explore them in every possible way, and the deeper they dug into the topic, the more stories they revealed. What started by collecting random findings in a blank spreadsheet, evolved to a series of appealing infographics for us to indulge in.

The Design Of Flags

It's not the usual aspects like history or culture that Flag Stories is interested in, instead, the project focuses exclusively on graphics. What are the dominating flag colors of the world? What the most used layouts and symbols? What flag proportions are common? These are just some of the questions that ferdio answers. A fascinating example of breaking complex data down into informative and inspiring bits. (cm)

4. Free eBook: The CSS Animations Pocket Guide

To bring motion to your design, you won't need new tools or a new language to learn. All it takes is good ol' CSS. To give you a jump start into CSS @keyframe animations, Val Head now offers her CSS Animations Pocket Guide as a free eBook.

Free eBook: The CSS Animations Pocket Guide

Originally published by Five Simple Steps, who, unfortunately, closed their doors recently, the book is 65 pages strong and equips you with the foundation on which you can start experimenting and creating. You'll learn the basic building blocks to animating with CSS, explore animation properties, wrap your head around easing, and get to grips with common animation tasks, performance and browser support. To get your hands on the goodie, just enter your email and you're ready to download the eBook in PDF, ePUB and Kindle formats. Thanks, Val! (cm)


5. Fully Accessible Content Toggles

Toggling content visibility is tricky. You might have heard of the checkbox hack that relies on the :checked pseudo-class to do the trick, but with its lack of browser support and some severe usability and accessibility issues, it certainly isn't the best option. To close the existing gap and make the toggle accessible, you'll need certain ARIA-specific attributes, and, well, they can't be toggled without JavaScript. Luckily, a11y-toggle provides a fix.

Fully Accessible Content Toggles

The 300 bytes small script brings in a sprinkle of JavaScript magic to make the toggle fully accessible to users of assistive technologies. Simply install it via npm, include it in your page, and add a data-a11y-toggle attribute to the toggle and an aria-controls attribute linking to the collapsible element. The code is available via GitHub. To see it in action, also make sure to check out the live demo. (cm)

6. A Script To Test The Heading Outline Of Your Document

Keeping the heading outline of a web page consistent should be best practice for every developer. Not only because a meaningful structure matters when it comes to search engine results but also because assistive technologies rely heavily on it to give context and support navigation. A handy little helper to detect and prevent bugs in your document's structure comes from Hugo Giraudel: Outline Audit.

A Script To Test The Heading Outline Of Your Document

The small JavaScript library analyzes the outline of the current page and warns you of potential issues in the developer console. To use it, you can save the snippet directly to your DevTools, put it into a bookmarklet or integrate it to a testing suite. (cm)

7. Just Good Email Copy

Good copy matters, but setting the right tone can be a challenge sometimes. For example, how do you best communicate that billing had failed, that a subscription is about to renew or that your product is under maintenance? Some companies manage to do this extremely well, and to give you a hand when writing email copy, Just Good Copy has collected these outstanding examples.

Just Good Email Copy

The collection features email copy for all kinds of occasions: from welcome emails and new feature announcements to trickier things like apologies, billing issues and the unpleasant case of shutting down. An inspiring fund that is continuously growing — just send emails that catch your attention to the makers of the site and they'll happily add them to the directory. (cm)

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

Full-Day Workshops at SmashingConf New York

Full-Day Workshops at SmashingConf Freiburg

Upcoming Smashing Workshops

9. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:
  • UX Design Leader, Special Project at Amazon (Palo Alto)
    "As the User Experience and User Interface Design leader, you will be responsible for creating and realizing the interface development of a new generation of consumer electronic products."
  • Senior Director of Design, UI/UX at Viacom (New York)
    "We are searching for an innovative creative candidate with a blend of user experience and visual design skills who has created and led teams in creating consumer-facing products for web, mobile, and tablet devices."
  • UX/Digital Designer at Elevated Third (Denver, CO)
    "Elevated Third is a growing digital agency located in the heart of downtown Denver. We don't have any ninjas or rockstars working here, just talented folks who like to work together to solve problems. As an UX/Digital Designer at Elevated Third, you will bring digital strategy to life with prototypes, mockups, style guides and production work."

10. Smashing Highlights (From Our Archives)

  • Thinking Like An App Designer
    There's more to designing mobile apps than meets the eye. The task requires a deep knowledge of devices, and it often means changing the way we think — even if that means leaving behind much of what we've learned from designing for the web.
  • Design Principles: Visual Perception And The Principles Of Gestalt
    In 1910, psychologist Max Wertheimer had an insight when he observed a series of lights flashing on and off at a railroad crossing. It was similar to how the lights encircling a movie theater marquee flash on and off. To the observer, it appears as if a single light moves around the marquee, traveling from bulb to bulb, when in reality it's a series of bulbs turning on and off and the lights don't move it all.
  • The Collective Legal Guide For Designers (Contract Samples)
    Rule number one for designers of all kinds: use a contract. Sometimes, this is easier said than done. Should I use a service agreement? A retainer? A licensing contract? With the help of Docracy, we collected the experience of many designers to provide a wide range of starting points for less experienced creative professionals, and to start a permanent free legal resource for the community. In this article you'll find a collection of legal documents curated by our fantastic community.

11. Recent Articles On Smashing Magazine

Coding Articles

Design Articles

Freebies, Inspiration, Misc.

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), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser

No comments:

Post a Comment