1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Best Practices for XHTML(Please post yours)

Discussion in 'HTML & Website Design' started by clinton, Feb 3, 2008.

  1. #1
    1 Don't be lazy, be organized, slipping up once could make more work for you later, and time is money;)

    2. Always use doctypes

    3. An Html doc should always have a <html> tag, head and body

    4. Always add the keyword, description, content-type and language meta tags.

    5. Use divs instead of tables, reason 1. Proper use of tables are for tabular data only, not layouts, images etc. 2. Tables(especially when nested) take longer for the browser to render plus it effects the pages file size.

    6. Use external CSS for styling. Don't use <font size="1" face="Arial"><b>...It makes things very hard to change later on and it also adds to the pages loading time.
    Old Way: <font face="Verdana" size="12"><b>Old way</b></font>
    New improved maintainable way: <b class="SpecialText">New Way</b>

    7. Indent your Html code so it's easy to read. Using tabs is way better than spaces. Reason 1, tabs can be displayed differently in your text editor, Reason 2, hitting the space bar 4 times is much more time consuming than hitting the tab bar once. Reason 3. using spaces instead of tabs greatly increases the file size.
    
    <div>
        <a href="">
            Main
        </a>
    </div>
    
    HTML:
    8. Comment your code.

    9. Keep up to date with XHTML standards since they are the present and future of the web.

    10. ........
     
    clinton, Feb 3, 2008 IP
  2. ayushsaran

    ayushsaran Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Just like that use external javascript for functionality and interaction
     
    ayushsaran, Feb 9, 2008 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Because tabs are editor dependent, major software communities are often required to use spaces for indention, and not tabs. See PEAR coding standards, for example. Also see Gnu and Nokia. These same type rules apply as best practice for html, css, javascript and PHP as well.

    Don't be silly. You tab, but configure your editor to convert tabs to spaces upon save. If your editor is weakly configurable, use a pretty print utility to make the conversion, or write a simple AWK or shell script to do it for you. HTMLTidy will do it while checking your syntax.

    phffft. If you're that worried about a few bytes, don't indent at all. In fact, if size is that worrisome, don't even use line feeds; make the whole page one single line.

    cheers,

    gary
     
    kk5st, Feb 9, 2008 IP
  4. LordXenu

    LordXenu Active Member

    Messages:
    313
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #4
    Code for FireFox first, correct for IE second...
     
    LordXenu, Feb 10, 2008 IP
    clinton likes this.
  5. jamesicus

    jamesicus Peon

    Messages:
    477
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #5
    jamesicus, Feb 10, 2008 IP
  6. clinton

    clinton Well-Known Member

    Messages:
    2,166
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    110
    #6
    Thats what I say, FireFox is more logical than IE in many ways. I truly hate IE, it hasn't progressed besides keeping up with few standards.
     
    clinton, Feb 11, 2008 IP
  7. clinton

    clinton Well-Known Member

    Messages:
    2,166
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    110
    #7
    I think thats really sad, tabs seem to be so much more worth it. I use an 8 length tab, and it seems better to read than 4, but I have to turn dynamic word wrap on usually. I guess it all comes down to preference or whoever your working for. I use tabs, some people don't makes it all the more interesting:D

    Thanks for your thoughts:)
     
    clinton, Feb 11, 2008 IP
  8. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Good habit is to try to use only as many images as you really need for layout. I found out that quite few things can be drawn by css styling or by php's graphic functions.

    Also for background use very small images and use repeat-x or repeat-y to fill the whole background with it. Background-repeat can be also combined with background-position to make some interesting effects (nice borders filled with background image can be quite effective).
     
    risoknop, Feb 11, 2008 IP
    clinton likes this.
  9. clinton

    clinton Well-Known Member

    Messages:
    2,166
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    110
    #9
    I agree 100%
    CSS saves a lot of time in the long run, I found a good filter in CSS3 which creates a radius around divs. Lots of interesting things are coming from CSS3 and I'm looking forward to all of it. As for PHP, I'm pretty sure you can use and output buffer to compress images with gzhandler, I've used it for html and manipulating css to reduce bandwidth usage. gzhandler is freaking amazing, anyone who wants to save a little on bandwidth and get quicker page load results should use it.
     
    clinton, Feb 11, 2008 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Develop and follow a STYLE GUIDE - which LISTS all of these sorts of things.

    Here's mine: (just updated it - It gets a revision once a year)
    http://battletech.hopto.org/html_tutorials/styleGuide.txt


    BULLSHIT. Code for ALL BROWSERS SIMULTANEOUSLY. This 'code for FF, hack for IE' bullshit just leads to pages as broken moving forward as anything else - ESPECIALLY since firefux's error handling is as broken as IE's, meaning that a page written 'to firefox' probably is NOT going to work right in Opera or Safari, much less IE.

    Seriously, ALL the browsers are now free - available to most platforms in one way or another - is "alt-tab F5" REALLY so ****ING difficult?!?
     
    deathshadow, Feb 11, 2008 IP
  11. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #11
    Much easier for you though with your 3 huge monitors, hehe. Nowadays I just use Opera 9 as my html/css browser.. if anything looks off in IE, just set hasLayout on all elements temporarily... rarely have problems nowadays.
     
    soulscratch, Feb 11, 2008 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    You mean two huge and one piece of junk.
    http://www.flickr.com/photos/23614455@N04/2251490035/
     
    deathshadow, Feb 11, 2008 IP
  13. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #13
    Same joystick as me....
     
    blueparukia, Feb 11, 2008 IP
  14. dwayne12

    dwayne12 Well-Known Member

    Messages:
    184
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    110
    #14
    My practices are.

    Use re-usable separate stylesheet files in your website designs.

    For example: typography.css / layout.css / forms.css / colours.css. Keeping everything separate helps keep your code organised and also makes it easier to include in other projects.

    Format your code neatly, take the time to neaten up your code because a lot of people will view your website's code at some point.

    Instead of inserting images directly into the website, display your images using CSS instead. This will ensure your website content loads first and the images lastly. Especially good for low speed Internet connections.

    Comment your code for example <!-- Header / Begin --> <!-- Header / End --> type of thing. So making changes is easier for you and anyone else maintaining your code.

    Code for Internet Explorer first it's always the hardest and then code for Firefox second. The reason I say this is because most people use Internet Explorer still and not Firefox like many people will have you believe. Not optimised for Internet Explorer? Kiss a lot of users goodbye.

    - Dwayne.
     
    dwayne12, Feb 12, 2008 IP
  15. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #15
    Sorry, Dwayne, that's absolutely a poor practice. You must build your code based on a solid foundation of well structured, semantic and well formed html + valid css. When you code against IE, you're getting a buggy rendering which means there will be hidden issues for any compliant browser.

    If your primary test bed is compliant, eg. Konqueror, Opera or Firefox, you will know your coding is good and will remain good. Tweaking for IE6 or 7 is then trivial.

    Right now, MSFT is having internal fits because the upcoming IE8 will be standards compliant. Existing sites built against IE will break because they depend on buggy behavior, just as they break now in Firefox et al. Those sites built to standards and hacked as needed for IE will continue to work.

    Let me emphasize I am not talking about ignoring IE. I am saying you must start with good code. You can only do that by testing primarily in compliant browsers.

    On a side note, this is usually described as code for Firefox then fix for IE. In actual practice, the experienced coder writes good code, checks in FF and IE, tweaks the code and writes some more. Its a back and forth, concurrent process. We find ourselves applying the IE hacks and work-arounds automagically.

    cheers,

    gary
     
    kk5st, Feb 12, 2008 IP
  16. powerlifer

    powerlifer Active Member

    Messages:
    2,002
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    78
    #16
    Correct "kk5st":).

    I must say that semantic mark-up will go along way to help cross-browser viewability. Well structures meaningful mark-up is essential.
     
    powerlifer, Feb 12, 2008 IP
  17. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #17
    Huh? Semantic markup has nothing to do with cross-browser viewability.
     
    soulscratch, Feb 12, 2008 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #18
    Correct actually... Semantics are just good practices to reduce unneeded classes, unneeded wrappers and to simplify the development process (often from days to hours or even minutes) as well as automatically net better accessability in non-visual user agents, better graceful degredation in lesser capable browsers, etc, etc.

    I think they are talking about VALID markup - too often you see nimrods saying rubbish like "who cares about the code" and "validation doesn't mean anything, if it works in IE I don't care" - Which as I keep saying, you are supposed to be writing HTML - if it doesn't validate, it's not HTML, it's gibberish and you are relying on the error correcting behavior of the browsers to form the page correctly. The problem with relying on error correcting is the 'big two' both inherit bad behaviors that have NOTHING to do with the specifications from their predecessors, that are different also from each-other. Good luck getting that wreck to work without adding hacks atop broken code...

    Part of why I'm a bit harsh on people who come into forums looking for 'silver bullet' fixes to a single little problem, when the page in question has almost 200 validation errors, non-semantic markup, presentational markup, deprecated tags, unclosed tags, mixes of markup styles - trying to "quick fix throw a hack at it" is like trying to treat multiple wounds from a .30cal with a package of band-aids and bactine. "Chuck it, and start over"
     
    deathshadow, Feb 12, 2008 IP
  19. dwayne12

    dwayne12 Well-Known Member

    Messages:
    184
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    110
    #19
    Well it comes down to preference, my designs come out just fine coding in this order Internet Explorer -> Firefox - > Opera -> Safari and the others. What you have to take into consideration is not everyone likes Firefox, alot of people don't even know what Firefox is or have heard of it yet.

    Firefox still has a long way to go before it reigns supreme over IE. I prioritise my code in order of importance. Obviously Internet Explorer is crap, but what are you going to do about it? Stop coding for the majority of IE 6 and 7 users and lose a lot of visitors all for the sake of supporting an open source browser?

    You might code for Firefox then fix up the bugs in IE but I work off a set framework that I have created. I have fixes for all major IE issues and bugs which I can readily include in any project and adapt them easily so I don't waste time coding fixes and releasing a neglected project where I spent more time fixing issues rather than coding features or a good UI.
     
    dwayne12, Feb 12, 2008 IP
  20. tsiger

    tsiger Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    i agree with most of you about habits. my 2 cents is versioning. i always keep 2 - 3 versions of each page i create after some major changes especially when dealing with javascript and interacting with elements. It helps me try different things and see which one works best.
     
    tsiger, Feb 12, 2008 IP