This newsletter issue was sent out to 227,600 recipients newsletter subscribers on Tuesday, July 4th 2017.
Editorial
When we think about style guides, we usually think about front-end style guides. Sidebar on the left, with all the patterns grouped and categorized, and components on the right, grouped into families, named and thoroughly documented. In fact, Walmart Style Guide is just one of the examples of how to get it right. We can only imagine how much time and hard work went into crafting it.
But what if we think beyond front-end components alone? There must be a good reason for everybody — literally everybody — in the team to use the web style guide. For example, if designers don’t see how the style guide is relevant for their work (after all, they have their own Sketch master files!), it will only remain relevant to a very limited scope of the team — mainly front-end developers.

For designers, seeing isolated front-end components is useful as a reference, but you can't start designing without knowing the context of how exactly a given component is used across the range of product's interfaces. As a result, major design decisions would be made outside of the style guide. Why? "Reusable components can be used in many different but similar ways. Seeing the component a lot leaves room for interpretation. This opens up the door for all kinds of disjointed experiences and makes the system harder to maintain."
That's why **connecting the components** by tagging them and providing actual interface examples can be useful. [Audi's new style guide](http://www.audi.com/ci/en/renewed-brand.html), for example, contains a set of examples for each component in use. AirBnB's [air/shots](https://airbnb.design/building-a-visual-language/) is a powerful search engine for design flows and components: You can choose components, languages and the preview format and size.
### [](#)3\. Automated Browser Testing As Easy As It Can Get Starting and running a functional web test with just one command line? Well, [TestCafe](https://devexpress.github.io/testcafe/) makes it possible. The tool uses Node.js to provide an end-to-end solution for testing web apps. And the best: It takes care of all stages — from starting browsers to running tests, gathering test results, and generating reports. No browser plugins are needed, the goodness works in all popular modern browsers right out of the box.






SmashingConf Freiburg, Germany (Sep 11–12)
- SmashingConf Freiburg 2017 Tickets, Sep 11–12
- Smart Responsive UX Design Patterns – Vitaly Friedman (September 10)
- Modular Design – Alla Kholmatova (September 13)
- Modern Front-End Workflow Bootcamp – Umar Hansa (September 13)
- Advanced CSS Layouts With Flexbox and CSS Grids – Rachel Andrew (September 13)
SmashingConf Barcelona, Spain (Oct 17–18)
- SmashingConf Barcelona 2017 Tickets, Oct 17–18
- Reaching For Particles On The Web: Modular Design – Alla Kholmatova (October 16)
- Lettering – Gemma O’Brien (October 16)
- Persuasive Design – Horace Dediu (October 16)
- New Front-End Adventures In Responsive Web Design – Vitaly Friedman (October 16)
- Concept, Create, And Sell! – Anton & Irene (October 19)
- Atomic Design: Process & Patterns – Brad Frost (October 19)
- How To Convince Clients And Colleagues The Right Way – Paul Boag (October 19)
- Advanced SVG Animation – Sarah Drasner (October 19)
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!
[](#)9. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
- Senior Front-End Developer in Amsterdam at Bolden (Amsterdam)
“We’re looking for a front-end developer who wants to make a big impact with his or her experience, collaborate with other talented colleagues and work on awesome projects (without working overtime).” - Designer at Landor (Cincinnati, Ohio)
“Landor is seeking a designer to explore and conceptualize design options and solutions that maintain Landor’s vision and creative beliefs – ‘great ideas expertly and beautifully crafted and delivered with rigor and flair.’ The designer will work in conjunction with creative directors, design directors or senior designers, with opportunity to participate in all phases of design, the design process, and push to find ‘big ideas’ for all projects.” - Senior Designer at Grow (Norfolk, VA)
“The senior designer plays a key role on our creative team by contributing to world-class digital experiences across web, mobile, and supporting integrated media. The successful candidate for this job will be skilled in turning high-level, conceptual feedback into polished designs, with meticulous attention to detail and an unbending desire for perfection.”
[](#)10. Smashing Highlights (From Our Archives)
- How To Deliver Exceptional Client Service
We often hear companies, including Web agencies, boast about how they provide exceptional client service. But how do they define exceptional? - The (Not So) Secret Powers Of The Mobile Browser
Apple taught us, “There’s an app for that.” And we believed it. Why wouldn’t we? But time has passed since 2009. Our mobile users have gotten more mature and are starting to weigh having space for new photos against installing your big fat e-commerce app. Meanwhile, mobile browsers have also improved. New APIs are being supported, and they will bring native app-like functionality to the mobile browser. - Where Are The World’s Best Open Device Labs?
Every developer knows that just because a website looks like and does what it’s meant to on the latest iPhone, doesn’t mean it will work across every mobile device. In this article, we’ll highlight some of the many open device labs out there — fantastic and helpful initiatives by the community that deserve support and attention.
[](#)11. Recent Articles On Smashing Magazine
Design Articles
Inspiration, Freebies, Misc.
- How To Make Use Of Weekly Design Meetings
- Left-Handed Brush Lettering: How To Get Started
- Starry Summer Nights, Unexplored Worlds, And… Ice Cream! (July 2017 Wallpapers)
- Free Icon Set: Happy 4th Of July (20 Icons, PNG, EPS, AI, SVG)
- Web Development Reading List #187: Webpack 3, Assisted Writing, And Automated Chrome Testing
- Meet “Design Systems”, A New Smashing Book (Pre-Release)