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.



About the Author

Hannes DuPreez

Hannes du Preez is a Microsoft MVP for Visual Basic for the ninth consecutive year. He loves technology and loves Visual Basic. He loves writing articles and proving that Visual Basic is more powerful than what most believe. His ultimate dream is to write a Visual Basic book, hopefully one day that dream will come true. You are most welcome to reach him at: ojdupreez1978@gmail.com

Related Articles

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date