The principles of responsive web design

The principles of responsive web design

The principles of responsive web design


The web design is responsive to the best solutions for the multiple display screens, but the size of the static page others may cause some problems printer so there are some of the basic principles of responsive web design is more important to identify particular) layouts (

1-The RESPONDER's design (Responsive) VS adaptive design (Adaptive)

May prove to you from the outset that this design methods are similar, but all of the approaches complement each other as the content is what determines the whichever is appropriate for each site.

2-Taking into account the flow (The flow)

When the content of the site the small screen size smaller than take more space vertically pushing anything beneath it down and this is what is called the flow (Flow), but it may be difficult to absorb, if you are designed using the pixels (pixels or points).

3-The relative units (Relative units)

To achieve responsive design should be on the units that are flexible to work in every place, because the intensity of the pixels may also differ from a computer or Mobil so use percentages is the best and most effective way so we'd prefer the design takes half under the vision (always take 50% of the screen)

4-Score Park (Breakpoints)

The park points allow some of the changes in some of the previous points and selected stops by the content which allows you to change the characteristics of the CSS from one to the other

5-Maximum and minimum values (Max & Min values)

Is a minimum and maximum to display the screen (for example, the identification of 100% of the content is 2000 px ), which makes the content stretch commensurate with the display without amendments this range, because usually extends the full width of the screen content is incorrect so the status of these values is the refrain of such mistakes

6-The objects Nested objects)

It is often difficult to control overlapping beings that is one of the ways to facilitate the understanding and arrange these elements are mobilized (wrapping) Sealable container (container), and the possibility of the pixels to assist in the expansion of some contents such as notifications.

7-Mobile (Mobile) or TB (Desktop) first:

Often do not find a lot of difference in the way the PROGRAMRS to start the project from where started the screen, big or small, technically the beginning of small screen first usually adds some of the obstacles that give you some guidance and help you in the decision but there are some starts compressed that one, the decision here is the designer.

8-Web lines for the lines of the system (Web Fonts vs System fonts)

Web lines are often given the form of the best of the page, but it increase the loading of the site as more number of lines increase page loading time to reverse the lines of the system (system fonts) High-speed internet access in the soaring bill loading and User Device in advance, even if it did not exist the default line is used.

9-Bitmaps for heading (Bitmap images vs Vectors)

Preferred the use of the raster (bitmap) such as (jpg, png, and gif (when using images with details or the many effects of Images Details preferred the use of the raster (vectors), such as the (SVG) or (icon font), each of them has its own advantages and disadvantages. It must be lifted without improved image (optimization) to take into account its size and the small size of the pictures, but there are some ancient sites are not supported by the