skinyourscreen.com

Form Follows Function 1: What's a web-site?

First and foremost, I’d like to dedicate this tutorial to the primary Idiot who instigated this pile of drivel: Me. Putting together Skinyourscreen.com, redesigning it, perpetually retooling it, and fixing it after A-holes like ErrorHack and their band of miscreant, religiously-branded band of anarchists repeatedly attempt to take it down (moving along…) has taught me a great deal about Standards-Compliant Web Design. But these aren’t my official credentials. NO! You see, I’m an idiot. That’s right. I’m no expert, just some semi-average schmoe who enjoyed skinning and wanted to put stuff up on the web. Now, of course, working on this crap brought me to some other things I’ve become smitten with, such as Ruby On Rails, PERL, and MySQL. But HEY! Maybe something I’ve found on this ongoing journey will help some other schmoe out there.

Hence, mrbiotech’s Web-Design for Complete Idiots Like Me tutorial series.

This part of the tutorial won’t require any coding, but will simply cover the larger concepts of what is a web-page and why its VERY important to adhere to modern Standards-Compliant design principles.

Web-design for idiots like me

First and foremost, I’d like to dedicate this tutorial to the primary Idiot who instigated this pile of drivel: Me. Putting together Skinyourscreen.com, redesigning it, perpetually retooling it, and fixing it after A-holes like ErrorHack and their band of miscreant, religiously-branded anarchists repeatedly attempt to take it down (moving along…) has taught me a great deal about Standards-Compliant Web Design. But these aren’t my official credentials. NO! You see, I’m an idiot. That’s right. I’m no expert, just some semi-average schmoe who enjoyed skinning and wanted to put stuff up on the web. Now, of course, working on this crap brought me to some other things I’ve become smitten with, such as Ruby On Rails, PERL, and MySQL. But HEY! Maybe something I’ve found on this ongoing journey will help some other schmoe out there.

Hence, mrbiotech’s Web-Design for Complete Idiots Like Me tutorial series.

What is a web-page?

Rather mundane question, eh?

A web page is just a document. A web page is just a file-format that contains text information. Of course web-pages are currently serving dynamic multi-media content like Video, Audio, FLASH animations, and even virtual reality environments, but they’re still just documents. In the adjacent image is a screen-shot of Microsoft Word working on a rather unremarkable document (see figure). It’s got basic formatting: you can tell where a title is because the text is bigger and bold, whereas the regular paragraphs are smaller and a different font. Text can be boldened, italicized, or mono-spaced to represent computer coding. The most important thing you need to know at this point is that content (the text or information) is separate from styling (how the information is presented).

A document is a list of different kinds of information. In a document you’d expect to see Headers that divide different sections of the document, bold or italicized text to draw emphasis to certain phrases, bulleted or numbered lists, lists of definitions, acronyms and the occasional picture. Web-pages present the same kind of data and more. In the Word document there exists hidden code that mysteriously tells the program that certain text is a header, a table of data, or a list. Web-pages have certain code to do this, too. Lucky for us a very smart group of people (the World Wide Web Consortium, or W3C) have put together code to distinguish different types of information for web-pages. That means as designers, we should use the right code for the right information. We call this “Semantic Markup.”

A web page can be styled. Just like you can tell Microsoft Word that all your Level 1 Headers (i.e.: page title) should be dark-blue, 36-pixels tall, expanded by 120% and rendered using the Impact font, the same can be done with web-pages. You’ve probably noticed that most web-pages look a lot more interesting than Word documents. Web-design permits you many additional freedoms, such as associating images with any individual element. In modern web-design, styling is separated from the semantic markup: information is stored in one place, styling information in another. Style information may be in the same file as the content in different internal place, sprinkled throughout the content, or even separated out into a separate file.

