Response Design: Tips for setting response points for responsive design

Article Description: you can easily find many ways to set response-style response points, but these outdated design methods are based on the mainstream screen size, the effect is not ideal. In fact, there is no "mainstream" screen size of the concept. Another mainstream approach is to set the response point when the layout is broken. This method sounds better. But there are still questions, how do we judge whether the cloth

You can easily find many ways to set response-style response points, but these outdated design methods are based on the mainstream screen size, the effect is not ideal. In fact, there is no "mainstream" screen size of the concept. Another mainstream approach is to set the response point when the layout is broken. This method sounds better. But there are still questions, how do we judge if the layout is broken? One reasonable answer is to define the response point according to the classical readability theory.

The views of celebrities

Robert Bringhurst that the 45-to-75 character lengths are best when the contents of a Single-column page are set to normal serif fonts and normal font sizes. Josef Müller-brockmann that if a line can hold 10 words, then this column is easy to read. There are many reasons that affect the actual number of characters or words, but this is a basic theory. If you start with a small screen and then you grow, the width of the main content may become wider than 75 characters or 10 words, and some changes will occur. Simply put, these are your response points.

A variety of factors determine the ideal size

Many factors determine the size of the ideal size. For example, the length of German is longer than English, which requires a wider position. You understand the right: you have to have different grids for international websites that require multiple languages. Such factors as font, font size, background contrast, line spacing, word spacing, type types, and so on, affect the length of lines of text.

The designer's self-awareness and experience have a great impact on size judgments. You can easily determine the length of 75 to 90 characters is ideal. But I am not a designer, nor a typesetting, so I can only judge according to the theoretical knowledge of the book. Of course, people who know what they're doing can completely conceive of their own theory.

I made this international size slider to let you know how wide a bar is. This gadget seems to be just changing the voice and font, but you'll find that these two variations can have extreme effects. Just use German or polish to compare with English, or in more detail, German is set to Verdana font and English is set to Georgia comparison. The difference is huge: The 10 German words set to Verdana are 38.5ems wide, but the 10 English words Georgia are only 22ems wide. In many default browser settings, this will be the 616px to 352px Gap. You can see two simple factors that have a huge effect on the grid.

The reasonable size is very important for an article. I know that the Internet is not just articles. You can also use Web applications that have very little text descriptions. But it is also a good idea to consider the dimensions first when determining the response point.

Example description

Because it's just an example, I'm using a simple blog post. It is an article with clear structure but simple content, and contains some common semantic elements. These elements are not sufficient to determine the response point, but will give us some help. Typesetting is a reasonable starting point. I ignored the head and logo, and focused on the content first.

Of course, if you open this article in the browser that has no style, you will find it very ugly. It does not have any styles except those that the browser defaults to bring. The article is as wide as the browser window and feels too wide to look on the desktop browser. It's like the Web page you see on IE6--it's easy to read but bad style.

After adding some basic typography styles and Max-width properties, this article looks a lot better right now. This page can now be used as a starting point for defining different response grids. This single-column layout may need to be adjusted on a small screen, adding a few columns to the larger screen, whether for better layout or for more information, such as navigation or sidebar.

Reasonable response Point

I never learned maths before I graduated from high school, so I used a very simple grid. Smart people can borrow the same ideas but use more complex grid systems. This chapter mainly defines the response point; so it's up to you to decide.

Small screen

Let me start with the small screen. Oliver Reichenstein theorem, is a theory I like very much, its font settings are not based on screen size, it is based on the distance between the human eye and equipment. We tend to take the phone closer to the head than the computer, so we need a smaller font.

Another Robert Bringhurst theorem, as explained above, should not be less than 45 characters in ideal size. In our example, you can use the Georgia font of the 16px font as the default font, which makes the word look a little bit smaller. Both theories are good, and they all tell us to reduce the font size on a small screen. So, the code we need to write on a small screen phone is as follows:

This shows that when the dimension is less than 45 characters, the small font size is used. I also reduced the internal margins on both sides of the page so that the main content has more space to display. Take a look at the example below.

Large screen

Sometimes a single column is enough. Content-driven Web sites like blogs, a single column is the ideal layout. However, multiple-column layouts can be very good on large screens in many cases. Sometimes you may want to display navigation, or some useful widgets. You're going to want to put these things next to the content area.

We can also do some things by ourselves. If there is room for an extra column, we can design our own article layout. I added a column on the left with a width of 33%, and the title and the first paragraph of the article filled the area. Other elements such as quotations and pictures can also be filled in this area.

The code here is a bit complicated. This writing structure is not the only or the most mainstream method. But that's what I did.

When the screen width exceeds 34ems (the content is wide 30ems, the outer margin is wide 4ems), the maximum width of the page is 51ems:34+ (34÷2). Now the article occupies 2/3 of the entire width, and the new column on the left is 1/3 width. The contents of the H1 and P elements on the right side of it should set a negative outer margin value of 50% of the content width. That's why I always blame myself for not studying maths well!

Larger screen

We can add a third column, column fourth, column five. It depends on what we have. We can use the corresponding space to show some pictures and related content. It all depends on your own design. In my example, we can put footnotes to the right of the content. Don't laugh at me. I'm not a visual designer. Let's look at the code:

