Web Programming
X/HTML, CSS, Javascript, PHP, Java, Perl, SQL…
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.
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.
Code Readability
A basic div consists only of <div> and </div> tag while a basic table consists of <table><tr><td></td> </tr> </table> . All of these tags become further complicated with nested tables which eventually create a behemoth JSP which is difficult to dissect. Once the time is taken to learn div layouts reading through the page markup is extraordinarily easy. Unfamiliarity with the technology is not legitimate grounds for dismissing it as div layouts with CSS only take a few weeks to learn.
- I once taught a back-end developer div layouts for some admin pages on a website. Having no CSS and div experience he picked it up in a few hours and was amazed and how much simpler the JSP became.
- Using a CSS framework and div layouts my team was able to create the basic layout and integrate into it some image generating back-end code in less than an hour.
Improved Maintenance
Most will agree that the true power of CSS is in the way it allows a site to be redesigned or revamped without having to touch every single page in the site. Using a CSS driven div layout makes it possible to update the appearance of a site on a much more frequent basis without great effort.
- Although we go through painstaking detail to separate business and action logic in our Java, PHP, and .NET code we make no efforts whatsoever to separate content from layout in our page design. A well coded HTML page contains almost nothing but content while the CSS file contains all of the layout properties. Just as we create business, action, domain, and DAO classes for separation of work and easier maintenance in back-end code, we should do the same on our front-end.
- This article reviews the merits of CSS and comes to the conclusion that the separation of content from layout is the cornerstone of CSS: http://www.michaelthorn.co.uk/web-design-tables-versus-css.php
- In order to change the layout of a table based site one must edit each and every page since the formatting properties are on the page. When changing the layout of a CSS driven div layout, it is possible to achieve site-wide dramatic changes with a few minor changes to one CSS file.
- The classic example of this is: http://www.csszengarden.com/
Select a design under the “Select a design” section to watch the site change its appearance completely without altering the HTML markup whatsoever. This demonstrates how much change one can make by only altering a single CSS file when using a div layout.
Javascript/DHTML
All modern JavaScript/DHTML/AJAX techniques rely on div layouts, with the obvious exception of tools designed for sorting and manipulating tables. Creating advanced DHTML interactions is time consuming and frustrating when using tables.
- The DOM structure for a div based site is much simpler than a table based site meaning that DOM traversing, a crucial component of many JavaScript functions, is far easier in a CSS layout.
- A great deal of DHTML simply consists of rewriting CSS rules on the fly. If the original HTML relies on tables instead of CSS for its formatting properties, this incredibly integral functionality of DHTML is rendered moot.
- Virtually all jQuery, MooTools, and Scriptaculous plugins and examples are coded to interact with div layouts on the page. Relying on tables makes it difficult to integrate the wealth of wonderful JavaScript tools into our projects.
Browser Quirks
The battle cry of all of those who dismiss div layouts is that it is not well supported by browsers. This is a fair argument but it is also an argument whose legitimacy is diminishing over time.
- IE6, by far the most problematic browser, can be targeted with IE6 specific style sheets.
- Most browser inconsistencies actually arise from minor coding mistakes which some browsers forgive while others do not. Simply correcting these mistakes often fixes these problems.
- CSS resets eliminate all browser default styles meaning that as you start your actual development your site will render consistently.
- CSS Frameworks like BluePrint come already tested and guaranteed to render correctly in all major browsers, usually back to IE6.
- Tables themselves do not render consistently across all browsers and are actually often much more difficult to style since many of the table and table cell properties such as “align” and “bgcolor” are deprecated as of HTML 4.01 (source).
Modern Design
Many modern design techniques are far easier implemented with CSS div layouts than they are with a table structure. Tiled backgrounds, drop shadows, and rounded corners are just a few of the examples of prevalent design trends made much easier with CSS.
- This website, as well as many others like it, feature fantastic designs that can only be realized through CSS: http://cssremix.com/
Thinking Ahead
With CSS3 on the horizon it is clear that all future advances in HTML markup are going to be done in a table-less CSS driven manner. Quite simply, there is a ton of new functionality being developed for CSS based layouts while nothing new is happening for tables. It is crucial to begin understanding CSS now as to not be completely left in the dust in the upcoming years.
Posted in Web Programming |
Tagged |
3 Comments »
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.
Posted in Web Programming |
Tagged |
2 Comments »
eCommerce has pretty much been the bane of my web development existence since I really got started making sites. The problem is mostly that EVERYBODY wants to sell stuff online without realizing any of the costs or work that go into. I think a lot of people assume that online shops come at little no cost and then are just floored when I quote a price above $1000 for design, CMS, and eCommerce. In reality, $1000 is a joke of a price but it’s enough to dissuade many people. Clearly, those who give up on their store aspirations after hearing a 1k price tag were never serious in the first place- could you even imagine expecting to start any other serious business with less than $1000?
The real problem is that with each eCommerce job I don’t do I feel like I’m falling farther and farther behind, which is never good in the high speed world of web design. Are there any designers/developers out there who know of some foolproof, low cost eCommerce systems that can convince clients that spending some money is actually worth it?
Posted in Freelancing, Web Programming |
Tagged |
No Comments »
A very nice looking design gallery:
http://csscreme.com/
A gorgeous shopping cart system
http://bigcartel.com/
Just about every programming book you could ever want online, FREE!
http://docstore.mik.ua/orelly/
Posted in Web Design, Web Programming |
Tagged |
1 Comment »
I just started teaching myself jQuery about 3 weeks ago and it’s already slipped into just about every single project I’ve done since. My thoughts on this popular library are…
jQuery is AWESOME!
That is all.
Posted in Web Programming |
Tagged |
No Comments »
It seems that now, the year 2009, in the world of Web 2.0, over 10 years after the beginning of CSS level 2, every website would be coded using this incredibly simple, elegant, and powerful solution to formatting web pages. Yet, my entire work history in web design and development has been a losing battle in advocacy of CSS use.
At my first positions at UWM I could understand why I was seeing so many awful table layouts and so little CSS – many of the sites were nearly 10 years old. The real shocker was that as I became involved redesign projects CSS still was nowhere to be found. I got used to this fact, and after a few years of working there, no ridiculous web practice could surprise me.
Or so I thought. Then I saw pages that clients attempted to make using Microsoft Front Page or some other equally wacky web page editor. Talk about overcomplicated, completely ineffective formatting code!
Then I started at Hal Leonard and saw the strangest combination of tables and CSS I’ve ever encountered. Tables galore, but with a different CSS style applied to every single table cell. Hundreds and hundreds of styles applied practically to every single sentence. No divs, no style information that spanned multiple elements, or you know, cascaded. Yup a complete lack of cascading styles when using Cascading Style Sheets.
I think a lot of people just don’t care or are afraid of using CSS. A lot of programmers don’t want to take the time to learn how to use CSS to align text when they know a font tag will do the same thing, even after I explain how you can use one line of CSS to achieve alignment on every page of your site, every paragraph even, rather than using thousands of <font> tags across a site. Others give it a try, run into some browser support troubles, and then revert back to tables, which aren’t even universally supported themselves!
Sigh.
Posted in Web Design, Web Programming |
Tagged |
1 Comment »
So, recently I’ve started styling my form elements on pages pretty heavily. It’s one of those last little details I realized I needed to perfect to keep improving my projects. So I happily went about adding background colors and custom borders to my input elements and all was great until I opened things up in IE and saw borders around my radio buttons and checkboxes. Well, luckily, only one google search and five minutes later I found this solution. Simply add this to your CSS to clear up those nasty borders…
input[type=”checkbox“], input[type=”radio”]{
background: transparent;
border: 0;
}
… in IE7 only. IE6, of course, still displays the borders.
After a bit more effort I found this link to a helpful blog about code that cleared up the IE6 issue as well with some fairly simple Javascript.
An annoying problem, but I suppose that the fixes aren’t too bad. IE, when will we get to stop adding custom CSS and Javascript just to get you to do what other browsers all can easily handle?
Posted in Web Programming |
Tagged |
No Comments »
Somehow, no matter much I know before a project starts, something will absolutely stump me during development. As frustrating as this is, it at least gives me an opportunity to learn things as I go and always leaves me feeling better prepared for my next project.
Effigy – The lesson here is that complicated, non-grid designs are best accomplished with a huge background image on the page body. Do this, then just position all the text on top of that and you have a really simple X/HTML page that looks really complicated.
The Washing Machine Man – Ah, my first truly independent web project. This was the first time I set up a MySQL database and a CMS. Doing that seemed so incredibly advanced at the time but now it’s something I casually do in a matter of 15 minutes.
Institute on Race and Ethnicity – The lesson learned here was to not wait until a project is completely finished before going live, especially if there is a current site to maintain. It’s better to avoid waiting for months and just put up a site that’s 95% done.
North Shore Presbyterian Church – A lesson in creating unique menus through absolute and relative positioning is what this site was. Check out the art exhibit page to see what I’m talking about.
Discover and Learn – Setting up this site showed me how incredibly easy PayPal can be to integrate into a website. The code for the buttons is created automatically for you and they host the cart on their servers. It doesn’t get much easier than that.
My Music Site – This site taught me a lot about transparent png files. Achieving a drop shadow around a content box on top of a gradient is only possible using pngs, as are a lot of other advanced layout techniques. Using pngs is always a problem with IE6, but the Unit labs fix was a great find to get around that.
Maybe one day I’ll get to the point where I can tackle an entire project without running into a wall at some point, but from what I’ve heard from developers who have been around since the early days of the internet, there’s no such thing as a project without a ridiculous, unique bug.
Posted in Web Programming |
Tagged |
No Comments »
It’s absolutely alarming how many different programming languages one must learn just to work on websites. This fact alone has discouraged a few people I’ve talked to who want to start learning web development. A statement like “First, you absolutely have to master HTML and CSS, and then you should get very comfortable with Javascript, get familiar with databases and SQL, then start learning some server-side scripting like PHP, Perl, oh and some Java and .NET as well” is enough to scare anybody. The thing that frustrates me most is that the tough ones, PHP, Java, .NET, are all mutually exclusive. This means that you either become an expert in all three or only 1/3 of the work out there is for you. Right now, I’d say I have the first four, HTML, CSS, Javascript, SQL down pretty well, and I guess I’ll just forever be a student to learn the rest. Sigh.
Posted in Web Programming |
Tagged |
No Comments »
Now that I’ve done all that I had hoped with my sample CMS site, sample shopping cart, and portfolio redesign, I’m onto some projects that should be a bit more fun and a lot less work (hopefully).
To begin, there’s the Benno’s Bar and Grill site redesign project. One of my favorite establishments, a place renown for an incredible selection of craft beer on tap, it’s current website falls well short of giving the restaurant a good online presence. Nate and I offered to revamp the site at very little cost and plan to implement a brand new, modern design, an online rating system of the beers on tap, an accurate menu and specials page, and a CMS so that the owners can update the site content as necessary. Most everything is in place and we’re just waiting for the go ahead to put our new design online.
Nate and I also had an idea for a site called MyWikiTrail.net. The site would be another WordPress blog where we, and other users, will log our often confusing and entertaining paths through Wikipedia. The project will give me an opportunity to create a new design, work with applying themes to WordPress, and learn the WordPress end-user features.
Additionally, I am taking two new web programming classes this spring. One class is intermediate Java programming and the other is simply called “Advanced Web Programming” and will be a mixed assortment of database access, advanced javascript, advanced formatting, and more.
Posted in Web Design, Web Programming |
Tagged |
No Comments »