Who doesn’t like dense color-coded spreadsheets? Not because they look particularly exciting or attractive, but because they bring structure, clarity, and insight into an otherwise untamed realm of data. A good spreadsheet can serve as a strong foundation for informed discussions and sound decisions, and it shows both the big and the small picture of the surveyed landscape.
For example, a spreadsheet can serve as a way to compare features, evaluate bottlenecks and discover culprits. Harry Roberts has already explained how to audit third-parties and among other things, released a Third-Party Audit Spreadsheet. A great little template to use when working on performance optimization.
Talking of spreadsheets: we have released a monthly expenses template for digital workers a while back, to help you track your expenses that add up quickly. In his series of articles (part 1 and part 2), George Margaritis explains the design process for onboarding and filtering, powered by almighty Google Spreadsheets.
Thank you for your trust and ongoing support, everybody — you are smashing inded! Ah, and make sure to stay hydrated (or warm, depending on where you live in this wonderful world of ours!) these days.
— Vitaly (@smashingmag)
Table of Contents
- State Of Mobile 2018
- SmashingConf NYC Is Coming!
- React Native At Airbnb
- Why Design Systems Fail
- Drawing Images With CSS Gradients
- Building Carousels With Obsolete HTML
- Upcoming In Smashing Membership
- Upcoming Workshops With Vitaly Friedman
The mobile landscape is continuously evolving and bringing forth new opportunities for mobile users. In his 2h-long presentation, Luke Wroblewski walks us through not only some market fundamentals and statistics, but also how to find the core values of your app and to increase sign-up conversions and make app-onboarding more convenient. The latter part starts at 38:30.
You can also download Luke’s slides (102 MB) which he kindly shared publicly. That’s a goldmine of knowledge — and kudos to Luke for his fantastic research! (cm)
Booo-yah! The hunt for shiny front-end and UX treasures has begun! For our fifth SmashingConf New York, taking place on October 23–24 in NYC, our speakers will cover all kinds of failures and the decisions they had to make to turn it all around. They’ll share the lessons they learned and techniques that worked well.
Early-bird tickets to SmashingConf New York 2018 are now available — grab yours before it’s gone!
We’ll look into all those shiny new things in front-end and design, from HTTP/2 Performance patterns to Progressive Web Apps, Vue.js, Webpack — all the way to Design Workflow, DesignOps and Variable Fonts. With Monica Dinculescu, Dan Mall, Jason Grigsby, Sara Soueidan and many others. It will be a quite special event, and we’d love to see you there! You can also convince your boss (PDF) that it’s a good investment! Just sayin’ ;-) (vf)
In the past few years, mobile web usage has grown tremendously, and oftentimes mobile devices are the primary or only form of communication when away from home. To provide their users with a pleasant experience on the go, the Airbnb team decided to give React Native a try two years ago. And, well, what started out as an experiment has grown into one of the main pillars of Airbnb’s mobile startegy.
Now their engineering team published a five-part article series on the things they learned using React Native. What worked and what didn’t? What are the challenges that come with building a cross-platform mobile team? Where do they stand today? And how can native be made even better? Interesting insights guaranteed. (cm)
Everybody’s talking about design systems, but one aspect is often left out in the discussion: Why do some design systems fail? Una Kravets gave a talk at An Event Apart in Boston on the topic, and Jeremy Keith summarized it in a live blog. A good overview over building robust, easy-to-use design systems that get the buy-in they need to fully unfold their power. (cm)
Images that look as if they are SVGs drawn in Illustrator, but in reality thet are made right in the browser? If you search CodePen for “CSS images”, you’ll get a lot of cool examples of what they can look like. Now, Jon Kantnder explains how you can create CSS images yourself — only with backgrounds and minimal use of other properties.
Jon shows how you can order each background, draw parts of circles, rounded rectangles, and how to adjust gradient stops for smooth edges. If you love tinkering with code, then this is for you. But beware: There’s a lot of thinking outside the box and experiments involved to get the desired result. (cm)
Do you remember the
<marquee> element? Back in the days when websites were made up of
<table>s, it was popular to display moving bits of content — news or a welcome message, for example. Michael Weaver asked himself whether we could still use
<marquee> today, and came up with a clever idea indeed.
Have you ever heard of Tenori On? It’s a music synthesizer built by Yamaha that visualizes cool light patterns as it plays the synth melody. Monica Dinculescu now turned her fascination for the device into a little project that brings the Tenori fun to the browser. Its name: Tenori-Off.
8. 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 📺 “Static Site Generators” with Phil Hawksworth — July 10, 2018
- Smashing TV 📺 “From Good To Great Animation — Live!” with Val Head — July 24, 2018
We are really grateful for the kind support of our members! You can become one of us, as well. ;-)
9. Upcoming Workshops With Vitaly Friedman
🇩🇪 Freiburg, SmashingConf, Sept. 10 – 11, 2018
Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at firstname.lastname@example.org 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!
- Email, Design Teams, Regex and Compression
- CSS Linter, Regex, Performance, Accessible Components
- Free Fonts, CSS, Design Systems and SVG
- npm, Async CSS, Free SVG/EPS Icons
- Serverless, Gradients and Degreeless Design For Everyone
- State of CSS, Variable Fonts and Staying Focused
- Performance, Sketch and Animation Handbook
- Animation In React, CSS Sticky and Inclusive Design
- Business For Designers, CSS Experiments and Open-Source Illustrations
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.