Web Design and Development - Milwaukee Wisconsin - Web Design by Kent Heberling

I recently updated the tooltips that pop up on the header and footer links so that they have a slick little animation rather than just appearing after a slight delay. It’s a small change but I think it makes a big difference and to be honest, I’m always looking for an excuse to spend some more time with jQuery.

Ok, a lot of Flash. That’s what I’ve been doing lately. I miss my beloved XHTML, CSS and jQuery quite a lot but I’m starting to do some more fun things with Flash at least. One of my recent projects involves creating a dynamically generated scrolling image gallery. When working on this I realized I needed some kind of a formula to calculate the horizontal spacing of each image so that they would appropriately spread no matter how many images were there. It took me hours to finally work out because, well, I ams not so goods with the maths anymore.

If anybody is looking to do something similar, I’ll save you the time by sharing with you the formula I finally worked out.

(TotalWidth - 2 * padding - LastPictureWidth) /(NumberOfPictures - 1)

Although I’ve always been astounded by how differently the various browsers treat code and how one developer’s approach to a problem can differ so greatly from another’s, it’s only recently really, I mean really truly, dawned on me how ridiculous this all is. At the heart of the problem comes the fact that so much of the W3’s work is ignored whether it’s by major corporations releasing browsers or by stubborn developers who are just going to stick with what the know. If a restaurant blatantly disregards an FDA guideline they are closed down but if company providing half the world with an internet browser blows off the W3 nobody thinks twice. If a lawyer tries to make an argument that violates the Constitution his argument is dismissed but if a developer blatantly disregards a W3 recommendation there’s no consequence. Just imagine all of the frustration and pointless bickering we would rid ourselves of if we all just listened to what the experts are telling us.

Less Markup

A div based layout uses a fraction of the overall markup that tables do. Well styled divs replace the need to put align, height, and width properties in your HTML, they eliminate table rows and cells that do nothing but contain a blank space, and they reduce the amount of nastily nested ending tags that often reside at the bottom of our pages. Essentially, tag soup becomes tag tartar.

• Less markup means smaller file size for faster loading.
• A higher content to markup ratio for improved Search Engine rankings results from div layouts. Additionally, search engines can better navigation and group content found in the divs and lists used in CSS design.
• Less code means fewer opportunities for coding errors.

Quicker Development

Although frustrating and seemingly mired with problems at first, creating websites with divs and CSS actually takes far less time and effort than creating a table based site. As with any technology, you just need to take a little time to learn it.

• Being familiar with div based layouts can drastically decrease the amount of time spent marking up a design. It is, after all, less code to write.
• Using a CSS framework offers even further improvement. Creating the first draft of the latest project I worked on took less than 30 minutes.
• A review of the BluePrint framework can be found here: http://net.tutsplus.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/
• This article details and compares the work that goes into creating the same site in tables and in CSS in an unbiased and judicial manner: http://articles.sitepoint.com/article/tables-vs-css
• This blog post reaffirms my sentiments about CSS being difficult to learn at first but rewarding in the end. It also makes an excellent comparison to properly coding with CSS and properly coding in Java: http://mcarthurgfx.com/blog/article/tables-vs-css-really-

Visual Consistency

After having created dozens of sites both with and without tables I have found that with div and CSS layouts it is much easier to achieve a visual consistency throughout the site.

• It is difficult to get every page to appear the same when using deeply nested tables due to the fact that one missed td or one missed spacer row causes text and image margins to appear off.
• During the development process any change made to the table structure of one page needs to be replicated on others. This becomes cumbersome even after only a few pages have been created and often a change made on one page fails to make it to the other leaving inconsistent layouts between the pages.
• One needs only to begin typing after a <div> tag near the top of the page rather than finding the proper table row 150 lines and 6 indentations into the code when using divs and CSS.

9 out of every 10 people who contact me about web design/development projects list Flash as one of their website requirements. Despite this, I have yet to talk to a single client who actually needs Flash on the site. For whatever reason, the general public seems to associate ANY interactivity and movement, no matter how basic, with Flash. I’ve heard all of the following reasons for why people think they absolutely need Flash on their site:

• Embedded Videos
• Photo Galleries
• Drop Down Menus
• Menu Hover Effects
• Dynamic Content

It’s funny enough that all of this BASIC website functionality is easily accomplished without Flash, but when you start thinking about the excellent interactivity that can be achieved with DHTML and Javascript libraries like jQuery and Prototype, Flash starts to seem incredibly obsolete. I don’t know who out there is informing everybody that they need Flash on their website, but man, it has to stop. My emails to clients are really turning into broken records, listing the project requirements one by one and explaining how that’s not Flash and why it’s better that way.