Cross-Browser Compatibility | JavaScript for Responsive Web Design

Cross-Browser Compatibility | Responsive Web Design

The web browser is a medium to represent websites over the Internet. It is a client side UI. Cross-browser compatible means developed for multiple browsers. The term cross-browser compatibility is directly related to the responsive web design. When a website is designed, the developing team must consider about its view/appearance on different platforms. If we develop a website without thinking of its looks on different platforms, the appearance of the website may not be the same everywhere. Most web browsers are almost same in their functionality but there are differences in their understandings, recognition, and display of the website. Browser compatibility means to give an equivalent performance in all alternative conditions. Each web browser interprets the same web pages differently that is the reason why the same page looks different in different browsers.

A responsive and cross browser compatible website will be fully functional and have uniform appearance everywhere. Doesn’t matter what kind of web browser the user have, the website will work equivalently with all major browsers.

 

---

How to make a cross-browser compatible website

• Use of only standard coding
• Don’t use proprietary HTML tags and features i.e. browser specific
• Validate web pages with free w3 markup validation service of world wide web consortium (W3C)

 

---

JavaScript for Responsive web design

 

The main aim of responsive and browser compatible web design is to present the website equivalently in all major browsers without affecting their functionality and appearances. Some most common and popular web browsers are Google Chrome, Microsoft Internet Explorer, Apple Safari, Opera, and Mozilla Firefox. Sometimes web pages look different in the same web browser because of different versions of the web browser. Media queries and CSS3 rules are not recognizable by older versions of web browsers that may cause browser compatibility issue.

Here are some JavaScript solutions that help the older browsers to overcome the lack of CSS3 support and make the website design responsive:

Respond.js

Respond.js enables the older versions of web browsers to deal with CSS3 media queries.

<script type= “text/javascript” src= “respond.min.js”> </script>

Modernize-latest.js

Modernize-latest.js is a small JavaScript library that detect and understand CSS3 and HTML5 specifications in older browsers.

<script type= “text/javascript” src= “modernizer-latest.js”> </script>

adapt.960.js

Adapt.960.js need separate CSS files for each device type. The library parses the resolution of the device and call the relevant CSS file.

<script type= “text/javascript” src= js/adapt.min.js”> </script>

This code will activate javascript in the web page. Then add the following code:

<script type= “text/javascript” >

Var my_config= {

path: ‘MSATechnosoft/Styles/css/’ ,

dynamic: true ,

callback: myCallback,

range: [

‘0px to 760px= mobileScreen.css’,

‘760px to 980px= 720Screen.css’,

‘980px to 1280px= 960Screen.css’,

‘1280px to 1600px= 1200Screen.css’,

‘1600px to 1920px= 1560Screen.css’,

‘1920px to 2540px= 1920Screen.css’,

‘2540px= 2520Screen.css’

]

};

</script>

The common CSS should be included in different CSS file for example, MainStyle.css and this file should be called and retrieved before integrating this library.

<link href= “MSATechnosoft/Styles/MainStyle.css” rel= “stylesheet” type= “text/css” media=”screen” />

 

---

Browser Compatibility Issues

At the time of website design and development, it is very important to focus on the responsiveness of the website. A responsive and cross browser compatible website gives a user-friendly view and enhances user experience. TO check out the whole web page to find out the error is very frustrating but if you know where may be the problem, it is very easy to correct. There are some common issues that must be considered at the time of website design for responsive web design and to avoid compatibility issues:

• DOCTYPE: It must be mentioned at the top of the web page. It allows the web browser to interpret the web standard a few different that makes difference in website appearance. So, it must be mentioned correctly. <! DOCTYPE html>
• CSS reset: Different web browsers have a different set of basic CSS styles that executes if it is not overwritten hence cause a difference in the appearance of the web page. If a web page doesn’t contain its own CSS styling, it will render different in different web browsers. To avoid strange rendering of a web page in different browsers CSS reset style sheet can be used.
• Outdated browser: older versions of browsers sometimes doesn’t support media queries and CSS3 specifications that may cause the compatibility issue. JavaScript solutions can be used to overcome such issues.
• Lack of proper HTML/CSS: Different we browsers interpret HTML and CSS differently. Some web browsers ignore silly mistakes while others don’t. Lack of valid HTML or CSS may, therefore, be the reason for the strange rendering of the web page in different browsers. For example, suppose you forgot to close HTML tag on a web page when this web page will interpret and execute in Internet Explorer it will forgive you mistake but Opera may give a different result for the same web page.

The main aim of making website cross-browser compatible is that the web solution can easily be used by all possible targeted audience with minimum variations in user experience.