Smashing Newsletter: Issue #210

Editorial

It’s always difficult to look back when you are rushing up to move forward. With so much happening in our little Smashing Universe over the last few months (conferences in San Francisco and Toronto, the growing Smashing Membership, new Smashing Book 6, new webinars and our education initiatives), we are now working on a shiny new product.

Many people would say that print is dead, but with Smashing Print, we want to rediscover what a useful, valuable printed magazine would look like. A magazine designed to be timeless in times when only few things on the web are truly timeless. We want each issue to be worth reading, exploring and collecting, but, most importantly, we want the magazine to be relevant to you. No short-living tutorials, no seasoned hacks or workarounds. The process, the techniques, the thinking behind decisions, and the strategy to get from nothing to something tangible — both in design and code. Obviously, the print will be shipped free of charge to the Smashing Membership family (“Smashers”).

Rachel is taking over the leading role in working with authors and defining the topics of the issues, Veerle Pieters has illustrated the first issue, and I’ll be looking into ways to keep the magazine exciting and engaging. We have a few ideas floating around, but we’d love to hear how you would shape the magazine if you could... well, anything, really! What’s important to you, and what do you prefer reading when you are away from the screen? What would you love to see on the pages of Smashing Print? We’d love to hear your thoughts. Please let us know with the help of this short form we’ve set up, or simply reach out to us on Twitter. We’d kindly appreciate your input, and for the most detailed and constructive feedback we’ll send you the very first issue as a little token of appreciation — well, when it’s out, of course.

So, what would you like to see in a useful and interesting printed magazine these days? Let us know!

— Vitaly (@smashingmag)

Better Conversions With The Link Bar
Generated World Cup Posters
SmashingConf NYC Is Coming!
Building Forms The Easy Way
Free Web Development Tutorial
Building Accessible Products
When Text Meets Data Visualization
What Is The Role Of A Designer?
Upcoming In Smashing Membershp
Upcoming Workshops With Vitaly Friedman

1. Better Conversions With The Link Bar

We all know by now that it’s not a straightforward decision to just use a hamburger menu for navigation. eCommerce websites have been testing alternatives — including the so-called “link bar” — and have concluded that revealing links to products as well as category pages increases the amount of customers reaching them.

Even with the link bar displayed alongside the hamburger menu, it was obvious that users visiting that test site found it easier (and faster) to use the link bar (one less click is required and links are more prominent). The folks at Growth Rock ran two A/B case studies in which they saw increases in visits to product pages and purchase conversion rate. It’s ime to test your nav bar, too! (il)

2. Generated World Cup Posters

The World Cup may be over, but for some folks the memories will remain evergreen. For example, by creating posters dedicated to each match. That’s what Zeh Fernandes decided to do: he used a statistics API and canvas to generate abstract patterns for each game.

Impressive what can happen when football meets art. Benny Schudel also created a digital gallery dedicated to the matches of this year’s World Cup, all visualized in a Mondrian-like style. You can take a tour and witness in replay how the pictures emerge minute by minute. (il)

3. SmashingConf New York Is Coming

The hunt for shiny front-end and UX treasures has begun! At our fifth SmashingConf New York, taking place on Oct 23–24, we’ll explore everything from HTTP/2 performance patterns and Vue.js to design patterns for Progressive Web Apps. Tangible, practical techniques applicable to your work right away. Ah, and you can combine the conference experience with a full-day workshop and save $100 as well. Speakers? Here’s the full speakers line-up.

Tickets to SmashingConf New York 2018 are now available — grab yours before it’s gone!

4. Building Forms The Easy Way

Looking for a way to take the pain away from working with forms? Well, what if we told you that there is a little HTML and CSS boilerplate that is designed to be straightforward to implement. That’s right. Meet Boilerform.

Initially thought-up by Chris Coyier, this handy tool doesn’t ask for much: All you need to do is to provide baseline BEM structured CSS and appropriate attributes on elements — and you can even build your own pattern library! Nifty indeed. (il)

5. Free Web Development Tutorials

Interneting Is Hard is a comprehensive set of free web development tutorials that are authored and maintained by Oliver James to help transform complete beginners grow their skills into talented professionals. CodeTime.io provides over 550 episodes of video series on topics ranging from introductory HTML to leveraging the power of APIs to create interactive websites — all free lessons on web development for anyone who wants to learn code.(il)

6. Building Accessible Products

Accessibility is hard: It comes across as a set of complex rules that are hard to follow. How do you make sure you’re building products that are accessible and inclusive?

There are a lot of barriers that can stand in the way of making products more accessible, from lack of knowledge to lack of buy-in. The GSA created a guide (known as the “DigitalGov Guide”) to help teams create accessible products and services, so that we can all have a part to play in building accessible products. (il)

7. When Text Meets Data Visualization

A typeface that interweaves data curves and text? Yes, it’s possible! Datalegreya was created to synthetically display graphical data, be it for connected objects, embedded displays, annual reports, weather report, stock prices, or almost anything. (il)

8. What Is The Role Of A Designer?

The design of any product can be a moral dilemma: designers must balance their own economic survival, the financial interest of the client and the well-being of the user. It’s high-time we raised the question of ethics.

Ethics for Design is a lovely documentary dedicated to the role of ethics in design and advertising, critical design, and design thinking. 12 designers and researchers from 8 European cities discuss the impact, sometimes harmful, of design on our societies and the paths to follow for designers to work for the good of all and not just a few. Inspiring! (il)

9. Upcoming In Smashing Membership

Smashing Membership helps our site keep the site alive and go ad-free. Every Member makes a difference, and get valuable content from it, too! Coming up next:

Smashing TV 📺 “From Good To Great Animation — Live!” with Val Head — July 24, 2018
Also on July 24, we’ll release a new eBook dedicated to the new WebP image format, written by Jeremy Wagner. The WebP image format is supposed to be the new standard of web images very soon, and in this short ebook, you’ll learn all about WebP: what it’s capable of, how it performs, how to convert images to the format in a variety of ways, and most importantly, how to use it. The eBook is free for all Smashing Members!
Smashing Book 6: We’ll be releasing “Designing For Audio UIs and Watches” by Greg Nudelman and “Accessibility in SPAs” by Marcy Sutton.

We are really grateful for the kind support of our members! You can become one of us, as well. ;-)

10. Upcoming Workshops With Vitaly Friedman

🇩🇪 Freiburg, SmashingConf, Sept. 10 – 11, 2018
New York, SmashingConf NY, Oct. 23 – 24, 2018

Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy!

July 17, 2018 Smashing Newsletter: Issue #210

Previous Issues