Handling Cross Browser Compatibility has always been an issue for web developers. In today’s world wide web it’s not uncommon for website visitors to be using many different browsers on many different types of devices. The options seems almost unlimited with Mozilla Firefox, Google Chrome, Opera, Safari, and of course “the beast” Internet Explorer. There are also many lesser known browsers and 3rd party software for Mac and Linux Operating Systems along with the numerous gaming devices capable of displaying web content. Not to mention the endless number of mobile devices
This presents a challenge for both business owners and website designers when trying to create a visually appealing website. So what is the best screen size and monitor resolution to build your website to fit? 800×600, 1024×768, 1366×768? The answer is there isn’t one! It is impossible to design a website to look the same in every browser, platform and screen resolution, it can’t be done. The modern approach to meeting this challenge is a responsive website design. A responsive website is a fluid page that adapts to any device, regardless of screen size or resolution settings.
With the introduction of CSS3 and a feature called media queries to detect the visitor’s screen size, cross browser/device compatibility became a whole lot easier. The only downside to using media queries is the lack of support in older versions of IE. As is the case with many CSS3 features, media queries aren’t supported in IE 8 and below. Let’s hope those IE dinosaurs die out soon!
A responsive web design will detect the width of the screen or window on loading and will then size and deliver content based on that width. This technique is fast becoming the preferred method for developing websites that are mobile friendly. However it is one of the most difficult in web development to implement, making it something that a number of us were eager to try. Several of us have built elastic websites for clients in the past, but none of us had never taken it to this level before. When we finally got the green light to build a responsive design for our company, we dove right in and this website is the end result.
Device Compatibility Using the Screen Size Approach
At the core of every responsive web design is a fluid and flexible layout that adapts itself to the screen size and features of the user’s browser. Since the pages of our new website needed to adjust to scale, we decided to keep the layout simple. As we coded the templates, we allowed elements to maintain their natural document flow wherever possible. The less complicated the code, the easier it is to scale things properly. To keep things truly responsive, we used percentages instead of pixels for widths, padding, and margins. We also used multiple column stacks as well as column stacks within column stacks. This makes the number of possible layouts for the same webpage countless!
Device Compatibility by Substitution or Omission
We made several other minor accommodations for mobile devices. When the website is loaded on a mobile device a ‘back to the top’ button is added to the bottom of each page. Also the main navigation menu is dropped down in a “button” style menu for easy click ability. Extra padding is added around links in content to make them more touch friendly. We also created smaller images and used server-side mobile detection to swap the image source from the full size version to save bandwidth and load time for our mobile visitors.