• Address: Responsive design ground rules
  • Author: Polypane
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: Pingren
  • Proofreader: Moonliujk, Chorer

Basic principles of responsive design

Creating responsive design is scary: it’s made up of many moving parts that often don’t align as you’d expect; You have to keep all the different viewports in mind when designing. By following these basic principles, you can create a more robust and predictable responsive design.

Principle #1: Keep viewports simple

When the standards for Viewport Meta Tags were first implemented, the basic knowledge was that you had to add values to prevent users from zooming, and set maximum and minimum screen sizes. It turns out that this is actually not user-friendly.

In fact, you only need to do two things: set the width to the device that displays your site, and ensure that the initial zoom is 1. Doing so means that 1 pixel in your CSS is equal to 1 device independent pixel, like this:

<meta name="viewport" content="width=device-width, initial-scale=1">
Copy the code

Principle #2: Move first

You’re developing your site on a big laptop or desktop monitor, and, more often than not, your clients care more about the desktop design of your site. So it might be natural to start with desktop design first. However, prioritizing mobile is actually easier and will leave you with less code.

If you develop mobile first, you will gradually increase the complexity of CSS as you develop. Your mobile view is usually much simpler and requires less CSS. The mobile view is usually always a single column and lacks many additional decorations and effects. After all, there’s room for them on a bigger screen. If your development is “mobile first,” as you add styles for larger and larger media queries, you are complementing the design.

If you develop the desktop first, you already have all the styles, and just to undo your advanced desktop styles, you need to write more CSS. As you write more CSS, if one of them is not written properly, you will have problems such as layout overflows or text size errors.

By moving first, you’ll avoid a lot of unnecessary CSS, making your CSS lighter and your site faster.

Principle #3: Design according to content

You can choose 320, 375, 768, and 1024 as your breakpoints. They correspond to the width of the real device. This is device-specific design. But as new devices become more popular (#375IsTheNew320), your design may not look so good on those new devices.

Stephen Hay, author of the Responsive Design Workflow, suggests that you start with a small screen, then “increase the width of the screen until it’s out of place. It’s time to add breakpoints!”

Focusing on content forces you to think of your site as a naturally flowing layout. You can’t just design for the width of a perfect pixel, because those widths don’t exist.

Rule of thumb: When you want a line width of around 70 characters, that’s roughly equal (depending on the font!) 36 to 40 em.

Principle #4: Use EM in media queries

Since the specific device width is no longer important, you should also change the pixel unit width breakpoint to the EM unit width. Your media queries are based on content. This way, your site will still look great even if the user makes the base font bigger/smaller or zooms the browser.

Tweak the rest of your design to make your site more robust.

Principle #5: Minimum or maximum width, just choose one

Reactive design implements a very complex system. When your media queries use minimum and maximum widths, or a mix of them, the complexity increases dramatically and it becomes harder to understand the system.

If all the media queries work “up” or “down” and your site doesn’t look like it should at a certain size, you’ll always know where to look for code. Writing CSS in a new media query will never affect the screen size you’ve already written. You just need to find out which media query to update your CSS from (or above).

Principle #6: Avoid fixed sizes

It may be tempting to set elements to a fixed size. After all, your favorite design handover tool may allow you to easily copy them. Fixed widths (or margins) can easily ruin your layout if you’re not careful.

Try to set the dimensions of elements to be relevant to their environment. Use percentages or viewport units. Instead of setting width and height, try setting min- and Max -. If you find that width is damaging the layout, a max-width:100% will work wonders.

Principle #7: Use modern layout techniques

Modern layout methods based on the above principle, such as Flexbox and Grid, are inherently flexible and can vary in size according to their environment. If you use these layout methods, you can achieve the same design with fewer media queries. Fewer media queries means fewer things for you to reason about, and your code is simpler.

At every-layout. dev you can (re) learn how to build common layouts using elastic boxes and grid layouts. It lists some common layouts and explains how to build them using modern techniques.

Principle #8: Reserve space for different font renderings

It’s tempting to create a breakpoint at an inappropriate line break. To make it “pixel perfect.” Of course, we know that the Web has never been “pixel perfect.”

If your breakpoint is too close to a readable newline, it may be available in your browser. There are different rendering methods in different browsers and operating systems. This means that a line of text can be a few pixels wider or narrower, ruining your design.

Try to be lenient with your media queries, using a few pixels to allow a little space for possible errors and prevent your design from changing dramatically.

Principle #9: Decide within the browser

To comply with these rules, it is not wise to create all breakpoints in the design tool. On the other hand, it’s hard to design an entire website inside the browser. So what’s the middle ground?

You can create designs in the design tool, as well as some rough and responsive versions. However, you can only decide to switch to another design when you are working within the browser. The Sketch board may be 750 px wide, but if you find that the layout already works well in the browser at 44 em (equivalent to 704 pixels), use 44 em in the CSS.

Principle #10: Try Polypane

With Polypane, it becomes natural to build websites and apps in a mobile-first, content-first way. Start with a small panel and design your smallest screen. Next, add a new panel and widen it until it “looks like the sky” as Stephen put it. Then check the width of the panel and use that EM value as your new breakpoint. Set the style and repeat until you’re done.

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.