which browsers should I design for?

[bazz]

Hi,
I am reasonably new to web design. In fact I am very ne w tod esign but not new to page building.
I just want know having worked only with ie5 and 6 fr the past two years and netscape communicator before that (Yeeeeuch. It didnt like css did it?) which browsers should I consider when re desiging my site.

85% of my visitors use ie5 or 6 and some use mozilla and opera though i dont know which variants of those two last ones.

Oh yeh and do we now the urls of the site from where i can download them.

much appreciated

bazz

[liorean]

The way to go is clear:
Begin developing for standards compliant browsers:

any: Mozilla (1.4 will be a good version to use when it's out, since both Netscape 7 and Camino will be updated to that version.)

mac: Safari (latest)

lin: Konqueror (latest)

win/lin: Opera 7 (latest)


Then you tweak to the less standards compatible:

mac: Internet Explorer (latest)

win: Internet Explorer (5.0, 6.0, possibly 5.5) Use virtual machines or multiple os installs to achieve this.

any: Opera 6


Then, last, you see to that it doesn't look that awfully terrible, or even crashes, in:

mac: iCab (latest)

all: Netscape Navigator (4.08 or 4.5. Crashes on different things in different systems, so test in all)

mac: OmniWeb (latest)



<http://mozilla.org/releases/>
<http://opera.com/>
<http://browsers.evolt.org/>

[cg9com]

The internet is a way to access/transfer information, with this in mind, forget about specific browser compinsation.

Markup should be accessible, to not only browser software on your PC, but to all devices that can access the internet, there are more than just browsers out there.

I say, first stick with the standards, valid non-proprietary coding and semantic(are we overusing this word yet? :D) markup.
After you have done that, everything can access your page, more than just browsers, but screenreaders, wireless devices etc. etc.

[bazz]

Thanks guys. Sunds logical that i follow semantics etc. I just thought (yeh I know its not good when I do that :) )that some browsers parse the content slightly differently so that It can be a pain for the user. I'll check out the links.


thanks
bazz

[cg9com]

Yea there still are some things rendered differently, but in my experience it's easiest to make valid markup to ensure that even though a browser will (and it will) render a page differently, at least its solid, you know?
User stylesheets are a prime example, a person can make your page look completely different depending on something as simple as there preference for a link color, or block level everything, heh.

[zoobie]

IE5+ and NS6+ only :D

Of course, you could check:

Joe's Browser
Vastastik
Mojo
Coffee
Brilliant (v3.7+)
Sara's Browser
Star 9
My Browser
Flatiron
VMT (v1.01)
Wired
Majik
Br0ws3r
Grannys (v4 only)
Viper
Popper
Cool Shades :cool:

[cg9com]

zoobs, dont forget Neoplanet. :D

[Fatman]

i always check Firebird too :)

fatman

[brothercake]

Don't design to browsers at all; design to the standards and then tweak it to specific browsers afterwards, only if you have to.

[theabyss]

I'd recommend validating to XHTML Basic (http://www.w3.org/TR/xhtml-basic) It's great to ensure code is compatible with all sorts of programs.


The XHTML Basic website by the W3C:
Web clients such as mobile phones, PDAs, pagers, and settop boxes.

I use my own custom XHTML DTD and use the WDG validator to validate my entire site. It's a great validator for having the validate site option. This is my DTD:


<!ELEMENT html (head, body)><!ATTLIST html>
<!ELEMENT head (title, link)><!ATTLIST head>
<!ELEMENT title (#PCDATA)><!ATTLIST title>
<!ELEMENT link (#PCDATA)>
<!ELEMENT body (p | img)*><!ATTLIST body>
<!ELEMENT p (#PCDATA | a | br)*>
<!ELEMENT a (#PCDATA)>
<!ELEMENT img EMPTY>
<!ELEMENT br EMPTY><!ATTLIST br>

<!ATTLIST link rel (stylesheet) #REQUIRED type CDATA #REQUIRED
media CDATA #REQUIRED href CDATA #REQUIRED>
<!ATTLIST p id ID #IMPLIED class CDATA #IMPLIED>
<!ATTLIST a href CDATA #REQUIRED>
<!ATTLIST img src CDATA #REQUIRED alt CDATA #REQUIRED>


Very minimal? Yeah, I know :D It's possible to design a high quality site using this. Paragraphs styled with CSS can downgrade very gracefully on browsers that don't support CSS. They'll just follow the paragraph breaks. I change this DTD based on things I learn, so it might not be a consistent DTD to validate your site with, but here's the DOCTYPE code for it:


<!DOCTYPE html SYSTEM "http://www.runpr.org/content.dtd">


Any feedback regarding my DTD? Questions? Comments? Ideas? I'd love to hear your thoughts :thumbsup: Also, does anybody know why the W3C didn't require us to have:


<!DOCTYPE html SYSTEM "http://www.runpr.org/content.dtd" />


because it's a tag like BR, P, etc. Just curious ;)

[cg9com]

Originally posted by theabyss
does anybody know why the W3C didn't require us to have:

<!DOCTYPE html SYSTEM "http://www.runpr.org/content.dtd" />

because it's a tag like BR, P, etc. Just curious ;)

Because it's NOT a tag like BR, P, etc.
the DOCTYPE declaration is not an element, it defines rules for elements and its attributes.

[liorean]

This goes back to SGML.
'<!' begins a parser directive, not a tag. Inside a parser directive, '--' starts a comment, '--' ends it. You can have multiple comments in SGML's directive, but not in XML's.

[brothercake]

I don't personally see the point of a compact DTD like that - I wouldn't use it in practise because it's missing stuff I use a great deal - <cite> <address> <blockquote> <strong> <code>.

Why do you not define width and height attributes for img? Arguably the size of an image is a semantic attribute, rather than style.

[theabyss]

Oh, I see now. It's the exclamation point that makes it an element.

I wouldn't add width and height because that's automatically figured out by the browser right? At least I think it is. You could always define height and width in CSS to images. Give each one a different class. If I needed to set those attributes, I'd do it like that. I don't know the CITE and ADDRESS tags, I know the last 3 but don't use those in my pages. It's pretty much a DTD for the elements contained in my site.

[liorean]

The width and height also describes the size of the image element (not only the image). This means that before it is fully downloaded, or if it can't be found, the element will take the size it was intended to. This makes drawing the page faster from the browser's rendering engine, because it doesn't need to recalculate the positioning and sizing as many times.

It also often makes the page loading more attractive and less 'jumpy'.

[brothercake]

Exactly - so your DTD should include the attributes ;)

[theabyss]

Very nice explanation! :thumbsup: Having pages less jumpy is certainly a benefit. I thought about someone loading one of my pages that has lots of images, and they might be behind a modem and have it really jumpy :) I'll put the attributes in as soon as I submit this post. Thanks for your help!

Anymore things to add? :D


I put my DTD in my sig now :cool: