Aesthetics and the Halo effect – a case for design?

The prettier, the better – by extension

The Halo Effect, described in the link, is a psychological process whereby we develop:

a cognitive bias whereby the perception of a particular trait is influenced by the perception of the former traits in a sequence of interpretations.

What?

Basically if a central trait in someone or something is percieved as ‘attractive’, other traits will appear more attractive by association.
In a nutshell, the prettier your site appears to be, the more usable, accessible and trustworthy it will appear to be also.

Micro management and design woes

In a recent article over at webcredible, they mentioned the halo effect and touched on studies that showed that a lot of users will base their perceptions of how a site performs in terms of usability, security etc, based solely on the aesthetic of the site.

Recently I’ve read a number of articles where designers have lamented the fact that those above them in the work heirarchy seem to see them as little more than pixel polishers – essentially ‘colouring in’ the site around the content, which is usually dictated by marketing or management.

I’ve got personal experience of seeing this kind of micro-management in action at my place of work. Although I’m only slightly involved in the web side of things, I’ve seen the graphics guys and website manager be dictated to on design decisions by people with absolutely no background in design or anything creative for that matter.

The difference in the perception of design between designers and non-designers

Why does that sort of thing happen? Personally I think the problem is threefold.

  1. Management need to feel in charge and often think showing a lack of knowledge on a subject looks like weakness in front of subordinates.
  2. Pick an ugly site from web pages that suck and a pretty one from css beauty. Now ask some non-designer types to pick which they like the best. Because people can tell an aesthetically pleasing design, they often think they should have input due to this ‘skill’.
  3. Design is seen as subordinate to more ‘real’ concerns, such as marketing or information architecture. Usually because a direct and quantifiable path can be seen between marketing and increased sales.

Problems dissected;
1: Management involvement

The first problem is partly one of ego and who ever knew a (micro-) manager who didn’t have an abundance of ego? The only way I can think to get around this is to think of some subtle way of reminding them of the fact that you’re the expert in that area, (at least within your company,) which is why they hired you in the first place.
If they want to do everything, they’d better be prepared to put in some long hours. Hopefully your manager is adult enought that you can approach them with your concerns honestly without taking it personally.

2: “I could do that!”

The second issue is one of perception. It’s like the people who stand in modern art galleries saying “I could’ve done that!” (which is slightly different to those that say “a four year old could’ve done that!”). Knowing what looks good seems to be possibly innate in humans, but is a very different thing from creating something that looks good. Personally I’d try to sneak in the phrase, “viewing is not doing” into the conversation somewhere!
Oh and I forget where I heard this, (I have a feeling it was a comic,) but the best comeback I’ve ever heard to the “I could’ve done that” comment is simply, “Maybe, but YOU didn’t.”

3: Poor little design

The third issue is the most relevant to the Webcredible article. Many times, people in the upper echelons want statistics to quantify and verify that something implemented has been a positive ROI. If marketing puts out a new email, they can use tracking to deliver targeted statistics about a campaign.
With design, this is a lot more difficult to achieve without doing a complete redesign or makeover and judging the results, but if people base their perceptions of how secure a site is or how usable it is, or even if they trust your site enough to make a purchase from it, then surely the case for design becomes that much more important.

Realigning people’s perceptions

People don’t tend to change their minds on a topic without fresh information, so you’re going to have to do some teaching. Get people above you who have input to read the  webcredible article if you can. If they’ll read that, buy a copy of  The Website Owner’s Manual and get them to read that after you – there should be plenty in there to spark debate from both sides. If they get really interested, then grab a copy of A Practical Guide to Designing for the Web – Just make sure they don’t end up putting you out of a job!

So as long as it’s pretty, we’re good right?

Does that mean that aesthetics are the most important part of a website design? Absolutely not. Primary concerns should still be usability and accessibility. Users will still leave an unusable site even if it’s pretty – it’s just that they might take a moment to admire it first.

What about you? How do you explain to people what you do and why it’s important?

Annoying home page mistakes

Just a quick one to have a small rant. We’ll get back onto the main topic soon, (I keep not quite getting around to it… I know, I’m a bad blogger…)

The Builder whose home is falling apart.

(A study in four gripes.)

