Happy New Year!
It seems hard to believe it is 2019 already, but here we are heading into a new year. I like the chance to look back over the year that has just happened and see whether I met the goals I set for myself, and what I want to bring forward or change in the next year. Here at Smashing, we spent some time thinking about 2018, and everything that had happened. As you can see in this article, we have been quite busy! I do love a good end of year review post; if you do too, then you might enjoy this collection put together by Smashing author Andy Bell.
Onward to 2019, perhaps you have taken time to set goals for the coming year. I hope that we at Smashing can help you to achieve some of them. I want to build on the great content our authors have brought to the magazine in 2018, publishing articles that help you navigate the breadth of technology we encounter in our work. Our Smashing conferences are going to bring some of the best speakers and workshop leaders to cities around the world, while Smashing Members will have access to our huge library of books as well as some exclusive webinars and more.
Perhaps your goals also include sharing what you know. We are always interested in proposals for articles. Take a look at our information about writing for us, and get in touch with an outline for a piece. We are very happy to work with first-time authors. If you have discovered something interesting while working on a project, or have a small project that you could teach readers how to build, we can help you shape that into a great tutorial.
If your goals include getting into public speaking then take a look and see if there is a Global Diversity CFP Day happening near you. If you are already an experienced public speaker then perhaps you could offer to be a mentor — or even set up an event of your own. You can read my write-up of last year, “Getting Started In Public Speaking: Global Diversity CFP Day.”
So, let’s get started!
— Rachel Andrew (@rachelandrew)
Table of Contents
- In Defense Of Utility-First CSS
- SmashingConf San Francisco 2019
- Hand-Curated Freebies For Designers And Developers
- Accessible SVG Icons With Inline Sprites
- AI-Powered Alt Texts
- Behind The Scenes Of The GOV.UK Navigation
- Get Your Layout Ready For Screen Readers
- Rethinking Drag And Drop
- Remove Backgrounds With AI
- Upcoming In Smashing Membership
Utility-first CSS helps you write code that is easier to maintain and scale. However, not everyone is convinced. Some argue they might as well use inline styles, that utility-first bloats the HTML, or that it’s a whole other language to learn.
Sarah Dayan was also critical, advocating for BEM instead, but once she dived deeper into the topic, she revised her judgment. If you feel skeptical, too, Sarah’s article “In Defense Of Utility-First CSS” is for you. It debunks common misconceptions and helps you see the approach from a fresh perspective. (cm)
We like breaking out of the predictable patterns. We take pride in putting our heart and soul into crafting friendly, inclusive and practical events, and SmashingConf San Francisco 2019 won’t be an exception. Expect live debugging, live sketching, live designing and live coding. Check the topics.
You’ve probably got some exciting new projects planned for this year, and, well, the right freebie at the right time could turn out to be invaluable to master those design and development challenges that are awaiting you. So if you’re on the lookout for a free asset to make your project complete — no matter if it’s a free font, SVG icons, or code plugins —, the ByPeople community might have something for you.
One of the biggest repositories of free assets, ByPeople features over 10,000 hand-curated downloadable goodies: free tools, icons, fonts, themes, templates, plugins, code snippets, and much more that could come in handy. A treasure chest. (cm)
There’s hardly a project that gets by without icons. However, icons can also be misinterpreted and users who rely on assistive technologies will miss their meaning if there’s no text fallback in place.
Alt texts are crucial for visually impaired users, but not all developers and content creators take the time to caption their images. Artificial intelligence could close the gap, as the Chrome extension Auto Alt Text shows. Once added to your browser, it will generate a descriptive caption when you right-click an image.
Sarah Drasner also tinkered with the idea of improving accessibility with the help of machine learning, especially social media posts that typically don’t have a way to enter alt text. Her approach is powered by Azure’s Computer Vision API and provides a dynamically generated alt text for images you upload. Check out her Codepen to see it in action. (cm)
The GOV.UK site is often mentioned as an example of stellar information architecture. But what makes it so successful? The design team recently gave a behind-the-scenes look at how they organize their content.
The key to making things easier to find is “step by step navigation” which is designed around user needs instead of the structure of the government. A fantastic example of how complex information can be turned into intuitive user journeys at scale. (cm)
To help you create layouts that aren’t only visually appealing but also shine on a conceptual basis, Ben Robertson summarized what you need to consider to get your layouts ready for screen readers. The foundation: well-structured HTML markup, thoughtful use of ARIA roles, and careful labeling of site sections using ARIA labels. Speaking of HTML markup: Bruce Lawson also shared a great guide on the practical value of semantic HTML. (cm)
Drag and drop is an intuitive way of rearranging things, and with a bit of extra polishing you can make a basic drag-and-drop interaction stand out from the crowd. Just like the folks at Atlassian did. Their accessible drag and drop list react-beautiful-dnd makes the drag and drop behavior feel more natural and gives users the impression that they are moving physical objects around.
Another drag-and-drop solution worth checking out comes from Harris Schneiderman. His list reorder module Dragon Drop is keyboard and assistive technology accessible thanks to live regions. (cm)
We all know how time-consuming it can be to properly remove the background from a photo, especially when there are a lot of fine details involved. Luckily, AI once again caters for a much faster and simpler solution: The browser-based tool remove.bg automatically detects the foreground layers of your image and separates them from the background. Please note that the tool is trained to detect persons as foreground and everything else as background, so there needs to be at least one person in your image. An impressive little timesaver. (cm)
While we added our newest book Form Design Patterns to the Smashing Membership only a few weeks ago, we are already working on two new titles which we’ll release early this year! All future eBooks are included in the Smashing Membership.
Coming up next:
- 📺 Smashing TV: “Internationalisation Is A Piece Of Cake” with Eli Schütze Ramírez. (Jan 8, 11:00 AM Eastern)
We are most grateful for your support which allows us to bring you great content, pay all our authors fairly, and reduce advertising on the site. (You could become a Member, too! 😉)
Every second Tuesday, we send a newsletter with useful techniques on front-end and UX. Subscribe and get Smart Interface Design Checklists PDF in your inbox.
You can always unsubscribe with just one click.
- SmashingConf Live, Speed Profiler, CSS and SVG
- Custom CSS Cascades, Focus Blocks and CORS
- React, Accessible Components, Terminal, Video Player
- BEM, DOM Scripting, SVG Masks, Vintage Games, Posters
- Design Checklists, Passwords, Dropdowns and Tooltips
- Accessible Inputs, Console, Free Illustrations, SVG
- Sketch Plugins, WebGL, Performance Testing, Patterns
- Geometric Shapes, Service Workers, Ethics and UX Strategies
- Browser Default Styles, Sketchy Illustrations and Tiny Helpers
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.