DIY web designApril 24th, 2009

With the likes of Twitter, Facebook, Livejournal and Google Sites, it’s never been easier to publish content on the Internet. And this is a great thing, it’s a new and growing media that lets anybody have their own little soapbox and gives those who wouldn’t otherwise have the chance to be creative to create stuff cheaply and easily.

But if you run a business, should you save money and make your own website? Well, I reckon it all depends.

I like to compare websites to leaflets and posters. On one hand you get the professionally printed coloured leaflets on glossy paper, and on the other hand you get the home-printed, black-and-white, inkjet-printed and library-photocopied leaflets that get shoved through your door advertising local fairs or plumbing services.

If you’re a plumber then people don’t expect professional leaflets, and it would only be a waste of money. But if you’re a business with its own premises you want to give a top impression to your customer, and what better way than with a professionally made and created site?

I’m never one for making the web industry a snobbish and exclusive one, and so think that home-made sites do have their place. As do sites created by amatuers — these sites are often cheaper (or free), lets the designer enjoy his hobby, and allows him to learn more about creating websites.

It’s certainly cheaper to create it yourself if you don’t have the budget, but you get what you pay for. Going professional is worth every penny, and the designer will know the very latest techniques and will create you a site that will get you out there (with knowledge in SEO), will make you money, and will show you in the best light possible.

But if you do choose to make your own, please don’t use free hosting sites like Geocities and Tripod. You won’t get your own domain name, you won’t have complete control, and they’ll shoehorn adverts onto your site.

Posted in Rambling, Web design | No Comments »
Permalink

Tech Usability #6: Keyboard onlyApril 17th, 2009

One of an ongoing series of articles discussing usability and accessibility issues in technology and the web; with tips, tricks and standards to improve the user’s overall experience.

It’s not impossible for users to have to use the keyboard; those with motor problems may find the mouse difficult to use no matter how large the target, so it’s always helps to make things easy to use for the keyboards users among us.

Beware drop down menus

In general, I’m not a fan of dropdown menus on the web. Most solutions are badly written and generally take over the browser, and don’t work if you disable Javascript or Flash (so won’t work with screenreaders). But the major point here is most solutions don’t play nicely with the keyboard. If the user cannot use the mouse, you’re stuck.

If you use drop down menus, then have an alternative means of navigation, such as a sitemap or important links at the bottom.

Beware tab ordering

There’s nothing worse than having to tab again and again. And again and again. Include a hidden “skip to content” for keyboard users to easily select so that they don’t have to tab through your navigation all the time (BBC News do this well).

Make it obvious what link has focus

Safari seems to be the only browser that outlines links whenever you have keyboard focus on them, so for the other browsers never underestimate how useful it can be. Use a:focus CSS to show the user where their focus is, even if it’s just a subtle outline or background colour change, or the same CSS as a:hover.

Set a default focus

Again, the usefulness of having a default focus in text boxes is easily overlooked. Consider if the page could be improved by including one, or indeed if it could hinder usability.

Try it yourself

It’s easy to test how simple it is to navigate a site using just the keyboard: just unplug the mouse. Are you able to easily get around, or are you hitting tab a lot?

External links

Tags:
Posted in Tech Usability | No Comments »
Permalink

5 things I learnt at SQLbitsApril 10th, 2009

Yes yes, I know it was a while ago now, but here are five things I picked up from the various sessions at SQLBits last month, and talking to the speakers afterwards.

If you’re using MS SQL 2005, upgrade to 2008

The default settings in MS SQL 2005 are a bit rubbish, to say the least. So if you can, upgrade to 2008. If you can’t, make sure to disable the admin user. There are also other settings and services that should be disabled if you aren’t using them.

Log all login attempts: even successful ones

You never know when you’ll get a disgruntled admin or user. I’ve even gone as far as logging whenever something has been removed from the database (such as a product) at the application level, although this isn’t as necessary.

Use the correct data type

By selecting the wrong datatype you could be wasting more space than you realise. Small things such as using an integer instead of a bit to store a flag can make all the difference

