The myth of ‘the fold’.

‘The fold’ is an imaginary line on a website, beyond which the user has to scroll to see more content.

This term more than likely originated from the broadsheet newspaper which must be read folded due to it’s size. Editors traditionally put the most important items above the fold, cascading down to the less important ones. This trend has carried on from the press to the computer screen, and to a degree still exists today.

737569It’s amazing how many web designers still believe that the internet user of today hasn’t figured out what a scrollbar is for. In the early days, when the web was still new, some viewers actually believed that the page was broken if the text and images disappeared into nothing below the foot of the browser window. It was positively discouraged to have any kind of scrolling at all, and some of these old fashioned attitudes remain today, quite unnecessarily.

For a start, where actually is this fold? It depends to a great extent on the display that the user is viewing the page on. A monitor with an output of 800×600 pixels will have a fold much higher up the page than a widescreen of 1980×1200. Likewise, a viewer on a netbook with a resolution of 1024×768 pixels will see the fold in a different place to someone on a mobile phone. Research suggests that at best if we decide to design based on a fold we will get it right for at most 10% of our target audience, so how do we deal with all these instances if ‘the fold’ is real?

The simple answer is that we don’t let it worry us too much at all! We design so that there is compelling content at the top of the screen and then just get on with building clean, simple web pages. There are techniques which can help, such as cutting off text and images so users know there is more to follow, but users on large monitors often view their browsers tiled at a size of their choosing, so you just can’t get it right.

I guess what I am saying is that it’s good to have a page that scrolls. People are used to scrolling. They scroll when looking for contacts on their mobile phone, or when viewing the channel guide on their Sky box. It’s second nature now that the web is such an integral part of peoples lives. We shouldn’t try to cram pixels into the top portion of the screen, we should allow our designs room to breathe and make them a pleasure to view.

If your content is interesting enough, people will scroll and read it.

The corporate food chain.

Back in 2005 Macromedia (creators of Dreamweaver, Flash, Freehand and more) were bought by Adobe (makers of Photoshop and Illustrator to name but two) in a deal worth around $3.4 billion.

adobenew

Adobe and Macromedia were the two big players in the design industry, and I remember being a little uncomfortable knowing that there was now only one real choice. Competition is a good thing. We embrace the fact that there are other graphic designers around, it helps you stay on your toes knowing that you have to be good to get by. Now there was just Adobe.

In September 2006 Adobe bought a small Romanian development company called Interakt. Interakt were scripting Jedi’s – they wrote the most amazing extensions for Dreamweaver (called the Kollection) which helped speed up dynamic web applications. The first thing Adobe did on purchasing the company was to discontinue a few of these extensions, leaving us to search for alternative solutions to our developments. They renamed it “Adobe Dreamweaver Developer Toolbox” and sold it under the Adobe banner.

Last month Adobe announced that they would be discontinuing the Developer Toolbox extension, which now leaves a lot of developers potentially having to change their entire workflow in the longer term. I know that a good PHP programmer can write a lot of this code themselves, but the toolbox was a great time saver. So Adobe go from buying a company in 2006 to closing it down, taking the staff out and employing them in Adobe posts, and then discontinuing their products all within three years. I know it’s been seen many times before, and will be seen again, but I don’t have to like it.

pipex-logoWhen I set up my broadband account I carefully researched the options and decided to go with either Nildram or Pipex. They were both owned by the same company so I went for Pipex as they were a little cheaper. I remember thinking “These guys will be fine, anything but Tiscali”. Next thing I hear Tiscali decide to buy Pipex. “Oh well, at least it’s not ‘Talk Talk’” was my first thought, as they had been reviewed recently and came out with shocking results.

In Spring 2009 Talk Talk purchased Pipex from a struggling Tiscali. Bloody typical!!

And the point is? Well, I guess I’m just having a rant. I don’t mind change, in fact I embrace it – but only when it’s for the good of all concerned.

Are you smarter than an 8 year old?

Last Wednesday I had the enviable task of doing a presentation about a career in web design to two full classes of 8 year olds at a nearby primary school.

lg-promo-are-you-smarter-than-a-ten-year-old-1Not having children myself I suppose I wasn’t sure what to expect, but I was genuinely suprised at how ‘on the ball’ these kids are when it comes to the web, I.T. and computers in general.

“So how many of you have been on the internet before?” was my first question, as every hand shot up within a second.

“How many have been on more than ten times?” was my second, with the same re-action from the kids.

“OK, which sites are your favourites sites?” was the next. The answers were many and varied. Social networking played a big part with Facebook, Myspace, Bebo, MSN and even Twitter (yes, Twitter with a bunch of 8 year olds!) scoring well.

We then went on to look at a selection of ten websites I had chosen the night before and talk about whether we liked them, what we like about them and what we didn’t like. The car sites scored well with the boys with “Audi” and “Porsche” being the sites of choice. A much more intelligent choice came from the girls with the excellent “Coraline” site from the stop-start animation film and the breathtaking “Hello Sour Sally“, which has to be the most inventive way ever to try to sell pots of frozen yoghurt!