I’ve seen quite a few websites for web design companies lately – mostly due to scoping out the competition and seeing what sort of prices they charge, what services they offer etc, and it struck me how awful some of these sites were. Some contained spelling and grammatical errors while offering content and copywriting services, some touted themselves as being usability experts or consultants while having sites that were difficult to use and others were just plain broken. As a web designer your website is not only part of your portfolio, it’s the crowning piece. It’s your showcase and as such it should show you at your best, so you should take some time to ensure it reflects your best work. This can be problematic because as the title suggests, we’re all too busy working on other people’s stuff to work on our own. If you’re a freelancer and find yourself with some down time, spend a few hours checking over your site for errors and fix them. If you’re an agency you’ll have to find some way to find time.

But wait a minute – you don’t even have a site up! And isn’t this a default WordPress theme?

OK, you got me. But that doesn’t make me wrong about any of this, it just means that I’m in the early stages of planning to go freelance and still figuring out how to brand myself. (If you are too, I’d recommend this free pdf minibook and this ‘personal vs. business branding’ article.) My girlfriend and I both realised recently that the only reason we knew what the word ‘penitent’ meant was from watching Indiana Jones and the Last Crusade. My point being that although we got that information from a film and not a dictionary, the meaning of the word is the same and so is the fact that we both know it, so you can either be a snob or you can accept that good information is good information, regardless of where it comes from. Once I’ve figured out my brand, I’ll do my own theme and put a site up.

Gripe 1: Asking the client to fill in a questionnaire

Many web designer’s sites include an online or downloadable sheet with a questionnaire that they ask clients to fill in. It seems like a good idea. Get the client to fill in a load of stuff about why they want a website, if they already have a logo, what colour it is, what they want the website to ‘do’ etc… It’s all information you will need in order to understand the client’s business and objectives for the website. Here’s a few example questions from a few I’ve collected:

What is your company profile?

* What do you do?
* How many staff do you employ?
* What is your niche market?Content

* How many pages will you need and what will they contain?
* Do you need help with copywriting?
* Do you already have pictures of your product or will you need help with photography / picture research to give a professional look?
* Do you just require a basic site or would animated pages work better for you?

Here’s another set:

For example, do you want to:
• Generate sales?
• Encourage enquiries?
• Gain newsletter subscribers?
• Obtain information from your audience?
• Encourage them to tell a friend?

All good stuff that will help you understand your client’s needs. Now while I agree that clients need to think about what they want their site to do and more often than not, also need to be educated about what they need to think about, getting them to do it via a form is a bad idea.

“But why?” I hear you cry, “online forms are quick and simple and we can get early feedback and information from the client.” Yes, some of that is true. What isn’t true is that online forms are quick and simple. To you and me maybe, but we’re techies and your clients probably aren’t. If they were, it’s doubtful they’d have need of your services in the first place. So while being faced with a detailed online form asking questions about the nature of your business might not intimidate you, the same may not be true of your clients. Think about it – they’ve come to your site to find out if you can help them, not to spend ten minutes of their day filling in a form when they could be using that time to make money.

“Ah!” you say, “We thought of that! We made ours a downloadable form so people can fill it in at their leisure!” OK, so pat yourself on the back for thinking of the end user and then slap yourself hard on the forehead for missing the point. Using a downloadable form does give the user the chance to fill it in whenever, but do they want to? If they don’t really like filling in forms, (I don’t and I don’t know anyone that fills in forms as a hobby,) then they’ll put it off as long as they can – perhaps permanently.

Besides which, you’ve actually created more work for the client. At least with an online form, they can fill it in there and then and hit submit. With an offline form, they now have to download it, figure out where it downloaded to on their computer, open it (if you supply it as anything other than plain text or a .doc you’re asking for trouble – even PDF’s might require them to upgrade their Adobe Reader…) fill it in, then figure out how to get it back to you – “do I attach it to an email or copy and paste it into the body?” Each of these extra steps is a new opportunity for the client to say ‘hell with this!’ and give up.

Also, using a form is impersonal. While you may do the majority of your communicating via IM, Twitter, Forums and Blog comments, your clients may not. Most people will prefer a face to face because whether they realise it or not, they are getting much more out of that type of communication – intonation cues, facial expressions (and micro expressions,) body language patterns…  and they’ll use these non-verbal channels to determine if they want to do business with you based on how you behave, much more than what you say.