Use specific data for testing

Never use empty data: run your test with specific data and then roll back.

Pester your DBA

If you notice a lag in your application, then pester your DBA and ask him to run a trace. He’ll love you for it, and it will help you improve your SQL where there are problems

Thankyou

A big thankyou to the organisers, speakers, and volunteers at SQLbits who made it a great conference

Tags: ,
Posted in Rambling | No Comments »
Permalink

Tech Usability #5: PopupsMarch 27th, 2009

One of an ongoing series of articles discussing usability and accessibility issues in technology and the web; with tips, tricks and standards to improve the user’s overall experience.

Ask anybody who uses the internet what irritates them the most about the web and the answer you get back will probably be popups that take over the screen.

They might not even be open up in a new window and it might not even be for an advert (For example opening new windows for a login box, or opening a link in a new window), but either way you are taking the content away from the user. It’s the digital equivalent of a printer putting a post-it note over a magazine article with an advert or a reminder to email the editor if you have feedback printed on it. (And if you work in the advertising industry, please don’t start doing that. I’ll never forgive myself).

Personally I find the worst offender to be snap.com. This is a service which, when the mouse moves over a link, will show a screenshot of the site being linked to. Not only is it incredibly unhelpful to have a three inch wide screenshot, it also slows down your experience because your browser has to load the javascript, load the site linked to in order to grab a screenshot, and then display it. Talk about slowing you down!

BBC News homepage with banner

Showing a request to fill in a survey on the BBC News website
without resorting to popups

Yes, there are legitimate uses for using popups, and I’m honestly not complaining about this. There are many good javascript modal box solutions out there such as Lightbox and Facebox which shows an image or webpage when you click on a link or picture (click on the screenshot in this article to see what I mean). These have truly useful applications from image galleries to the media upload box in WordPress, don’t take over your browser so you can move to another tab, and are lightweight and simple enough to not be irritating… but only if the application is right.

So, if your design calls for a modal box popup, then use a javascript solution rather than opening in a new window. And if you need to show a message such as the “could you possibly spend two minutes to fill in a survey to tell us how to improve our site?” variety, then don’t use popups! Instead, show a banner along the top of the screen which will grab the user’s attention, but won’t take over their screen nor ruin their browsing experience.

Tags: , ,
Posted in Tech Usability, Web design | No Comments »
Permalink

Review: Safari 4March 20th, 2009

It looks like it’s a time for new browser releases, with Opera, Internet Explorer and now Safari releasing public betas for their next major upgrade within the last few months. Obviously I have to throw in my two cents, don’t I?

The biggest change you’ll notice on start-up is the new tab/url area. The buttons have been given a refresh to make it even nicer, and as with Chrome tabs are now at the top of the window. Those who use the Windows version will also find a skin more like the Windows look and feel. At first I wasn’t so sure about the new tab position (I still don’t see the point), but you do get used to it. Well, I say that, but you now can drag tabs only from the corner to move them around, which I still forget and I end up dragging the entire window around.

The default start page also takes a leaf out of Chrome’s book, with a rather nice ‘wall’ of the most popular sites visited for you to choose from. But with the nice graphics comes slowness, and I’ve found that since the start page actually visits the site, ‘since last visit’ features (such as on messageboards) don’t work so well. So I’ve disabled that particular feature.

One very positive change is the new engines (particularly the javascript engine). Safari 4 is quick. Any delay in loading the page really is only waiting for the server now, which is amazing stuff. I can see a lot of people migrating from Firefox and Chrome because of this, and I think the only thing to stop this is lack of plugin support (but perhaps Safari’s simplicity is a good thing?)

Another amazing change is that Safari uses a recent version of Webkit, which passes Acid3 compliance. This means that HTML and CSS standard compliance is at 100% as far as can be measured; websites look how they are supposed to look according to W3C, not how the browser developers decided they should look.

I’ve seen a few reports on Twitter of people having problems after installing the beta, but I can’t say I’ve had any at all. In fact, I’ve found it smoother than Safari 3. Should you update and try it out? Most certainly, but take a backup first just in case!

