Responsive web design

Responsive web design

In our present days Responsive web design is really important. Without responsive design our web pages are not looking good on different screen sizes, for example: mobile, tablet, desktop or even TV. Responsive web design has become more important as the amount of mobile traffic now accounts for more than half of total internet traffic. Therefore, Google started to boost the ratings of sites in 2015 that are mobile friendly if the search was made from a mobile device.

So, the short definition is?

Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries.  The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.

Responsive Web Design Principles

The main difference that separates responsive design from other approaches is the focus on designing your website around breakpoints in the design and not trying to target different devices. For example, your website may look great on an iPad in landscape but the design looks weird in portrait mode.

Built on a Fluid Grid A website built on a fluid grid will be based on percentages instead of on pixels.
Responsive Images and Videos Images should scale depending on the resolution of the screen they are being viewed on.
Media Queries Define Breakpoints Media queries in CSS are used to alter the layout at various breakpoints in the design.
Responsive Navigation While not every website will require responsive navigation techniques, those with extensive menus would benefit from using various techniques designed for smaller screen resolutions.

Built on a Fluid Grid

The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a “main content area” floated to the left a “sidebar” floated to the right, it’s a simple grid. If a more complex layout presents itself, people often reach for a grid framework. Let’s see an example. We gone have a parent div with a width of 100% which has two child elements inside.

Summary
Responsive web design
Article Name
Responsive web design
Description
n our present days Responsive web design is really important. Without responsive design our web pages are not looking good on different screen sizes, for example: mobile, tablet, desktop or even TV. Responsive web design has become more important as the amount of mobile traffic now accounts for more than half of total internet traffic. Therefore, Google started to boost the ratings of sites in 2015 that are mobile friendly if the search was made from a mobile device.
Author
Publisher Name
Responsive-web.site
Publisher Logo
<section id="fluid-grid">
   <div class="col-1">
      Main content
   </div>

   <div class="col-2">
      Sidebar
   </div>
</section>

We need to fix the parent element that will collapse to zero height since it has only floated children. To make the child elements next to each other, we just need to float them and apply widths. After that we will add some padding.

#fluid-grid {
   color: #000;
   width: 100%;
   max-width: 768px;
   margin: 0 auto 25px;
}

#fluid-grid:after {
   content: "";
   display: table;
   clear: both;
}

*, *:after, *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

[class*='col-'] {
   float: left;
   padding: 15px 20px;
   background-color: #fff;
}

.col-1 {
   width: 66.66%;
}

.col-2 {
   width: 33.33%;
}

@media screen and (max-width: 768px) {
   [class*='col-'] {
      width: 100%;
      margin: 5px 0;
   }
}

Responsive Images and Videos

There are different ways of implementing resizing images and as yet no standard way of doing it. No existing models are ideal, for example some of them control the loading of multiple sized images via JavaScript, whilst others have images twice the required quality that are shrunk down. If you’re happy to only support modern browsers and not too worried about image file size and therefore load time then a simple CSS id should work fine.

The new style of HTML5 video players are designed to keep their aspect ratio in the browser so implementing valid HTML5 video tags should work well for Responsive video players. As with the image CSS technique, the following CSS code still holds true for videos.

img, video {
  max-width: 100%;
  height: auto !important;
}

Media Queries Define Breakpoints

The @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in it’s simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria. Let’s see a few media queries. We will show you just 4 but you can make your own as well.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

Responsive Navigation

Responsive navigation is a key part of responsive web design as we need to have usable navigation on mobile and tablet devices as well. The navigation needs to be fit to screen and able to hide and show it’s contents. We will show you a simple, pure CSS responsive navigation with no Javascript and you will be able to see the demo after the post.

<section id="navbar">
   <nav>
      <div class="logo">Logo</div>
      <input type="checkbox" id="menu-toggle" />
      <label for="menu-toggle" class="label-toggle"></label>
      <ul>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
      </ul>
   </nav>
</section>
#navbar {
   background-color: #fff;
}
        
nav {
   align-items: center;
   display: flex;
   justify-content: space-between;
   padding: 0 15px;
}

.logo {
   align-items: center;
   display: inline-flex;
   justify-content: space-between;
   height: 45px;
   margin: 10px 0;
   width: 45px;
   color: #000;
}
      
.label-toggle, #menu-toggle {
   display: none;
}
        
nav ul {
   padding: 0;
   margin: 0;
   overflow: hidden;
}
        
nav li {
   display: inline-block;
   margin: 0 15px;
}
        
nav ul a {
   color: #000;
   text-decoration: none;
   transition: all .5s ease;
}
        
nav ul a:hover {
   color: #000;
}

@media screen and (max-width: 768px) {
   nav {
      display: block;
   }
          
   nav ul {
      background-color: #fff;
      display: block;
      height: 0;
      list-style-type: none;
      opacity: 0;
      text-align: center;
      transition: all .5s ease;
      width: 100%;
      visibility: hidden;
   }
          
   nav li {
      color: blue;
      display: block;
      padding: 11px 0;
   }
            
   nav ul a {
      color: #000;
   }
          
   #menu-toggle:checked ~ ul {
      opacity: 1;
      height: 130px;
      visibility: visible;
   }
          
   .label-toggle {
      background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);
      cursor: pointer;
      display: block;
      float: right;
      height: 30px;
      margin: 17px 0;
      width: 35px;
   }
}

Conclusion

Responsive design involves keeping URLs, site structure and content the same overall devices only changing the styling and layout. Sometimes the layout styling may remove certain blocks of content to improve user experience; however, it removes the problem of duplicated site content on mobile versions. Responsive design is very important in our present days as the website needs to work on all modern devices. Not everybody is using Desktop to use the internet, many people use their phones and tablets to see what they want. Once again Responsive design really matters, without that the internet wouldn’t be enjoyable.

View live demo

Dont' forget to like or share this post if you found it useful. Thank you!