They judge how trustworthy you seem depending on eye movements and eye contact, among other ‘tells’ and judge how professional you seem to be – usually without even realising. Using a form to conduct your first stage of business suggests to me that your company has trouble dealing with people and that maybe I should consider looking elsewhere. Even a phone call is preferable as a client will be able to discern many things about you from your tone, pitch, speaking rhythm and speed, such as how friendly you are. Meeting or calling a client makes it personal, it says “I’m happy to spend the time talking to you to understand your needs and do the best job possible.” Using a form says at best “I’m trying to keep you at arms length” and at worst “We want you to do a lot of the work for us“. Faced with that, who wouldn’t start to wonder what they were paying you for? If this happens at the first stage, you’re kind of asking for trouble.

By all means have the information somewhere on your site. Have a page called: Things to think about when planning your website, and put the information there, so that your client can browse through it if they want to - but aren’t forced to.

“OK Mr. Smart guy, what do you suggest?”

Glad you asked:


Gripe 2: Make it easy to contact you

Most sites online have a ‘contact us’ page. It’s become a web convention, just like the ‘about us’ page. Most sites I see don’t use these pages to their full potential. Also, is the ‘contact us’ page really the best way of presenting this information? For all the talk over the years of minimising the number of clicks taken to get to the information required, people have still been putting contact information on a seperate page. Why not have your phone number and other contact details right there on your homepage, thus saving a click? If I go to two sites and one makes me click for a phone number, while the other has it emblazoned on the first page I look at, who am I more likely to call?

Give people a phone number. Many of the sites I visited recently didn’t even give a phone number, just an email address or worse – an online contact form. That really says you don’t want to talk to your clients. I think it’s pretty safe to assume that most people have email by now, but don’t have it as the only way for people to contact you. A lot of people will prefer to speak to you on the phone rather than email, for reasons mentioned previously. Telephones are a long established technology that most people are comfortable using. Email by comparison, is still relatively in its infancy, so give your clients the option of how to contact you.


Gripe 3: Learn to write, but more importantly, learn to read.

This is fundamental. If you don’t know the difference between their, there and they’re; write and right; your and you’re; wear and where, (often even confused with we’re and were,) which and witch – then learn! There really is no excuse for bad grammar and sloppy writing, particularly if you are writing copy or content for the client. Recently I saw several web designer’s sites that contained grammatical errors, one of which was so badly written I wasn’t sure if English was their first language or not. If not, then I completely understand as English is generally recognised as one of the hardest languages to learn, but then should you really be offering your services in a language you aren’t native in?

For anyone who speaks English natively or as a first language – you should know this stuff. You should know the difference between its and it’s and when to use either. Apostrophe use is a slightly complicated subject, but there are some guidelines that can help. Usually it’s used in the possessive, i.e. The man’s hand – the hand belonging to the man and in contractions, i.e. That’s  it’s lair where that’s and it’s are conractions of that is and it is respectively. Oh and, before I forget: apostophes only go one way.

It’s the same with spelling -you should learn to spell correctly. Most CMS’s, Blogs and writing software will have a spell checker built in. This is a great first line of defence and it astounds me how many people fail to use it. How can you see a page full of red underlined words and not realise there are mistakes? It’s just down to laziness at that point and is that really the image you want to give out on your homepage?

A better way of doing things is to learn the correct spelling once it’s been corrected by the spell checker. Take a moment out of your day to look at the correction and go, “oh ok, it’s spelled that way.” Maybe write it down on a pad to help really embed it.

What’s that you say? Your software doesn’t have automatic spell checking? Well I’m dubious, but in that case dictionary.com should be able to help. There – now you’re out of excuses.

Get into the habit of proofreading everything. Sorry, maybe that’s a little vague, so let me clarify – proofread everything you write ever, including text messages, emails, blog posts, blog comments, forum posts, letters to your Grandmother, post-it notes – everything. In today’s fast paced world, there is a temptation to just bash it out as deadlines are important and we’re all really busy despite using all the latest time saving technologies (Oh the irony.). Really though, you should be reading things back as you go and at least once all the way through when you’ve finished writing but before you post or send. I know, there’s a really big shiny button that says ‘post’ or ‘send’ and you’re worried that you’ll succumb to space madness if you don’t press it. But hold on there skippy, what if it’s actually a History Eraser Button?