External links

Tags:
Posted in Reviews | No Comments »
Permalink

The Accessible Web #4: Text and typographyMarch 13th, 2009

An ongoing series of articles about web accessibility issues, tips, tricks, and standards.

It’s amazing that something as simple as how the body text looks on the page or screen can help or hinder with reading. Font selection, spacing, line length and the alignment of the text can all make a massive difference.

Font selection

Sadly there isn’t much choice in font selection on the web just now, since with most browsers the font needs to be on the user’s computer. This pretty much limits you to a small list of fonts including Verdana, Times New Roman, Arial/Helvetica, Gill Sans and Lucida Sans.

Font selection should still be taken with care; fonts have their own character and very often Verdana and Times New Roman are overused (and should only be used as fallback).

Contrary to typography rules for paper, you will likely be better off choosing a sans-serif font for your body text. This is because the relatively low resolution of a computer monitor will make those fonts with serifs a little harder to read than those without them. Having a serif font for the header will however often make a nice contrast.

Leading and kerning

Leading (pronounced to rhyme with heading) is the amount of space between two lines of type: the name comes from the thin block of lead originally used to increase the space. Kerning is the space between two letters.

Both leading and kerning can affect how quickly and easily the copy can be read: too big a leading and the reader will struggle to read down to the next line. Too small a leading or kerning and the letters and words might be hard to distinguish. If you’re unsure, you ought to leave these to the defaults.

Line length

Again, speed and ease of reading is affected by line length. If the line is too long then the muscles in the eye and neck need to be used, which is tiring for the reader. It also affects how easily you can find the next line: the eye has to travel a relatively great distance to go back to the start of the line.

Alignment

In Latin languages, body text should be left aligned; any other alignment will be confusing for the reader. Right and centre aligned text is fine in some cases, such as the tag and category information that is displayed at the bottom of this post.

Justified text should never be used: using this alignment means that gaps appear between words and so ‘rivers’ of space will form. This can be disconcerting for those with dyslexia and so they will find it hard to read the copy.

Tags: ,
Posted in Tech Usability, Web design | 4 Comments »
Permalink

6 common CSS errorsMarch 6th, 2009

Since writing the article about HTML errors I thought, why not list those common CSS errors too?

Using colour keywords

Ok, ok, this isn’t strictly an ‘error’ (it’s in the CSS spec), but in my book it’s wrong. Each browser supports colour keywords differently, so to be safe you might as well use another method. I personally prefer the hex notation, which can be very easily gathered from Photoshop or Paint Shop Pro, but the RGB decimal notation is also a useable notation.

Using inline styling

The ability to add style to a tag by using the style=”" attribute can be handy, but it also sort of defeats the whole purpose of using CSS. One of the major benefits of CSS is the ability to easily change a visual aspect of a website without having to change page after page. Sure, use inline styling for testing purposes, but keep your styles to an external file. And remember, if you’re using styles that are only for one or two pages, there really is nothing from stopping you using multiple external files!

Not using semantic class names

Again going back to being able to easily change the style of a site using CSS, keep in mind that your site will likely change when naming your tag classes. Using the class name “bigyellowbox” might seem like a good idea now, but in a couple of years will it still make sense when you change the colour to blue?

Using px for font size

Many people will disagree with me here, but I’m of the opinion that fonts on the web should be the same as fonts in any other medium. Fonts have always been measured in point since the early days of the paper press right up to the day of Microsoft Word. People say that using pixels makes it easier to line up text to images, but in my opinion the web is a fluid medium and shouldn’t be strictly controlled like that.

Using height

Again, I think that the web is a fluid medium, and setting a height of an element using CSS contradicts this. Anyway, it never quite works as you expect once implemented. There are many cases where the height of an element will be different to as you’d like such as the text being resized by the user, the font not existing on the user’s computer, site copy being changed, and one browser (incorrectly) rendering your CSS differently to another browser.

Using class and id incorrectly

