Nathan at Work

I couldn’t stand that damn Kubrick default theme any more so as a temporary measure I enabled one of the default themes to appease my soul / eyes.

phew

@todo
ensure this is a temporary measure

Last night I spent a wedge of time considering the various forms of container I could choose for this blog, I then moved on to fonts, which I’ll cover in a minute.

@context
I’m feeling a bit frustrated today and trying not to loose interest, I’m one who likes to get my head stuck in to something and not stop until it’s complete. The approach of considering every single decision made whilst designing and developing this blog is therefore doing my nut in a little; alas though I feel like I should stick with it and cover all the incredibly boring subjects which have plagued my life, work life anyways, for many years. On with the show then.

@research @resource
seeing as I’m going to be using xhtml strict along with css 2.1 (maybe 3..), best to find out what w3c has to say about the css font-family property in short they recommend going for a font-family such as helvetica followed by a generic font family such as sans-serif.

Perhaps the most basic choice of all, which font family to use on the blog, an easy choice one would think – just skip through the font list and stop at one you like. I wish.. as with all things web you need to consider support, somebody could be viewing this site on a blackberry, playstaton 3, any of the web browsers, on any of the operating systems, with any amount of standard or non standard font’s installed.

Realistically then I need to choose a font family that is common to at least all operating systems and web browsers from mac os x to ubuntu via windows. fun.. but first I need that list.

@research @resource
After much googleing (-e?) I found this handy web font blog post by Dustin Brewer which gives me more or less that list; coupled with these additional dated yet useful notes from Browser News I do believe I’ve got my font armory all figured out.

The Choices.. playing it safe I can either simply select a generic font family or one of the following combinations:

see how short that list was? I thought it best to double check, so I quickly made a list of all the fonts on my windows vista ultimate box, then opened up the latest version of Ubuntu which I’ve got running in the fantastic and liberating xVM VirtualBox from Sun. Guess what, other than monospace there were no common fonts between the two; a quick thought later and it seems obvious that there will be zero common fonts accross all platforms, hence I’m sticking to a generic font family.

@tangent on virtualbox worthy of it’s own post

@context
writing that post on something I’m interested in and have postive thoughts about was a nice break from this boring but needed font post, consider spirits to be listed a bit.

One could simply select a font family on each os, put them in order in a font-family css property, but that would require picking a font on each os, checking back to see it’s on the last few os versions and then hoping for the best; browsers aren’t actually required to honour the designers choice of font you see. (I don’t have the time, the hundreds of machines or wish to do so, if you do.. knock yourself out and good luck!)

The choices:

• serif
• sans-serif
• cursive
• fantasy
• monospace

as BrowserNews said.. “a paltry choice”.. actually it’s worth checking this list to see what they look like on your machine.

After checking on both Ubuntu and Vista, I’m going with:

• text: sans-serif
• titles: serif
• code: monospace

I am very tempted to go with tried and tested font-family combo’s though:

• text: Arial, Helvetica, Univers, ‘Nimbus Sans L’, Tahoma, sans-serif;
• titles: Georgia, ‘Times New Roman’, Times, serif;
• code: ‘Dark Courier’, ‘Courier New’, Courier, monospace;

Hard for a blog to be unique, well designed, smary with such lame choices, somebody should address this.

@context
considering how crap life would be if everything could either be black, grey, brown, green or white; although they are possibly the most common. Saturday night and blogging about which font to choose while the other half updates the mp3 site and fills my ears with next years news though, so not all bad.

@tangent
I always want to finish every post “regards” like it’s an email or a mailing list post.

regards

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.