Web Designing for compatibility

[OnePostWonder]

So, I've read every page over here:

MSDN

I'm still not 100% on how I should be designing a site whose target audience is most likely to have computers running IE 6 in the worst case scenario and IE 8 in their best case scenario because most of the target audience will be on Windows XP.

I feel the MSDN articles can be excessively wordy, so I just kind of fuzz out sometimes. Maybe that's my queue to go do something else?

 

[Disparia]

It's alright that you don't already have a go-to plan, because no two sites will have the same compatibility needs

Do you already have an idea for the visual design? Can it be achieved using only IE6 compatible markup? May only need to create it with IE6 in mind.

Or like "low", "med", and "high" graphic presets in a game, you can also conditionally load styles and markup based on the browser. You could do as little as two designs: IE6 and IE7+, or do a design for every version of every current browser! Ok, that may be a little excessive, but you get the point.

 

[stinger608]

Build the site using just HTML and CSS. That would probably be very compatible with IE6 to current IE10. Of course you would want to stay away from HTML 5 as I am sure that IE6 is not compatible with version 5.

If you want to learn more on HTML coding or are stuck and need guidance W3Schools is an awesome resource.

 

[W1zzard]

you can use html5 just fine, google html5shiv

normally you design a site for ie9+ using html and css and use css conditionals to load a special bugfix stylesheet for older ie versions.

or just say you're not supporting ie6

new tpu design will not support ie6 but should be usable on ie 7 & 8.
ie9 will have the full experience except some gradient backgrounds which eat a lot of performance

 

[syeef]

@OP,
Forget IE6, it is more trouble than its worth.

After designing websites, I always do a full test on IE7, IE8, IE9, IE10, Firefox, Opera, Chrome and Safari. Usually there is less than 2% compatibility issue.

 

[Kreij]

Here are some 2013 statistics on IE usage ...

Don't even bother with IE6. Just check for the browser and give them an update link to IE9 or IE10.
10 Is still low, but since they released it for Windows 7 it will grow.

Make sure it works in Chrome and Firefox.

 

[OnePostWonder]

It's alright that you don't already have a go-to plan, because no two sites will have the same compatibility needs

Do you already have an idea for the visual design? Can it be achieved using only IE6 compatible markup? May only need to create it with IE6 in mind.

Or like "low", "med", and "high" graphic presets in a game, you can also conditionally load styles and markup based on the browser. You could do as little as two designs: IE6 and IE7+, or do a design for every version of every current browser! Ok, that may be a little excessive, but you get the point.

I totally neglected to bring up anything about the design in my OP. I'm a minimalist, so I'm really just looking to present the the website in a no-frills fashion. I've looked into conditionals a bit; for example, the whole "lte ie9" thing, which I believe is used here on TPU, for example. It's part of my hang up with the MSDN website. Just from what I've come to understand intuitively, writing with older markup will appeal to old browser as well as new browser versions, but new markup would not appeal to old browser versions (such as IE 6 and HTML 5 not working so well together). When I read the articles at MSDN, they make it seem like it can go both ways, which it probably can with conditionals, in that it is compelling the browser to function in quirks vs standard mode.

I was hoping someone could take what is said in exhaustive breath at MSDN and make it into the short answer it seems capable of being.

you can use html5 just fine, google html5shiv

normally you design a site for ie9+ using html and css and use css conditionals to load a special bugfix stylesheet for older ie versions.

or just say you're not supporting ie6

new tpu design will not support ie6 but should be usable on ie 7 & 8.
ie9 will have the full experience except some gradient backgrounds which eat a lot of performance

Thanks for pointing this out. I'll give it a look, but I'm hoping to avoid scripts for the time being. Nonetheless, its implementation is probably easy and I may be compelled to use it should the circumstance require it.

@OP,
Forget IE6, it is more trouble than its worth.

After designing websites, I always do a full test on IE7, IE8, IE9, IE10, Firefox, Opera, Chrome and Safari. Usually there is less than 2% compatibility issue.