OK, so it’s probably not a History Eraser Button, but it could be a ‘Lose Client’s Business‘ button, if your content is full of spelling and grammatical errors. Hold off on pressing it for a second and read back through what you’ve written. Whoops, there’s a mistake – edit – fixed. That’s all it takes and could be the difference between a client trusting you to write their content, knowing it will read professionally and the client going elsewhere. If you get into the habit of doing this with everything you write, rather than just the stuff clients will see, the effects will kick in that bit quicker.

So far I’ve spotted several mistakes in this post and fixed them as I’ve noticed them. Even grammar nazis like me aren’t immune from making mistakes – we just give ourselves the chance to fix them and avoid looking like an idiot. (If I’ve missed any, please be kind enough to point it out in the comments so I can fix it. You may jeer or gloat if you wish.)

If you’re only ever going to learn one language, then you’d better make sure you learn it well because it’s the only way you’ll have of communicating with other people. There are a bucketload of grammatical points I’ve not even touched on, such as not using commas before the word ‘and’, comma usage in general (use when you would take a breath when reading aloud,) correct use of capitalisation… but to be honest this post is already way longer than I intended and also I’m not your English teacher. If you write or speak badly, you’re basically saying “I can’t be bothered to learn how to express myself properly because my ideas are pretty worthless.” Would you hire someone like that?


Gripe 4: Broken pages.

I had a call the other day at work from a company who used to look after the DNS for our domain, asking if we wanted any web design work doing. Now, their first mistake was that they hadn’t done their homework. (This would be Gripe 5 if it fitted in with the theme for this post,) They had no idea that they used to handle our domain and had no recollection of ever having worked with us previously.

Needless to say even if we had needed work, that would have put me off. I visited their site to have a look at their portfolio and found sites with lots of problems, despite them touting usability as one of their cornerstones. Worse than that, some of their own site’s pages were broken. Maybe not like 404 broken, but images were pixellated or had artifacts due to bad compression, text was unreadable unless resized and my favourite – on their ‘web design’ page,  the image for the web design tab was missing, so that the text link hovered above the other links, the next tab along was out of place and the design, as a whole, broke. Even their ‘portfolio’ link was way over to the right hand side of the page, outside of the main content area, with no obvious styling applied.

Even more sadly, I visited the site of a well known UK design agency and found their main logo/banner was cut off at the right due to overflowing its container’s boundaries. They had an image of a website they’d been working on recently with a text link saying ‘view more clients’ which was virtually unreadable due to being overlaid on the image instead of underneath or somewhere where it could be easily read. Other heading images were cut off too – one even cut off the last letter and a half of the company’s name and this was not due to text resizing as doing so did not fix the problem. A video overlapped the outside of the main content area and a text link for RSS feeds was cut in half by the image below it, making it very hard to read.

I say sadly because this is a company that gives a lot back to the web design community in various ways and whose articles I’ve read with enthusiasm. I don’t want to say much more but I hope someone from there will read this and fix those problems. (I’m using Firefox 3.0.6 on Ubuntu Linux by the way, but I’ll be checking it in IE and FF at work on a Windows box tomorrow.)

The difference between builders and web designers:

Builders generally don’t use their own homes as a showcase of their work - they have show homes for that purpose, so it doesn’t matter if their own houses are in a state of some disrepair. As web designers we don’t have that luxury – our ‘homes’ are the first piece of our work that clients will see. Make sure yours does the job it’s supposed to.

Web design is hard – and that’s a good thing.

So I had a slight crisis of faith the other day and I wrote, (whined?) about it on another, personal blog. I wrote about how much there is to learn, how I’d begun reading a forum and become hopelessly lost, how I get anxious when I read about coding stuff like frameworks and development methodologies, (I ended up reading about waterfall vs. agile just so I knew what the hell they were,) and don’t understand it… basically I’d gotten overwhelmed by it all. It happens.

The problem was that I think of myself as a pretty smart guy, I do ok in IQ tests and the like, although I didn’t excel academically, but I didn’t feel like I was ‘getting it’, or at least, not as quick as I wanted. I work in IT and I can reel off acronyms with the best of them and have trained myself over the last few years in things like network administration, desktop support, router configuration, DNS, DHCP, Active Directory, IIS, I’ve set up web servers and installed PHP and MySQL, I’ve learned enough of those two to write a call logging system… anyway, I cope well with having things thrown at me and having to go off and learn on my own.

