Archive for the ‘Accessibility’ Category
Does exactly what it says on the tin; just the posts that relate to the above...
Roll with it… working with Oasis!
Not that Oasis!
We have created new branding and launched an online presence for Oasis, an ethical, not-for-profit human relations consultancy.
The branding and website are designed to help Oasis to clearly articulate its unique approach and skills, with much of the web content focusing on real-life case studies and testimonials.
Some might say…
Cathy Neligan, Communications Officer of Oasis says:
“Working with Mixd was an absolute pleasure. Their emphasis on getting to know exactly what we wanted meant we maintained an effective working relationship throughout the project and resulted in exactly the solution we needed. They came up with creative solutions for our branding, web and print, and we were able to rely on their expert advice and honest feedback.
“Feedback from clients and users on our new branding and website has been fantastic and we have seen an increase in enquiries and bookings through the website immediately following launch.”
Who and what is Oasis?
Oasis works with organisations to help them develop new and more effective HR and personnel management strategies. It’s clients range from not for profit organisations, charities and educational institutions to major companies such as Northern Foods, Skipton Building Society and Betty & Taylors Group.
The masterplan…
Built to the latest front-end standards in HTML5 and CSS3, the website really lives the Oasis brand and makes user interaction easy, even for such a content rich site. The jQuery animation on the homepage helps get across key brand messages with the site supported in all browsers (including iPhone/iPad) without the need for Flash.
The Executive Developers section allows users to easily search or browse to find the right developer for them, by name or region, and the Resources section allows free downloads of PDF Manuals and the online purchase of books utilising simple PayPal integration. The entire site is incredibly quick to load and navigate, by fully optimising both the front- and back-ends, whilst the search engines are kept happy by the ground-up integration of solid SEO practices that see the site sitting pretty on page one for many key search terms, even without an ongoing SEO campaign.
The website can easily be updated by Oasis through our adaptation and integration of the WordPress content management system which includes bespoke features including Custom Post Types to allow easy input of wide ranging content.
Don’t look back in anger…
Here’s what the Oasis site looked like before our involvement.
View the new Oasis School of Human Relations website.
A massive improvement wouldn’t you say? Definitely… no maybe about it!
One careful owner…
If you’re in the market for a great deal on a used car in the Yorkshire area, you may have come across our recently launched website for Andrews Auto Parcs in Harrogate.
Website scoping
The website is the result of many hours of hard graft, with a great deal of time spent planning, investigating, scoping and ongoing user testing… to set the solid foundations that make for a structured, user focussed project. Early feedback from the client and users, along with analytics stats, is proving that it was time well spent.
Quality web design and development
Our usual standards of highly crafted code and user-centred web design are of course evident, with solid technical making complex processes, such as the finance calculator and vehicle search, easy for the user. This background technical is running using the fast emerging Ruby on Rails language and the integrated content management system allows the guys at Andrews (who will be the first to admit, that they aren’t very technical… hey, we can’t sell cars!) to take full control of their online presence from the comfort of their purpose built showroom.
Additional value added services
In addition, we undertook a photoshoot, developed a content strategy, advised on language and implemented comprehensive search engine optimisation for launch. Our work doesn’t stop there though – we like to take a proactive approach to evaluate and enhance our products – and we are currently investigating a smart-phone App and an ongoing search optimisation and pay per click campaign.
The website before Mixd’s involvement
Well, what do you think?
We’d love to know what you think about the site and if you’re in the market for a car, Andrews is well worth a visit… either online or in person.
Flash. Saviour of the BlackBerry universe?
BlackBerry losing mobile smartphone market share
With the introduction of the iPhone and Android phones, BlackBerry’s share of the worldwide mobile smartphone market started to reduce dramatically… some might say plummet. In fact, it was only a couple of days ago that a San Francisco Chronicle article reported that Research in Motion Ltd (RIM), the Canadian company behind BlackBerry, plans to cut 2,000 jobs; that’s roughly 10% of their workforce. A RIM spokesperson stated that the reductions are part of a plan to:
“focus on areas that offer the highest growth opportunities”
Now then, is one of these areas the lucrative ‘tablet’ market?
Tablet devices
The argument into whether tablet devices serve sufficient purpose to warrant the cost or whether they are just a gimmick; a nice to have; a status symbol; and so on, finds many supporters in both camps… and I’m not going to go into that here!
However, there are a great deal of them on the market from all the usual suspects, including Samsung, HTC, LG, HP, Acer, Dell and of course the BlackBerry PlayBook. However, if you asked the ‘man (or woman) on the street’ to name one, the most popular answer would undoubtedly be the iPad.
So, if RIM sees this market as one of the “areas that offer the highest growth opportunities”, they will have to impact on the iPad’s impressive current market share of circa 75%. (Incidentally, Android devices are fighting hard too and have already reduced Apple’s share that once stood at 96%!) But how to do this? Obvious… find a weakness and put the boot in!
Flash… arghhhhhhhhhhhhh!
Another argument that has been well documented and rumbles on and on is Apple v Adobe; CEO v CEO; Steve Jobs v Shantanu Narayen. (In my opinion, just let Harry Hill sort it out… FIGHT!) Jobs’ reasoning rotates around a number of factors that many tech experts say don’t stand up to scrutiny.
In terms of a web developer though, as Apple products don’t support Flash, you have to consider this in terms of accessibility and find alternative technologies such as HTML 5 and jQuery (why alienate certain users at all?)… again, another topic too comprehensive to delve into here.
However, going back to the ‘man (or woman) on the street’…
- Do they really want to know about all of this?
- Do they really care?
I’d say not. The majority of the buying public just want things to work; take the famous Honda ad campaigns as an example. So, on the subject of adverts and back to putting the boot in, BlackBerry saw this opportunity and released this promotional video for their tablet, the PlayBook:
This throws up a number of questions…
- Will the BlackBerry PlayBook eat into the Apple iPad market share?
- Is this a shot in the arm for Flash?
- Will Apple contemplate supporting Flash in the soon to be released iOS 5 or in subsequent releases? Will this even bother them?
- Is Flash a good thing for the web?
- Who would win in a fight between Steve Jobs and Shantanu Narayen?
- As a developer, what do you think about Flash?
- As a ‘man (or woman) on the street’ do you care about this?
- If a turtle doesn’t have a shell, is it homeless or naked?
- Are tablets worth the price tag or just a gimmick?
- As a client commissioning a website, is it important to you that it works across all platforms?
So many questions, so little time… but we’d love to know what you people out there think. Whether you’re a digital professional, a commissioning client or a ‘man (or woman) on the street’, please let us know your thoughts.
Website for Obesity Surgeons Group launched
Harrogate web design company Mixd is proud to have recently launched the new website for the Obesity Surgeons Group based in Leeds.
The Obesity Surgeons Group (OSG) is a surgeon-led organisation that offers leading surgery solutions to patients revolving around four core principles:
- Highly skilled professionals with vast experience in weight loss surgery;
- State of the art, purpose built facilities;
- Provision of top quality after-care; and
- Sensible pricing structures that offer best value and finance options.
Mixd was approached by long standing online marketing partner 29Red to co-create a new website that would match up to the quality of the OSG service.
Accessible and usable website design
We were chosen primarily because of our experience in website accessibility and usability and our attention to detail. Throughout the project, a ’2 heads are better than 1′ approach was adopted with key decisions being made by everyone involved and the end result reflects this. Specifically, our work included:
- Full planning, investigation and scoping;
- Creative;
- Client content management system;
- Technical development;
- Online BMI calculator (what’s your BMI?!);
- Illustration and video animation; and
- Accessibility and usability consultancy.
We’d love to know what you think of the Obesity Surgeons Group website, so do let us know… …and why not check out you BMI online whilst you’re there!
Stop press… soon to be seen on TV!
Professor Mike McMahon, lead surgeon at OSG and a pioneer in keyhole gastric surgery, will be appearing on Channel 4′s Embarrassing Fat Bodies in May; a spin-off from the ever popular series Embarrassing Bodies. ‘The Prof’, as he is affectionately known, was selected because of his skill level and will feature as the weight loss expert who consults and operates on one of the programme’s patients with a particularly tricky and complicated case.
MAFTA ‘Best Website’ award
GET IN! I’m shouting. I’m on a roof top. One of our sites has won the ABTOF MAFTA for Best Website!
What’s an ABTOF MAFTA? You may be wondering…
Well, ABTOF is a travel industry association and stands for the ‘Association of British Travel Organisers to France’. MAFTA, not to be confused with BAFTA, is the acronym for the ‘Marketing Awards for French Tourism’. Not sure where the last ‘A’ comes from! So there you have it, an ABTOF MAFTA is an Association of British Travel Organisers to France Marketing Award for French Tourism. You see why it’s called an ABTOF MAFTA now.
Mixd site scoops award
At the annual Association of British Travel Organisers to France (ABTOF) conference in Saint-Malo (the port in Brittany with the huge walls) held on 1st – 3rd April 2011, the Ski & Summer Morzine site (designed and developed by Harrogate web design company Mixd) collected the MAFTA award for Best Website against stiff competition. In making the award presentation, David Ball of Social Fuel (main event sponsor) cited the cleanness of the site, ease of navigation, relevant content and the quality of the photographs.
Hurrah!
It’s safe to say we are well chuffed that over 12 months of work has been recognised by a travel industry award. The Mixd team was involved right from the get-go; working from a blank canvas to arrive at a fantastic, user friendly site. Our work included:
- Existing site audit
- Full investigation, scoping and planning
- Brand evolution
- Content consultancy
- Creative concepts, development and implementation
- Agile technical development
- Full content management system
- Development of a bespoke and fully integrated back-end booking and customer relationship management system
- Usability testing throughout
- Accessibility consultancy
- Search Engine Optimisation (SEO) technical work and recommendations
- Social media recommendations and training
What do you think?
We’d love to know what you think about the Ski and Summer Morzine website, or indeed the ABTOF MAFTAs. Do let us know.
New Adventures in Web Design Conference (#naconf)
Last week Phil and I attended the New Adventures In Web Design Conference (#naconf) at the Albert Hall in Nottingham. A new conference for 2011 it was billed as being “carefully curated; chock-full of integrity, opinion, and fresh content, with an emphasis on shaking things up and challenging convention” by curator and organiser Simon Collison, otherwise known as Colly.
Aside from the spiel, we had our own reasons for going; to keep up to date with the industry, gather new concepts and ideas and reassure ourselves that we are heading in the right direction. As well as to have a bit of a jolly. Come 6am on the morning of the conference though, we began to question our reasoning. My thoughts were: “to be up this early is a New Adventure in itself”.
On arrival
After parking and walking around the corner, we (I qoute Phil) “found a long queue of geeks” and we knew we were in the right place! There were easily 100 people waiting to get in, it reminded us of the Next sale… especially all the checked shirts!
Once inside, you could see that all Colly’s hard work had really paid off. The production was brilliant and everyone seemed friendly and enthusiastic. The Albert Hall is a stunning conference venue and even the small details such as the names badges and contents of goody bag were great. Colly and the team had put together a New Adventures Newspaper with some exclusive articles; a great read in itself. If you couldn’t make the conference I’d recommend picking one up online! It was nice to see exhibitors there too including the launch of a promising new CMS “for designers” called Sushiworks
Some things were also immediately apparent; the amount of iPhone users in our industry is staggering. As are the amount of creatives going for the American country ‘checked-shirt and jeans’ look!
I was quite pleased too with the lack of WiFi (although found it hard to resist contributing to the insane amount of #naconf tweets on my phone!) and as the day went on I didn’t see one code example on a slide from any of the speakers which I think is great. You can learn most of that stuff online and there is little point going through code in a presentation in my opinion. For me, conferences such as this are more about inspiration and process ideas rather than anything else.
The presentations
So everything was looking good so far. But what about the speakers? The line-up of speakers was a sort of ‘who’s-who’ of popular industry figures. I had heard they’d been asked to consider talking about new topics to start off their conference agenda for 2011 so I was pretty excited to hear what they’d come out with.
I won’t begin to detail every presentation that went on throughout the day (you can find numerous other reviews online) but I’m happy to say that everyone who spoke delivered many things to take away and think about. As mentioned, the conference for me was all about being inspired and all of the speakers articulated their ideas and opinions very well. The 35-minute per talk format also worked for me (I have a short attention span!) although the Q&A sessions were a bit disjointed and predictable.
There were a few key themes I took away from the conference that kept being hammered home throughout the day, and were summed up best by my favourite talks from Dan Rubin, Mark Boulton and Greg Wood.
I say favourite, besides of course Brendan Dawes. It was left up to him to steal the show during the last talk of the day. The guy truly is an inspiration to anyone in the design industry.
Content-out approach
One thing that kept cropping up in a big way was something that I’ve thought about ever since I heard this quote from Jeffery Zeldman a while back:
“Content informs design; design without content is decoration”Jeffrey Zeldman
Mark Boulton, the first speaker of the day talked about a “new canon” – with one of his new ideas being that we should now design content-out and not canvas-in. That is, to consider what we are publishing and design around that rather than fitting content into a space we already have. He argued that the space we have now has no fixed edges.
Greg Wood took the content-our approach even further and gave a talk on art-direction and content. That is, taking inspiration from print media and styling content in a more magazine-style format online. He provided a couple of interesting case studies which proved that users remembered details or facts from styled content a lot better than a plainer version. Greg urged clients to think about art-direction for their content and reflecting this in their budget, rather than just opting for copying word documents into a CMS and using very little styling. His main point was that with so much content on the web, you need to make a real impact to have a chance of being successful.
Greg eluded to the fact we should work with clients from day-one to decide and prioritise what content it is they wish to put online, and what the key aims for the website are. Or even question why there is need for the website in the first place? He also said in the Q&A that the agency he works for wouldn’t start any design work on a project without at least some real content having been provided from the client. Content is king. Again.
Responsive design
Another key theme of the day was how the web has now moved on from being constrained by the ‘page’ or a set size, due to the amount of devices used to browse the web (and we thought getting things to work in IE6 was bad enough)! Some have claimed that the mobile market in 2010 grew faster than the internet itself.
A modern approach called responsive design means that a website can change to suit the device we are browsing on and the capabilities of that browser. This may include things such as layout, sizing of elements, what exactly is displayed or how the website looks visually. A key aspect of this is to have flexible designs and content that re-flows or resizes to best fill the browser space in relation to what the user is trying to achieve.
Mark Boulton put it best in his talk:
“Making a site responsive and being sympathetic to your users gives them more time to focus on their primary goal”Mark Boulton
Whether that goal is finding a phone number or buying a product, it is clear to see how responsive design can make a positive impact on a website.
Language of design
Dan Rubin presented an interesting talk about the language used in the web design industry, informing us that the web has borrowed a lot of terminology from other communications industries such as print.
Examples such as “page” and “page-fold” were discussed, things which have stuck with us since the early days of the web. Contention over the term “web page” again goes back to the idea of there being no physical page online, as that implies fixed boundaries. There is also no fixed “page-fold”; thankfully a term that seems to be dying out in relation to web design!
His argument was that using terms such as these is not appropriate. The web is a scrollable medium and users are so used to it, and the fold could be any number of different sizes on the numerous devices these days.
What do you think? Do you think “web page” will ever be replaced by a more appropriate term? Do we need one? Who will decide?
One thing I took away was that it is important to think about the terms used when describing things in a web environment, especially to clients. He encouraged the audience to be careful with the metaphors we use and consider alternatives to describe things in their true context, leaving the web to stand on its own two feet with appropriate language. This way we won’t confuse anyone or set unrealistic expectations.
Creative website typography
The area we are talking about here is website typography – any type elements on a website, including the body text
For a long time, everyone has talked of ‘web safe’ fonts and a large part of website design and copy styling was often limited to the basic font libraries on a Mac or PC (Arial, Times New Roman etc.) to ensure that the correct fonts displayed correctly on all browsers.
There is however a browser function called @font-face which has allowed for font embedding in many browsers for years, but the use of fonts in this manner was deemed to violate the terms of font licenses as anyone could download the font file and re-use it. Because you either had to knowingly go against the font’s license agreement, or find a font with an open license (which are very limited, especially in quality) – this method was never very widely used across the web.
For many years the simplest (and legal) method of getting a ‘custom’ font to appear was by using image replacement – text on the page that is actually represented as a graphical element – to ensure the text appeared the same in all browsers. Although there are certain techniques that can make this image replacement technique SEO-friendly and accessible, there are still several negatives, including:
- the technique does not allow the user to resize the text in question;
- the text cannot he highlighted; and
- using more images and http requests slows down load times.
Not withstanding the accessibility issues, page zooming and text resizing is now especially important because of the many different devices used for web browsing – including the iPhone and iPad – where you zoom in and out and change orientation. The industry in general is moving towards a much more ‘fluid’ concept for designing websites and is therefore re-examining how text is embedded.
Today, there are several different font embedding techniques available which allow you to use a wider range of fonts effectively, without the need to display type content as a graphical element. One of the most common and widely used methods is to pull fonts in from an external library using the @font-face method (plus Javascript in some cases.) A large number of font library services have therefore evolved, including:
- Google Font;
- Typekit;
- Fontdeck;
- Typotheque; and
- Kernest.
Such font libraries work closely with font foundries to host fonts where permission has been granted for their use. The legal issues previously experienced are overcome because the fonts cannot be accessed directly which prevents the fonts from being pirated. Using font embedding in this way also allows functions like hover effects and the selection of text possible within the browser, both of which are major plus points.
Each of the libraries has its pros and cons, including pricing and the variety of fonts available; however, there will more than likely be a solution right for your requirements. A summary of the main services can be found via the @font-face face-off.
The majority of modern browsers support the embedding method, meaning that appearance of the font across these browsers is more or less spot on. We have started to notice though that the Webkit browsers (Google Chrome and Safari) – often touted as the most forward-thinking – do a better job with regards the legibility and quality of some fonts used in this way.
All of this means we can now start thinking outside the box in terms of all text items on a website – things can get a lot more creative!
These new techniques have seen a lot of modern, sophisticated and trendy websites being able to make use of good, big, bold typography (even for body text), along with a clean layout. It’s thanks to font embedding that typography has been allowed to have a bigger place on the web… becoming a ‘style’ or ‘movement’ if you will.
Maybe in years to come, the history books will talk of the ‘Font Embedding’ movement, alongside Art Deco and Baroque?!
External website links. New window or not?
Right. A big bug bear of mine!
It has been a growing and annoying trend that links to external sites from one website to another open in a new browser window and it has been something that we advise our clients against… time and time again. Some common misconceptions are listed below with several facts, based on actual user testing, to expose them as false.
“I’ll keep users if external links open in a new window…”
Many organisations still believe that opening a new browser window for external links will help keep users on their site. The hard facts show that it doesn’t! If a user is even the slightest bit interested in what you have to offer they will take note – if they’re not, then you need to work harder at improving content and your online offering in order to achieve your desired conversion. The strategy of opening links in a new window will not increase your site conversions and it certainly won’t help you sell more!
“It makes it easier for users to return to my site…”
The concept of opening links in a new window is also self-defeating since it disables the browser’s ‘back’ button which is the normal way users return to previous sites! So, basing the argument on the thought that it will be easier for users to return to your site is very wrong. In recent user tests carried out by Mixd, we found that many users often don’t even notice that a new window has opened, especially if they are using a small monitor where the windows are maximised to fill up the screen. So a user who tries to return to the originating site will be confused by the back button not functioning. The end result is that they are likely to get frustrated, panic click and ultimately go elsewhere.
“I need to control my users…”
Many organisations work on the presumptuous rationale that the user cannot or will not decide on their own where they want to surf to, whether they want to return to the original site, or whether they want to pull up additional web browser windows to surf more than one site simultaneously. With the advent of ‘tabs’ in many of today’s browsers, the choice to open in a new browser window is even more outdated. Let the users do this if they want (they can easily right click ‘open in new tab’). You should not force it on them.
The facts
There are several key reasons why we believe you should not force new windows:
- Unless you warn them, web users are likely to expect the new page to load in the current window. Unexpected surprises are not good online and only confuse users. Confuse users and they are gone.
- It breaks the back button functionality. This is the second most used navigation function (source: useit.com), so breaking it is a big no!
- Users don’t want it! Opening a new browser window can be disorientating and confusing. If they wanted to open the link in a new window they would do so themselves!
- Using new browser windows can make an already cluttered taskbar, even busier and difficult to use. We’ve all spent ages hunting through the taskbar, looking for the window we want. Don’t make this even harder by increasing the number of windows to look through.
- Many users have security protection to stop ‘pop-up’ windows. And on some mobile devices new windows do not work at all. In essence, it could prevent the link from working all together for these users!
- The W3C (World Wide Web Consortium) has guidelines against opening links in new windows. Checkpoint 10.1 reads: Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
Testing, testing 1, 2, 3
As part of our ongoing testing, we asked a number of test users if they were likely to return to a conversion page (let’s say an eCommerce website such as Amazon) if the page linked them off to another site – they all answered yes. Interestingly, most users said they would return to their initial search; i.e. from Google or in this case the Amazon home page. It proves the point: if your user is interested in what you have to offer they will come back! If they aren’t, they won’t!
With every rule there is an exception
If it is an absolute must (which we understand can happen sometimes) then you need to consider how the link is displayed. Again the W3C has guidelines on how best to deal with this situation by including a line of supporting text to inform the user that clicking the link will open a new browser window. View the W3C checkpoint 10.1 example.
What’s the solution?
There’s an adage that says ‘to assume makes an ass of u and me’. We should have a flashing image on the homepage; Doris (the MD’s wife) thinks the enquiry button should be puce; Trevor from accounts thinks the postage charges should be hidden. All guess work.
The only real way to establish what your site users want is to undertake relevant, user-focused testing. Here at Mixd, we don’t create sites for our portfolio; we don’t create sites for our clients. We create sites for our clients’ users. User testing comes in all shapes and sizes; what to do and how to do it can be tailored to meet all budgets. However, the quickest way to a site that will fail is to think you know it all already. You don’t. Online, the user is in control. Delight them and they are yours. Confuse or annoy them and they are gone… straight into the hands of your competitors.
Opening external links in a new browser window
For the majority of websites that we work on, clients tend to request that external links open in a new browser window so visitors are not lost to other sites.
On first inspection, this may appear to be a reasonable request and that the client’s wishes may hold water. However, and this may sound controversial, we don’t develop sites for the client, we develop sites for the client’s users; after all, it’s the users that have to use the site (the term ‘users’ is a bit of a giveaway really). For the majority of target audiences, basic principles of usability that have stood the test of time within our ever changing and fast moving digital industry can be applied. So, here’s why when the client says “I want all external links to open in a new browser window”, the discussion begins!
At Mixd we build to the highest accessibility and usability standards, and follow 2 main sets of guidelines:
- W3C (World Wide Web Consortium) XHTML strict validation
- WCAG2.0 (World Content Accessibility Guidelines) level AA and in part AAA
We advise against forcing any on-site links to open in a new window, as to do so would invalidate both of the above. From a usability point of view, forcing this upon the user is considered bad practice and all modern browsers give the user the option to open in a new tab or browser window if they wish to do so.
A huge percentage of web users navigate using the browser’s back button. New window links mean that the back button stops working; often leaving the user confused or even worse, annoyed. Instead of keeping users from leaving your site, it may have the opposite effect by preventing them from returning when they actually want to. With certain pop-up blockers enabled, external links may not open properly either. Furthermore, new windows may also open in the background and not be seen at all by the user.
Instead of opening in a new window, we suggest adding ‘(external link)’ or a symbol after external links to indicate to the user the links which will make them leave your site.
Jakob Neilsen (largely considered the world’s foremost web usability expert) mentioned this in points 1 and 2, back in 1999 and this is as true now as it was back then; http://www.useit.com/alertbox/990530.html