I probably could safely forget IE 6, but I'm serious when I say the demographic is going to be on Windows XP and potentially a sizable amount of the demographic will not have upgraded their browser, as by-in-large they're not as computer literate as say...the average teen.

Build the site using just HTML and CSS. That would probably be very compatible with IE6 to current IE10. Of course you would want to stay away from HTML 5 as I am sure that IE6 is not compatible with version 5.

If you want to learn more on HTML coding or are stuck and need guidance W3Schools is an awesome resource.

HTML and CSS is indeed my plan. The XHTML 1.0 Strict specification appealed to me most and for compatibility I'm using CSS2 at the latest.

Here are some 2013 statistics on IE usage ...
http://img.techpowerup.org/130320/Capture080.jpg

Don't even bother with IE6. Just check for the browser and give them an update link to IE9 or IE10.
10 Is still low, but since they released it for Windows 7 it will grow.

http://img.techpowerup.org/130320/Capture081450.jpg

Make sure it works in Chrome and Firefox.

I really did not expect IE 6 usage to be that low. I'm glad it is and thanks for posting that. I'll have to re-review compatibility charts on CSS and what-not to see what else I can make use of now.

 

[Aquinus]

Here are some 2013 statistics on IE usage ...
http://img.techpowerup.org/130320/Capture080.jpg

Don't even bother with IE6. Just check for the browser and give them an update link to IE9 or IE10.
10 Is still low, but since they released it for Windows 7 it will grow.

http://img.techpowerup.org/130320/Capture081450.jpg

Make sure it works in Chrome and Firefox.

I think this really depends on demographics. I've written a login portal for work that does SAML 2.0 auth with Google and Moodle (since I work for a school,) so I record things coming in like IP, agent string, etc. because all of our traffic hits it for SSO, so I get a list of the most common at any given time for the active sessions in the database and where this trend is mostly true in my case. There is actually a smaller discrepancy between the number of users using Chrome and IE in our case. I think this is attributed to a lot of schools using only IE (one version or another, typically 8, 9, or 10). Just something worth noting because demographics can have an impact on what kind of browsers are going to be using your web application more often than others. It's also worth considering that you really want to try and support everything you can regardless of how many users use it, as long as it is used and not ridiculous.

...So don't go supporting Konkerer just because a handful of people tried using it.

 

[Kreij]

@ Aquinus : I agree that analytics are your friend when determining the demographics of your user base. There does come a time, however, when catering to the least common denominator becomes a worthless endeavor from a financial standpoint (time is money) as you stated.

One of the nice things about CSS classes is that you can code once and pretty much forget about it in many circumstances ...

.transform
{
  transform: rotate(30deg);
  -ms-transform: rotate(30deg); /* IE 9 */
  -webkit-transform: rotate(30deg); /* Safari and Chrome */
  -o-transform: rotate(30deg); /* Opera */
  -moz-transform: rotate(30deg); /* Firefox */
}

<div class="transform"> </div>

Doesn't always work as not all browsers support all of the CSS3 stuff, but it helps to mitigate some of the compatibility nightmare that are browsers.

 

[BiggieShady]

I'm hoping to avoid scripts for the time being.

You should reconsider because some pretty common stuff like tooltips, tabs, accordions, etc. require use of JavaScript.
I recommend jQuery and jQuery Tools.
I always end up using jQuery Tools, mainly for it's tabs. Mostly, when I develop web apps, tabs are necessary.
Much more lightweight than jQuery UI, but it does not yet work with latest version of jQuery.

 

[W1zzard]

The XHTML 1.0 Strict specification appealed to me most and for compatibility I'm using CSS2 at the latest.

I strongly recommend you use HTML5 for all new projects, it will work just fine on older browsers with the shiv I mentioned before.

Also learn how to use the new HTML 5 tags correctly

+1 for jQuery, using it in all new projects. Just make sure your site is usable (not perfect) without JS enabled.

-1 on jQuery Tools, couldn't find anything in them that would be useful for what I do.

 

[syeef]

