We often talk about how to make our websites more usable, whether it’s tweaking the HTML structure of pages to benefit the user’s process or figuring out how best to display a message via CSS. But we never bring this thought process into our jQuery-based (and other JavaScript-based) elements. How can we enhance the user experience and usability of our jQuery events?
Below, we’ll briefly discuss ways to look at the code and the result of our interactive designs and, thus, improve their usability. Most if not all jQuery is fired through events from the user, whether it’s loading new content, posting forms or simply modifying the presentation of an item. Such events are fired through a click from the user.
As web developers and designers we all know too well of the problems we face when it comes to coding and testing for Internet Explorer 6 (IE6). With the release of Internet Explorer 8 over a year ago, there now seems to be 3 mind-sets when it comes IE6 support:
Dropping support altogether, hoping the user will be encouraged to upgrade their out of date browser. This movement has only been re-affirmed by the likes of Youtube and Google dropping their support.
Religiously supporting and catering for IE6 as there is too much of a market share of users to warrant dropping support.
Looking at your website’s user base and logically thinking about whether or not (or if you are lucky enough to have tracking analytics to back it up) your website is likely to have users with IE6.
Personally the last option is my personal preference, and the perfect middle ground between the other two. Designers and developers are made happier knowing that they only have to support IE6 should the website’s user base require it.
If your client’s website is likely to be non-tech savvy parents, the chances of them having IE6 is relatively high. Therefore the requirement for support is there. On the other hand if you are designing a website which is most likely to be viewed by other designers or developers (much like Carsonified), the chances of them having a more up to date browser such as IE8 or Firefox is increasingly high, meaning support for IE6 doesn’t really need to be considered at all.
I know what you are going to say, and yes. Hypocrisy, thy name is Ben. However this is a topic which I have wanted to blog about for quite some time now.
We all have our favourite CSS galleries. Ones which always prove helpful in giving us inspiration for our own designs, or ones which we just follow to keep up with current web design trends. CSS Gallery Submission lists 288 active CSS galleries alone. The question is – do CSS galleries still work for their intended purpose?
No they don’t, and having run CSSbake for roughly 2 years now I have come to realise why this is true for most.
The web has evolved
When galleries were first being developed, the capabilities of CSS were somewhat unknown and held in high-esteem. Nowadays CSS is the norm, but a design is critiqued on the use of new methods and technologies.
Designs must now be usable and accessible to its target audience, JavaScript and Flash is used to create more playful designs and create a richer user experience. CSS is just a small piece of the larger picture. So how do we now decide what gets feature in our CSS galleries if a design is so much more than just the CSS?
Any design is featured
Time and time again I have looked through featured designs and been shocked that they have been featured at all. Designs used to be featured because they pushed the boundaries, they didn’t follow the latest trends and because they were highly visually affective. They were examples of what designers should aim to achieve – to set the standards.
This could be down to the booming popularity in galleries, meaning that rather than serving their purpose of showcasing high quality designs, getting featured is more about the hits that your site could receive.
And to me, that isn’t what its about. Yes, you should strive for your site to be featured by a gallery, but not just because you submitted it and because you want hits. You should want your design to get featured because it is seen to be high quality, setting an example to learning designers.
Online magazines round-up posts
Rather than subscribing to a CSS gallery’s RSS feed, web designers and developers are following online magazines such as Noupe or Smashing Magazine who regularly featured round ups of, what is considered, good designs.
However, this trend of round ups is slowly fading – or we can hope it is. Users who follow these websites are beginning to ask for more content rich and applicable articles and these website organisers are beginning to listen. This can, with time, see the focus moving back towards galleries.
So what can we do? Speaking to owners of CSS Galleries, I would urge them to start being a lot more selective of the designs they choose to feature. Build up a reputation of featuring higher quality designs which users will keep coming back to.
As web designers and developers I would want you to, and I would hope you would want to yourself, push your designs further and get yourself noticed for doing so. I’m sure the likes of Matthew Smith, and Elliot Jay Stocks did not get where they are now by following the trends.
Over the years designers have pushed themselves to create unique and inspiring designs. Companies have yearned to have websites which are innovative and make them stand out against their competitors. Yet charity websites have not progressed along with trends and expectations — they seem to have been designed for launch and then only updated with minor tweaks to suit the content.
It has become a recent trend for charities to look at their online identities and branding; spending money on creating user experiences which suit their user base, and over time getting people involved with their campaigns and messages.
As part of any website build process, the layout design and functionality will require cross browser testing. To what degree of testing is required and which browsers your website needs to support is subjective to the purpose and your target audience, but that is a discussion for another day.
There are many tools currently available which designers and developers have become reliant upon to view their design in multiple browsers quickly and with minimal effort. Web applications such as Adobe BrowserLab, Litmus and BrowserShots all offer services where you can view static images of your website in multiple browsers.
Whilst using these apps are convenient for not having to have multiple browsers installed on your development computer, I am a firm believer that these tools only touch the surface. A screenshot only provides a quick glance at your work and cannot highlight any other problems such as unclickable links, JavaScript errors etc.
In the long run, it always proves invaluable to start up your website in different browsers. You may be surprised at what can be found by just trying to use the website as any other user would.
Below is a screen shot of benmacgowan.co.uk in Internet Explorer 6 (code altered for this example). By just looking at the screen shot, you would assume that the design works fine for the user, but what isn’t shown is that the links in the footer are unclickable for the user, causing increased frustration and a loss of user experience.
