1. Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Web Designing for compatibility

Discussion in 'Programming & Webmastering' started by OnePostWonder, Mar 16, 2013.

  1. OnePostWonder

    Joined:
    Dec 27, 2008
    Messages:
    579 (0.28/day)
    Thanks Received:
    107
    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? :laugh:
  2. Jizzler

    Jizzler

    Joined:
    Aug 10, 2007
    Messages:
    3,394 (1.34/day)
    Thanks Received:
    634
    Location:
    Geneva, FL, USA
    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.
    OnePostWonder says thanks.
  3. stinger608

    stinger608 Dedicated TPU Cruncher & Folder

    Joined:
    Nov 11, 2008
    Messages:
    6,961 (3.35/day)
    Thanks Received:
    3,339
    Location:
    Wyoming
    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.
    OnePostWonder says thanks.
    Crunching for Team TPU More than 25k PPD
  4. W1zzard

    W1zzard Administrator Staff Member

    Joined:
    May 14, 2004
    Messages:
    14,639 (3.93/day)
    Thanks Received:
    11,374
    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
    OnePostWonder says thanks.
  5. syeef

    Joined:
    Jul 5, 2008
    Messages:
    287 (0.13/day)
    Thanks Received:
    68
    @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.
    OnePostWonder and stinger608 say thanks.
  6. Kreij

    Kreij Senior Monkey Moderator Staff Member

    Joined:
    Feb 6, 2007
    Messages:
    13,881 (5.09/day)
    Thanks Received:
    5,615
    Location:
    Cheeseland (Wisconsin, USA)
    Here are some 2013 statistics on IE usage ...
    [​IMG]

    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.

    [​IMG]

    Make sure it works in Chrome and Firefox.
    Aquinus, OnePostWonder and stinger608 say thanks.
  7. OnePostWonder

    Joined:
    Dec 27, 2008
    Messages:
    579 (0.28/day)
    Thanks Received:
    107
    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.

    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.

    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.

    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.

    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.
  8. Aquinus

    Aquinus Resident Wat-man

    Joined:
    Jan 28, 2012
    Messages:
    5,929 (6.53/day)
    Thanks Received:
    1,912
    Location:
    Concord, NH
    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. :p
  9. Kreij

    Kreij Senior Monkey Moderator Staff Member

    Joined:
    Feb 6, 2007
    Messages:
    13,881 (5.09/day)
    Thanks Received:
    5,615
    Location:
    Cheeseland (Wisconsin, USA)
    @ 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 ...
    Code:
    .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. :)
  10. BiggieShady

    BiggieShady

    Joined:
    Feb 8, 2012
    Messages:
    933 (1.04/day)
    Thanks Received:
    307
    Location:
    Zagreb, Croatia
    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.
    Last edited: Mar 23, 2013
    OnePostWonder says thanks.
  11. W1zzard

    W1zzard Administrator Staff Member

    Joined:
    May 14, 2004
    Messages:
    14,639 (3.93/day)
    Thanks Received:
    11,374
    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.
  12. syeef

    Joined:
    Jul 5, 2008
    Messages:
    287 (0.13/day)
    Thanks Received:
    68
    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 :)
  13. W1zzard

    W1zzard Administrator Staff Member

    Joined:
    May 14, 2004
    Messages:
    14,639 (3.93/day)
    Thanks Received:
    11,374
    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.
    BiggieShady says thanks.
  14. Kreij

    Kreij Senior Monkey Moderator Staff Member

    Joined:
    Feb 6, 2007
    Messages:
    13,881 (5.09/day)
    Thanks Received:
    5,615
    Location:
    Cheeseland (Wisconsin, USA)
    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?
  15. Aquinus

    Aquinus Resident Wat-man

    Joined:
    Jan 28, 2012
    Messages:
    5,929 (6.53/day)
    Thanks Received:
    1,912
    Location:
    Concord, NH
    This. Don't re-invent the wheel.
  16. OnePostWonder

    Joined:
    Dec 27, 2008
    Messages:
    579 (0.28/day)
    Thanks Received:
    107
    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.
  17. W1zzard

    W1zzard Administrator Staff Member

    Joined:
    May 14, 2004
    Messages:
    14,639 (3.93/day)
    Thanks Received:
    11,374
    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
  18. syeef

    Joined:
    Jul 5, 2008
    Messages:
    287 (0.13/day)
    Thanks Received:
    68
    Using 3rd-party stuff bugs me a lot :rolleyes:... instead I like to make my own stuff and I can also claim, I made it myself :cool:.

    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 :laugh:.

    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.
  19. Aleksander

    Joined:
    Dec 2, 2009
    Messages:
    3,254 (1.92/day)
    Thanks Received:
    304
    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 says thanks.
  20. OnePostWonder

    Joined:
    Dec 27, 2008
    Messages:
    579 (0.28/day)
    Thanks Received:
    107
    Thanks everyone for your input. I can definitely move forward with the information you've provided.

    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.
  21. Aleksander

    Joined:
    Dec 2, 2009
    Messages:
    3,254 (1.92/day)
    Thanks Received:
    304
    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.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)

Share This Page