So at the moment I read a lot of articles on everything from a beginners guide to creating a CMS in PHP to standards compliant CSS, to… whatever. I’ve bought a small shelf’s worth of books, the last one being Steve Krug’s “Don’t Make Me Think!” – an excellent book on common sense web usability, and I already plan to buy more – the next being Jeffrey Zeldman’s “Designing With Web Standards” and it’s starting to come together but, like I said, I was working on a site and I’d basically mirrored what they had and designed a logo and I took a step back and looked at it and… I hated it.

Now, I’m the sort of person that has been arty all my life. I used to draw constantly as a kid, whenever I wasn’t reading. (Or playing with Star Wars toys or Transformers.) I did art at school but never went to college for it. My drawing ability is above average but not amazing. (If you want to see something I drew, head over to my now abandoned-until-I-have-more-time-to-work-on-it comic strip, Exotic Soup, although I do other stuff.) Thing is I don’t have what you would call a natural ability with colour. I know a good colour scheme when I see one. I know a great layout when I see it, but putting a good colour scheme together is actually work for me. Putting together a layout requires some thought and planning. I can’t just reel them off.

I thought maybe I should rethink this whole web design thing. Maybe I’m just not cut out for it, I thought. I like coding sites. I’ve really enjoyed the work I’ve done so far on my company’s site converting it to CSS and XHTML from a table based design. That’s not much different from working on a photoshop comp right? Maybe I should just stick to that.

Then I was watching an episode of the West Wing, (I bought myself the full 7 series boxed set with my Christmas money, along with a few webdev books,) and there was an episode where two of the main characters meet a guy who is struggling to send his daughter to college and he turns to them and says:

It’s hard… I like that it’s hard though, it’s a man’s accomplishment.

And that got me thinking. I read the thoughts of some people in the industry and sure, some of them give the impression that it comes easily, but more often than not, they go through several pages of possible designs before they even open an editor and then they have to contend with accessibility issues, usability issues, browser inconsistancies, lack of support for fonts and a hundred other things they have to keep in mind – and that’s before the whole ‘client’ issue. They don’t generally just sit down, pop out a design on paper and then code it up. There are meetings, research, requirements surveys, accessibility testing, usability testing, debugging…

I bought some graph paper. I ran off some ideas and talked them over with my girlfriend. I tried different shapes and layouts and I’m starting to get somewhere. For colour, I went and spent some time with kuler. A friend recommended “Colour Index” by Jim Krause and it’s going on my ‘to buy’ list.

Maybe it shouldn’t be easy. Maybe, like many things, you have to work at it and earn it. Maybe, at this early stage, I can give myself a break for not knowing everything and look at what I’ve accomplished so far and say, “Not bad. I’ve taken my first steps on a long road.” The thing is, there’s only one way off the road – you can stop at any time and the road just dissapears from view in front of you. Or you can keep going, regardless of stumbles and maybe even the occasional fall and the road will keep pointing the way, onward to the horizon.

I’ve been putting off writing here because I kind of wanted to continue from where I left off and continue with the web standards trifle. That will now be next time, unless I have something else I want to say. In fact I’m going to start logging the articles I read each day as they may be of help to someone. The long ones will be the ‘ongoing story’ so to speak.

Here’s today’s:

Amusing web design pie chart. – some slight bad language, just so you’re warned.

Most used free fonts by designers.

Cheat sheets for web designers.

How to choose the right CMS.

Enjoy.

*Edited to include the History of the Internet Video.

Halp! What do I learn?

As detailed in my first post, I used to do a little table-based design some years ago and decided to get back into teaching myself web design and development. So, like a lot of people, my first thought was, “what do I need to learn?”

Firstly, it’s important to make a distinction between web designer and web developer. Web designers design websites. You knew that already? Then you’re ahead of the game.
Web developers write code and develop web applications.

The distinction is really between client side and server side. In practice it’s not as simple as that, as with many things, but the general rule of thumb will serve us well enough for now.

Roles

Designers tend to stick to client side stuff – content, markup, layouts, graphics. Your average decent designer will know XHTML, CSS, Photoshop or similar for creating graphics and more than likely, some Javascript/DOM (Document Object Model) scripting.

