You know, we use ad-blockers as well. We gotta keep those servers running though.
Did you know that we publish useful books and run
friendly conferences — crafted for pros like
yourself? E.g. our upcoming SmashingConf Barcelona,
dedicated to smart front-end techniques and design patterns.
Editor’s Note: Welcome to this month’s web development update. Anselm has summarized the most important happenings in the web community that have taken place over the past few weeks in one handy list for you. Enjoy!
As web developers, we’re working in a very diverse environment: We have countless options to specialize in, but it’s impossible to keep up with everything. This week I read an article from a developer who realized that even though he has been building stuff for the web for over seven years, sometimes he just doesn’t understand what’s going on: “I’m slamming my keyboard in frustration as another mysterious error appears in my build script,” he writes.
Enter service workers. Through service workers, all framework and application code to output the HTML view can be precached in the browser, thus speeding up both the first meaningful paint and the time to interact. In this article, I will share my experience with implementing service workers for PoP, an SPA website that runs on WordPress, with the goal of speeding up the loading time and providing offline-first capabilities. Read more...
It’s ready, and it’s shipping. We're very proud to release a brand new Smashing book: “Design Systems” by Alla Kholmatova's — our new practical guide to creating effective design languages for digital products. The book isn’t about tooling; it’s about how to set up a shared language that would help teams produce visual output that consistently renders designer’s intent. Get the book now.
Throughout this book, Alla Kholmatova will share an approach and the key qualities of a well-functioning, enduring design system. It's based on Alla's experiences, case-studies from AirBnB, Atlassian, Eurostar, TED, and Sipgate, plus 18 months of endless interviews — all attempting to figure out what works and what doesn't work in real-life products. It may not answer every question, but it will help you figure out just the right strategy for establishing and evolving a design system in your organization.
Editor's Note: We’ve been closely working with Maya on this article, and we’re happy to see the final result now being published on 18F. We highly encourage more teams to share the lessons they learned when building design systems or pattern libraries, and we’re always happy to support them in writing, editing and shaping that article. This post is a re-post of Maya’s final article.
Today, there are nearly 30,000 U.S. federal websites with almost no consistency between them. Between the hundreds of thousands of government employees working in technology, there’s nothing in common with how these websites are built or maintained.
CSS Grid is becoming the new layout standard for the web, and we are all still experimenting with what we can achieve with it. Some folks assume that CSS Grid is just a replacement for table layouts or Flexbox — but that's simply not true. Some also think that they can use CSS Grid to replicate more advanced print layouts, which brings us all closer to what's possible. Obviously print isn't web, but we can experiment with some of the techniques from print on the web, too.
One of the main reasons behind the idea of the CSS Grid Challenge was to have some starting points for layouts, and show what can be achieved with CSS Grids today. Well, we received some many great submissions that it was really hard to choose the one winner — there are so many submissions who deserve to win first place.
If you’re into wristwatches, like me, and are also a fan of the Sketch app (or just want to get better at it), then this is the tutorial for you. In it, you will learn how to create a very realistic and detailed vector illustration of a watch using basic shapes, layer styles and cool Sketch functions such as “Rotate Copies” and “Make Grid.”
You'll learn how to apply multiple shadows and how to use gradients, and you will see how objects can be rotated and duplicated in special ways. No bitmap images will be used, which means you will be able to easily adapt the final image to different sizes and resolutions.
As web design focuses more and more on good user experience, designers need to create the most usable and attractive websites possible. Carefully applied minimalist principles can help designers make attractive and effective websites with fewer elements, simplifying and improving users’ interactions.
In this article, I will discuss some examples of minimalism in web design, things to consider when designing minimalist interfaces, and explain why sometimes "less is more". If you’d like to get more creative with your own designs, you can download and test Adobe XD, and get started right away.
Most days, your goal as a developer is to design, develop and program awesome software. However, part of the job is also finding new clients, and you don’t want to be caught off guard by unexpected legal documents that come up while you’re establishing new clients.
The most common legal document you will be asked to sign when working on a website or app is a non-disclosure agreement (NDA). If you’re not sure whether to sign an NDA as a developer, this article will guide you to make an educated decision.
Bright, colorful leaves, rainy days, Halloween. That’s October — at least if you’re living in the Northern hemisphere. To provide you with some fresh inspiration even when the weather is gray, artists and designers from across the globe once again challenged their creative skills to design beautiful, one-of-a-kind (and this time around also spooky) wallpapers for you to indulge in.
This monthly wallpapers mission has been going on for nine years already, and we are very thankful to everyone who has and still is contributing to it each month anew. The wallpapers in this collection all come in versions with and without a calendar for October 2017 and can be downloaded for free. Happy October!
In March this year, CSS Grid shipped into production versions of Chrome, Firefox and Safari within weeks of each other. It has been great to see how excited people are about finally being able to use it to solve real problems.
CSS Grid is such a different way of approaching layout that there are a number of common questions I am asked as people start to use the specification. This article aims to answer some of those, and will be one in a series of articles on Smashing Magazine about layouts.
What do UX designers do on a daily basis? A lot of things! UX professionals need to communicate design ideas and research findings to a range of audiences. They use deliverables (tangible records of work that has occurred) for that purpose.
I've created a list that contains the most common deliverables produced by UX designers as they craft great experiences for users. For better readability, I’ve combined the deliverables according to UX activities.