There were some clangers too, like the intentionally appalling “World’s Worst Site” and the textbook ‘how not to build an information website’ example at “Havenworks“. To their credit, the kids picked out all of the clangers and came out with incredibly astute observations such as “I like this one because it is nice and simple, you understand what it does and you can easily find your way around it”.

Other comments such as “I like this one cos it’s got a smiley flashing face in the corner” restored natures balance though!

The full list is here if you fancy a look. Which are your favourites?

Could you ditch Windows?

A few years ago the idea of running an office without Microsoft Windows was an unlikely scenario.

Since Windows 3.1 came out, and subsequently the 95, 98, 98SE, Me, NT, 2000, XP and now Vista variants it’s pretty much been at the core of most computer systems. But could you run your computing life without it? What are the alternatives?

At Elmnet we run Apple Macintosh computers. We’ve used PC’s before, and they were OK, but we needed more processing power and the only machine really up to the job was a Mac Pro. The newer Intel Mac Pro range allow the user to install and use just about any operating system, for us this is very handy for checking websites in different browsers on different platforms. Before we launch a site it is checked in IE, Firefox, Opera and Safari on Vista, XP, Mac OSX and Ubuntu Linux. In doing this we’ve become quite used to different operating systems, and we reckon that a user can quite easily get by without having to turn to Microsoft.

windows_logoXP is old now and is showing it’s age, but it still works and as long as people are unimpressed with Vista will continue to feature. Personally I quite like Vista, but then our computers had plenty of RAM in them – vital for Vista to perform even reasonably. The problem is that Vista needs at least 3GB of RAM to function properly, and could benefit from much more, but the standard 32 Bit operating system can only handle 3.5GB max. For us this is a non starter – our work means that we need at least 8GB, but a standard office instalation can probably do fine with Vista on 3GB.

ubuntu1Linux is both the new kid on the block and the old timer! It’s been around for forty years, but it’s new to lots of people as it has become increasingly reported on in the computing press. It is more complex to set up and administer than Windows, and there are not as many applications available for it, but it’s far more stable, just as productive (most web servers are based on Linux) and some of them are even free. If you want to try it out download a Live CD of Ubuntu – you can run it direct from the disk without changing your computer configuration and see for yourself.

apple-logoThe jewel in the crown for me has to be Apple’s beautiful OSX though. It’s come a long way since it’s introduction in 2002, and is quick, stable, full of features and doesn’t need that much RAM to work well. One of the reasons behind it’s stability is Apples insistence that OSX only runs on Apple computers. This means that they can control the whole hardware and software package leading to a much more tightly integrated and efficient overall package.

The verdict?

OSX wins for sure, but at a price. Macs are not cheap, but they age well. If you’re an advanced user then you’ll love Linux, as there is plenty of opportunity to tinker under the hood! If you’re not an expert though, and you don’t have the budget for a Mac then I would still go for Windows over Linux for now as it’s easier to maintain and there is more out there for it. Linux will have it’s day, but that day isn’t here just yet!

Is size really that important?

Do you have a compact camera with a 10 Megapixel sensor? Whilst not wishing to rain on your parade, in my opinion this is pointless. Ken Rockwell sums it up quite nicely here:

samsung10mp“The megapixel myth was started by camera makers and swallowed hook, line and sinker. Camera makers use the number of megapixels a camera has to hoodwink you into thinking it has something to do with camera quality. They use it because even a tiny linear resolution increase results in a huge total pixel increase, since the total pixel count varies as the total area of the image, which varies as the square of the linear resolution. In other words, an almost invisible 40% increase in the number of pixels in any one direction results in a doubling of the total number of pixels in the image. Therefore camera makers can always brag about how much better this week’s camera is, with even negligible improvements.

One needs at least a doubling of linear resolution or film size to make an obvious improvement. This is the same as quadrupling the megapixels. A simple doubling of megapixels, even if all else remained the same, is very subtle. The factors that matter, like color and sharpening algorithms, are far more significant.”

So when you go out looking for that new digital camera stop for a second and have a think. Think about the quality of glass on the front of it. Think about the size of that sensor rather than the number of megapixels upon it. There is no point in having 10 Megapixels on a sensor the size of a pin head, you will see far superior results on a camera with half that number on a sensor twice the size.

Content dictates design

We’re big believers in this very simple statement: “content dictates design”.

We’ve been approached many times by clients who want to see the shiny new design for their website before developing the content for it. It rarely works as well as when content has been thought through, developed and used as a keystone in the development of a design.

How can you know how long a page is going to be until you have the content? Is it possible to design a really effective navigation system if you don’t know where you are going to be navigating to?

With smaller sites you can probably get away with it. With larger ones the old saying ‘content is king’ has never rung truer.

Bring down Internet Explorer 6

“The premise is simple: Internet Explorer 6 is antiquated, doesn’t support key web standards, and should be phased out.”

