Making your website compatible with a large number of browsers is probably the most difficult task for a front-end developer. It is best to build your website so that it can run consistently on all browsers. This method is known as cross-browser encoding (or multi-browser). In most browsers, there are several things you can do to improve your chances of creating a site that runs on all platforms.
When we decide to build a website, we need to use some of the most common and simple practices, that, if followed, can save us precious time during cross-browser tests.
Here are 10 basic principles we need to employ when designing any HTML page.
1. Validate the Code
Before uploading your site, you need to check the HTML and CSS code via validators. Once you check the code, it may not work perfectly on all browsers. If you do not pass the code through validators, there is always a chance of having problems that could have been easily resolved.
The HTML validator wc3 and the CSS validator are good places to check the code. You can also use the Firefox HTML validator extension to check the pages viewed in the browser in real time.
2. Try to Keep the Site Structure as Simple as Possible
Using a header, a few columns and a footer — and avoiding a lot of complex HTML and CSS code — make it easier to achieve success. So, get rid of multiple errors and bugs by avoiding extra side boxes and unnecessary formatting. To create a menu, use <ul> and <li> instead of a table. Avoid using nested items and insert only the required items.
3. Do Not Work with Browser Quirks Mode
As a rule, if your page does not include Doctype, the browser will automatically switch to quirks. Include statement type (Doctype) to avoid quirks. Some browsers have the quirks mode, allowing older websites to work with modern browsers. However, quirks mode can create many headaches and unnecessary errors
4. Use the CSS Reset Registers
Each browser has its own default values for specific aspects such as line width and height. These default values sometimes conflict with custom CSS rules and distort the look of web pages. You can do all resetting at the beginning of the CSS file to avoid customizing each CSS rule that you write. You can rest assured that once you’ve added these rules to the style sheet (or to a separate file), it will work from the same point for all browsers.
5. Use Firefox
As a rule, website developers test the site through a single browser, Firefox. After that, they check the same site in other browsers and continue to make the necessary changes from one browser to another. This is a classic method, rather than validating the website on all browsers in the first stage of the project.
If the site looks good in Firefox, it will surely also look good in Opera or Safari.
6. Testing
It’s very important to test your website on as many browsers as possible. These are the primary web browsers: Internet Explorer 6,7 and 8, Opera, Safari, Firefox.
To test in IE 6.7 and 8 on the same computer, there are online programs that make screenshots of your site (browsershots; browsercam), making it unnecessary to have 3 different PCs with 3 operating systems. These captures are emailed or available for download.
7. Use Conditional Comments
There are times when, even if you do your best and you work professionally, it is impossible for your site to work perfectly in Internet Explorer. As a first solution, you can include in the HTML code for IE only with conditioned comments. You can add HTML, CSS and JavaScript just for IE, allowing you to fix any code errors.
8. Make IE6 Compatible with PNG Format
You can use transparent PNG images that allow you to have up to 250 levels of transparency in one image, which means you can use translucency and smooth edges on any background.
Unfortunately, IE 6 does not display the picture as is. There is a good solution to this problem, namely IE PNG Fix.
9. Add Fallbacks
Most web browsers are compatible with JavaScript and Flash, but it is recommended to use alternatives of these features, because they don’t always work as expected for a user or they slow down the loading of the browser. For example, with the Safari browser on the iPhone, the Flash navigation menus become useless because iOS does not support Flash.
Here’s a simple solution that will save your precious time.
- Images – You need to make sure that each tag that has the
imgextension contains another attribute that describes the image. - Flash Movies – Do not use Flash for essential things on your site, such as browsing, but provide a non-Flash alternative.
- JavaScript – Avoid using JavaScript for essential functionality. Instead, you can use it to make things faster and easier. Use the non-script styling to provide a non-JavaScript alternative.
10. Choose Manual Encoding
Using Dreamweaver or KompoZer tools can save a lot of time and they are useful if you do not know HTML. However, total control over your website, and easier optimization, is achieved by manual coding of all of the HTML, xHTML and CSS code. On the Internet, you can find many text-based web page editors. You can try any of the following:
- Coffee Cup (Windows)
- Atom Sublime Text
- Coda (Mac)
- CkEditor
The principles and recommendations outlined above should provide a solid foundation for website developers to create a consistent browsing experience — as well as create a beautiful and intuitive experience for the user. Not only will you make sure that the site is accessible to the public, but also that visitors are happy, which is very important.
