Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Creating A Website To Be Cross-browser Compatible


  • Please log in to reply
9 replies to this topic

#1 Joshua Sciarrino

Joshua Sciarrino

    Mach 1 Member

  • Members
  • 342 posts

Posted 26 May 2008 - 09:42 PM

Okay, I'm new to designing website and don't really know the major differences between browsers. One webmaster told me 'design a website for firefox, safari, etc, but not ie and then later add tweeks to make it work for IE'.

Is this true?

Any other suggestions?? Because this seems to be an issue, that I can't seem to find the answer to. How do I make my websites LOOK close to my original design.

#2 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1878 posts

Posted 27 May 2008 - 03:55 AM

Build a site to meet the 'web standards'. That means using good old (X)HTML for your site structure and CSS for your styles. A 'text only' site will be cross browser compatible and accessible to anyone using a PC, Mac, PDA, Mobile phone and screen reader. The incompatibilities come when you begin to style the site. But if you keep things simple, do not rely on absolute or relative positioning, fixed width and heights, point or pixel sized fonts and stick with the websafe colours then you shouldn't have a problem.

So the webmaster was correct, test the site using Firefox or Opera and then see how it looks using IE. It's also worth remembering that a website that works in IE7 may not work in IE5!

Incidentally, you cannot ever guarantee that your site will look the same as you original design. People use different operating systems, browsers and monitors, they adjust font sizes and colours, have different screen resolutions, change the brightness, wear glasses, are colour blind and so on. But if you stick with the 'web standards' your chances of success will increase.

There are loads of site dedicated to web standards:

Wikipedia - web standards

Web Standards Project

W3C and W3 Schools

Zeldman's Invaluable Book

The Maxdesign Checklist

#3 Joshua Sciarrino

Joshua Sciarrino

    Mach 1 Member

  • Members
  • 342 posts

Posted 27 May 2008 - 06:12 AM

Would you say strict is better than transitional? When trying to achieve this goal.

#4 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1878 posts

Posted 27 May 2008 - 06:28 AM

Aim for strict where possible because it forces the separation of content and style:

24 Ways: Transitional vs Strict

But if you want to keep things working in older browsers you may need to use transitional:

Quirksmode

#5 Joshua Sciarrino

Joshua Sciarrino

    Mach 1 Member

  • Members
  • 342 posts

Posted 27 May 2008 - 06:58 AM

Yea, I'm not too interested in having the site compatible with older browsers, since the updates are free and the user is too lazy to upgrade. If we had to pay for these upgrades, then I might consider changing my decision. Thanks for the help.

#6 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1878 posts

Posted 27 May 2008 - 07:32 AM

Take care with that approach. There is still a good number of people still using IE6, not because they are too lazy to upgrade but because they may not be able to or are unaware that they can.

It's no good building a site that only works properly in IE7 and FF2 if 50% if your potential customers are still using IE6.

In any case, you are posting in the cross-browser forum which advocates that a website should be cross browser compatible and degrade gracefully if images, javascript and CSS support is not available or is deactivated. This particularly pertinent to mobile devices which can have very flaky support for anything other than basic HTML and CSS.

#7 Joshua Sciarrino

Joshua Sciarrino

    Mach 1 Member

  • Members
  • 342 posts

Posted 27 May 2008 - 07:36 AM

Hmm, thanks for the sober comments. I think being able to be compatible to mobile devices is another world. I could be easily mistaken but I wouldn't expect good designs to be adaptable to all platforms.

#8 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1878 posts

Posted 27 May 2008 - 08:10 AM

What constitutes good design is a contentoious issue. A site built in flash may look stunning and win all sorts of awards but be totally unusable to someone in a school struggling to get by on an old PC with IE5 and a 15" monitor. In any case what you consider to be a good or aesthetic design others may find ugly and garish.

But this is getting away from the issue - forget everybody else, build your site from the ground up. A simple HTML page that has nothing more than headers, paragraphs and lists with great content and intuitive navigation could be considered good design; it is totally accessible, usable and provides the visitor with the content they need even via the slowest internet connection.

Being compatible to mobile devices is not that difficult, all you need is a 'handheld.css' to scrub out the bits that the mobile device doesn't need or can't resolve.

My example of good design: arxiv.org/. Not visually stunning but very simple to use and meets the needs perfectly of the scientists and researchers that use the site.

#9 Joshua Sciarrino

Joshua Sciarrino

    Mach 1 Member

  • Members
  • 342 posts

Posted 27 May 2008 - 08:14 AM

What a contrast!!! I do like their favicon. :)

A site built in flash may look stunning and win all sorts of awards but be totally unusable to someone in a school struggling to get by on an old PC with IE5 and a 15" monitor.


That was my point of posting that website. Great designs! (although relative word) but it might not be compatible with all devices.

Do you have some good examples of how to effectively use handheld.css?

Edited by Flying Monkeys, 27 May 2008 - 08:15 AM.


#10 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1878 posts

Posted 27 May 2008 - 08:47 AM

It's pretty simple. Fire up your 'screen.css', make everything you don't need {display:none} and save as 'handheld.css'.

The sort of things you don't need are: borders and backgrounds, you can strip out all the images for effect, floats and display:block. Turn your styled navigation list into a standard list and clean up all the font effects.

You can do the same thing in a print.css file.

In your document head you can then add:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld">
More information from the W3C

If you have built the site with a logical structure and used divs to break up the part of the page (logo, navigation, maincontent, sidebar, footer etc) you can hide great chunks from the mobile device.


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users