Making Responsive Compatible on IE7/IE8 using response.js
We all know responsive web design has a very important role in recent days, because of adoption of different types of devices like Smart-phones and Tablets. Since responsive design is a one stop solution to stand out on modern devices, everyone prefers this technology. But, developers are facing problem with this new technology on older browsers.
We have to implement a new method which helps us to work on all modern browsers and also on the earlier versions too. Responsive web design is working well on new Internet Explorer browser versions but when it comes to older version it is not rendering all the details of website correctly. So, here is how to make a website compatible with older browsers like IE6/IE6/IE8 using responsive.js.
Let us all, now, learn about some of the basics about response.js.
What is Response.js ?
Response.js is a jQuery plugin that provides tools for building performance-optimized responsive websites. It serves content like media, images etc by using HTML5 data attributes by swapping code blocks based on device screen sizes. Its API includes cross-browser event hooks and ways to get or test responsive properties.
This is a java script framework developed by Scott Jehl, which helps in fixing the problem that CSS3 media queries doesn't work on those legendary IE browsers.
What actually Response.js do ?
Let me explain how response.js can help you:
- Generally, the page coded with standard HTML5 and CSS will work as we expect in IE9 and 10 but, when it comes to older Versions i.e, before IE9 it fails to render the page correctly. So, response.js helps in this part.
- Responsive web design it uses media queries to apply styles depending on browsers width or height. The CSS content may disappear and make those IE browser to show your cool responsive style.
- Response.js is generally used to support small screens. The usual desktop designs are simplified for small screens.
- 4. It uses CSS file using Ajax and loops through CSS with regular expression, each CSS rely with media queries will be appended to HEAD section.
How to Use Response.js:
- Render response.js after all CSS codes you use in web pages otherwise the earlier version will fail to render page correctly.
- Response.js works well with following CSS3 media queries declaration. For now, consider the following options.
- Min - width
- Max - width
- All media types
- Response.js is built to make the web pages work with IE8 and earlier versions and to work with media queries. If any other web browsers are still not rendering pages correctly please update it here.
- Response.js has an issue with CDN and domain. Click here to learn how to solve the problem.
Help with Content Hosted on CDN/X-Domain
Response.js works with your CSS via AJAX, so if you are hosting your CSS sheets on a CDN (or Sub-domain), you will need to upload a proxy page for that style sheet to enable cross-domain browsing.
See cross-domain/example.html for a demo:
- Upload cross-domain/respond-proxy.html to your external domain
- Upload cross-domain/respond.proxy.gif to your origin domain
- Reference the file(s) via element(s):
<!--Respond.js proxy on external server-->
< link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" / >
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>
If you are having any other problems, make sure respond-proxy.html does not have a query string appended to it.
