CubeCart is one of many standards-compliant shopping cart systems at the forefront of the new internet. Its focus is on pursuing an entry level store system for the average to advanced user, minimizing development time, and leveraging programming skillsets that may not be available to the entry developer.
While its engine is enjoyable, one of the failures of this, and many of the new shopping cart systems, is the lack of clean, semantic code – as important as tableless designs.
What are tableless designs, and why are they important?
The table was originally invented to allow the control and placement of tabular content (content that a user navigate with the ‘tab’ button). Because of the infancy of the web, many designers were forced to utilize tables as a non-tabular content design method for the placement of advanced web designs. While it was almost a necessity for us 10 years ago, tables have not been needed for non-tabular data for the past 5 years – indeed, web professionals base the talent and experience of their peers on this as one of many factors. A web designer who tells you that tables are needed for design, or for the security of cross browser compatible designs, is not an experienced web professional with the knowledge needed to move your site into a modern marketing environment, and is inadvertently damaging your search engine ranking… as well as your prospects for clean future development or certain levels of accessibility (if it is created improperly).
CSS is the replacement, not the div
The replacement of the table was not a tag in html, but another language entirely: Cascading Style Sheets, or CSS for short. CSS allows a designer to call on html tags for position, background images & colors, borders, typography, and much more. By using this language, all the design elements were severed from the content – allowing site look-and-feel updates to be delivered quickly and uniformly across the site without having to touch the content, and vice versa. Although CSS has been around for about a decade, the past 5 years have shown the significant benefits of this language and the consistency it can create, as well as the low cost design benefits of managing a single page over numerous pages, with intertwined code.
Microsoft’s Internet Explorer had been the only weak link in the chain for a long time, with it’s slow updates and unsolved bugs – most of which are easily overcome with advanced techniques, and the understanding that most Internet Explorer visitors are accustomed to an aged browser – that they’ll get everything they’re used too, and expert level features reserved for more advanced browsers such as the free Firefox, Opera, and Apple’s Safari browser, to name a few. More information is available at Browse Happy, though the site has not been updated for some time.
Nevertheless, CSS allowed us to create clean and easy to manage HTML (or XHTML) without the frustrated, bloated, meaningless structure that tables created…or web designers created with tables, I should say. Though at times, we’ve found the meaning of the new web lost by replacing tables with another useless tag: div.
What’s ‘the div’ & why has it been misused?
The div tag is really a divider tag – used to break up elements (like a book into chapters, or a document into contained design elements), and has no meaning in relevance to code. It does not tell Google that the content inside is the document title, or an important element of this page is here. It simply exist as a tag for designers and developers to manage their code – but it is meaningless, and that benefit is also it’s problem.
When designing or developing a web page, meaning is everything. The header of a website should be the title of that pages content, or the title of that pages owner, such as:
<h1>dotfive</h1>
Simple, elegant, small, and understandable to search engines or handicap devices the world over. However, designers have inadvertently jumped on the CSS bandwagon by claiming tables to all be evil, and tableless is all the rage. This black and white opinion has left most designers writing code as:
<div id=”mainheader”>dotfive</div>
But a div means nothing, so that the designer has lost all the benefit of using proper, semantic code – in this case, a header tag. They not only have an extra ID to manage in their CSS versus a styled h1 tag, but Google and screen readers do not notice that element as the main title to a web page. A simple line of code becomes dead weight to the benefit of a larger audience, and a higher search engine ranking.
In short, a div has been abused as a replacement for the table tag – CSS was always the replacement, the div was just a tool to support html content and css.
Semantic code
Semantic code can be defined as HTML (or XHTML) written in a manner where tags define the hierarchy of importance for the content. Dave Shea, a leader in modern web design, defines semantic code as:
Semantic Markup is the result of using (X)HTML elements for their proper, intended usage.
The term is frequently used loosely, and certain tags are open to debate regarding their semantic value in code – but the goal is nonetheless:
- Easy Maintenance and Simple Redesigns (smaller, more defined code = cheaper building and rebuilding)
- A step in the right direction in focusing on Accessibility
- Faster download for smaller files
- More intelligent interpretation of your content
I typically tell young designers to think of HTML or XHTML as a method to create an outline of content – wrap those words in tags that will structure the outline, just like you’d write a hierarchal outline for a school essay. The result is meaningful guides to a gold mine of information, all important to the growing company. It is therefore an important aspect of web design to avoid using redundant divs with meaningless classes or ID’s instead of the powerful (X)HTML tags that this content was originally defined to embody. Further, in depth, documentation on semantic code is available at Brainstorms & Raves thorough article.
The tableless template of Cube Cart
So when I first stepped into a development of a Cube Cart-driven site, I was excited about its quoted:
Valid XHTML & CSS Code
but was immediately let down by the current amount of templates without focus on semantics. Most were developed with div-riddled code that used multiple classes and ID’s as a replacement for proper document outline structure – which would have resulted in store designs devastating to our clients’ future growth and improved search engine ranking.
In the hopes of improving development, I’m giving these base codes back to the community for download. These are only the .tpl files, empty style sheets, and button folder (with the exception of the pop-up image template, as I find it a dead development tool) – the intention is for Cube Cart developers that want to have a base xhtml foundation. Some of the code maybe irrelevant for your usage, but it should be a means of avoiding hours of recoding. Much of this code was utilized for the clean development of Pink Pinstripes, and will be used for the upcoming redesign of Kamalaspa – without further ado:
Download a zip of the semantic base code
Legal Notations
It has been requested that any link to this article not be received on the official Cube Cart site; and all links to this said article have been removed. In appreciation, any code used in the prior mentioned attached files can (and is, in fact, warmly welcomed) be used by designers and developers utilizing Cube Cart’s engine, so long as any improvements they take the kindness to share alike. Releasing or duplication of this code by Cube Cart the company, in official release or download from their members site, is therefore strictly prohibited, and governed by a Creative Common’s license.
Please feel free to contact us with any suggestions or input!