9 Basic principles of responsive web design

Create a smooth and responsive experience! Today @ Network Qin UEC students from abroad to share a good article on the response, with the help of the dynamic diagram lists the traditional design and response design differences, intuitive, easy to understand not to say, mentioned 9 principles are very practical, it is worth learning yo.

Responsive web Design is a good solution for multiple types of screen problems, but from a printing point of view, it has a lot of difficulties. There is no fixed page size, no millimeters or inches, no physical restrictions, people feel the start. With the growing number of gadgets available to build a Web site, the pixel KB limited to the desktop and mobile end has become history. So let's now explain how to implement the basic principles of responsive web design instead of resisting the smooth web experience. For simplicity's sake, we'll focus on layouts (of course, responsive design goes far beyond this, and if you want to learn more, you can come here: bradfrost.com).

Responsive design vs Adaptive design

Looks the same but it's not. The two designs complement each other, so there is no right or wrong point. The specific situation depends on the content.

Content Flow

As the size of the screen becomes smaller, the amount of vertical space in the content becomes more and more, that is, the content is stretched downward, which is called content flow. If you're used to designing with pixels and dots, you might find this a bit tricky to grasp. But it doesn't matter, the habit is very good to understand.

Relative units

Your design object may be a desktop desktop, or it may be a mobile end screen or any type of screen between the two. Pixel densities are also different, so we need to use flexible, adaptable units that can accommodate a variety of situations. So in this case, the percentage of relative units will be useful. When using percentages, we say that width 50% means half the width of the screen (or the viewport, which is the size of the Open browser window).

Breakpoint

Breakpoints Allow page layouts to deform at preset points, that is, display 3 columns on a desktop desktop and only 1 columns on a mobile device. Most CSS properties can be distorted between breakpoints. The location where the breakpoint is placed is usually determined by the content. For example, if you want to wrap a sentence, you may need to add a breakpoint. But breakpoints need to be used with caution--if it's confusing the logical relationship between the contents, it's easy to get into a mess.

Maximum and minimum values

Sometimes it's good to have the entire screen width (for example, on a mobile device), but if the same content is full on the TV screen, it doesn't seem to make sense. That's why we have the maximum/minimum value. For example, if the width is 100% and the maximum width is 1000px, the content will fill the screen with a width of not more than 1000px.

Nested objects

Do you remember the relative position? If a lot of elements are closely related to each other, then it will be difficult to control. Therefore, putting the elements into the container will make them better understood and concise and crisp. In this case, you need to use static units such as pixels. Static units are useful for logos and buttons that do not need to be expanded.

Priority of mobile or desktop desktop

Strictly speaking, the transition from a small screen to a large screen (move first), or from a large screen to a small screen (Desktop desktop priority) is not very different. However, starting from the mobile side can give you some extra restrictions to help you make decisions. Usually people start at the same time in two ways, so you still have to see which way is best for you.

Web font vs System font

Want to have a cool Futura or Didot effect on your site? That's using Web fonts. Although Web fonts look cool, you should keep in mind that these fonts require a user to download, the more words, the longer the user will load the page. On the other hand, the system font loading speed is much faster (the premise is the user this machine has), but too common.

Bitmap vs Vector graph

Does your icon have a lot of details and a lot of gorgeous effects? If so, use a bitmap. If not, consider using vector graphs. If it is a bitmap, use JPG, PNG, or GIF. Vector graphics are best used with SVG or icon fonts. Each has its own pros and cons. But you have to keep in mind the icon size--the images that are not optimized are not uploaded to the web. Vector graphs, on the other hand, are usually small, although some older browsers may not support vector graphics. Also, if the icon has a lot of curves, it may be larger than the bitmap, so it is wise to choose.