Last week, I got to meet some of the guys at Perth Web Design and I learned a few good things from them that inspired me to write this post. The trend today is to ensure that a website is accessible from mobile devices in order not to lose the opportunity of interacting with the growing mobile audience. However, web designers are often challenged with problems on cross-browser compatibility.

JavaScript solutions for older browsers without CSS3 support

From the viewpoint of a web designer, cross browser compatibility means compatibility across different browsers. It is important for the web designer to ensure a design that works properly with an appearance that is error-free and functional in whatever platform it is accessed by a user. This is one of the most difficult challenges for the web designer since there is wide variety of browsers and different versions of a browser that support various design techniques. In the responsive web design approach, photos and media need to be flexible and adapt to different screen sizes without compromising loading time. Using the largest version of a single image is not the solution because it will take a lot of time to load the image in a 2G smartphone. High resolution images will probably display a quarter of its original size.

Another problem is that media queries do not work well with older browsers. In order to help serve the responsive web design approach on older browsers without the CSS3 support, a web designer can use 3 JavaScript solutions:

  • Respond.js – is the simplest of the solutions and allows older browser versions to understand and execute CSS3 media queries
  • Modernizr – is a small JavaScript library that detects if there are native implementations of next-generation web technologies
  • Adaptive.960.js – is the solution that differs from the other two because it does not make use of CSS3 although its concept is similar to CSS3 media queries

A few years from now, older browsers will be irrelevant because they would soon be superseded by the desktop counterparts which make it better to work with media queries now and extend support for the older browsers using JavaScript plugins.