November 14, 2014 at 14:589 basic principles of responsive web design
- Transfer
Responsive design - a great solution to the problem of correctly displaying the site on different screens. However, it is often difficult for beginners to understand the basics, learning only from books / articles. Every day there are more and more different devices having different screen sizes, so the creation of a design in pixels and only for desktop computers / smartphones is a thing of the past. That is why it is now worthwhile to study the principles of responsive design - a design that combines adaptability and rubber (if you are not already familiar with adaptive design, then this article will be a good choice to start studying).
Responsive vs Responsive Web Design
It may seem like the same thing. However, both of these types of design complement each other and are suitable for each task.
Flow
When the screen size decreases, the content of the page begins to occupy more height, and the elements begin to shift down. This behavior is called threading . This can be difficult to understand if you used fixed sizes of elements before. However, when you start using the stream, you will understand how it works.
Relative Units
The page view area can be a monitor, a mobile screen, or anything else. The pixel density on different screens is also different, so we need flexible units of measurement that work everywhere. Responsive design - this is the case when relative units of measure like percent become really useful. With the help of percentages, we can set the block width to 50%, and on any device it will occupy only half the screen.
Breakpoints
Control points allow you to change the location of blocks on a page only if you use a screen with a certain size. For example, on desktop computers the site will have three columns, and on mobile computers - only one. How you set the breakpoints depends on the behavior of the content. If the content of the page is “creeping”, then you should definitely add a breakpoint. However, control points should be used with caution - you may get confused.
Max and min values
Content that spans the entire width of the screen is great if it is displayed on a mobile. And if you open the page through your TV? It is unlikely that the seen picture will please you. Therefore, a sensible solution would be to use minimum and maximum values. For example, if you set the block properties to `width: 100%` and `
Nested Objects
Do you remember
position: relative? If you have many elements depending on the location of other elements, then it will be difficult to control them. It is much simpler and more correct to wrap these elements in one container. By the way, this is the case when static units like pixels will help you. They are useful for content that you do not want to adapt to the screen size - for example, it can be a logo or a button.
Desktop or mobile first
From the technical side there are no differences: you can write basic markup for mobile, and set key points for desktops (mobile first) and vice versa. Often people do not know which approach to take. Think carefully and choose the approach that suits you.
Web fonts vs system fonts
Want to use the cool looking Futura or Didot headset on your website? Use
Raster vs vector images
Does your image have many small details and impressive effects? If yes, then use the raster format. Otherwise, use a vector format. For bitmap images, use the jpg, png or gif formats; for vector, SVG and icon fonts are the best choice . Each of the formats has its advantages and disadvantages. In any case, remember the size of the images - not a single image should go online without being optimized (compressed). Vector images are often spared, but they are not supported by older browsers. It is also worth remembering that if a vector image contains many details, then it can weigh more than a raster image.
