Understanding Cross Browser Compatibility in Website Design


Cross Browser compatibility is the bane of website designers!

You must be aware that there are numerous browsers used by people for surfing the internet. Some of the commonly used browsers are Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera, Netscape, and so on. Now, if you observe carefully, you will find that some websites look quite different in different web browsers.

Let’s understand the technicality behind this phenomenon. Each browser parses a web code in a different way. A good web design aims to give a uniform look to the website, viewed from any web browser. Thus, a good website should be viewable in its full functionality on any web browser. This is called cross-browser compatibility.

Now, if you are wondering how you can ensure that your website is cross-compatible, follow these simple rules:

Test with 3 browsers

Download at least three different browsers, Internet Explorer, Mozilla Firefox and any other browser. Then test your website in all the three web browsers to check the cross browser compatibility. The reason for pre-considering Internet Explorer and Mozilla Firefox is the fact that these two are the most widely used web browsers in the world. So, it is important that your website is rendered perfectly when viewed on these browsers. While your website is in the process of development, it is recommended to run several cross browser tests to check its appearance and also other coding errors that might crop up in the process.

Validate your HTML code

Ensure that your code is W3C validated. W3C standard helps you maintain cross browser compatibility. You can validate your HTML code online at http://validator.w3.org/. Also you can validate your CSS code at http://jigsaw.w3.org/css-validator/. Note that these validation services are free of cost.

Choose HTML editor wisely

Dreamweaver is the best and most widely used editor when it comes to maintaining cross browser compatibility. However, you will need to avoid the use of layers. Do not use FrontPage, as it is an editor which specifically uses code for Internet Explorer. Sites coded on FrontPage are not always likely to be cross browser compatible, as there are several features in the editor which are not compatible in other browsers.

No website design can be 100% cross browser compatible, as the appearance may differ across various browsers. However, following the above mentioned steps can help you create a website that works well in the most common web browsers.

If there is one thing every web designer can agree upon, it’s that cross browser compatibility is the bane of website design!

Posted in Uncategorized | Leave a comment

Writing a Mobile Friendly Website


Mobile Devices May be Small, But they Still Need Web Design

Mobile devices with WiFi and cell access to the Internet are everywhere these days. And if your Web page doesn’t display well on them, you’re losing customers. Learn how to design for mobile devices like i Phones,  other smartphones, cellphones, PDAs, and even palm-sized computers.

There are four basic rules to create a good site for a palm sized device:

  • Stick to basic HTML tags such as: p, br, b, i, pre, headers (h1-6), blockquote, center, ul, ol, li, images, and simple tables
  • Avoid frames, layers, imagemaps, plugins, Javascript, Java, and CSS*
  • Keep your layout small, and avoid clutter
  • Be aware of how graphics are displayed

Graphics

Graphics are tricky on many mobile devices. Most mobile browsers support images, but some are not in color, and they often have lower resolution than a personal computer.

Then there is the size. Many mobile devices have a screen width and height of about 150×150 pixels. iPhones and other smartphones are larger, but still smaller than a standard monitor. Many devices will resize your images to fit that small screen, which can result in really ugly images. And even if they don’t resize, if they are too much larger than the screen, they’ll be hard for your readers to view.

HTML

Many (non-smartphone) mobile devices support a limited version of HTML 3.2. If you stick with basic layout and formatting tags, you’ll create a better site for your mobile readers.

Content

Content is where your mobile page will succeed or fail. The key is to set up pages that have enough content to keep your offline readers happy, but not so much that it won’t download or be difficult to read. You have to look at your site and decide what is the most essential. Web pages that are viewed on mobile device like a PDA are usually used as a reference and should be short and to the point.

Tips to Remember

  • Keep your pages small
  • Navigation should be clear and concise
  • Avoid graphics that do nothing to add to the navigation or readability
  • Test your pages Be sure to test your pages in both smartphones like the iPhone and less sophisticated mobile devices like PDAs.
Posted in Uncategorized | Leave a comment

Tips to Make a Website Cross Browser Compatible


