RWD is the acronym for Responsive Web Design, one of the terms that are gaining more prominence in web development environments. The professionals who today have not mastered techniques to make the site responsive end up having numerous problems, since the current market is fully directed to it.
Sites that were tested only in different resolutions today are also tested directly on different devices, thus ensuring the ultimate in compatibility.
Within the RWD, three pillars govern the concept:
FLEXIBLE FOUNDATION
Previously, it was very common to see the skeleton of the layout working with absolute values in its elements. This practice used to expedit production, but the applications used to get completely plastered in particular resolution. Gradually, this concept was deconstructing and relative values were gaining more strength. The growing demand of the mobile market was the protagonist for this practice, then, to discontinue once and for all.
The RWD is based on the use of relative values for any element. Thus, it will be possible to adapt the layout to the viewport, so that there are no breakages.
In order that the flexible foundation concept to work, it is necessary that the entire layout is developed with values in percentage. Therefore, using the percentage calculation rule becomes routine for professionals who develop front-end.
Example:
#div {width: 100%; }
#div .col {width: 50%; }
In the example, the first div will use the total value of the viewport and will appear from one end to another; but the class “col” will occupy only 50% of the space of #div.
ADAPTABLE IMAGES
Like any layout switches to percentages, in RWD it is required that the images are also adapted to this same format. Due to its importance, the processing of the images has become one of the pillars of RWD.
For that images fit and track layout, you must include the following statement in CSS:
img {max-width: 100%}
It will ensure that the maximum image size is no more than 100% of the total screen size. Thus, any image can be resized, thereby ensuring that the layout is not compromised.
MEDIA CONSULTING
This item comes for the endless possibilities of using CSS3. For a RWD layout to work, you must access important information related to the screen and device that is being used for access. To perform this query, simply use the combined @media rule with the following parameters:
min-width, max-width, min-height, max-height, aspect ratio, and operators such as and, and not only.
Example:
@media screen and (max-width: 1024px) {
/ * styles * /
}
After you create the rule, just then implement the styles. Thus it becomes easier to control all the elements and possible compatibility problems that may arise. The media query is now one of the main concepts applied to RWD, as it is from there that compatibility itself becomes effective.
Check out more content on our blog!
Learn all about Scriptcase.
You might also like…