Smashing Newsletter #210: Ethical Design, Forms and A/B Tests

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... Issue #210 • Tue, July 17, 2018 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, 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]( --------------------------------------------------------------- Table of Contents 1. [Better Conversions With The Link Bar](#a1) 2. [Generated World Cup Posters](#a2) 3. [SmashingConf NYC Is Coming!](#a3) 4. [Building Forms The Easy Way](#a4) 5. [Free Web Development Tutorials](#a5) 6. [Building Accessible Products](#a6) 7. [When Text Meets Data Visualization](#a7) 8. [What Is The Role Of A Designer?](#a8) 9. [Upcoming In Smashing Membership](#a9) 10. [Upcoming Workshops With Vitaly Friedman](#a10) 11. [New On Smashing Job Board](#a11) 12. [Popular Articles This Month](#a12) --------------------------------------------------------------- #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. [Link Bar]( 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. [Generative WorldCup]( 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](. [SmashingConf New York 2018]( 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](. [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) [Interneting Is Hard]( --------------------------------------------------------------- From our sponsor The Creative Curve: How To Develop The Right Idea, At The Right Time What if creative genius was a skill to develop, not some mystical thing? The new book, [The Creative Curve]( combines the latest science on creativity with interviews from everyone from the Broadway team behind Dear Evan Hansen, to the founder of Reddit, from the Chief Content Officer of Netflix to Michelin star chefs. [The Creative Curve]( Using this, author Allen Gannett breaks down how you can enhance and develop your own creative potential. According to Daniel Pink, the New York Times bestselling author of When and To Sell is Human, “The Creative Curve will take you through the science and practice of creativity so that you can start tapping into your own breakthroughs.” [Pick up your copy on Amazon]( --------------------------------------------------------------- #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? [Accessibility for Teams]( 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) [Datalegreya]( --------------------------------------------------------------- From our sponsor Online Masters in Information Design and Strategy [Ad]( Earn Your Master’s Degree Online --------------------------------------------------------------- #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]( [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 us to 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 very grateful for the kind and generous support of 953 members (and it’s growing daily)! 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 [New Front-End Adventures in Responsive Design Workshop]( 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! --------------------------------------------------------------- #11. New On Smashing Job Board - [Director of Product Design]( at The Atlantic (Washington, DC) “The Atlantic is looking for someone to lead our product design team which focuses on the user experience, interactions, and UI for our digital products.” - [Product Designer]( at Bench (Vancouver, BC) “We’re looking for a designer who will work closely with the product manager and engineers and prototype new features and refine existing interfaces within the product.” - [Digital Art Director]( at Ready Set Rocket (New York, NY) “We’re looking for a dynamic, experienced, digital Art Director to join our creative team and work with other designers to guide projects from vision to execution to launch.” --------------------------------------------------------------- #12. Popular Articles This Month - [Creating An Illustration In Affinity Designer]( A tutorial that introduces some of Affinity Designer’s very user-friendly main tools and features and shows you how you can create a nice flat vector illustration of a Volkswagen Beetle. - [Using The Web With Just A Keyboard]( Many of us are taught to make sure our sites can be used via keyboard. Why is that, and what is it like in practice? Here’s an experiment to finally find the answers to our questions. - [Pattern Library First: An Approach For Managing CSS]( CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. This newsletter issue is brought to you by Iris Lješnjanin (il), Vitaly Friedman (vf), Markus Seyfferth (ms), and Christiane Rosenberger (research). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- With useful tips for web devs. Sent 2× a month. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](