Web Standards & Best Practices

Well I don't know of any pages that sum up best practices (I'm sure they exist though) but here's one I use.

Try limiting loading images and files in your HTML pages. Every "object" (in this case, javascript file, image, stylesheet or any other external resource that is loaded into your page) adds a little strain to the page. The more objects you have loading, the cumbersome your page will become.

You can reduce the amount of objects loaded into your page by using sprites in your CSS files instead of seperate images.

For example, you have about 20 icons on your page. Instead of loading all icons as seperate images you can load one "big" image that contains all of your icons. Using CSS you can reposition the background so that for each icon the correct part of the "big" image is displayed (the part where the icon is visible).

Another way to reduce the amount of objects is to combine CSS and Javascript files. Instead of loading 10 CSS files, just 1 file is loaded containing all 10 files combined. This is quite tricky to do though since it'll probably involve PHP, Ruby or another "server-side" language.

Hope i've been able to contribute!

Most of that info is buried inside blog posts and books on web design.

• why import CSS is bad

  • use link instead of @import for performance reason

• jpeg vs vs gif vs png**(http://www.sitepoint.com/gif-png-jpg-which-one-to-use/)

  • For photographic type images, JPG is best, supports 24-bit color
  • For logos or images with blocks of flat colour and no gradients, GIF or PNG8, supports 8-bit color
  • For images using effects such as drop shadows or glows, which also require transparency, choose PNG24.

"Unlike GIF format, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data. This is known as lossy compression, and can result in a loss of quality if a high level of compression is applied."

• div tables

  • div tables are a form of div-itis (see below)

• Floating without a div

  • any element can be floated, using a div when it doesn't have a semantic meaning is called div-itis
  • Among other issue div-itis includes, wrapping elements in a div solely to class and/or id attributes for styling with CSS.

The downsides of div-itis include:

• It dilutes the separation of presentation & structure.
• It makes code harder read, harder to style and mistakes become more common.
• Non-semantic elements are meaningless to screen readers, search bots, feed readers

Accessibility and Responsive design are very cool practices.

Treehouse has a badge to get you started. http://teamtreehouse.com/library/websites/accessibility

(I just reviewed it and put it to use).

Keeping up with your image alt tags is important for screen readers.

Responsive web design is cool, too. I haven't worked through the Build A Responsive Website project, but the videos are making sense.

James- care to comment on <section> vs. <div> ?

@Anthony - I'm not 100% sure I know what you are asking me.

However if I were going to pick a few guiding principles I'd go with:

• Semantic Markup
• Progressive Enhancement
• Accessibility

@James- Apologies- markup hid my question. I was asking your thoughts on section / header / footer tags vs. div tag. I've seen these HTML 5 tags used for structuring your content, though I'm learning with the div tag for css.

Seems div is used for visual organization, and potentially structural (for a screen reader), though I've seen the semantic tags for header footer nav section and article for HTML5.

Thanks for posting so much info on this forum, with quality links!

@Anthony - Here's my understanding of the HTML5 structural elements:

• nav: main navigation block
• article: A grouping of content that can stand on it's own. For example it could be synidated in a feed reader (e.g. blog post)
• aside: Usually a side bar
• header / footer: Usually metadata / nav links for a section element
• section: A "thematic grouping of content"

Most of those seem kinda blog-centric to me except for nav of course. As header & footer are not for sectioning content instead they are to be used inside of the section element. So in a lot cases I'll still be sectioning my pages with div's using semantically meaninful classes.

Here's a blog post where you can also read more about the HTML5 structural elements.

Here's a flowchart to help you decide which element you should use:

image source

If you want to get more info about a particular one HTML5 Doctor is a great resource:

• header
• footer
• section
• article
• aside
• nav

I've also read some intresting dicussions by people far smarter than I am over at HTML5 Doctor and 465 Berea Street among others about the pros and cons of the "new" HTML5 structural elements.