Nathan at Work

Designing a website, and particularly a content based website, to look good and original is no easy task; unlike conventional print design you have a constrained and undeterminable visible area to fill. Additionally you have to make space for functional areas of each specific page (navigation, widgets and suchlike). There are so many things to consider, even simple things such as off screen content, what internet marketers call “the fold”, the point on the page that is not visible unless you scroll to it and everything below the fold.

Long before even considering any kind of presentation or functional design there are some more primative things to consider though.

First up, the container; internet world demands that everything be in a container, something visible or not that constrains the area its contents can populate.

Now at it’s simplest we have a choice of shape, circle, triangle, square, rectangle. Circle is a terrible use of space, and almost impossible to do using xhtml and css, sounds like a challenge but a fruitless one due to it being a terrible use of space on a rectangular screen, likewise and more-so with a triangle, less so but still a poor use of space for a square; Square’s look good, but not contained within a rectangle so this one is out as well. That was simple, rectangle it is!

Orientation, landscape or portrait; we are all increasingly used to landscape, 50%+ of the pictures and photo’s in the world are landscape as are virtually all the tv’s, monitors and display devices in the world. Portrait on the other hand is more or less the de-facto standard for displaying anything text based. Here’s our first problem, displaying a big ol’ block of text based content, that is by nature (or perhaps habit) portrait, on a device that is virtually always landscape (additionally can’t be displayed in it’s entirety on the device). Fact is that the most visually appealing websites are primarily low text content landscape websites that can be displayed on a common sized device without scrolling. Going to have to come back to this later..

Aspect Ratio as any major marketing corporation or designer will tell you is of vital importance; we already know common ones that have been time tested and proven, so best to stick to them. There is the Golden Ratio (the one used on all credit, debit and id cards) that we are all familiar with, the 4:3 of older display devices, 3:2, 16:9 (widescreen), 1.85:1 and 2.39:1. There is a good wikipedia entry on image aspect ratio that’s worth a scan/read. 4:3 is commonly view as old fashioned, as it’s the ratio of old display devices and tv’s, still commonly used on most online video clips though; whereas16:9 is the  ratio of most tft and plasma screens and thus commonly viewed as modern. Going to come back to this later as well.

@tangent
The tv manufacturers had a great marketing campaign selling us all new tv’s and computer displays based on this view of one ratio as old fashioned and another as modern; more recently video site youtube managed to pull the same stunt by upgrading their player to widescreen format and virtually instantly deemed all competitors old fashioned as they still had have 4:3 video’s and players. Nice.

@tangent-tangent
dropped a link there to mashable, figured he could do with the “hit” (if anybody reads or clicks it) seeing as he’s always trying to compete with god of the sector techcrunch. If you ever want a laugh (and some interesting reads) add @mashable and @techcrunch to you’re twitter account; almost without fail mashable will release a poor version of the same story techcrunch just broke 10 minutes (sometimes days) earlier, he never gives up though!

Fluid or Fixed
Websites, being in a container, have the ability to be either fluid (adjusting size according to available screen space) or fixed width (same size regardless of available screen size). Fixed width is generally easier to create, most web designers from a print background prefer it (perhaps as they can’t get their head around a document that resizes on the fly) and tbh looks better, however fluid designs allow you to take full advantage of the readers display device by using all of the screen, are harder to design, and a bit more of a challenge. For those reasons I’ll be going with a fluid design.

@specific
There is another breed of Fluid design termed Elastic design, in short you specify all sizes in EMs, EMs are relative proportionally to the current text size, thus you’re containers all keep in proportion when text size changes, it’s better than having pixel width borders or even percentage as they always look good. Sadly support isn’t 100% accross the board, but it is close. From experience I’ve found that outer containers are best in percentage, while borders, padding, margins and css def’s of inline elements are best with EMs.

Additionally, making this choice of elastic/fluid over fixed answers my questions about Orientation and Aspect Ratio above; I’ll let the user decide what they want and prefer, as the design will resize to whatever they want.

@context
All of the above is written with an overriding feeling of “every website I design from here on is going to be the same”, very aware of this and must address at a later date. In other news I’m listening to another mix of rachels, listening to or seeing somebody else being creative has always been an enabler / inspiration.

@additional Publishing Format
Another low level design consideration has to be the publishing format, I’m a huge fan of flash sites, in particular Flex applications.

@tangent without a doublt flex apps GUMBO are the future, especially with the soon to be released Flex 4 which boasts support for creating desktop/web/mobile applications.

In this case though the choice is limited to one of the html family with CSS (covered at a later date), HTML4/5 or XHTML, I’m tempted to go with HTML 5 as it’s new and IE8 does support it (M$’s interpretation of support anyways), however all things considered, this is a blog, it’s basically just a series of documents with some additional widgets and navigation to put it all in context and bolt on functionality which the html spec doesn’t cater for; as such XHTML with a view to each page being a nice standalone document is my choice here.

The only remaining choice is Strict vs Transitional, being a stickler for these things I’m choosing strict, then changing the doctype to transitional once it’s made; as gaurenteed some code that isn’t under my control from wordpress or a plugin will throw in some invalid markup and invalidate the doctype anyways (sigh).

@point
Developing in XHTML Strict first as this will give me a template that is easy to port over to XHTML Mobile, it’s my view that most new sites should provide an XHTML Mobile version or at least a valid XHTML version nowadays.

@tangent
HTML 5 provides CANVAS, Richard from phpguru and a frequenter over on the php lists has very much spearheaded showing what it can do by developing and releasing his fantastic RGraph scripts over the last year. Kudos.

@context
This has been written with thought to what I’m discussing and the decisions made, will probably act as reference for myself when making this decision in the future, but.. it’s now 4am, so ’scuse the writing style not being up to scratch and I’m going to bed and looking forward to my saturday lye-in!

wishing I had more chewits, but considering the tunnocks teacakes in the kitchen.