O'Reilly logo

The Sketch Handbook by Smashing Magazine, Christian Krammer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 8Going Responsive

A modern website doesn’t consist of a single width alone. With responsive web design in mind, you need to create multiple breakpoints at which the layout can adapt to different screen widths. While it’s not feasible to set up a separate artboard for each responsive breakpoint in Sketch, you might still want to see how the adaptations will look like at a few different sizes. To understand this workflow, we will create two more artboards: one for a width of 1024 pixels, one for 1920 pixels.

Designing With Constraints

Let’s start with the first one. Duplicate the current artboard, resize it to a width of “1024” in the inspector, and rename it to something like “Article Medium.” We also need to update the layout grid (View ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required