Visual Basic Today: What Is Responsive Design?

Technology keeps on changing. New devices get invented fast and it is our job as developers to be able to accommodate for those changes and new devices. Today, I will talk about Responsive design.

What Is Responsive Design?

Wikipedia defines Responsive design as:

“Responsive design is an approach to Web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”

An app designed with Responsive design in mind adapts the layout to the viewing environment in the following ways:

  • Fluid grid: This concept allows for relative page element sizing. This means that relative units such as percentages are used to specify size, in stead of absolute values such as points or pixels.
  • Flexible images: This means that the size of the images used is also specified using relative units, meaning these pictures will not display parts outside of their containing environment.
  • Media queries: These allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

Adjusting Screen Resolutions

There are so many different screen sizes out there nowadays that it can get a bit hard to keep up. Another concept you have to realize is the fact that, with mobile devices, there are two ways to display information: landscape and portrait. By specifying the sizes of elements using percentages, you can circumvent having to add much logic to your code to compensate for the screen sizes or adjustments.

Adjusting Image Sizes

Again, specifying size in percentage will allow the image to be sized appropriately across all devices. Simple code like this:

@media all and (max-width: 1024px) and
      (min-width: 768px){
   #footer{
      width:800px;
   }
}

will allow you to have a footer image that looks the same on all devices.

Media Queries

The @media rule is used to define different style rules for different media types/devices.

Media queries look at the capability of the device, and can be used to check many things, such as:

  • Width and height of the viewport
  • Width and height of the device
  • Orientation (Is the tablet/phone in landscape or portrait mode?)
  • Resolution

Here is a nice tutorial on the CSS @media rule:

JavaScript

JavaScript can be used as a back-up to devices that don’t support all of the CSS3 media query options. Fortunately, there is already a pre-made JavaScript library that makes older browsers (IE 5+, Firefox 1) support CSS3 media queries.

<script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/
   jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $(window).bind("resize", resizeWindow);
      function resizeWindow(e){
         var newWindowWidth = $(window).width();
         // If width width is below 600px, switch to
         // the mobile stylesheet
         // Else if width is above 600px, switch to
         // the large stylesheet
         if(newWindowWidth < 600){ $("link[rel=stylesheet]")
               .attr({href : "mobile.css"}); }
               else if(newWindowWidth > 600){
            $("link[rel=stylesheet]").attr({href :
               "style.css"});
          }
      }
   });
</script>

The preceding code detects browser width and changes the style sheet accordingly.

Conclusion

Responsive design is not complicated at all. All you need to do is to think closely about the device you will be programming for.

Hannes DuPreez
Hannes DuPreez
Ockert J. du Preez is a passionate coder and always willing to learn. He has written hundreds of developer articles over the years detailing his programming quests and adventures. He has written the following books: Visual Studio 2019 In-Depth (BpB Publications) JavaScript for Gurus (BpB Publications) He was the Technical Editor for Professional C++, 5th Edition (Wiley) He was a Microsoft Most Valuable Professional for .NET (2008–2017).

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read