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.
When first learning how to use Grid Layout, you might begin by addressing positions on the grid by their line number. This requires that you keep track of where various lines are on the grid, and also be aware of the fact the line numbers reverse if your site is displayed for a right-to-left language.
Built on top of this system of lines, however, are methods that enable the naming of lines and even grid areas. Using these methods enables easier placement of items by name rather than number, but also brings additional possibilities when creating systems for layout. In this article, I’ll take an in-depth look at the various ways to name lines and areas in CSS Grid Layout, and some of the interesting possibilities this creates.
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.
You know that user feedback is crucial — after all, your users will decide whether your app succeeds or not — but how do you know whether users are being fair and objective in their feedback?
We can tell you: They won’t be. All of your users will be giving you biased feedback. They can’t help it.
With so many JavaScript frameworks around, single-page application (SPA) websites seem to be all the rage nowadays. However, an SPA architecture has the drawback of having a slower first-page load than a server-based application, because all of the JavaScript templates used to render the HTML view must be downloaded before the required view can be generated.
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.
