Miracle Studios Digital Agency

10 years Experience, Over 1000+ projects Completed. Do it right, the first time.

Visit Website

Creating a responsive website requires more than just concentrating on the width. For better results sensors are crucial as they let you adjust the site on the basis of other factors.

If you are looking for a way for improving the feedback received from browser or user’s sensor, then Modernizr, a library of JavaScript is the right choice for you. This article explains how Modernizr serves as a great tool when you are to include more than the width.

During front end development, a site was adjusted by developers to fit constraints posed by layout engine which a particular browser uses. Netscape, Opera and Internet Explorer, were three browsers used till 2003. Later in 2005 Safari, Firefox and Opera Mini were launched. Chrome was released in 2008.


In present times, five prominent browsers are used, which have their own versions for mobiles. Besides these browsers, there are older versions as well which users never upgrade. Building various front ends for different browsers is similar to creating different layouts for various screen sizes, which is hardly useful.

Responsive web design is being used these days for accommodating new and latest mobile browsers. However, it should not be done at the cost of the older browsers.

Primarily, optimization has emerged as a tool that lets you build a website for popular browsers, which can be then tweaked for making sure that it appears in the same way on every browser. Design should be such that it can accommodate varying capabilities of each browser.

Progressive enhancement has proved to be a great strategy when it comes to coping with the browser’s inability to support advanced features. It is normal to feel tempted for building it for advanced features, however in responsive web; a website’s design should be in context with the frame through which it is being viewed. The popularity of responsive website design has been enhanced as it is capable of resolving the common changing context, which is frame size; however the browser’s context is much deeper as compared to viewport size.

SVG is certainly great for displays of high resolution; however is it supported by older browsers? As it is not supported by IE8 and older versions, thus you will be required to create in fallback for supporting that browser. By identifying the browser, you can serve different styles against a browser, however, and then those alternative styles will be required to be served for each browser which does not support SVG.

It would be a lot easier to write one style and use it against each browser that does not provide support for SVG. Thus you will not have to bother about bug reports coming from users who use older versions, as you could set fallback one time.

Conventionally, feature detection was used for detecting the user agent of a browser, which is done by JavaScript with the help of navigator object. It has been used since Netscape and considered the best tool for developers for assuring compatibility among various browsers.

When working on Chrome, if you enable DevTools, then you can open the web inspector of your browser through a right click on page and by selecting the Inspect Element. Then click on the Console and after caret, type this: “navigator.userAgent” and press Enter. It will help to return the user agent of the current browser you are using, which is text string used for identifying which browser is being used.
In many ways, navigator object emerges as fine sensors available for us for keeping our system informed about realizing the capabilities of our user. However, it cannot be termed as future friendly. This is because it uses many assumptions as basis for determining actuators of your site in regards to what is and what is not supported by the browser. It is also considered to be unreliable as it can be configured for accessing websites which are supported by the browser.

How Modernizr helps

Modernizr, a library of JavaScript, is used for detecting features in a browser. Being loaded in page head, it is run when a page is loading. Incorporating it in your website is similar to adding other libraries of JavaScript, like jQuery, however once you have added it; you can get an amazing control over rendering the page and assure quality experience for every user.
After being loaded, it uses various checks on the browser of user for determining which features are supported by the browser and create an object of JavaScript which can be used for testing against. It does not create any support for such features, as it just gives you a method for providing fallback support for advanced features. Like, in SVG, it enables you to offer a fallback picture for browsers which do not have SVG support.

Modernizr can also apply a classes set to HTML tag, offering you capability for modifying the CSS of page by using corresponding class of CSS. These enable use to use systems of CSS for building actuators which can help to adjust the pages, allowing progressive enhancements that are available for any page.

Contrary to using User Agent, the Modernizr is able to detect features directly through a set of tests which offer Boolean values, which are true and false.

Modernizr installation

Modernizr installation is as easy as connecting to JavaScript library within your page’s head. However, complexities can arise in installation process when you are required to create a particular version. Modernizr can be downloaded in two different versions, namely development and production version.

Development version can be availed as an uncompressed file of 42 KB. For those who are experienced in using JavaScript, this version can be great. As it is not compressed, it can be easily read and augmented, however, this should be done by a developer with good knowledge of JavaScript.

Production version is great for those who are not too adept when it comes to using JavaScript and they would prefer to create a modified version of the Modernizr. Using production versions makes it very easy to create version using only texts required by you.

All in all, Modernizr is an exceptional system that lets you create fast and functional websites by serving the user actuators.

Miracle Studios Digital Agency

10 years Experience, Over 1000+ projects Completed. Do it right, the first time.

Visit Website
There are no comments.

Leave a Reply