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. ........
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
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.
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 Thanks for your thoughts
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).
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.
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?!?
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.
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.
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
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.
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"
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.
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.