Browser and system compatibility
Your webpage might not look the same in all browsers — read this tutorial to learn what the differences may be.
While you're coding webpages, you probably preview them in your browser
a lot, and know that you're finished when it looks exactly like you wanted
it to look. In your browser.
Then, on the splash page you strap on some requirements, like minimal
screen resolution, browser version etc. and consider it done.
It's good to have that kind of information on the splash page if you're
using technology that is not common to all the visitors, but sometimes
the things people write are just unnecessary. This tutorial
will teach you relevant things on how to make your websites compatibile
with alternative browsers.
Contents
- The splash page
- Display size
- Colors
- Fonts
- Image formats
- HTML
- CSS
- JavaScript
- Flash
- Server-side scripts
The splash page
A lot of sites out there have splash pages. Most of them don't. Nelchee's Dungeon had some splash pages in the beginning when I was running bilingual site (English and Croatian), but eventually I closed the Croatian version so there was no need for splash page anymore.
A splash page should be a simple HTML file with code every browser understands, and images every browser can show. You usually put an enter sign there, a list of requirements, some affiliate links and banner rotations. If you have an important announcment, you usually put it there. It's all cool, but sometimes people would just like to skip that. Don't get me wrong, but I'm not very fond of splash pages. If you have one, you better have a really good reason for it :>
Good reason for having splash pages is to inform your visitors about
what they are about to see. If you have content that is not for little
kids like nudity and violence, you should state that on your splash page,
so little kids who run into your website could be warned about the
innapropriate content.
If you have different versions of your site, like different languages
or different layout skins, this is also valuable information. But basically,
you can skip it and go to the default version, with the ability to change
to another version easily by putting links on a very visible place.
If you are using a technology not everyone uses (like flash),
you should mention that on your splash page.
But if you use the technology that 99% of visitors uses (like frames),
that kind of information is really not crucial and you can omit
the splash page.
Display size
Display is determined by the hardware. If someone has a small screen and poor graphic card, he will be impaired compared to users with average screen size and graphic capabilities, no matter what browser he uses. Nowadays not much people have the resolution smaller than 800x600 pixels.
So, if you want the website to be compatibile with most resolutions of desktop computers, you should have your designs not wider than 800 pixels. actually, about 770 pixels is good (considering the scrollbar that takes about 20 pixels width). Users on 1024x768 resolution will see it just fine. Those with above resolutions will find it a bit small, but it's better for the page to be smaller than the screen size than to stretch out of it.
Offcourse, someone can access your website through a hand-held device, even mobile phone! (I was shocked when a friend of mine told me she read my blog through her Nokia 3100 and it looked just fine) So, it would be best if your content could adapt to the screen width, but fixed width is fine as long as its avilable for most users.
Colors
Most of graphic cards that are used nowadays show high amount of color, 16-32 bit. Not much people see 8 bit color, and lower than that... well I really feel sorry for the individuals who have to use such a machine. Not many of them do, and certainly there is a small possibility that those people will get to your website. So, don't worry about the colors, JPEGs should be shown well on almost all computers, and GIFs will be shown for sure, since they only store up to 256 colors.
There is a color scheme that is called "web safe". Colors in that palette will be shown as they are on all screens. However, nowadays even mobile phones show thousands of colors so you don't have to worry about that anymore. For most users, web safe palette is a past tense thing.
Fonts
Once people discover the wonderful world of HTML and CSS, they go overboard by using the fonts they like and find them matching for their layout, but aren't aware that visitors who don't have those fonts installed will see the text written in Times New Roman. And man, Times New Roman is the ugliest fonts of all (right after Comic Sans), I even find Courier more attractive. So, when you format your text, put more than one font in your font-family tag so that visitors who don't have the first suggested font can view the next one, etc. And make sure those fonts are standard, like Times, Verdana, Arial, Helvetica, Georgia, Tahoma, Courier, Geneva etc. You know, the boring old fonts everyone uses. At the end there should be a generic font family like serif, sans-serif, monospace...
Image formats
JPEG, GIF or PNG? Now that's a tough one. JPEG has millions of colors,
but no animation or transparency.
GIF can be transparent and animated,
but comes out only in 256 colors, besides if you don't use the software
that bought a license from Unisys (the creators of GIF format) you must
buy one yourself. But since most of you use Adobe and Macromedia software,
no need to be worried.
PNG supports both transparency and semi-transparency,
and can be exported as 8-bit or 24-bit, but it can't be animated.
Decision is on you, but have this in mind: not all browsers support PNG. Here is a list of those who do. If you want to learn more about differences between GIF and PNG, W3 is a helpful resource.
HTML
Some of HTML code is supported by all browsers, some is not.
Tables are well supported by all browsers. When you make a table layout with fixed size, it will look the same in all screen resolutions and browsers. Wheather that is the correct use of tables or not, that's quite another thing.
Frames are supported by all modern browsers, but not
older ones. Internet Explorer 3 is one of them, but I doubt there
are any people who use that browser. However, there is a way to display
some content on the page even if user doesn't see the frames — it's by
adding noframes content. Open your page containing the frameset
and insert this code before the </html> tag:
<noframes><body>
You shuld get a modern browser that supports frames.<br>
Get <a href="http://mozilla.org/products/firefox/">Firefox</a>!
</body></noframes>
Your content may be a frameless layout, or a simple message that the visitor's browser is out-of-date and that he should get a browser that supports frames.
Layers are newer thing in HTML
code, and older browsers
do not support them. If you position your layers with CSS, in older browsers
the layout will be broken, but that's the CSS issue, wich is a matter
for itself :)
I repeat, the "older browsers" are versions of IE and Netscape
under number 4 and nobody uses them anyway. If they still do, it's their fault —
layers (or "divs") are the part of the standard.
CSS
CSS is format that allows some neat looking things, but
it's not supported by the older browsers. The viewer who owns such browser
while visiting the page entirely formatted with CSS,
will se no formatting at all — the background will be plain white,
the text Times New Roman black, and the links blue. So, this is the basical
"old browser" issue. But, while it seems to you like a flaw,
it's actually CSS' big advantage — you can do anything, but
I mean anything, overlap blocks, hide and display text, images, toggle colors,
sizes, anything... while it all remains accessible to visitors that use
browser wich isn't standard-compliant.
But, as wonderful as it looks, there are issues amongst new browsers.
When more companies work on the same field, they might set some things in their products in a different way. This is what happens to modern browsers - we have Internet Explorer, Netscape Navigator, Mozilla, Mozilla Firefox, Opera, Safari, Konqueror, Avant, Crazy Browser... these are only the most popular ones. So, the W3C group came up with a standard that browsers tend to stick to, but not all of them (for example, hatred amongst web designers, but most popular in public — Inernet Explorer). You may want to validate your CSS to see what I'm talking about. Even if you have good coding skills, the validator might find some errors anyway. Everything considered an "error" will result in showing up in different browsers differently, or not showing at all.
Let's just take a common example, scrollbar colors. In Internet Explorer 6 scrollbars can match the layout completely, or even be shown as transparent. Since it's not a part of the standard, other browsers will show regular system colors for the scrollbar, no matter what CSS you wrote. (EDIT: Opera 8 supports scrollbar colors aswell) So, when you make a beautiful colorful layout with little frames in the middle — in other browsers it can look pretty ugly. So, don't rely on CSS completely. Try to put scrollbars on a place where they will interfere with the layout as less as possible.
Some things that are rendered differently are margins and padding of divs,
depending on the box model. When you set
{width: 200px; margin:0; padding:0; border: 0;} it's the same in all browsers — I mean,
it's a zero, whatever the way you put it. But when you write
{width: 200px; margin:5px; padding:0; border: 5px;} or
{width: 200px; margin:0; padding:5px; border: 5px;}, different browsers may display
it differently.
And that's where the problem is — browsers don't show box width the same way, so what looks good in Mozilla
might not look good in Internet Explorer and vice versa.
I am using Mozilla Firefox and I've seen some webpages where the layers were
overlapping eachother where they really weren't supposed to, or layouts
completely broken. It's tough to code a tableless layout that
will look good both in IE and other browsers
if you don't test it in those other browsers.
The filters (opacity, glow, blur, drop shadow...) are defined in a different
way for IE and Mozilla. For an example, opacity for
IE looks like this: {filter: alpha(opacity=50);}
and for Mozilla, like this {-moz-opacity: 0.5;}. Opera uses CSS3
model, {opacity: 0.5;} which is yet to become a part of the
standard. Note that the end result is the same, and you should include all
3 variations to insure it works in all browsers.
Conclusion: you don't need to mention using CSS, since everyone uses it anyway. But be careful while coding your CSS, and if you can't code a tableless layout that will look right in IE and alternative browsers, stick to the tables.
JavaScript
JavaScript is often used for special effects. Since it's a client side script, it depends on the browser.
Before I move on, I must explain this: client side scripts are executed in the browser. HTML, CSS, and JavaScript are such "languages". Server side scripts are executed on the server, and then the final result is sent to the browser. PHP, ASP, SSI, Perl etc. are such scripts.
So, in order to execute JavaScript, one must have it istalled
and enabled. Otherwise, nothing will happen. The drop menus won't
work, the images wont change on hover, and the pop-ups won't open.
Some people intentionally disable Java because they're afraid of possible
malicious scripts or simply don't want pop-ups (and those are IE
users, because most of other browsers have implemented pop-up killers).
So, if you use JavaScript on your webpage, you should
warn your users about it.
Flash
Flash are the animations in .swf format, and your browser
requires a plug-in for viewing it. When you
attempt to open such page that contains flash animations, if you don't
have a plug-in, you won't see the animation. However, usually the page
will pop up a message that a plug-in is required and suggest you to download
it. It's really safe, there's is nothing to be afraid of while installing
it, so just go ahead. The installation won't take long.
This is what happens to all the visitors who don't have that certain plug-in
installed yet. So, if you use flash on your webpages, you should
have a splash page. On that splash page you may put a little .swf animation,
and in case the visitor doesn't see the animation, provide him a "get
flash player" link so he can install it before entering your page.
PHP, ASP, SSI, CGI ...
All of these are server side scripts, which means your server must support it. However, if the server supports it, you don't have to be afraid about the visitors — their browsers will get plain HTML code anyway, since the server is the one to execute the scripts. Thus, there is no reason for you to mention that you are using these scripts except if you want to brag about it.
I hope I made things a clearer for you, so you will now know how to improve your webdesigning skills to suit more visitors :)