Now the article is 50% wide and the outer margin of the left and right sides is 25% wide. The margin footnote is offset to the right 50% distance. A footnote width of 50% minus 2em will look better. The code for P and H1 labels does not change. Note that the Calc attribute is not supported by all browsers, so we have to leave a little behind. So the code is as follows:

I also know that not all prefixes are useful, but I recommend that you write them all. If you don't want to do this, it is recommended that you remember which browser supports CSS properties and whether you need to prefix them. It is very useful to understand the hierarchical relationship correctly. Of course, it has to be a good row. I can see clearly how my style sheet produces beautiful styles.

Now we have a responsive design site, based on the size of the text and the size of the screen. Response points are based on logical operations rather than random factors such as the current popularity of device screen sizes. This design is good for future modifications and browser users. Because all the element sizes are set based on the size of the text, they can cater to the preferences of the users who visit your site. The layout is not corrupted when the text size is transformed.

Technical aspects

When we started the response design a few years ago, we first created a PC Web site and then added a media query to rewrite the style for a small screen. We find that this is not the right approach. Now we all know that the best way to create CSS is to start with small size screens first. After all, it's easy to get bigger--trees grow, babies grow big--and it's hard to shrink. Have you ever tried to streamline a car? A certain degree is possible, but still very hard.

In most cases, it is logical to start from a small size screen. When it comes to making things bigger, we just need to add some media queries to the large size screen and then adjust the layout. But I don't think this is really about the small screen, but the default state.

Precedence default setting

The first thing we need to confirm is not necessarily the style of the small screen, but the default setting: The style of browsing the site everywhere, regardless of the size of the screen. These styles include the relationship between the font size, white, and branding style such as borders and backgrounds. Since these styles are used by each terminal, they should not be placed in a media query. Content that needs to be defined in a media query should be an exception to the underlying style (such as a smaller font) or a supplement (such as a grid).

This means that we use media queries only when a particular element is showing a difference on a small screen. Think of this as a lot of things: headers, navigation, and other complex elements are often fundamentally different on small screens. As I have cited, it is correct to place the code of these elements in a media query because it is an exception to the default settings.

Detail aspects

The above example is very basic, I did not explain too much detail. There are two points that are vital, so I'm adding here. One is about the length unit EMS in the media query, and the other is the response point.

Response Point Range

There have been some discussions about the term "response point" recently. Mark Boulton and Ben Callahan think we should call it the "optimization point," while Jeremy Keith hesitates between the response point and the "Adjustment point". In this section, I will focus on the response point-the change in layout as the content requires more or less space to be displayed. Now let me introduce another term: Response point range.

We call those media queries that change the layout as "response points." We tend to take these response points as a direct change: When a layout reaches its maximum width, we immediately switch to the next layout display. It is better to keep the previous layout and add some white leaves before converting.

For example, a conversion between a column and a two-column layout causes a very small main bar to be displayed. As I said before, we can keep it for a little while instead of converting it immediately when the content reaches its maximum width. It's definitely not going to spoil the layout of a very simple trick.

Length unit EMS in media query

It's a strange thing to use EMS units in media inquiries. You might think they should be in response to the font size specified in the CSS, but that's not the case. They respond to the font size of the browser used by the visitor. If you think about it, it's a reasonable thing to do. If they respond to the font size in CSS, you can disable the media query that increases the font size. This code may fall into a dead loop:

If the media query responds to the font size defined in this style sheet, what happens when we slowly increase the width of the browser? As long as the screen appears to be more than 20ems wide, the font will enlarge twice times immediately. This means that the page width is now 10ems, and the browser should ignore the media query. This will cause this small font size to trigger the media query again immediately. This will fall into the cycle of death.

This approach is not only reasonable from a technical standpoint, but also reasonable from a user's point of view: If the user wants a larger font size, the layout should be optimized in response to the font size. And that's exactly what we've been doing.

At the same time, for people like me, it's really a big problem, and we should have noticed in high school that the EMS used in the media query should be used in a completely different size than the one used in the code. This is so complicated. If you want to learn more, be sure to read Lyza Gardner's classic article on the subject, "the huge role of EMS unit: Let the media query scale!" ”

The thing that really bothers me is that we need a dummy tool to estimate the number of characters in a row. WebKit is currently implemented to add "character ch" to the build schedule; it may take a while for us to use it freely. One character is actually using the width of 0 in the font. This sounds a very useful response design, but I'm not sure how it will work in a media query. We wait and see.

Summarize

Ideally, different layouts for various screen sizes should be defined separately from the content. Of course there are situations where other elements of the page, such as banner, define the width of the content directly. Even in this case, the readability theory helps; you can add and subtract a font to keep the page in a perfectly wide boundary. Just don't make the words too small--after all, people still want to read them.

Fortunately, in most cases, traditional typography can help you determine the correct response point for a responsive site. You can even create different layouts based on different languages. This may be a good idea when you're working on a large, international site.

Most importantly, both now and in the future, use the theory of this chapter to better design your site for a variety of different screen sizes. The case I have listed is a very simple grid, but with more complex grids, this theory can help create more reasonable and exciting websites.