We love useful stuff, and we love quality writing, that’s why we send out an editorial email newsletter twice a month with useful tips, tricks and resources for designers and developers — thoroughly collected, written and edited by us exclusively for our readers. Once subscribed, you’ll receive a small token of appreciation — a free eBook just for you.
Of course, you can cancel your subscription at any time (just check the “unsubscribe” link in the footer of the last newsletter issue). The Smashing Newsletter will always be free of charge. We respect your privacy; we will never give your data to third parties, nor would we ever spam you. You have our word!
Please keep in mind that we keep the number of ads per issue to a minimum; and to help us cover our costs, we send out at most one monthly special issue which is dedicated to Smashing projects and products. We appreciate your support, and we’ll make sure to keep your subscription worthwhile.
- Issue #185 is scheduled for Tuesday, July 4th 2017
- See below for Issue # 1841 published on Tuesday, June 20th
- Issue #183 | Tuesday, June 6th 20172 – Readers: 228,882
- Issue #182 | Tuesday, May 23th 20173 – Readers: 229,438
- Issue #181 | Tuesday, May 9th 20174 – Readers: 230,055
- Issue #180 | Tuesday, April 25th 20175 – Readers: 230,055
- Issue #179 | Tuesday, April 11th 20176 – Readers: 231,209
- Issue #178 | Tuesday, March 21st 20177 – Readers: 231,624
- Issue #177 | Tuesday, March 7th 20178 – Readers: 231,990
- Issue #176 | Tuesday, February 21st 20179 – Readers: 233,268
- Issue #175 | Tuesday, February 7th 201710 – Readers: 234,002
- Issue #174 | Thursday, January 24th 201711 – Readers: 234,068
- Issue #173 | Thursday, January 12th 201712 – Readers: 234,459
- Issue #172 | Tuesday, December 13th 201613 – Readers: 233,520
- Issue #171 | Tuesday, November 29st 201614 – Readers: 234,898
- Issue #170 | Tuesday, November 15th 201615 – Readers: 247,796
- Issue #169 | Tuesday, November 1st 201616 – Readers: 196,178
- Issue #168 | Tuesday, October 20th 201617 – Readers: 195,462
- Issue #167 | Tuesday, October 4th 201618 – Readers: 198,327
- Issue #166 | Tuesday, September 20th 201619 – Readers: 198,064
- Issue #165 | Tuesday, September 6th 201620 – Readers: 197,704
Last Newsletter Issue #184
This newsletter issue was sent out to 228,599 newsletter subscribers on Tuesday, June 20th 2017.
How do you manage unpredictability in your designs? What if customers’ names are too short or too lengthy, or images too wide or too small? Since we’re building flexible, responsive systems these days, our websites have to be reliable and resilient enough to manage unexpected content issues. That’s why design mock-ups need dynamic content22, and whenever we design, it’s a good idea to plug in text from Mandarin and German alongside English to see how our interface responds to them. In fact, there are many23 tools24 and25 plug-ins26 helping you with just that.
But what if you need something very specific? Let’s say, a list of airports, colleges, GPS coordinates, movies, names, songs, or even TV shows? In that case, you can use Lists.Design28, a growing repository of real data ready to be placed directly into your design. Besides, there are also a couple of simple CSS techniques to handle unexpectedly long or short content29, e.g. for long links or words inside a card or long article tags.
Usually, we just don’t know what content will be flowing into our beautifully crafted and built layouts, and by keeping a number of extreme cases in mind when designing, we can test and code just enough to make sure that things still work as expected in most cases — regardless of what comes our way.
Table of Contents
- The Spellbook Of Modern Web Development30
- Enter The Next Level Of Front-End31
- Building Flexbox + CSS Grid First!32
- Turn Sketch Files Into Shareable Prototypes33
- An HTML Audio Player For The Modern Era34
- Beautiful Demo Of Gif Masking In SVG35
- Accessibility Dos And Don’ts For Your Office Wall36
- Vintage Movie Poster Design Gems37
- Upcoming Smashing Workshops38
- New On Smashing Job Board39
- Smashing Highlights (From Our Archives)40
- Recent Articles On Smashing Magazine41
421. The Spellbook Of Modern Web Development
Web development is full of challenges. Not seldomly, we spend hours wracking our brains, trying to smash a bug or finally get to grips with that new technique everyone has been talking so much about lately. Don’t you sometimes wish there was something like a magic wand to assist you? You say your spell and (poof!) things work out just as you want them to? Well, we’re grown-ups and we all know that these kinds of things don’t exist. Or, do they?
452. Enter The Next Level Of Front-End: SmashingConf Barcelona Is Coming!
The web is constantly changing. So, where can you learn the new best practices for design systems and how to optimize your websites’ performance? At SmashingConf Barcelona46 of course! We are returning to the magical Palau de la Música Catalana on October 17th and 18th with two packed days of hands-on, practical sessions by some of the most respected members of our industry.
As always, the focus of the conference will be practical tips, techniques and strategies for front-end, UX and everything web-related. This might be the conference that will keep you inspired for quite some time — two full days, with networking activities and a diverse, versatile line-up. We’d love you to join us, you know. Tickets are now available48. See you there? ;-) (cm)
493. Building Flexbox + CSS Grid First!
How do you build CSS layouts these days? Would you build your components and the layout with floats and positioning first, and then enhance with Flexbox and CSS Grid Layout50? Or the other way around, building with Flexbox and CSS Grid Layout first, and providing a fallback to legacy browsers?
The answer to this question will (of course) depend on your browser support and the experience you choose to provide for legacy browsers. One thing is almost certain though; with Flexbox (for components) and Grid (for layout), you’ll usually get much faster to better results — inherently flexible layouts and shorter CSS. For this purpose, it’s useful to know the fallbacks you might want to provide for legacy browsers. Rachel Andrew published a list of CSS Grid “fallbacks” and overrides52 alongside grab & go patterns53 for layouts built with CSS Grid. Ah, and here are a couple of useful things to know about Flexbox54 which could be useful for debugging as well. (vf)
554. Turn Sketch Files Into Shareable Prototypes
Want to turn a Sketch file into a working and shareable prototype without leaving Sketch? Mirr.io56 makes it possible. The lightweight Sketch tool breathes some life into your static designs and lets you share them with just one click. A Sketch plugin combined with a desktop app preview tool makes it possible.
To add some motion to your Sketch file, Mirr.io comes with an integrated Events panel that makes it easy to apply events like transitions to layers and groups. You can also add a timer to an artboard, for example, which comes in especially handy for splash or loading screen animations. The preview itself works on any device and in any browser and updates live. Once you’re happy with your prototype, you can use a short URL to share the design with others. Mirr.io is free to download and doesn’t require any sign-up.
Ah, and a shameless plug, of course. These and many tips and tricks are part of the brand-new Sketch Web Guide58, written by Christian Krammer (author of our lovely Sketch Handbook59). The web guide takes you through every aspect of Sketch in 13 fully revised and updated chapters. To make learning as practical as possible, Christian created one main example project which you can follow along. The guide is constantly updated, too. (cm)
605. An HTML Audio Player For The Modern Era
When you want to embed audio on a website, there’s usually no getting around the default browser solution. AmplitudeJS61 now attempts to change that. The HTML audio player gives you full control over the design, and with only 9KB compressed, it’s super lightweight, too. An “audio player for the modern era”, as its makers describe it.
The tool lets you organize media into as many playlists as you like, supports live streams (native SoundCloud support is on board, too), and comes with advanced actions like shuffle and repeat. Did we mention that it’s touch-friendly, too? To use the player in your project, you only need to include a single line of code in the
<head> of your HTML page and you’re good to go. Definitely worth checking out. (cm)
636. A Beautiful Demo Of GIF Masking In SVG
Now here comes a little something to leave you in awe (and to tinker with, of course): Sarah Drasner made a beautiful CodePen demo64 to show how masking in SVG on images with opacity can create stunning illumination and paint effects.
677. Accessibility Dos And Don’ts For Your Office Wall
Making sure that your design is usable and accessible for anyone is crucial, but what exactly are the needs of different groups of people? Did you know, for example, that users on the autistic spectrum could have issues with bright contrasting colors? Or that it can help dyslexic people if they can change the contrast between background and text?
To raise awareness for good design practice, an accessibility team at Gov.uk designed a series of six posters69 that show the five most important dos and don’ts to cater to users with low vision, hearing impairments, dyslexia, and motor disabilities, as well as users on the autistic spectrum and screen reader users. And, well, the dos that run across the posters are design principles that are applicable to anyone: good color contrasts, legible font sizes, and linear layouts. Great to print out and hang on the office walls! (cm)
708. Vintage Movie Poster Design Gems
You’ve got a sweet spot for movie poster design? Well, then we have a very special piece of eye candy for you that is sure to keep you busy quite a while (maybe even longer as you’d like it to): a delicious collection of thousands of rare and vintage film posters71 from all across the world.
The New York-based gallery Posteritati showcases its gems online, so you can browse through them to your heart’s content. No matter if you’re interested in posters of a certain genre, country, year, director, actor, or artist, the huge collection certainly has got you covered. And just like a good movie, it caters for some jaw-dropping moments, too: Among the exhibits, you’ll find an Argentinian King Kong poster from 1933, for example, that is for sale for a whopping $75,000. Popcorn, anyone? (cm)
739. 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.