There’s a subtle, but important, difference between the HTML class and id attributes; it might even surprise you to learn that an element can indeed have both.

  • id is a unique identifier for that particular element. Effectively, it’s a name so that you can reference just that element (for example, the footer div) in your CSS and javascript
  • class is less unique, and is a way of identifying the element as part of a group of elements. For example, a website might have restricted pages whose links you want to look different to those page links that aren’t restricted. This can be achieved by giving the link tag an attribute of class=”restricted-link”

External links

Tags:
Posted in Web design | No Comments »
Permalink

Tech Usability #4: Website navigationFebruary 27th, 2009

One of an ongoing series of articles discussing usability issues in technology and how to improve the overall experience for the user

One of the simplest ways to make your website easy to use is to improve the navigation. Even though doing this is relatively simple, many sites still neglect to do so. Implementing improved navigation not only means your visitors will stay longer and visit more pages, it also means that your site will have improved search engine optimisation. By having confusing navigation your visitors will get confused so will give up, often after only visiting your front page.

So here are some tips to improve your site’s navigation. Even if you only implement just a few of these your site will be much more usable, but of course I recommend you implement them all!

  • Red Nose Day '09 website

    Red Nose Day 2009 site. Note
    the ‘home’ text above the logo, top left

    Link the site logo/title to the front page — It’s become natural for the user to be able to click on the top site banner to get back to the front page, so make it a link. This also makes it easier for the user to get to the front page. Some sites also highlight the fact that the logo goes to the front page, such as the Red Nose Day 2009 site (see right), although this isn’t necessary

  • Make all pages reachable within three clicks — Make it easy to get to a page, and make sure the user doesn’t have to click from page to page to get to where they want to go: after about three clicks the user will probably give up. Good ways of shortening the number of clicks required include sitemaps and search
  • Consider using breadcrumbs/sitemaps — These are both secondary navigation, but can prove invaluable if the user is lost
  • Consider using search — If your site has a lot of pages, then search is the best way of finding something. Implement a decent search (Google provide a search for sites) and make it easy to find: the top right or in the sidebar is the most common positions for the search box
  • Tell the user where they’ve been, where they are, and where they are going — …if the page is one in a series of stages. A breadcrumb-style navigation is a useful method of doing this, or prev and next links can also help
  • Keep navigation consistant — This will help the user find their way around the site. Having a navigation that considerably changes from page to page will only confuse the visitor
  • Highlight visited and current pages — Linked to the “where they’ve been, where they are, and where they’re going” guideline. Highlighting visited links helps the visitor know where they’ve already been, saving the user having to click the browser’s back button after realising they’ve already read the page. Highlighting the current page simply tells the user where they are. Whether or not the current page link should be clickable is a debate that will probably never be resolved, but personally I say you should so that the visitor can get the URL using the right-click popup menu

Tags:
Posted in Tech Usability | No Comments »
Permalink

Review: Internet Explorer 8February 20th, 2009

The next version of Internet Explorer will be with us before long, bringing us improvements in security, privacy, search, and usability. And I know people will give me funny looks for this, but I actually rather like this version. For once Microsoft are making an attempt at following standards, and the browser is more stable than ever before.

New features as listed by Microsoft include:

  • Quicker performance— Both with quicker page loading, quicker javascript, and better ways to navigate around the application
  • Better security — As well as domain name highlighting which makes it clearer if you are in a phishing site, IE8 provides “SmartScreen Filter” which will give you a warning if you are visiting a known unsafe website. Although warnings were given in IE7, this warning is much more obvious and looks similar to Firefox 3′s warnings.
  • Webclips and Accelerators — Which shows portions of a website on the click of a menu option or bookmark link

When it comes to standards compliance, IE8 is better than the previous version, but still isn’t perfect. When running the Acid3 test (the latest test for standards conformance), Internet Explorer actually performs worse than other current browsers with a score of 20/100 (Safari managing 75/100 and Firefox 71/100).

The newest CSS standard — CSS3 — is another way of comparing browsers, albeit a slightly unfair one since the different browsers are introducing different elements of CSS3 and the code in your CSS file differs between browsers.

