Well, following Michael's post last month about our collective Vista experiences, I write this as the proud installer of Vista SP1 RC, a.k.a "a-bit-better-than-beta". And I have to say I'm noticing a world of improvement.
Unzipping my test 1mb / 1000 image file showed a significant improvement on Vista's previously flakey zip function. An action that previously took an astonishing 20 minutes (compared to WinRar's 15 seconds) now took a mere 18 minutes!
Network copying of files was noticeably improved, now only giving me chance to get as far as the milk-adding stage of my cuppa.
Stability of applications also seems more solid, with Dreamweaver only giving me an out of memory error if I have Illustrator open and Outlook, which is forgiveable given that my Core Duo only has 2GB of RAM to play with. And the icons on Photoshop's tool palette now only inexplicably vanish at most 30% of the time, which has significantly improved my workflow.
There's plenty of other improvements too, and more I'm sure will emerge over time. But suffice to say I'm glad I held out for SP1, and didn't lose heart entirely.
... now... where did I put that standalone XP disk?
Vista humbug aside, the festive season is close upon us. So I'd like to take this opportunity to wish all our clients, suppliers, friends and colleagues a Merry Christmas from us all at Wordsun Web Works.
18 December 2007
09 November 2007
I hate Vista
OK so hate is a strong word and should really be reserved for special occasions but I think in this case it actually is appropriate. I switched to Vista at the beginning of the year attracted by promises of improved speed, stability and security. In all three of these areas it has fundamentally failed:
Speed - Vista is slow to start up, slow to shutdown, slow to open applications, slow to copy files, and slow to unzip files.
Stability - Vista is buggy, unstable and crashes frequently. It is not uncommon for me to have to reboot 2 or 3 times per day due to crashes. When programs freeze, task manager often refuses to open so you can't even force quit a troublesome app.
Security - Bitlocker sounds great but you need a computer with a TPM chip, a copy of Vista Ultimate (very expensive) and a degree in geekery to get it working. Oh and if your OS came preinstalled, you have to wipe everything off your hard drive and reinstall to get it working, as I discovered after loading all my apps and docs onto the system.
I'd love to say "apart from that it's great" but that would be a lie. My network card software fails to load every other boot, the WiFi card turns itself off every few hours, the video driver always forgets my multiple screen configuration and swaps the monitors round after a reboot, and the fingerprint scanner fails to be recognised approximately 1 in 3 boots.
Since I have been using Vista, my productivity has nose dived, but at least I can flip through my error messages in translucent windows with a 3d animation effect.
If you're wondering whether to stay with XP or try out Vista, my advice is to buy a Mac. You can't stay in the past with XP forever and I've seen an awful vision of the future with Vista. Even if you hate Macs you'll probably hate them less than you'll hate Vista.
Speed - Vista is slow to start up, slow to shutdown, slow to open applications, slow to copy files, and slow to unzip files.
Stability - Vista is buggy, unstable and crashes frequently. It is not uncommon for me to have to reboot 2 or 3 times per day due to crashes. When programs freeze, task manager often refuses to open so you can't even force quit a troublesome app.
Security - Bitlocker sounds great but you need a computer with a TPM chip, a copy of Vista Ultimate (very expensive) and a degree in geekery to get it working. Oh and if your OS came preinstalled, you have to wipe everything off your hard drive and reinstall to get it working, as I discovered after loading all my apps and docs onto the system.
I'd love to say "apart from that it's great" but that would be a lie. My network card software fails to load every other boot, the WiFi card turns itself off every few hours, the video driver always forgets my multiple screen configuration and swaps the monitors round after a reboot, and the fingerprint scanner fails to be recognised approximately 1 in 3 boots.
Since I have been using Vista, my productivity has nose dived, but at least I can flip through my error messages in translucent windows with a 3d animation effect.
If you're wondering whether to stay with XP or try out Vista, my advice is to buy a Mac. You can't stay in the past with XP forever and I've seen an awful vision of the future with Vista. Even if you hate Macs you'll probably hate them less than you'll hate Vista.
26 September 2007
Adobe Air fails to impress
Following the announcement of the new Adobe Air interface to Google Analytics yesterday, I decided to have a good look at Air for the first time and see what it could really do. My expectations were fairly high based on what I'd heard from Adobe but I was bitterly disappointed with the applications that are currently available.
Air applications are like widgets that are easily authored (apparently) using existing technologies such as HTML, Flash and Javascript. Using Adobe's development tools, you can build your own Air applications to do whatever you want (within reason).
Given the great potential of the Air framework, it is disappointing to see Adobe's sample applications and showcase including feeble applications such as an RSS feed of colours from their Kuler application, an application that lets you draw with a virtual marker pen on your screen and a web developer tool that displays the source and DOM of a web page with significantly fewer features than the excellent web developer extension for Firefox.
I honestly couldn't find a single Air application, whether developed by Adobe or by 3rd parties, that I found in any way useful. There didn't seem to be anything available that couldn't already be done a better way. For example, why would you want to run a seperate Google Anayltics Air application which provides you with the exact same features as the browser-based version. Or why would you fire up the Kuler RSS colour feed when you could just view it in your RSS reader?
Maybe as the framework matures and more developers come up with new ways of using the technology, something genuinely useful will emerge, or maybe I'm just missing the point, but for the moment:
Adobe Air = I don't get it.
Air applications are like widgets that are easily authored (apparently) using existing technologies such as HTML, Flash and Javascript. Using Adobe's development tools, you can build your own Air applications to do whatever you want (within reason).
Given the great potential of the Air framework, it is disappointing to see Adobe's sample applications and showcase including feeble applications such as an RSS feed of colours from their Kuler application, an application that lets you draw with a virtual marker pen on your screen and a web developer tool that displays the source and DOM of a web page with significantly fewer features than the excellent web developer extension for Firefox.
I honestly couldn't find a single Air application, whether developed by Adobe or by 3rd parties, that I found in any way useful. There didn't seem to be anything available that couldn't already be done a better way. For example, why would you want to run a seperate Google Anayltics Air application which provides you with the exact same features as the browser-based version. Or why would you fire up the Kuler RSS colour feed when you could just view it in your RSS reader?
Maybe as the framework matures and more developers come up with new ways of using the technology, something genuinely useful will emerge, or maybe I'm just missing the point, but for the moment:
Adobe Air = I don't get it.
19 September 2007
Why mega-pixels don't always mean mega-pictures...
Over the past couple of years we've seen an increasing number of clients nipping out with the office digital camera when asked to provide a photo of a product or team member for their website or print campaign. All well and good - the photographic bang you get for your buck nowadays is pretty darned impressive, and snapping images yourself is obviously much more convenient and cost-effective than employing the services of a professional photographer.
Unfortunately the end result isn't always the pin-sharp masterpiece it could be, even when armed with the latest 10 Megapixel technological triumph. Obviously the magic of Photoshop means we can iron out some of the imperfections in many of the images we're provided with, but following a few basic tips can significantly improve the initial image quality, giving a better end result and (in the case of PR images) increasing the likelihood of publication.
Put simply, a sharp, high quality image is far more likely to be prominently used in a publication than a grainy snapshot!
Keep the noise down...
Digital noise is one of the most common problems. This is the grainy, multicoloured speckles within blocks of colour, particularly in darker or low-light images. Some of this can be digitally removed, but using a "median" technique, which reduces image quality. The best way to limit the amount of noise in an image is to experiment with the camera's ISO settings. Instead of the "auto" setting, try a slower ISO speed of 100-200. This effectively increases the amount of time the camera has to capture image data. The downside to this is that the camera needs to be held steady to avoid blurred images, which leads us to ...
... invest in a tripod...
Well, I say invest, but you can pick up a decent tripod from the likes of Amazon for £20, so it's hardly going to dent the finances. And the return on image quality will be immeasurable! A tripod means you can safely fiddle with all kinds of camera settings without having to worry about keeping a steady hand. Combine that with the increased number of cameras that now come provided with remote controls and you need never worry about camera shake again! This also enables you to work in lower or indoor light environments without resorting to...
...flash! ...
Unless you have a professional flash gun with a "fill" mode or a controlled secondary light source, disable the auto-flash mode! All this will achieve is washed-out colours, red-eye and ugly shadows, particularly if your subject is close to its background. While we can restore some of these, a harsh flash reduces the amount of colour information in the image, and we can't put back what isn't there! Better is to use the previously purchased tripod and a slower exposure. This will allow the camera to take in more natural light, and capture more image data. It's easier to make a good dark photo lighter, than a poor bright photo darker!
... keep it big...
It may seem like an obvious tip but if the camera is capable of taking 5MP shots, take a 5MP shot! Bigger is better in digital photographs, as the increased resolution makes it a lot easier to disguise imperfections when scaled down afterwards. Also if you have the option to take the image in an uncompressed format like RAW, then do so. Failing that, make sure any options that mention image quality or JPG settings are set to maximum. It will increase the file size, but this is preferable to heavily compressed images, which may be noise free and razor sharp but ruined by countless JPG artefacts. If email size restrictions cause a problem, use a large-file upload service such as http://www.yousendit.com.
Unfortunately the end result isn't always the pin-sharp masterpiece it could be, even when armed with the latest 10 Megapixel technological triumph. Obviously the magic of Photoshop means we can iron out some of the imperfections in many of the images we're provided with, but following a few basic tips can significantly improve the initial image quality, giving a better end result and (in the case of PR images) increasing the likelihood of publication.
Put simply, a sharp, high quality image is far more likely to be prominently used in a publication than a grainy snapshot!
Keep the noise down...
Digital noise is one of the most common problems. This is the grainy, multicoloured speckles within blocks of colour, particularly in darker or low-light images. Some of this can be digitally removed, but using a "median" technique, which reduces image quality. The best way to limit the amount of noise in an image is to experiment with the camera's ISO settings. Instead of the "auto" setting, try a slower ISO speed of 100-200. This effectively increases the amount of time the camera has to capture image data. The downside to this is that the camera needs to be held steady to avoid blurred images, which leads us to ...
... invest in a tripod...
Well, I say invest, but you can pick up a decent tripod from the likes of Amazon for £20, so it's hardly going to dent the finances. And the return on image quality will be immeasurable! A tripod means you can safely fiddle with all kinds of camera settings without having to worry about keeping a steady hand. Combine that with the increased number of cameras that now come provided with remote controls and you need never worry about camera shake again! This also enables you to work in lower or indoor light environments without resorting to...
...flash! ...
Unless you have a professional flash gun with a "fill" mode or a controlled secondary light source, disable the auto-flash mode! All this will achieve is washed-out colours, red-eye and ugly shadows, particularly if your subject is close to its background. While we can restore some of these, a harsh flash reduces the amount of colour information in the image, and we can't put back what isn't there! Better is to use the previously purchased tripod and a slower exposure. This will allow the camera to take in more natural light, and capture more image data. It's easier to make a good dark photo lighter, than a poor bright photo darker!
... keep it big...
It may seem like an obvious tip but if the camera is capable of taking 5MP shots, take a 5MP shot! Bigger is better in digital photographs, as the increased resolution makes it a lot easier to disguise imperfections when scaled down afterwards. Also if you have the option to take the image in an uncompressed format like RAW, then do so. Failing that, make sure any options that mention image quality or JPG settings are set to maximum. It will increase the file size, but this is preferable to heavily compressed images, which may be noise free and razor sharp but ruined by countless JPG artefacts. If email size restrictions cause a problem, use a large-file upload service such as http://www.yousendit.com.
12 September 2007
Free web graphics
Birmingham based web developer, Mark James, has kindly put together a free set of cool web icons that are very well designed and look a little bit Web 2.0:
There's around 1,000 icons in this set altogether so they cover pretty much everything you could ever want on your website or blog.
There's around 1,000 icons in this set altogether so they cover pretty much everything you could ever want on your website or blog.
04 September 2007
Which is the most popular web browser
Yesterday I went through a ton of data from one of my personal websites DoYouRemember.co.uk , a site mainly about 80s toys, 80s movies and 80s music. I was reading the traffic analysis reports using the fabulous free Google Analytics software (if you're not using this yet, you should be) and was interested to see the latest figures on browser market share. The market has shifted substantially since this time last year.
The figures for August 2007 are as follows (with August 2006 figures in brackets):
74% (82%) - Internet Explorer
20% (11%) - Firefox
4% (3%) - Safari
2% (4%)- Other
And if we break down the Internet Explorer figures a bit further:
55% (96%)- Version 6.0
44% (2%) - Version 7.0
1% (2%) - Older
It's clear from this data that Firefox is becoming a more important player and seriously threatening Microsoft's dominance of the browser market (yay for Firefox!). But what does this data mean for web developers?
Well, the obvious conclusion is that we need to continue developing cross-browser compatible websites and make sure we are still testing on the big three as a minimum - IE6, IE7 and Firefox. Between them they account for 98% of all Internet traffic and much of the remaining 2% will render webpages the same anyway. It's still useful to have a peek in Safari or Opera, of course, since they have their own quirks.
My prediction for August 2008:
66% - Internet Explorer
27% - Firefox
5% - Safari
2% - Other
21% - Version 6.0
79% - Version 7.0
1% - Older (or newer - who knows, maybe they'll get a version 8 out next year!)
The figures for August 2007 are as follows (with August 2006 figures in brackets):
74% (82%) - Internet Explorer
20% (11%) - Firefox
4% (3%) - Safari
2% (4%)- Other
And if we break down the Internet Explorer figures a bit further:
55% (96%)- Version 6.0
44% (2%) - Version 7.0
1% (2%) - Older
It's clear from this data that Firefox is becoming a more important player and seriously threatening Microsoft's dominance of the browser market (yay for Firefox!). But what does this data mean for web developers?
Well, the obvious conclusion is that we need to continue developing cross-browser compatible websites and make sure we are still testing on the big three as a minimum - IE6, IE7 and Firefox. Between them they account for 98% of all Internet traffic and much of the remaining 2% will render webpages the same anyway. It's still useful to have a peek in Safari or Opera, of course, since they have their own quirks.
My prediction for August 2008:
66% - Internet Explorer
27% - Firefox
5% - Safari
2% - Other
21% - Version 6.0
79% - Version 7.0
1% - Older (or newer - who knows, maybe they'll get a version 8 out next year!)
31 August 2007
Powerpoint, Flash, and why you shouldn't...
I understand the point of PowerPoint - I really do. Even when criticised for a "pipeline" approach to presenting information. Even when the three-way simultaneous bombardment of visual, textual and aural information is causing mental shutdown in the audience. Even when presentations become so bloated that they become a hindrance to global security... even when drowning in the deepest depths of clip-art hell, I understand its appeal and why it remains so entrenched in corporate life.
What I don't understand, however, is why Microsoft seems content for it to remain such a clunky, buggy, temperamental albatross of an application. Over the past couple of revisions we've seen the introduction of pseudo-3D text styles, nice fades rather than the old-school pixel dissolve, and a larger range of fly-ins than Easyjet. All very lovely (if still lagging somewhat behind Apple's Keynote), but still not even coming close to addressing the real problems.
Take one of our recent experiences as an example. Our client wanted their PowerPoint presentation to offer a little more in the way of visual punch. Aware of the common traps when designing engaging slides, they wondered if we could add some fancy eye-candy using Flash. Surely no problem, right? The software has been around for over a decade now in various forms, and is as widespread as any other document format. Heck, there's even an option to insert a "Flash Document" under the "Insert Object" menu. Except... um... that doesn't work, either crashing the application, displaying an error or settling simply for displaying a Flash icon.
No, instead we need the "Developer" menu (helpfully hidden by default), so we can insert a "Shockwave Flash Object" control. Cue a baffling series of parameters, embedding options, not to mention delving into the code view's Visual Basic editor to hack a script that makes sure the Flash movie rewinds correctly when returning to a slide. Which in turn means your PowerPoint is now loaded with enough macros to terrify even the most liberal of corporate IT lockdowns. When it works, of course... which it might not :-/
Oh, and don't expect any of this to work on any Macs running the slides. Nope, this is ActiveX territory only.
Surely this isn't the future of corporate presentations - locked into slide after slide of the same stale templates simply because PowerPoint is so backwards it can't cope with the inclusion of anything more complex than a sound file?
What I don't understand, however, is why Microsoft seems content for it to remain such a clunky, buggy, temperamental albatross of an application. Over the past couple of revisions we've seen the introduction of pseudo-3D text styles, nice fades rather than the old-school pixel dissolve, and a larger range of fly-ins than Easyjet. All very lovely (if still lagging somewhat behind Apple's Keynote), but still not even coming close to addressing the real problems.
Take one of our recent experiences as an example. Our client wanted their PowerPoint presentation to offer a little more in the way of visual punch. Aware of the common traps when designing engaging slides, they wondered if we could add some fancy eye-candy using Flash. Surely no problem, right? The software has been around for over a decade now in various forms, and is as widespread as any other document format. Heck, there's even an option to insert a "Flash Document" under the "Insert Object" menu. Except... um... that doesn't work, either crashing the application, displaying an error or settling simply for displaying a Flash icon.
No, instead we need the "Developer" menu (helpfully hidden by default), so we can insert a "Shockwave Flash Object" control. Cue a baffling series of parameters, embedding options, not to mention delving into the code view's Visual Basic editor to hack a script that makes sure the Flash movie rewinds correctly when returning to a slide. Which in turn means your PowerPoint is now loaded with enough macros to terrify even the most liberal of corporate IT lockdowns. When it works, of course... which it might not :-/
Oh, and don't expect any of this to work on any Macs running the slides. Nope, this is ActiveX territory only.
Surely this isn't the future of corporate presentations - locked into slide after slide of the same stale templates simply because PowerPoint is so backwards it can't cope with the inclusion of anything more complex than a sound file?
28 August 2007
Distorted images in Internet Explorer
One of our clients recently complained that the images on their website were looking distorted and fuzzy when viewed in Internet Explorer 6 on Windows XP. We tried to replicate the problem on our own IE6/XP setup but we could find any problem. We asked our client to try other computers and browsers in his office and they worked just fine too.
After a long and drawn out process of elimination, googling and head scratching, Ian finally came across an article that talked about distorted images in Internet Explorer caused by the operating system using non-standard DPI settings.
Basically, there's a setting in the advanced settings of the display control panel that allows you to change the DPI from 96 (normal) to 120 (oversize). This setting is sometimes used to increase system font size but has the side effect of badly scaling all images in Internet Explorer by 125% - hence the distortion and fuzziness.
Needless to say, after changing the DPI setting back to 96, our client's problem was resolved.
If this post helped you with the same problem, please let us know by adding a comment.
After a long and drawn out process of elimination, googling and head scratching, Ian finally came across an article that talked about distorted images in Internet Explorer caused by the operating system using non-standard DPI settings.
Basically, there's a setting in the advanced settings of the display control panel that allows you to change the DPI from 96 (normal) to 120 (oversize). This setting is sometimes used to increase system font size but has the side effect of badly scaling all images in Internet Explorer by 125% - hence the distortion and fuzziness.
Needless to say, after changing the DPI setting back to 96, our client's problem was resolved.
If this post helped you with the same problem, please let us know by adding a comment.
24 August 2007
Does Google prefer hypens or underscores?
Senior Google guy Matt Cutts has recently confirmed that it is still preferable to use a hyphen instead of an underscore when naming files or web pages. Google will read a URL such as www.wordsun.co.uk/corporate_web_site_design.html and conclude that the page is about "corporate_web_site_design" not "corporate web site design". Do you see the difference? In the former example, corporate_web_site_design is treated as a single word (one that no one would ever for search for) whereas the latter example will give Google four separate key words to chew on plus a whole phrase "corporate", "web", "site", "design" and "corporate website design".
In the long term Google may be looking into interpreting the underscore character as a word separator but for now the advice is still definitely - don't use underscores!
In the long term Google may be looking into interpreting the underscore character as a word separator but for now the advice is still definitely - don't use underscores!
17 July 2007
Summer holidays are coming
It's that time of year again when everything goes quiet as everyone goes off on their summer holidays. This year has been the worst summer weather I can remember (global warming innit?) so I'm looking forward to some better weather in France next week.
Strangely though, this year has also been the busiest summer so far that I can remember and the phones haven't stopped ringing. We're busier than ever now when we would normally be taking advantage of a lull in business to catch up on some housekeeping tasks.
Anyway, I'm going to sign off now for a couple of weeks and start practising my holiday French: "Je suis désolé mais je ne parle pas Français..."
Strangely though, this year has also been the busiest summer so far that I can remember and the phones haven't stopped ringing. We're busier than ever now when we would normally be taking advantage of a lull in business to catch up on some housekeeping tasks.
Anyway, I'm going to sign off now for a couple of weeks and start practising my holiday French: "Je suis désolé mais je ne parle pas Français..."
04 July 2007
Update on Corporate Website Design experiment
I've been keeping an eye on the search engine positioning experiment we started on the 19th June and whilst there's no obvious result for the blog at the moment, a similar experiment I started on the www.wordsun.co.uk website has yielded excellent results.
After making my last post, I decided to try optimising the main website for the phrase 'Corporate Website Design' as well and discovered that by adding the phrase to the title of the page, adding a link to a page called 'Corporate Website Design' which also mentioned the keywords in context and a few other minor nips and tucks, we jumped quite rapidly from position 16 on Google to 8 which puts us firmly on the front page. Even better, if you search for "Corporate Website Design" (with the quotes) we appear at positions 3 and 4!
I've made a few more tweaks to the page to see whether I can get it any higher - I really want to get to number one on Google now. I'll let you know how it goes...
After making my last post, I decided to try optimising the main website for the phrase 'Corporate Website Design' as well and discovered that by adding the phrase to the title of the page, adding a link to a page called 'Corporate Website Design' which also mentioned the keywords in context and a few other minor nips and tucks, we jumped quite rapidly from position 16 on Google to 8 which puts us firmly on the front page. Even better, if you search for "Corporate Website Design" (with the quotes) we appear at positions 3 and 4!
I've made a few more tweaks to the page to see whether I can get it any higher - I really want to get to number one on Google now. I'll let you know how it goes...
29 June 2007
On wide monitors, liquid layouts and line lengths...
Read any decent article on CSS layout nowadays and you'll inevitably see mention of "liquid" layouts, where the page contents scale to fill the available browser space. They've become something of an obsession for developers recently, with many going so far as to coin the phrase "the Holy Grail". In slightly less hyperbolic terms this refers to a 100% cross-browser compatible 3-column layout, with fixed outer columns and a central column that scales to fill the remaining available width. When even CSS guru Eric Meyer has a proposed solution, you know its a movement with some traction.
It would be somewhat controversial then to suggest that maybe a liquid layout isn't always the best option, but that's what I'm about to do.
We've hit a point when wide-screen monitors with high resolutions are becoming increasingly commonplace, especially with many of our clients, who tend to be highly technical companies working on products and systems which require as much screen real-estate as possible. And from an aesthetic point of view, I'd agree that a website constrained to a maximum width can sometimes look a little odd in a full-screen browser on some of these monitors.
The question is, do we design and layout content to fit the technical specifications of the visitors machine, or the physical limitations of the person using it?
Unfortunately, the human eye and brain haven't quite developed at the same rate as our monitors! Studies at the end of the 19th Century (Weber, Javel & Cohn, from 1881 to 1883) determined that 4inches was the optimum line length for printed media, and things haven't changed that greatly since then. The shift to computer monitors at the end of the 20th century saw a slight change, with Dyson and Kipping (1998) finding that reading rates increased as characters per line increased. In their study using 12-point type, the 4-inch line length produced the slowest reading rate and the 7.3 inch line length produced the fastest. However, users preferred the 4-inch line lengths. Similar studies have since been carried out by Youngman and Scharff (1999), Fernandez and Hull (2002) and most recently Dawn Shaikh (2005).
Almost uniformly, participants read varying line-lengths at similar speeds but expressed a preference for lengths of around 4-6 inches (or 10-15 words). This fits the natural arc of the eye, meaning it has to travel less, enabling the brain to concentrate on the text on the page, which is ultimately the point of most websites!
So yes, of course there are reasons why one might want to make page content "liquid", and while it can present technical issues there's certainly no shortage of solutions. But when the underlying purpose of a site is to convey information - in some cases very detailed technical information - I would argue that improved usability for the visitor should always be the most important goal. And if that means a constrained-width layout, then that's the layout model we'll adopt.
It would be somewhat controversial then to suggest that maybe a liquid layout isn't always the best option, but that's what I'm about to do.
We've hit a point when wide-screen monitors with high resolutions are becoming increasingly commonplace, especially with many of our clients, who tend to be highly technical companies working on products and systems which require as much screen real-estate as possible. And from an aesthetic point of view, I'd agree that a website constrained to a maximum width can sometimes look a little odd in a full-screen browser on some of these monitors.
The question is, do we design and layout content to fit the technical specifications of the visitors machine, or the physical limitations of the person using it?
Unfortunately, the human eye and brain haven't quite developed at the same rate as our monitors! Studies at the end of the 19th Century (Weber, Javel & Cohn, from 1881 to 1883) determined that 4inches was the optimum line length for printed media, and things haven't changed that greatly since then. The shift to computer monitors at the end of the 20th century saw a slight change, with Dyson and Kipping (1998) finding that reading rates increased as characters per line increased. In their study using 12-point type, the 4-inch line length produced the slowest reading rate and the 7.3 inch line length produced the fastest. However, users preferred the 4-inch line lengths. Similar studies have since been carried out by Youngman and Scharff (1999), Fernandez and Hull (2002) and most recently Dawn Shaikh (2005).
Almost uniformly, participants read varying line-lengths at similar speeds but expressed a preference for lengths of around 4-6 inches (or 10-15 words). This fits the natural arc of the eye, meaning it has to travel less, enabling the brain to concentrate on the text on the page, which is ultimately the point of most websites!
So yes, of course there are reasons why one might want to make page content "liquid", and while it can present technical issues there's certainly no shortage of solutions. But when the underlying purpose of a site is to convey information - in some cases very detailed technical information - I would argue that improved usability for the visitor should always be the most important goal. And if that means a constrained-width layout, then that's the layout model we'll adopt.
19 June 2007
Corporate website design
Corporate website design experiment: how to use a blog to increase your ranking in the search engines.
Everybody knows that a better result in the search engines = more traffic = more sales, right? So here's an experiment to see just how easy (or difficult) it is to claw your way up the search results using the power of your blog. I've carefully written this post to include the key phrase "corporate website design" in several prominent places and you'll notice that in some places I've spelled the phrase corporate website design (three words) and in others corporate web site design (four words). This is because Google will differentiate between a search for "website" and "web site" and treat them as two different searches bringing up different sets of results.
Now, I have to be honest, I'm not sure how well this will work on a brand new blog with no one linking to it yet but I'll keep an eye on the results over the coming weeks and let you know what happens.
At the time of writing (19th June 2007) this blog did not appear anywhere in the top 50 results when searching Google for "corporate website design" or "corporate web site design". Take it away search engine spiders...
Everybody knows that a better result in the search engines = more traffic = more sales, right? So here's an experiment to see just how easy (or difficult) it is to claw your way up the search results using the power of your blog. I've carefully written this post to include the key phrase "corporate website design" in several prominent places and you'll notice that in some places I've spelled the phrase corporate website design (three words) and in others corporate web site design (four words). This is because Google will differentiate between a search for "website" and "web site" and treat them as two different searches bringing up different sets of results.
Now, I have to be honest, I'm not sure how well this will work on a brand new blog with no one linking to it yet but I'll keep an eye on the results over the coming weeks and let you know what happens.
At the time of writing (19th June 2007) this blog did not appear anywhere in the top 50 results when searching Google for "corporate website design" or "corporate web site design". Take it away search engine spiders...
29 May 2007
Underhand search engine optimisation tactics
Search Engine Optimisation is all about getting your website to the top of the pile and beating your competitors at any cost, right? Not necessarily. We were recently asked by one of our clients to carry out Search Engine Optimisation (SEO) on their website so that they would be found at the top of the list in key search engines like Google and MSN. This is something we’re good at and we know a lot about so we confidently told our client all about the sort of strategies we would implementing, mainly focussing on ensuring that there was plenty of keyword-rich textual content on the page. Now by keyword-rich, I don’t mean just writing big lists of keywords like: “… search engine optimisation, SEO, search engine optimization, search engine friendly, search promotion …” or whatever, I mean writing informative and useful content for your website visitors and ensuring that it has plenty of relevant keywords in it in a way that does not make the site difficult to read.
We duly warned our client that we would not use any “black hat” tactics (this involves doing anything which goes against the Google webmaster guidelines or appears in any way sneaky), since the penalties for getting caught breaking the rules can be severe. We also pointed out that you really can’t fool Google much these days and if you do somehow trick your way to the top, your success will be very short-lived. It’s only a matter of time before you’re found out.
So we were somewhat puzzled when our client showed us a competitor’s website that was blatantly using black hat methods and yet was doing very well in the search engine results with Google. The site in question was a landscaping company that had stuffed well over a thousand keywords into its page titles, and a similar number in the meta tags (special keyword and description code that some search engines read).
The official line is that page titles should be no more than around 120 characters long and that anything past that tends to be ignored. Well this site weighed in at over 10,000 characters and was filled with pretty much every town name in the UK. If that’s not spamming, I don’t know what is!
So now I had to explain to my client why we shouldn’t be doing the same thing for his website and getting one up on his competitor. There’s a very simple answer to this and that is that they may not have been caught yet, but they will get caught, and when they do, they’ll be removed entirely from Google and maybe the other search engines too, their website designers will have their website removed from Google (they used the same trick on their own website) and the web designers’ other clients might get removed as well.
Given that most people rely on search engine traffic for business on their website, it could easily destroy a company if they were blacklisted on Google, especially since it can take months or even years to get the blacklist removed once you’ve de-spammed your website.
To quote someone else’s explanation of the difference between black hat and white hat SEO, it is like driving to the bank with your black hat on and then robbing the joint and driving off. Sure you got the money but the police are on your tail and sooner or later you’re going to get caught and then you’re out of the picture for a long time. And meanwhile the good guy wearing his white hat wanders down to the ATM, gets some cash out completely legally and walks off whistling a merry tune. And tomorrow he’ll back for more.
25 May 2007
The pen is mightier than the <form>
We've been thinking quite a bit about language recently here at Wordsun, and its role in creating a strong user experience for our site visitors. Like lots of web development companies, we like to think we know what makes a site appealing to our visitors. And like many web development companies we've spent hours tweaking page layouts, designing icons, and throwing a whole host of bells and whistles in there to dazzle our clients. But there's a risk that we're all overlooking some of the more fundamental aspects, and that the key to a decent user interface is not just a few well-styled pixels, shiny logos and gradients, rather it comes down to the language we use.
Words really do matter when it comes to user experience. As designers, we want to engage our visitors – to encourage them to enter into a dialogue, and impart useful information. Flat, uninspiring text can at best expect a flat, uninspired response. As any good interviewer will tell you, the way to get the best response from your subject is not to bombard them with questions, but to create a two-way dialogue. The same theory can be applied to user interface design.
Plain English goes a long way towards creating a healthy glow in your visitors. Is a terse "submit" or "click here" necessarily the best way to encourage interaction? Elsewhere, simple and concise privacy declarations can be much more effective at allaying security fears than hefty legal declarations. Error messages should also be considered, and avoid placing blame on the user – a guaranteed way to annoy and frustrate potential customers…
Think also about the information you really need from your visitors, and which should be mandatory. The most successful registration forms often ask only for the basics, giving visitors the option to expand their details once signed-up, or pace the layout in such a way as not to swamp users with a pageful of text boxes.
If you can create a friendly dialogue with your visitors and fill them with confidence the customer relationship can only be strengthened, leading to repeat visits, improved loyalty and even increased return on investment!
For more on this topic, check out Derek Powazek's excellent article on A List Apart
Words really do matter when it comes to user experience. As designers, we want to engage our visitors – to encourage them to enter into a dialogue, and impart useful information. Flat, uninspiring text can at best expect a flat, uninspired response. As any good interviewer will tell you, the way to get the best response from your subject is not to bombard them with questions, but to create a two-way dialogue. The same theory can be applied to user interface design.
Plain English goes a long way towards creating a healthy glow in your visitors. Is a terse "submit" or "click here" necessarily the best way to encourage interaction? Elsewhere, simple and concise privacy declarations can be much more effective at allaying security fears than hefty legal declarations. Error messages should also be considered, and avoid placing blame on the user – a guaranteed way to annoy and frustrate potential customers…
Think also about the information you really need from your visitors, and which should be mandatory. The most successful registration forms often ask only for the basics, giving visitors the option to expand their details once signed-up, or pace the layout in such a way as not to swamp users with a pageful of text boxes.
If you can create a friendly dialogue with your visitors and fill them with confidence the customer relationship can only be strengthened, leading to repeat visits, improved loyalty and even increased return on investment!
For more on this topic, check out Derek Powazek's excellent article on A List Apart
25 April 2007
Ten top CSS tricks and techniques
Every good web developer should have an arsenal of tried and tested CSS tricks and techniques to call on in those darker hours, when the client is calling for the impossible, when Firefox, IE and Safari are all putting their own unique spin on things, or when you know exactly what you want to do, but you just can’t bring yourself to compromise your new-found passion for web standards.
Following is an (unordered) list of ten of the most useful code snippets I find myself coming back to time and again:
1 - Keeping things in proportion
One of the defining principles of web accessibility is that the designer should not obstruct visitors to the website in any way. If they wish to scale the text to a ridiculous size, we must accommodate that wish. This is where we need proportional dimensions, and key to these is an understanding of the ‘Em’ measurement. Fonts, line-heights, margins and padding can all be specified in Ems. Just be sure to set up some global properties first.
* { font-size:100%; }
body { font:75%/120% Verdana, Arial, sans-serif; }
p { font-size:0.9em;}
2 - JavaScript-free rollovers
Wouldn’t it be nice to have instant roll-over button effects using javascript? Even better, what if the button label remained searchable, accessible text? Create a background graphic double the height of your button, half showing the "up" state, and half showing the "over". Give your link element a fixed width and height, acting as a window on to a portion of the graphic, then use the :hover pseudo-class to change the vertical position of the graphic behind this window.
a {
display:block;
width: 70px;
height: 25px;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
a:hover {
background-position: 0 -25px;
}
3 - Fixing IE with Conditional comments
A common selling point when explaining the benefits of CSS to a client is that sites will look identical across all platforms. Anyone struggling to convince IE6 that this the case will realise that this is a slight fib. Fortunately, IE contains a feature called ‘conditional commenting’. Simply make yourself a new IE6-friendly stylesheet, include it in your page as usual and wrap it in a conditional comment to hide it from everything except the guilty browser.
<! - - [if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6styles.css">
<![endif]-->
4 - Horizontal floating lists
Floating list elements horizontally is a handy way to create quick and easy navigation menus, while leaving the plain HTML as an accessible, logical list. By default, list bullets appear outside the boundaries of the list item. Setting the position to "inside" ensures that there is no unsightly overlap of text and bullets. Adding an additional padding to the right makes sure things are nicely spaced out.
li {
float:left;
list-style-position:inside;
padding-right:10px;
}
5 - Graphical headings, the accessible way
Accessibility conventions demand that section headings be indicated with heading tags. All well and good, but they don’t half look ugly sometimes, especially when you’ve sweated over Photoshop to come up with that gleaming, pristine interface. Fret not though. Set your H1 to a block element, give it a width and height to match the graphic, set the graphic as a background image and use a negative text-indent to hide the text from view.
h1 {
display:block;
width:100px;
height:30px;
background: url(myImage.jpg) no-repeat;
text-indent:-2000px;
}
6 - Vertical alignment, CSS-style
Vertical alignment with tables was a straightforward affair, but in these enlightened times of CSS-based layout, the seemingly simple task of vertically centring text is responsible for more hair-tearing frustration than you might imagine. Luckily a solution is at hand. Just set the line-height of the element containing your text to the same as its vertical dimensions. A container div with a height of 20px would therefore have a matching line-height of 20px.
#container { height: 50px; line-height: 50px; }
7 - Multi-class action
Attributes tend to just have a single class assigned, but this doesn't mean that that's all you're allowed. You can combine as many classes as you wish, meaning a CSS palette containing just a few basic ingredients can lead to a much wider range of styles if combined intelligently. Classes should be separated with a space, not a comma. If any style rules overlap between the classes, a class further down the CSS document will always override those above.
<p class="boxout highlighted">...</p>
8 - Min-width for all
"Liquid" layouts - where page contents expand as the user resizes their browser - are all well and good, but what happens when the user makes their window too small? Many browsers allow setting a minimum width for elements. Unfortunately, IE 6 and earlier is not one of them. What IE does support though is inline expressions in CSS styles, so with a little mathematical sleight of hand we can fool IE into thinking it supports minimum widths after all!
#container { min-width: 600px; width:expression(document.body.clientWidth < 600? "600px":"auto" );
}
9 - Consistent formatting with text-transform
This one is particularly useful when working in larger teams, where maintaining consistent formatting can be an ongoing battle. Text transform instantly renders content contained within as uppercase, lowercase or capitalised, without the need for retyping or JavaScript manipulation. The HTML original remains unaltered.
p { text-transform: uppercase; }
10 - Cropping images with CSS
Under-used, but potentially very powerful, the "clip" command allows users to define a crop area on any element, ideal for thumbnailing images without the need for multiple image sizes. Crop may only be used on absolutely positioned elements though, so this can limit its usefulness. Note also that dimensions are relative to the top and left of the element, so a right hand margin of 5px on a 45px-wide image would be 40px.
img.crop { clip: rect(5px 40px 45px 5px) }
Following is an (unordered) list of ten of the most useful code snippets I find myself coming back to time and again:
1 - Keeping things in proportion
One of the defining principles of web accessibility is that the designer should not obstruct visitors to the website in any way. If they wish to scale the text to a ridiculous size, we must accommodate that wish. This is where we need proportional dimensions, and key to these is an understanding of the ‘Em’ measurement. Fonts, line-heights, margins and padding can all be specified in Ems. Just be sure to set up some global properties first.
* { font-size:100%; }
body { font:75%/120% Verdana, Arial, sans-serif; }
p { font-size:0.9em;}
2 - JavaScript-free rollovers
Wouldn’t it be nice to have instant roll-over button effects using javascript? Even better, what if the button label remained searchable, accessible text? Create a background graphic double the height of your button, half showing the "up" state, and half showing the "over". Give your link element a fixed width and height, acting as a window on to a portion of the graphic, then use the :hover pseudo-class to change the vertical position of the graphic behind this window.
a {
display:block;
width: 70px;
height: 25px;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
a:hover {
background-position: 0 -25px;
}
3 - Fixing IE with Conditional comments
A common selling point when explaining the benefits of CSS to a client is that sites will look identical across all platforms. Anyone struggling to convince IE6 that this the case will realise that this is a slight fib. Fortunately, IE contains a feature called ‘conditional commenting’. Simply make yourself a new IE6-friendly stylesheet, include it in your page as usual and wrap it in a conditional comment to hide it from everything except the guilty browser.
<! - - [if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6styles.css">
<![endif]-->
4 - Horizontal floating lists
Floating list elements horizontally is a handy way to create quick and easy navigation menus, while leaving the plain HTML as an accessible, logical list. By default, list bullets appear outside the boundaries of the list item. Setting the position to "inside" ensures that there is no unsightly overlap of text and bullets. Adding an additional padding to the right makes sure things are nicely spaced out.
li {
float:left;
list-style-position:inside;
padding-right:10px;
}
5 - Graphical headings, the accessible way
Accessibility conventions demand that section headings be indicated with heading tags. All well and good, but they don’t half look ugly sometimes, especially when you’ve sweated over Photoshop to come up with that gleaming, pristine interface. Fret not though. Set your H1 to a block element, give it a width and height to match the graphic, set the graphic as a background image and use a negative text-indent to hide the text from view.
h1 {
display:block;
width:100px;
height:30px;
background: url(myImage.jpg) no-repeat;
text-indent:-2000px;
}
6 - Vertical alignment, CSS-style
Vertical alignment with tables was a straightforward affair, but in these enlightened times of CSS-based layout, the seemingly simple task of vertically centring text is responsible for more hair-tearing frustration than you might imagine. Luckily a solution is at hand. Just set the line-height of the element containing your text to the same as its vertical dimensions. A container div with a height of 20px would therefore have a matching line-height of 20px.
#container { height: 50px; line-height: 50px; }
7 - Multi-class action
Attributes tend to just have a single class assigned, but this doesn't mean that that's all you're allowed. You can combine as many classes as you wish, meaning a CSS palette containing just a few basic ingredients can lead to a much wider range of styles if combined intelligently. Classes should be separated with a space, not a comma. If any style rules overlap between the classes, a class further down the CSS document will always override those above.
<p class="boxout highlighted">...</p>
8 - Min-width for all
"Liquid" layouts - where page contents expand as the user resizes their browser - are all well and good, but what happens when the user makes their window too small? Many browsers allow setting a minimum width for elements. Unfortunately, IE 6 and earlier is not one of them. What IE does support though is inline expressions in CSS styles, so with a little mathematical sleight of hand we can fool IE into thinking it supports minimum widths after all!
#container { min-width: 600px; width:expression(document.body.clientWidth < 600? "600px":"auto" );
}
9 - Consistent formatting with text-transform
This one is particularly useful when working in larger teams, where maintaining consistent formatting can be an ongoing battle. Text transform instantly renders content contained within as uppercase, lowercase or capitalised, without the need for retyping or JavaScript manipulation. The HTML original remains unaltered.
p { text-transform: uppercase; }
10 - Cropping images with CSS
Under-used, but potentially very powerful, the "clip" command allows users to define a crop area on any element, ideal for thumbnailing images without the need for multiple image sizes. Crop may only be used on absolutely positioned elements though, so this can limit its usefulness. Note also that dimensions are relative to the top and left of the element, so a right hand margin of 5px on a 45px-wide image would be 40px.
img.crop { clip: rect(5px 40px 45px 5px) }
Subscribe to:
Posts (Atom)
Add to del.icio.us
