9 basic principles of responsive Web design, responding to 9 items of web.cn

9 basic principles of responsive Web design, responding to 9 items of web.cn

Responsive web design is a good solution for solving multi-type screen problems, but from the perspective of printing, there are many difficulties. There are no fixed page sizes, no millimeters or inches, and no physical limitations. As more and more gadgets are available for building websites, the pixel Design Board has become a historical topic for desktop and mobile terminals. So now let's explain how to use the basic principles of responsive web design, rather than resisting a smooth web experience. For the sake of simplicity, we will focus on layout (of course, responsive design is much more than that. If you want to learn more, click here ).

Responsive design vs adaptive design 

It seems identical, but it is not. These two design methods complement each other, so there is no right or wrong. The specific situation depends on the content.

 

Content stream 

As the size of the screen becomes smaller and smaller, the content occupies more and more vertical space. That is to say, the content will extend to the bottom, which is called the content stream. If you are used to designing with pixels and points, it may be hard to grasp. But it doesn't matter. It's easy to understand when you get used to it.

 

Relative unit 

Your design may be desktop, mobile screen, or any screen between the two. Pixel density varies with each other, so we need to use units that are flexible and adaptive to various situations. In this case, percentages and other relative units will be used. When the percentage is used, we say that width 50% represents half of the screen size (or the area, that is, the size of the window opened in the browser.

 

Breakpoint 

The breakpoint can make the page layout deform at the preset point, that is, three columns are displayed on the desktop, and only one column is displayed on the mobile device. Most CSS attributes can be deformed between breakpoints. The position of the breakpoint is usually determined by the content. For example, if you want to wrap a line, you may need to add a breakpoint. However, exercise caution when using breakpoints-if you do not know the logical relationship between the content, it is easy to confuse it.

 

Maximum and minimum values 

Sometimes the content is full of the screen width (for example, on a mobile device), but it seems unreasonable if the same content is full on the TV screen. This is why the Maximum/minimum values are required. For example, if the width is 100% and the maximum width is 1000px, the content will fill the screen with a width not greater than 1000px.

 

Nested object 

Do you still remember the relative position? If many elements are closely related to each other, it will be difficult to control them. Therefore, placing elements in a container makes them easy to understand and clear. In this case, static units such as pixels are used. Static unit is very useful for logo, button, and other content that does not need to be expanded.

 

Mobile or desktop preferred 

Strictly speaking, the transition from a small screen to a large screen (mobile first) or from a large screen to a small screen (desktop first) is not much different. However, starting from the mobile end can bring you some additional restrictions to help you make decisions. Generally, you can start from two aspects at the same time, so you should choose the method that best suits you.

 

Web font vs. system font 

Do you want your website to have a cool Futura or Didot effect? That is, use the web font. Although web Fonts look cool, remember that all these fonts need to be downloaded by users. The more words they have, the longer the page loading time they take. On the other hand, the system font loading speed is much faster (provided that the user has it on the local machine), but it is too common.

 

Bitmap vs vector chart 

Does your icon have many details and apply a lot of gorgeous effects? If yes, use a bitmap. If not, use a vector chart. For bitmap, use jpg, png, or gif. For vector images, it is best to use SVG or icon fonts. Each has its own advantages and disadvantages. But keep in mind the Icon size. images that have not been optimized cannot be uploaded to the Internet. On the other hand, vector images are usually relatively small, but some older browsers may not support vector images. Also, if the icon has many curves, it may be larger than the bitmap, so it is wise to choose between them.