Developers will code in PHP, ASP, .NET (C# etc,) and have at least a working knowledge of relational databases, usually something SQL (Structured Query Language) based, like MySQL, SQL server or PostGreSQL.

Then you get networking bods who know how to set up and administrate a server, be it Windows or Linux/Unix based, along with web server software like Apache or IIS (Internet Information Services – Microsoft’s web server software, bundled with Server 2003 and the like. (It’s even in XP…)). They’ll probably know something about TCP/IP and DNS too.

Here’s the thing – I want to be able to do it all. At least a working knowledge of each area so I can set up a server, design and create a valid, standards-based site, connect it to a database so it can do fancy dynamic stuff and so on.

Start with what you know

Then figure out what you don’t know but probably need to know, then do some reading. LOTS of reading. And some practice. And reading. And practice. Ad Nauseum.

Well I know some Photoshop. A fair bit actually, since I’ve been working with it for about ten or so years, for everything from painting textures for 3D models to retouching glamour pictures, (strangely not that glamourous, but I doubt any part of the process is,) to designing graphics for the web.
I also know a little HTML – just enought to get by. I’ve also done a tiny bit of CSS, but a seriously tiny bit and also some Javascript. That’s a start. Since then I created a call logging app in PHP/MySQL and had a ball doing it, which is what made me think I could do this.
Lastly, I spend my days as the IT guy for a company, which involves everything from desktop support to server admin, to troubleshooting printers, to creating some static pages for our website to altering DNS records for our website. I’ve set up a few servers in my time, a couple of which were specifically web servers and I understand (the basics at least, of) TCP/IP.

All that stands me in pretty good stead.

Research and acronym overload

Looking through a few job ads for web design or development is a good way to gauge what potential employers are looking for, but can quickly get overwhelming. The skillset for some positions reads like an excerpt from “The world’s greatest confusing tech acronyms”. ASP.NET, PHP, XHTML, XML, XSLT, CSS, SQL… it’s enough to make a person’s head spin and start spewing pea soup.

“OK,” I thought to myself, “let’s start off with things I’ve heard of.”
HTML – I knew some of that from before. CSS I’d heard of and had a rough idea of what you could do with it after seeing a friend’s site. Javascript. Ugh. That sounded a little too much like Java to me.
PHP I’d heard of, as well as MySQL, but the latter only in passing. Perl – my friend who I used to work with before had said that was hard and he was a coder. Hmm.

First thing was to look into XHTML. I’d heard the term and knew it was either a newer version of HTML or else a different version that you could do cool stuff with.
The former was more correct, which is not to say that I don’t think XHTML is cool.

OK, lets start with what some of the terms stand for. HTML stands for HyperText Markup Language. Hypertext is the ability to use links to provide other documents and information, Markup means a type of code which denotes how the content will be structured or displayed and Language… well I’m sure you’re OK with that one.
HTML is the core of the World Wide Web as we know it. So what’s XHTML?

XHTML is defined as HTML reformulated as an application of XML. Make much sense?
The X stands for eXtensible (see what they did there?) and comes from XML, which stands for eXtensible Markup Language. XML is a language that coders can make up their own tags, in order to make new types of document, or even new languages. So XHTML is basically HTML that has been created through the XML language.

So? So what?

Well I’ll tell you. There were a lot of problems with HTML, (the last version of HTML before XHTML was v4,) some of which arose from the browser wars between Netscape and Microsoft, others from allowing coders to write code that was improperly nested like so:

<b><i>Wow! Check this improperly nested code out!</b></i>

Because the <b> element came first, the <i> element should be completely contained within it like this:

<b><i>Whew! That’s better.</i></b>

Also, you could leave out closing tags like this:

<p>Hey, I’m a paragraph! But where do I end?

<p>Here?

<p>Or maybe here?

and HTML would be nice and assume you meant to close the tags really, you just forgot becuase you were distracted by something – possibly a shiny penny on the floor or the sudden discovery that if you tried really hard, you could stumble across pictures of ladies with no clothes on on the web and things would generally be OK. That sounds pretty good right? You can code as sloppily as you like and HTML and the browser would play nice and your page would work. Sure it does.

Another big problem was that originally, the internet was text based, seeing as how it was originally created to help scientists share data and less about watching people hurt themselves in a stupid way or the world’s largest repository of boobies.
Anyway as things progressed, people figured it might be handy to be able to share images and other content and the Markup Language grew to accomodate this new functionality. Then people started to want to be able to add stylistic parts to web pages. Sure, hyperlinks were functional, but do they always have to be the same colour? Again, the markup language expanded to include more tags, aimed at being able to design and style the way your content was presented. Suddenly it was able to have aesthetically pleasing pages, (although at the time you’d be hard pressed to find one between the blinking text and gaudy fonts and colours – and the gifs. Oh the animated gifs!)
Over the course of time, visual design began to play a bigger role in creating web pages. Then it was married to the tenets of information architecture and content presentation and the new discipline of web design was created.

Somewhere along the way someone figured out that while it was great to be able to style your markup using things like <font> tags, it was actually pretty inefficient. Using inline style markup made the code longer, slower to load and harder to read. Using tables for positioning, while accurate and cross browser compatible, was also making the code longer, slower to load and even harder to read again, what with tables nested inside tables with spacer gifs to make sure it all lines up – there was so much code for presentation, the content was hard to find in amongst it all.

Finally, unable to take it any more, those web designers and developers who had brains and a passion for all things web screamed into the night in a collective howl:

“Oh god! How can we make it so content and style can live together in the same web page without the code looking like the insane ramblings of  a mad geek? Won’t somebody think of the children?”

And a cry came back from an uncertain location, reverberating in the ears of every webmaster worth their salt;

“I know what to do…” the disembodied voice dropped to a whisper and every geek felt the hair on the back of their neck stand up as the hoarse breath sighed, “we’ll seperate content and style…”

And there was much rejoicing.

OK, so maybe I used a little dramatic license there but it was a great idea and my next post will go into why.

So, before we go into the separation of style (and behaviour,) from content, I’m going to give you the rundown of what I am currently learning. It’s not the only way to do this and there may be other technologies I learn along the way but for now it’s:

XHTML – for content markup. Ubiquitous for web design.
CSS – for styling markup
Javascript - should really be called ECMAscript, but we’ll get into that later – for behavior, interaction and DOM scripting.
PHP – the most used server-side coding language on the web.
MySQL - the most used relational database system. Also, the SQL language.
Apache – the most used web server software on the web.
XML – mainly used for cross platform data exchange, but also a highly versatile language that has lead to the development of other languages, such as XHTML, MathML and SVG. This is pretty much an entire topic in itself, what with XML itself, plus DTD’s, Schema, namespaces, XSLT…

Along the way I’m sure I’ll bump into Ajax, SOAP, PEAR and maybe some Flash and actionscript, although that’s not on the cards to learn just yet, despite having done some Flash before.
Add into this a smattering of SEO to optimise sites for search engines, regular expressions (mainly for SEO-friendly URL rewriting,), trying to get a proper handle on OOP (Object Oriented Programming,) some more Linux/Unix admin, a little typography and general design techniques, color theory etc and how to run my own business, (SWOT’s, business plans, etc, etc,) and we’re getting somewhere.

Coming soon: The Web Standards Trifle vs The HTML 4 Fruitcake.

Back Story

Many years ago, when the Earth was just a broiling mass of volcanic activity, (OK, maybe not that long ago, but a while back,) I used to do a little freelance web design.

I teamed up with a friend from University and he handled all the code, whereas I did the layout and visual styling. I learned the bare basics of HTML, just in case I needed to check anything within the code, but that was all – I was basically a Photoshop jockey. The sites were all fairly simple – this was before the days of XHTML, CSS and the DOM, and were all designed using table-based layouts, which will come up in later posts.

We did do some coding at Uni – mainly in Java, which I hated. Having never done any coding before, (I didn’t own a Spectrum, or a Commodore 64 or anything like that growing up,) we started out with Pascal, which I found OK to follow but the jump to Java really threw me. Too many terms and concepts I didn’t understand and had no intention of doing so. It put me off coding for years.

Skip forward several years and I’m working as 1st line support for a company that sells and leases Unix-based boxes and sometimes I have to tail a mail log or grep something and to my surprise, I’m finding it kind of fun.

Then I got a job as the IT department for a company, which is where I work now. Yes, you read that right, I said IT department. It’s just me, doing everything from looking after the network and servers, supporting users over several sites to ordering toner for printers.

Anyway, we needed a way to streamline the way users contacted me about tech support tasks as the feedback I was getting implied that users would benefit from a way to explicitly log tasks and recieve better updates about the progress of a task, rather than just walk up to my desk and blurt out whatever is wrong and then have me shout “it’s done!” across the office.

I started thinking about creating a call logging system as a web browser based intranet app, originally starting in ASP using VB Script, which I found fairly easy to develop with.
Unfortunately I read that VB Script would only work in IE and several users, (myself included,) are savvy enough to have switched to Firefox. (Yes I’m biased and there are good reasons why, which I may go into in a later post.)
So I started over using PHP and MySQL. Having never coded much of anything before, (My blackjack game, written in Java while at University for an assignment, could not switch the Ace between 1 and 11 depending on what the player had in their hand…) this was something of a challenge and required lots of reading, coding, testing and a fair amount of swearing.

What I didn’t expect is that during the development process, I would rekindle the feelings that I first had when writing in Pascal. Yes, it’s frustrating a fair amount of the time, yes you spend a lot of your time figuring out why one section won’t work despite trying several syntactical approaches, but when it works, there is a feeling of reward and satisfaction that makes it worth the effort.

PHP is pretty easy to get started with, I’d recommend checking out w3schools PHP pages as a port of call, as well as PHP’s home on the web.
Personally I was amazed at how easy it was to connect to a database and retrieve and update information, although it’s not the easiest thing to install (more on that in later posts.).



I managed to complete my PHP/MySQL call logging system and I’m damn proud of it, even though I know the code is far from perfect. Users log calls through a fairly basic web form, which takes the relevant details and assigns them a unique reference string based on the site they work at, their initials, the date and a session variable to avoid overwriting tasks that were logged on the same day. I can tell at a glance who logged the task, from which site and when they logged it.
The system then emails both the person who logged the task and myself with the reference string and I assign the task to a timeslot and the system emails the user to tell them what date and time they can expect their task to be looked into.
The references show on a month-to-a-page calendar and are coloured and styled according to their status, which I assign. New tasks are automatically ‘unassigned’ (and I can search for any unassigned tasks with a simple SQL query,) and I can change the status to ‘assigned’ (which displays as green on the calendar,) ‘in progress’ (orange on the calendar) ‘awaiting 3rd party’ (purple) or ‘completed’ (red with a strikethrough to show it has been done,) as appropriate and the user will be emailed again with the status change and any associated notes I have made.

The system has allowed me to better manage my time. I can see at a glance from the calendar which tasks I have completed and which I have to do. It has also allowed me to report back on how I’m doing with stats to back things up (again done with fairly simple SQL queries,).
So far my lowest completion rate for a month has been 91% which I think is doing pretty well for a one man department.

So skip t0 now. My passion for coding has risen again and al0ng with it, a passion for learning, which I’ve really always had but found it difficult to apply at times, particularly if I wasn’t interested in a topic at the time. The other thing I’ve developed a passion for is web standards, which I suspect will feature heavily in this blog.

My aims for the future are to move away from most of the tech support stuff and instead either gain employment as a web developer/designer or else maybe go freelance. I hope to be able to offer a start-to-finish service, i.e. set up hosting and web server/database servers, design and develop websites and even handle DNS and maybe one or two other bits, like some basic SEO.
I’ve bought a stack of books and scoured the web for interesting and informative articles.  I’ll point you to the former and share the latter in later posts.

This blog’s aims are to help me keep track of interesting links on the subjects of web design and development and associated disciplines, to champion the cause for web standards and standards-based design and hopefully, maybe serve as a place for other people who are learning the same sorts of things, whether new to web design and development, or perhaps returning to it after designing with tables etc, previously.

I’m going to try and make sure any terms are linked to wikipedia pages or other relevant pages providing descriptions etc, but it might be difficult to keep track of so I’m going to assume a certain level of knowledge. The simple rule of thumb is, if I haven’t linked a term and you don’t know what it is, look it up on either google, wikipedia or a favourite search engine etc. I’m going to be writing and learning at the same time – you’re welcome along for the ride but I’m not going to spoon feed you.

K?

K.