Web pages live on a server. A server is a computer connected to the internet that is setup to “serve” or “deliver” web-pages using special programs like Apache, a common web-server. Although universities and businesses may have their own servers, The average web hobbyist or small business will likely have their web documents hosted by a web-host company that provides server space and the software to put web-documents up live on the internet. Web-documents might be static, meaning they are just a fixed document that doesn’t change, or dynamic, meaning they contain code that can insert information from a database, other web-site, or script into their code, which is then transmitted to the browser.

Dynamic pages thus require something extra in order to run, and the server will have to have software and scripting languages installed that permit dynamic content to be rendered. Content-management systems (CMSs) and blogs are examples of dynamic content, where a user can interact with a web-page to add content, such as new entries or comments. Another, more dynamic, form of dynamic web-documents using technologies called Asynchronous Javascript And XML (AJAX). No matter what you’re serving up in a web-document, however, chances are you’re gonna have to run it through HTML to get it to show up in a browser, so you might as well learn this wonderful thing called Standards-Compliant Web Design.

Despite the fact that pages can be written in so many different scripting languages, most render to a language universally spoken by web-browsers: HTML. On a basic level, HTML is a file-type like a Word document: it can contain text, images, and media with instructions on how to present it (bold text, italicized, left-justified, etc.). Rather than having its standards and instructions determined by Microsoft, web standards are established by the W3C. They come up with instructions (the code) that makes the browser present “stuff” (the content) certain ways (the presentation, or style).

Content vs. Style

By now you’re probably asking why I made such a fuss earlier regarding the segregation of content and style informationWhy all this trouble to separate content from styling? The real reasons are many:

Separating content from styling allows a designer to quickly rework how a site looks without messing with the content and/or structure.
Separating content from styling reduces coding redundancy.
Separating content from styling decreases web-page size and download time.
Separating content from styling improves accessibility by those with disabilities (sight-impaired, mostly, although people using Audio-only web-browsers also significantly benefit).
Separating content from styling makes your site/pages easier for search-engines to utilize (especially if you use the proper coding tags and anticipated site hierarchy).
Separating content from styling makes a template MUCH easier to modify for a client, especially when multiple designers are involved.
Separating content from styling greatly simplifies typographic settings for a web-page.

Now you’re probably thinking “Whuh..? mrbiotech, what does any of that actually mean?” so let me give you a real-life example to illustrate many of these points simultaneously.

Example: Old Skinyourscreen.com template

Presented in the next images is the original Skinyourscreen.com template from 2003-2004. The image to the left shows the template as it normally appears in a browser and the image to the right shows the same template with lines dividing different tables and cells. At the time of its construction, I didn’t know anything about Standards-Compliant Web Design and simply adapted an existing Mambo template to fit my graphics.

Web designs using 1990-style design principles (i.e.: “none”) made extensive use of TABLES to place graphics, and this template was no exception. The graphical containers for the left-column, center-column, announcement box, footer and right column boxes are all the same 9×9 celled table placed into different cells of an even larger table that places everything where I wanted it to be. This results in using the same code appearing in the template 5 times, definitely redundant coding. The graphics for each table element were embedded in the content coding, making minimal distinction between content and style. Here’s what the HTML coding looks like:

Don’t worry about the code, just look at the text colors at this point: the grey text represents the site’s content: the stuff the user sees directly. Light-blue text is markup tags (HTML code) for defining content, while the dark-blue and light-green generally represent styling information. Every time this page is refreshed, all this information is being re-delivered by the server and re-interpreted by the end-user’s browser.

Example: MorningBliss Template

Contrast the old template o’ mine with a more recent example. The template previewed in the adjacent picture, MorningBliss, is one I’m putting together as part of this tutorial series. There are some definite blocks for content presentation, such as the header, the sidebar, content-area, and footer. Although it appears they have been layed out using some sort of table-based method, there are no tables present in the design. Despite the large header and footer graphics, this template loads in a little less than half the time of the original Skinyourscreen.com design.

The real fruits of separating content from style are evident when viewing the code. Again, don’t worry about the actual code here: look at the colors. The grey text represents actual content material. This template is using about three times the content as the old skinyourscreen.com template, yet the HTML coding (in blue)is significantly reduced. You’ll see that the bulk of the template is grey text: the content is outweighing the markup. This is a side-effect of using the write markup/coding for the right information.

