How to Deal with Resolution Limits on Responsive Sites?

A responsive website sells the idea of ​​adapting to all kinds of resolutions. But is it really all type? And the extremes? Very small screens and very large screens? How to deal? Or rather, how to adopt a pragmatic strategy in this regard?

Understanding the Unique and Responsive Sites

Responsive single sites are a response to the practice we had before “creating a site for each device.” The idea was that people used to make different sites for mobile, desktop and even for the tablet (the famous sites). This in practice is impossible to do. There are many different devices. So, we prefer the idea of ​​a unique website that suits different screen resolutions. This adaptation is made with responsive design: a base design with small adaptations made in the medium queries.

Responsive Sites in The Ideal World

In the ideal world, every site in the world should adapt to every resolution in the world. That would be the ideal mega responsive. In practice, we set limits that our site must support. This is within the limits of our audience and what we believe to be a priority today. In the real world, we prioritize to support as much as possible within the project criteria. So, since you cannot support all screen sizes (this number would be infinite) it is common to set a maximum value to support.

Keep Your Layout Clean

This may sound a little cliché, but it really is not. Many developers create their websites with dirty code, often generated automatically by software and IDE’s that help beginners in designing projects. It is extremely important that in this new phase of responsive sites, developers make their codes clean and only write codes that will actually be used. Make codes as simple as possible, avoiding unnecessary exaggerations.

Avoid:

  • Dives unnecessary
  • CSS styles inlines (always use external files)
  • JS or Flash files without fallback
  • absolute position or unnecessary float placements
  • Avoid redundant codes or codes that are not 100% useful

Try to use:

  • Doctype html5
  • Use a CSS Reset
  • Simple and semantic code
  • Simple techniques for elements such as navigation bars, menus, etc

There is always a concern on the part of the developers and Front End in this issue, since the Frame of the site needs to respect certain limits, but with the emergence of responsive sites, we see that more and more this is a ‘problem solved’. With responsive sites we can fill screens of various sizes, and not be stuck to certain sizes of frames, making sure that the site will adapt to the resolution of the user and also the device. Therefore, depending on the application and it cannot be responsive, it is recommended a frame with 980 pixels wide. Remembering that the variety in the screen resolutions are quite large, but this ensures a smooth operation for the vast majority.

Make Your Layout Flexible

Flexible grids use columns to organize content. They use relative widths rather than fixed widths to fit the width of the user’s screen. Fluid layout is always the best way to be ready for any type of screen size and / or orientation. That way it will not matter if the user is accessing the site through a smartphone or a 42 “television, the layout will adapt to the user’s resolution.

Note: To avoid possible calculation errors, use measures like the percentage and let the browser do the calculations.

Do Not Forget the Max and Min Width

You can use max-  and min-  as limits applied to their relative sizes. Its main function to use is to prevent the layout from increasing or decreasing in the wrong way when displayed on a really large or small device.

Conclusion

With the tips outlined in this article it is possible that all front-end web designers, developers and web development agency Dubai can understand and deepen a little more in the study of responsive design, which has ceased to be a trend and has become a reality for the modern world.

spacer

Leave a reply