Web Browser Compatibility Tips

These days, everyone’s using a different browser to surf the internet. Between popular options like Firefox, Safari, Chrome and Internet Explorer, which make up close to 98% of the internet market share of browsers, and the other little known browsers like Konqueror, there are a multitude of browsers being used to view your small business website, which is why it is important that your website is usable across all major media.

Check Your Browser Compatibility On Your Website

How does your current website perform in the multitude of browsers that are out there? Why not check for yourself? If you don’t want to install all the major browsers out there on your own personal machine, here are some links to help you out.

1. Adobe Browser Lab

Adobe BrowserLab is an online service that helps ensure your web content displays as intended on various browsers. Accurately preview web pages across multiple browsers and operating systems, navigate links, and use diagnostic tools to optimize websites efficiently.

Adobe Browser Lab, milkshake factory

2. Browsershots

Makes screenshots of your web design in a lot of different browsers. After you submit your URL, it gives you a url where your screenshots will be loaded up.

web browser shots, milkshake-factory

 

 

So Your Website Is Not Compatible, What Do I Do?

So turns out your site doesn’t function as expected across all the major browsers? Don’t worry. It happens to the best of us. Now it’s time to go about fixing it.

Step 1: Validate Your URL

First, validate your site. Ironing out those XHTML and CSS errors can often solve those pesky browser bugs. I suggest running your site through W3′s XHTML Validator and CSS Validator.

Step 2: Reset Your CSS

Another great way to ensure your site is cross browser compatible is to always reset your CSS before working on a project. There are many different global CSS resets, but Eric Meyer’s one and Yahoo’s one are considered to be the most correct ones:

Eric Meyer’s Reset Reloaded

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

 

Step 3: jQuery Browser Detection

For a jQuery-based solution of detecting browsers and adding a corresponding class to the body of your site. The script adds a class to the body, which you can then style in CSS. All you have to do is include the JavaScript file in the head of the page and it’ll attach 2 classes to your body tag to say what browser and what version is being used so you’ve got 2 levels of granularity. Possible values are:

.browserIE
.browserIE6
.browserIE7
.browserIE8
.browserChrome
.browserChrome1
.browserSafari
.browserSafari1
.browserSafari2
.browserSafari3
.browserMozilla
.browserFirefox
.browserFirefox1
.browserFirefox2
.browserFirefox3
.browserOpera

If you need to detect any other browsers then it would be easy to modify the script.

Check Your Browser Compatibility On Your Mobile Devices

Test your website design in a mobile device; here are some great resources:

1. Test iPhone

This fun looking website is very easy to you, simply type your URL in the URL section and hit enter to quickly test how your website appears on iPhone devices.

test iphone compatibility, milkshake factory

2. MobiReady

Excellent tool for testing in mobile devices. Provides feedback including test results, options, and emulators.

 

So Your Mobile Site Is Not Compatible, What Do I Do?

So how do you go about making your site mobile friendly? Here are a few ways of doing so:

Redirect Users on a Mobile Device
An easy way of making sure your site is mobile-friendly is to redirect users viewing it from a mobile device to a certain “plain” version of the page on your server. Otherwise, create a mobile website.

 

Consider hiring a Melbourne marketing expert for all your marketing needs, contact Milkshake-factory.com for complete marketing solutions.