So, what CSS3 elements do IE8 have? Sadly, not many. The only feature in IE8 is box resizing, which in my opinion isn’t that useful. Although this might sound like a reason to start saying how IE8 is rubbish, it shouldn’t really be. Agreed, IE8 is behind the times when it comes to the latest and greatest technologies, but CSS3 is presentation that isn’t widely used, and so in the great scheme of things isn’t very important.

So, what do I think of IE8? I actually think it’s quite nice. Admittedly there’s a long way to go until it catches up with Firefox and Safari, but we need to realise that a large percentage of users will still use Internet Explorer. Giving them a version that’s at least half decent with security and usability and which isn’t painful to create sites for is better than nothing, and at least Microsoft is finally sitting up and taking note.

There are however a couple of things that I don’t particularly like, one being the URL domain name highlighting. I know it has a security purpose and so it’s actually good to have, it just looks untidy. I can’t think of any solution, but I’m sure there’s a better way of doing this. Now that the idea is out there, hopefully the other browser manufacturers will be able to build on top of this feature.

IE8 also really is quick: I was surprised at how fast it was. Pages seem to load quicker than Firefox 3, so there must be some very good changes to the engines behind the scenes. I also like how tabs automatically restart whenever a site crashes the browser, so that you don’t even realise that a crash has happened. This is a real step forward for software development in general, and my hat goes off to Microsoft for managing this.

External links

Tags:
Posted in Reviews | 2 Comments »
Permalink

The Accessible Web #3: Prose and contentFebruary 13th, 2009

An ongoing series of articles about web accessibility issues, tips, tricks, and standards.

The content of a site is something that most website owners neglect to give much thought to, but in my opinion it is something that is just as important as the design of the site itself. Good prose not only makes the site more pleasurable to read (making people come back), but it also helps people with ADHD, those reading from a mobile device, and those who are merely tired.

Use a structure

If there’s a structure to your writing, this allows the reader to skim through the page first to decide whether or not the article is worth reading. So of course, if the reader can’t skim the article easily they might just move on.

Use bullet points and headings

Something else to help skimming the article is using bullet points and headings. This helps the reader get the general gist of the article without having to carefully read the entire page. For example in this article, headings are used which means the reader only needs to read the introduction and the headings to get the general idea.

Get to the point

There’s nothing more dull than somebody going off on a tangent; especially if it’s a boring one. Try and stick to the point as much as you can (unless, of course, the point of your writing is to be a free-for-all rant), that way you’re less likely to lose your readers.

Use simple language (WCAG2 3.1.5)

People shouldn’t need to have a dictionary to hand whenever they visit your site. Try not to use over-complicated language, using simple words rather than obscure ones. This helps those with learning disabilities and younger readers, who may not know what the words mean.

Provide definitions (WCAG2 3.1.3 — 3.1.4)

Whenever using acronyms, abbreviations1 and technical language, you should always provide a definition for those who do not know what the word or abbreviation means. Thankfully, HTML makes it easy to do this without disrupting your copy with three tags:

Acronyms

Using <acronym title="British Broadcasting Corporation">BBC</acronym>'s iPlayer you are able to watch a previously aired program at any time

Using BBC‘s iPlayer you are able to watch a previously aired program at any time

Abbreviations

<abbr title="Adobe Creative Suite 4">CS4</abbr> is the latest version of the software suite, with many improvements from the previous version

CS4 is the latest version of the software suite, with many improvements from the previous version

Definitions

There are a number of <dfn title="An audio file that can be downloaded to your iPod or other MP3 player">podcasts</dfn> available on the iTunes store that you can download for free

There are a number of podcasts available on the iTunes store that you can download for free

Use good typography

This will be covered in a later article, but using good typography (such as word and line spacing, font selection, and text alignment) will also make your writing easier and quicker to read, with subtle changes making huge improvements.

External links

  1. The difference between the two is up to you to debate! [↩]

Tags: , , ,
Posted in Tech Usability | 2 Comments »
Permalink

« Older Entries
Newer Entries »

Categories