How to make a layout ready for all resolutions

Question

I know it sounds confusing, there is some way for a layout to be "prepared" to be responsively visible when the customer resizes the browser and to any device?

Answer 1

Some considerations:

Resolution

The first, and most obvious, rendering difference between devices you need to pay attention to is the resolution, usually measured in pixels - the number of points on each screen. As a simple rule, the more pixels the largest is the space for displaying elements.

But another factor must be taken into account:

Density

The density of a device is equal to the amount of pixels which can be represented in a given area. The most common measure is DPI (of the English Dots per inch, points per inch). My experience is that this is the point of greatest conflict when designing a web solution that serves both desktop and mobile views: Many phones today have higher resolutions than standard 1080p monitors.

The result is visually similar to resolution distortion, with the additional factor that your mobile device interface will be greatly reduced.

To help develop responsive websites, the CSS3 standard introduced the calls media queries, where different behaviors can be associated with different resolutions:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

To complicate your life, devices like iPad do not report changes in the size of viewport when rotated (changing mode Portrait for Landscape, for example.)

Viewport scaling

One of the outputs is to turn off the zoom factor on mobile devices caused by higher density, using the following meta tag:

<meta name="viewport" content="width=device-width">

This is an example of a page viewed without the meta viewport (left) and with the viewport set (right):

Answer 2

You need to use the media queries styled css to format your code according to the resolution used. Example of media queries:

@media screen and (min-width: 320px) { html, body {background-color: red} }
@media screen and (min-width: 480px) { html, body {background-color: green} }
@media screen and (min-width: 640px) { html, body {background-color: yellow} }
@media screen and (min-width: 768px) { html, body {background-color: blue} }
@media screen and (min-width: 992px) { html, body {background-color: gray} }

If you repair, for each screen resolution the attribute background-color color change.

You can write your media queries right inside the style sheets .css or between tags <style></style> inside a file html or php or extensions thereof.

Since the media queries are not welcomed by the IE8 and earlier, one of the solutions to try to approximate the desired result in these browsers is to include the following code in your web content:

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

This will allow the media queries are recognised by the browsers mentioned.

Answer 3

If you want to do this all the way through, I recommend the combination of media queries combined with relative page element dimensions (instead of using % or . pixels for fonts).

Media Queries:

http://en.wikipedia.org/wiki/Media_queries (For general knowledge and openness) http://www.w3.org/TR/css3-mediaqueries/ (Most complete specification) http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design/ (Some examples)

Another alternative would be to use a framework, which would address the "responsiveness" of your page:

http://designinstruct.com/roundups/html5-frameworks/ (Top 10 most used frameworks, choose and use)

I believe that with these guidelines there is already an idea of what to look for.

Answer 4

There is, and it’s called Responsive Design. Where all layouts are defined for multiple resolutions.

And what opened the doors to this design was the media querys.

I recommend studying the subject in depth if you want to be a web designer.