Contents
What is responsive website design and Cross browser compatibility issue?
Responsive design is the latest development
way which most of the developers do follow to develop any website. Responsive
layout or design allows a website to adjust itself on different screen sizes
and hence all the content of website gets proper readability as well.
It’s the first and important requirements of all website owners that their
website should be fully responsive so that their websites visitors can view
their website on any type of devices For example: Laptop, desktop, smartphones,
tablet etc.
IF your website is not visible properly on different browsers then we can say that your website is not cross browser compatible.
There are so many websites which are still not responsive or, you can say cross browser compatible. These website visitors do face difficulty to view them on mobile or tablet devices and hence they leave website very soon.
Most of the website owners who don’t have a responsive website can have some common questions on their mind like below:
I have having a very old website and it is not responsive, what should I Do?
My developer didn’t make my website responsive; can I make it responsive now?
My website is made on WordPress but it is not responsive. Do I have to redesign it from beginning or I can make it responsive by adding some code on it?
I am having a simple html/css website, can I make it responsive?
YES, We have a solution for you.
CSS Media queries allow use to add some stying code on our style sheet and these lines of code called “Media Quries”.
With the help of media queries, we can write code in our CSS file as per the screen (device) size. In simple words, you can say that we do write media queries (style code) in conditional way. I mean we can write different styling code for different screen size at one place.
In this way, we will write all media queries in one place and they get execute as per the visitor screen size.
What is CSS3 Media Quries?
CSS is stand for Cascading Style Sheets which is responsive for your website look and feel. It handles your website frontend design and look for your visitors.
CSS3 is the latest version of CSS used on almost every latest websites frontend. CSS3 has provided many advance and latest features for developers to make the website more attractive and responsive as well. CSS3 has made the frontend developers work very easy but at the same time it makes the work complicated as well because if this is not handled properly, it creates cross browser compatibility issue for website.
Cross Browser Compatibility in simple terms is that your website is not visible properly on different browsers with different screen sizes. For example: website is not coming up properly on smartphone but it is coming fine on laptop and tablet etc.
Once we face such issues, CSS media queries becomes very handy to resolve such issues.
Media queries defines the modules in CSS3 in which we defines different module sections for different screen sizes or you can say screen resolutions and we can write different styling code on each different screen size module.
In this way, different style code will be executed for website as per the screen size. For example: we can write a different styling code for tablets and smartphones because both will have different screen resolution (Screen size).
CSS Media queries are the simple and best way to use different look and feel (Style) to different devices (Smartphone, tablets, laptops, retina display etc.)
How to use media Queries?
To use media queries we use @media only screen syntax to device the media type and then we can use screen minimum and maximum size, we can also device screen orientation like: landscape or Portrait.
Let me list of few commonly used media queries modules or you can say syntax which you can use on your website to write media queries.
/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait & landscape)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
/* iPhone 5 (landscape)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
You can change the screen size and orientation of screen as per your understanding and write the styling code as per your needs. It will allow you to write different style code for different screen size on different screen orientation and it will allow you to resolve your website cross browser compatibility issue and make it responsive as well.
Media queries support for older browsers
CSS media queries are support by all modern and latest browsers. For example: IE 9+, FireFox 3.5+, Safari 3+ , Opera 7 , all smartphones and tablet devices.
But older versions of browsers not supported the CSS media queries but there is a solution to make it work.
Cross browser compatibility issue is very important for all websites and that is why we use media queries to make it work. Normally we face cross browser compatibility issue on IE5 to IE8. A simple solution for this is to download “jQuery plugin” https://www.w3.org/TR/css3-mediaqueries/ called css3-mediaqueries.
Simply download the plugin and add below script just before the </body> tag.
<script src=”js/css3-mediaqueries.js”></script>
Or, include this in following way.
<!– css3-mediaqueries.js for IE less than 9 –>
<!– [if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>
Now, you are ready to use the CSS media queries on your website to make it cross browser compatible.
Final Thoughts
If you are creating a new website in WordPress, I suggest you to use fully responsive theme so that you can don’t have to write any CSS media query because a fully responsive theme will make your website fully compatible with all the latest version of browsers. But sometimes once you customize the theme or use some plugins which are not compatible with your theme can create a cross browser compatibility issue, in that particular case use the CSS media queries to resolve the compatibility issue.
IF you are looking to create a simple html/css template based website, I suggest try to use the CSS3 based fully responsive template which supports bootstrap, it will make your website fully responsive automatically and whenever you feel any cross browser compatibility issue you are always free to use CSS media queries.
And you already have a website which you developed or made very long time ago and you don’t have to redesign it again but want to make it responsive with minimum possible budget and efforts CSS media queries are best choice for you.
I hope my this article will help you to resolve your website cross browser compatibility issue.