Analysis

Images are moved from the content to style information. In the old template, there are piles of <IMG> tags, HTML code for inserting graphics like PNG, GIF, and JPG images. For those of you who have any web coding experience, you’ll note that the old skinyourscreen.com template makes gratuitous use of IMG tags to present images.

Load time: Despite the larger size of the MorningBliss template (content, as well as background images) it loads much faster… why is this? Most browsers run a “cache,” or offline storage to speed up the browsing experience. Even antiquated Internet Explorer 5.5 runs a cache to speed things up. Background images and style-sheets are the first things to be cached, as they usually do not change – they are considered structural. The older template, however, has all images included in the actual content file, meaning each and every time that template is refreshed, EVERYTHING has to reloaded from scratch. The table-based template is using up more bandwidth than the fresh semantic markup of the MorningBliss, even though MorningBliss is 9 times its size!.

Maintainability: From a maintainability standpoint, the template for the MorningBliss is just plain easier to look at and see what’s going on. Just glancing at the code one can tell where the content is. Try that with the tabled design: if you had to add additional content to that template, where would it be inserted? If both templates were published to the net for others to adapt and use, it would be significantly easier to use the one based on Standards-Compliant design principles.

Tweakability: Let’s say we wanted to change all header and paragraph fonts to Impact. In the tabled layout, all font settings would be contained in the table information. Each and every paragraph, header, list, or extraneous element would have to have a FONT tag added to change it from the default. The MorningBliss template, with ALL style information separated into a separate stylesheet would require one additional line of coding to reset all header and paragraph fonts to Impact!

Conclusion

These are the most important things to remember from this article:

Web pages are DOCUMENTS which relay CONTENT in a STYLED format.
Use the right data types for the right content data.
Separating CONTENT from STYLE will save you a great many headaches.
- For instance, use Headers to split up content.
- Use tables the way they were designed to be used: for tabular data, not site layouts. Of course, this might not stop you, but the ridicule and laughter earned garnered from more experienced circles likely will…
Web-pages live on a server, where they can exist individually, or serve dynamic content for something like a blog or CMS.

Splitting up CONTENT from STYLE means a sharp departure from early 90s web-page coding practices of using TABLES as means for overall site layout, but there are some significant benefits.

Here’s a synopsis of the two different methods:

	Standards-Compliant Layout	Table-based Layout
Pros:	Latest modern standard of web-design. Uses much less coding, saving you development time. Load quickly: Style-sheets and images referenced by style-sheets are often cached by the user’s browser. Clean Semantic Markup means easier navigation by browsers used by the handicapped. Clean Semantic Markup means search engines can make better sense of your site, leading to higher page ranks.	Has worked in the past, and still renders well under most standard browsers. Tables and table designs are really easy to make in most web-design programs. Generally render well under all browser types.
Cons:	Requires a pretty good knowledge of CSS and HTML to get started in designing. Although many web-design programs have assets for creating Standards-Compliant web-sites, they often require working from the code up, rather than using simple WYSIWYG tools such as those that exist for making tables. Doesn’t always render uniformly across browsers. Certain browsers, such as Internet Explorer 5.0-7.0, still don’t properly implement features of Standards-Compliant design due to willful negligence by Microsoft, requiring coding hacks for the site to render specifically in Internet Explorer.	Requires a mountain of code to do relatively simple things. Slow to load in browser: Code-bloat and the required Image coding for tables doesn’t cache – has to be loaded with the page each time it’s refreshed. Rely heavily upon using TABLE elements for an unintended purpose: layout, as opposed to tabular data. Very difficult to navigate and use for individuals with disabilities to browse using Accessibility-enabled browsers. Nightmare to maintain or modify.

The next article in this series will demonstrate the basics of actually coding a web-site using some freeware tools and resources, now that these basic concepts of modern web-design have been established.