9 Basic principles of responsive web design

Responsive vs self-adapting web design

They seem to be the same, but that is not the case. These two methods complement each other, and do not say which is the right one is wrong and the content determines everything.

Content Flow

As the screen size becomes smaller, the content will occupy more vertical space, and the content below will be pushed down, which is called flow. This can be tricky if you're designing with pixels and pounds, but when you get used to it, it makes sense.

Relative units

The canvas size can be either desktop, mobile, or any size between them. Pixel density can also vary, so we need a flexible unit that can be used on various screens. This is the time when relative units (such as percentages) come in handy. So 50% the width of the setting also means that it takes up half of the screen (or view, which is the size of the Open browser window).

Breakpoint

Breakpoints allow the layout to change at a predefined point. For example, there are columns on the desktop screen 3 , but only one column on mobile. Most CSS properties can be changed depending on the breakpoint. Usually you set breakpoints based on specific content. If a sentence exceeds the screen length, you may need to add a breakpoint to it. But using breakpoints is a caution-it can quickly lead to confusion when it is difficult to understand what content will affect what content.

Maximum value and minimum value

Sometimes, if the content occupies the entire width of the screen is good, such as on the mobile device. But if it's on a TV screen, the same content, which occupies the entire width of your screen, is usually a little meaningless. This is the Min/Max time for the value to work. For example, set width to 100% , and then, the max-width 1000px content fills the screen, but not over 1000px .

Nested objects

Do you remember the relative position? It is difficult to control the position of many elements depending on other elements, so using containers to wrap elements can make it easier to understand and tidy. This is the time when a static unit (such as a pixel) works. They are useful for content that you do not want to modularize (such as logos or buttons).

Mobile first or Desktop first

Technically, if a project starts from a smaller screen and becomes a larger screen (mobile first), or vice versa (desktop first), there is not much difference. However, it adds additional restrictions that can help you decide whether to start with mobile first. People usually write at the end of each other at the beginning, so it's better to see which one is going to work.

Web Fonts vs System fonts

Want to have cool Futura or Didot fonts on your website? You can use Web fonts! Although they look great, remember that the more fonts you put in, the longer you'll be loading the page. On the other hand, loading a system font is fast as lightning, but when the user does not have this set of fonts locally, it returns the default font.

Bitmap vs Vector graph

Have you ever thought of adding a lot of detail and fancy effects to the icons? If you think about it, it's better to use a bitmap. If not, you might consider using a vector diagram. For bitmaps, the images used are jpg , png or formatted, gif and for vectors, the best choice is SVG or icon font. Each has a corresponding advantage and disadvantage. But the size of the picture also needs to be taken seriously-the picture on the page must be optimized. On the other hand, vectors are usually small, but some older browsers do not support them. In addition, if it has a lot of curves, it may also be heavier than the bitmap. So, choose carefully.

Http://www.w3cplus.com/responsive/9-basic-principles-of-responsive-web-design.html

9 Basic principles of responsive web design (turn)