Adaptive layout

Recently Responsive Design has become one of the most popular trends in web site design and layout. It is used to change the look of the website, depending on the screen size. Many times a cool website with good navigation and functionality is optimized for viewing on a PC and laptop , but may not be designed for viewing on mobile devices, tablets and smartphones. Adaptive layout allows the user to show a certain look of a site, depending on the device parameters.

Adaptive layout can be used on any site and can be realized very simply. CSS3 media queries are used to check the width of the screen:

/* Large desktop */
@media (min-width: 1200px) { ... } 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... } 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... } 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

Now we have an opportunity to change the block size, depending on screen size of the device. For example:

@media (min-width: 768px) and (max-width: 979px){  
      .container {
              width: 760px;
      }
}

@media screen and (max-width: 480px) {
      .container {
              width: 300px;
      }
}

You should also make your image elastic. For this you only have to set max-width:100% and height:auto. You should also set the same parameters for the video.

It is good to understand that by using media queries we don’t create a fundamentally new version of the site version with own CSS, but we are changing or redefining the current styles, as listed above.

Overall, adaptive layout, undoubtedly, is an advanced and popular trend in website development, as it can link your site with different kinds of mobile devices, in spite of the screen size and the operating system, which is very important nowadays.

Internet explorer 8 and the previous version do not support CSS3 media queries. You should add Javascript file css3-mediaqueries.js to switch on the support for this browsers.

Chicago web design company Ukietech often uses adaptive layout in our projects :)