Standards Based Development

Posted by: Jennifer Driller in Web Design

Tagged in: Untagged 

For those of you who haven't been looking at the news in web design lately, you're probably not going to get excited about standards based design. For web designers, it's the new black. Companies are demanding designers provide smoother running, cleaner looking web sites that work on all browsers. We achieve these aims through the new Web 2.0. That's just a fancy phrase for clean, smooth, browser-friendly, and interactive.

But it doesn't stop at that. There are actually long-overdue (in my humble opinion) standards being implemented on a voluntary basis. Web designers are getting together and agreeing on a basic formula for creating web sites that use as few tables as necessary, that are lean in code, that adhere to accessibility issues (meaning people who can't see or hear well or use text browsers can still use the site), and that allow search engines to successfully rank them.

What we get are web sites that load faster, are easier to navigate and read and use, rank higher in the the search engines, and leave bandwidth room for multimedia and interactive stuff.

How do web designers accomplish this feat? Well, more and more, it's through the use of CSS. CSS is the acronym for Cascading Style Sheets.

You know, years ago when CSS was coming on the scene, I ignored it. I just didn't want to get into another language as I perceived it. Back then no many browsers supported it yet. We thought Flash was the next greatest thing, so I put my energy into learning Flash. I misjudged the trends. Flash, while cool, takes up a lot of bandwidth and storage space. It limits our disabled users quite a bit, and users have to download a separate program just to run it. Now, that didn't seem like a big deal back then, but the trend is that users seem to want SIMPLICITY. If it takes too long to load - forget it. If it takes too much brain power to figure out - forget it. If it's hard to read - forget it. If the content is lame, it doesn't matter how great it looks. The looks get you a second glance, but that's about it. Of course, this is dependent on your target audience, but it's a general rule that will keep you in good stead.

So, I've concentrated my efforts in creating template designs for content management systems but with the new Web 2.0 rules in mind. The nature of CMS as of today requires SOME tables, but we can make sure that they are kept to a minimum.

I design my eBay templates, Joomla and other CMS templates, and even regular Web Site templates with DIVs and CSS styles now. DIVs take the place of tables. Now, for those of you who don't know what all the fuss is about not using tables, let me explain:

Tables were never meant to be used for design purposes. The guy who created that particular HTML tag intended them for showing actual data tables. But they worked for creating the illusion of layers. What happens when you used tables and nested tables (or tables within tables) is that search engines and text browsers have to follow each table tag and try to discover the meat of the site - the content. This can be confusing for software that simply follows HTML tags. Then they search the images, and if you have a bunch of images in the index.html of your site, you can get a wierd ranking and totally throw off those text browsers. But even regular browsers have to take the time to read all the code in your pages.

What tabless design and CSS do is streamline the code so the content stands out. Here's any example of an index.html page using DIVs and CSS.

 

 
    
       
  • Home
  •        
  • Articles
  •        
  • Contact
  •     
     
          

    This is the main content

     

         
     
          

            

     
     

    I actually use this very template as the basis for many designs. They can get as elaborate as you like simply by changing the CSS file that it's refers to. The CSS might look like this:

     

    #header{width: 800px; height: 70px;}
    #left-menu{margin: 10px; padding: 2px; font: Arial 1.5em black bold}
    #maincontent{margin: 0px; padding 5px; font: Arial 1em black}
    #footer{text-align: center; font: Arial 0.5em black}
     

    Do you see how much leaner this is? It loads so much faster than if you put ALL the necessary information in the index.html. Also, you can make adjustments so much easier, and you can create a more dynamic layout as well.

    It's really the ideal solution to so many problems web designers face in bringing quality work to their clients and to the internet browsers they serve. That's why I endeavor to keep learning CSS styling, graphics optimization, and layout ideas that support standards and Web 2.0.

    Trackback(0)
    Comments (0)Add Comment

    Write comment

    security code
    Write the displayed characters


    busy