I don't like 3rd-party JavaScript libs like jQuery. I like to use my own custom libs instead... smaller and faster and does exactly what I need, nothing more, nothing less. But sure does take a while to build and debug it

 

[W1zzard]

I don't like 3rd-party JavaScript libs like jQuery. I like to use my own custom libs instead... smaller and faster and does exactly what I need, nothing more, nothing less. But sure does take a while to build and debug it

I thought just like you, then I started using jQuery and can't live without it now. Your own library will never be as mature and compatible as jQuery.

What do you do in JS that's actually slow on a modern system? .. or even a modern smartphone

If you are worried about the download size, you can use jQuery hosted on Google CDN, so your users will come to your site with it in their cache already. Google probably logs and uses the access though, other CDNs exist, or just use sufficient caching headers on your own site.

 

[Kreij]

I have to agree with W1zz on this.
Unless you have specific requirement specifications that a 3rd party API does not support, why reinvent the wheel?

 

[Aquinus]

I thought just like you, then I started using jQuery and can't live without it now. Your own library will never be as mature and compatible as jQuery.

This. Don't re-invent the wheel.

 

[OnePostWonder]

If I find it necessary to implement JS (which I probably will for the image gallery), I had decided a while ago I would use jQuery. It seems to have become a de facto standard.

Using the HTML5shiv to target older browsers seems like a good solution, but let's talk hypothetically and get back to the original question. If I decided to use XHTML 1.0 Strict, what is the most effective way of targeting those older browsers? As I said, the MSDN articles seem particularly long-winded on this.

From what I've read different places, you can do CSS hacks, you can target the browser in the mark-up, etc. It seems most common that the browser is targeted in the mark-up and, correct me if I'm wrong here, an entirely different style sheet is served up.

Please, let me know! Thanks.

 

[W1zzard]

From what I've read different places, you can do CSS hacks, you can target the browser in the mark-up, etc. It seems most common that the browser is targeted in the mark-up and, correct me if I'm wrong here, an entirely different style sheet is served up.

some people put their hacks inside their main stylesheet, others put them in separate files which get loaded via css conditional.

i prefer to have clean, standards css in my normal css files (which makes them smaller, too). and then using a separate stylesheet for crap browsers

 

[syeef]

I thought just like you, then I started using jQuery and can't live without it now. Your own library will never be as mature and compatible as jQuery.

I have to agree with W1zz on this.
Unless you have specific requirement specifications that a 3rd party API does not support, why reinvent the wheel?

Using 3rd-party stuff bugs me a lot ... instead I like to make my own stuff and I can also claim, I made it myself .

But the main reason for doing this is "implementation", mine is simpler to implement and it matches my coding style and the rest of the site, which gives me inner peace I guess .

I have my own libs like Ajax, Data Grid, WYSIWYG editor etc.

But like I said before, it take a while to build and debug it.

 

[GSquadron]

Steps:
html
css
jquery or asp,php

I made a website in the first 3 months and it worked ok.
I think that is the time you will need to make a working website, but don't know about asp.net

 

[OnePostWonder]

Thanks everyone for your input. I can definitely move forward with the information you've provided.

some people put their hacks inside their main stylesheet, others put them in separate files which get loaded via css conditional.

i prefer to have clean, standards css in my normal css files (which makes them smaller, too). and then using a separate stylesheet for crap browsers

I noticed in your mark-up you use the meta http-equiv="X-UA-Compatible". It's in the MSDN articles and I'll have to review, but like I said they're a bit wordy and you can probably sum it up for me; is this the best thing to use and does it act as a replacement to the other options, such as having an alternate style sheet? I didn't see a .css file in your mark-up that caters to older browsers, which is part of why I'm intrigued.

 

[GSquadron]

I noticed one thing with the wiz example.
That is of extreme importance because the website is going to shift to the left if you don't use it. (IE only)
It looks like it worked for my website only when I specified <!doctype html> at the first line.
Also, there is no need for backward compatibility for what is used on this website.
It still uses html 4 and is perfectly compatible with every single browser from 1999 to present.