If we think about the theoretical part of web development, it seems simple to perform. But many times, after coding, when we test the web page in different browsers it doesn’t look same on every browser. Practically, this thing is not simple. Different browsers exhibit HTML and CSS in different ways.

So, while doing website designing ,designer should have consideration of one of this most important factors to make the website successful. Cross Browser Compatibility is really an important factor of website development. It ensures to display your website consistent across all the browsers. This Cross Browser coding is not an easy task. Here we have some tips for cross browser coding.

1) Keep It Simple –
If your HTML or CSS coding is complex, then this will surely create problem in browser compatibility. When you are in design stage of your website, keep the layout simple. Never use too much elements in your markup coding. For example, avoid using a series of p elements to create a menu, just use “ul” and “li” to create a menu.

2) Code validation –
Before uploading your website, don’t forget to use validators to check HTML and CSS coding. Because if there will be any invalid code, it can produce such a problem in your site that will be very hard to sort out. There are HTML Validators and CSS Validators and also some browser plug-ins like HTML Validator Firefox add-on to check your web pages.

3) Avoid quirks mode of browser –Quirks mode duplicates the older and faulty version of the browser. This makes older websites to do task with new browser and there is no recoding of their pages. Quirks mode can create problem when you are building modern pages while browser submit the page in older version.

4) Use CSS reset rules –
Most of the browsers have default settings of the things like margin and padding around element. These default settings can create problem in other CSS rules. Make CSS rule consistent across all browsers.

5) Develop in Firefox-
Test your website in one browser when you develop the site, and then test it in another browser which is popular. It’s better to test your site in one browser like Firefox as this browser is very nice in all respect. And when you, as a developer, is satisfied and happy with Firefox then test your site in Internet Explorer ,Opera ,Safari etc. Although , there will be some issue in Internet Explorer by the website already tested in Firefox, but still, it is better to do HTML and CSS coding which works in Firefox and then test it for Internet Explorer.

6) Test website in different browsers –
As all new browsers have some quirks mode, so it is necessary to test your site in different browsers like Internet Explorer 6,7,8 ; Firefox, Opera etc.

7) Make Internet Explorer 6 to work with transparent PNGs –Transparent PNGs are image files through which you can do translucency and smooth borders in background of your website. By default, IE 6 doesn’t display transparent PNGs. So, make it work with transparent PNGs.

8 ) Sort out IE issues by using conditional comments-
Sometimes after creating a beautiful web design that works in Internet Explorer, you still need to adopt some CSS or JavaScript hacks. But there is an alternative of this. Use conditional comments which are much better than hacks.

9) Provide Fallbacks-
There are some browsers that support JavaScript and Flash and all supporting images. In this case where these features are not there in browsers, it is better to provide fallbacks.

10) Manual Coding-To make your website browser compatible, the idea of hand coding of CSS and HTML is best. Use of software for this purpose is not a good idea.

Posted in Uncategorized | Leave a comment

What is Web3.0?


What is Web3.0?

Web 3.0, according to Wikipedia, is a term used to describe the future of the web. Web 2.0 would refer to the recent evolution of the web. A brief description of this evolution would be apropos. Wikipedia explores the following ideas in the first 179 words of its definition of Web 2.0

Web 3.0 is frequently referred to as an environment consisting of intelligent web-based semantic applications and desktops, where the web is a database of information published via reusable formats such as XML, RDF, ICDL and other micro formats. By some, it is perceived as part of digital media contribution to the evolutionary path to artificial intelligence that can provide access to information driven by laws of mathematical probability previously calculated by Shannon’s Laws and Bayes’ Theorem. Web3.0 may bring the realization of the Semantic Web, where meaning can be extracted from data representations such as hypertext and utility driven by meaning.

Web 3.0 is also called the “Internet of Services”, where all of the aforementioned promote technology driven creative extrapolations and recombination’s of the information in line with new emerging data services. Again Wikipedia describes Web 3.0 as an “Executable” Web Abstraction Layer – driven by user generated content and broader, more advanced and accessible social media and publishing applications.

Posted in Uncategorized | Leave a comment