ie_logo_smallSo say respected industry magazine ‘.net’. Microsoft released IE6 nearly eight years ago, which in I.T. terms is an eternity! It’s non standards compliant, not as secure as modern browsers and not as well featured. Putting it simply, the web looks different through IE6, much like it did eight years ago in fact.

The problem here is that Microsoft won’t port out IE7 to Windows 2000. This isn’t much of a problem to your average user, but you would be shocked at the number of businesses still out there running Windows 2000 boxes. I have nothing against Windows 2000, it’s possibly the best Microsoft product ever made in my opinion, but as long as Microsoft won’t make IE7 available for it then IE6 simply won’t go away.

From a designers point of view this is a bad situation. We find that we first of all write our sites in generally compliant standard browsers such as Firefox, Opera, Safari and Internet Explorer 8. We then need to go back and tweak the code to make the site render properly in the half effort called Internet Explorer 7. We then have to go back again and make considerable changes to make it work in Internet Explorer 6! This wastes an awful lot of production time, time which could be better spent doing other things.

So, our choice is either to stop supporting Internet Explorer 6 and try and force Microsoft to undo their evil, but risk alienating up to 20% of users still accessing the web with it, or carry on supporting this antiquated browser and lose valuable development time on every single job trying to bend it into something it can never be.

At Elmnet the jury is still out, but the day that IE6 is no longer a factor in my web design projects will be a very happy one. If you’re unfortunate enough to be stuck with IE6 then you will have already seen our upgrade your browser page. We aim to make our websites accessible to all in IE6, although we won’t be too upset if it doesn’t look it’s best – you have to draw the line somewhere.

The importance of being ‘standards compliant’.

w3c-smalllogo-104_48pxOne of the most important aspects of web design here at Elmnet is the build of standards compliant sites. This means writing code in the standard as specified by the W3C Consortium. To do this we need to write a site in two parts. The first part is the content, and this content is usually drawn from a database and displayed in a page. The second part of the site is the design, and this is controlled from a separate style sheet. What we change in the stylesheet only affects the way that the site looks, not the content held within it. The content and design are kept apart and only come together when the viewer browses to the site.

There are two ways of looking at standards compliant web design. One is to not bother and just go ahead and write non standard code. This is fine today, but next year when the next generation of web browsers come out we shouldn’t then complain when our sites don’t work in them.

The more sensible option is to write code which conforms as closely as possible to the standard of the day. Modern standards compliant browsers will always support standards compliant code so in theory at least you have a site that will work as it should for years to come. It’s an investment in the future!

While we’re on the subject of standards compliant browsers, I haven’t even touched upon the subject of Internet Explorer 6, 7 and 8 and the horrendous web legacy they have left behind them. It will crop up soon though!

To validate or not to validate!

To validate or not to validate, that is the question:
Whether ’tis nobler in the mind to suffer
The slings and arrows of illegible captcha scripts,
Or to take arms against a sea of anti-spam questions,
And by opposing end them?

picture-3Erm, what? To anyone not familiar with the numerous anti spam solutions available to protect email forms this may appear as understandable as Shakespeare does to me. Briefly, a ‘captcha’ system involves a user typing in the distorted letters and numbers displayed before a form can be processed. The anti-spam question asks a simple question (usually basic maths) to which you enter the correct answer and off you go. These methods are supposed to be a way of ensuring that it is in fact a human that is filling in the form and not one of these nasty automated junk mail spam bot thingamybobs.

So, what’s the problem? Well, anyone asking obviously hasn’t tried to use one before. They are a big obstacle to accessibility, even users with 20:20 vision have problems with them so goodness knows what the visually impaired make of them! At Elmnet we’ve used them before, but we now have a different approach and are going through our customers forms one by one. It will take a little time to get around everyone but we have a plan.

We built a series of web forms for Paul at PLJ Properties. The forms had a lot of work to do. They have to input the information entered to a database, add the user to a mailing list and send an email of the forms contents to the site owner. Needless to say we don’t want to have to waste our time with the spam robots filling in forms with random phrases and spam hyperlinks so we added a captcha protection system. It wasn’t particularly good. We then removed this and added an anti-spam question. This seemed to do the trick, but it wasn’t the most graceful of solutions. Then we tried a bit harder and came up with something quite simple – we validated our forms correctly.

This is a simple procedure that eliminates the need for captcha or antispam. How it works is that we specify what kind of inputs are allowed in certain fields. For example, ‘forename’ and ‘surname’ can only contain letters and spaces, and certainly no numbers. ‘Email address’ has to be in the correct format for an email address. ‘Telephone Number’ must contain only numbers and spaces and be of a certain length, and the ‘Enquiry’ box can contain all characters but it can’t contain ones starting with ‘http://’. A favourite trick of spammers is to insert hyperlinks into webforms in the hope that they will appear on the web in some shape or form.

If the entries of the webform match this criteria then it is allowed through. If it doesn’t then it’s not. Simple! No squiggly letters to fill in, no questions to answer, no blocks to useability or accessibility, just common sense!