May 23 2013

Native app vs mobile web: the shortfalls of mobile accessibility

One of the biggest demands by clients that we face is providing websites and applications for mobile devices. It’s no big news that web design is in a state of flux with the introduction of a wave of mobile devices, each with varying screen sizes and functionality, which raise a whole range of questions about web design best practice. Within the mobile app market, there is much debate over which is the better of two contrasting systems to deliver content to mobile devices – native applications, which can be downloaded from app stores and are installable software, and web apps – effectively websites that respond to being viewed on mobile devices.

Mobile development and apps IMAGE

Many argue that native apps offer better user experience; they are typically run much faster and utilise device functionality to perform sophisticated tasks, making them feature rich – plus, they don’t always require an internet connect to work. There are however drawbacks – they consume device resources, such as battery life; and require regular updates to maintain security and update their functionality. Not to mention that the issue that comes with market penetration. For example, Twitter’s mobile app might appear exactly the same on both Android and iPhone – but they will be built from different technologies – Java and xCode respectively. This presents large overheads when it comes to maintaining multi-platform apps for one service.

Mobile web apps

There are far fewer constraints when working with web apps – they require an internet connection yes – they are after all typically a mobile optimised version of a website. However, for our clients, they provide the better solution. They are extremely scalable – using standard compliant technologies such as HTML and CSS, website content can easily be optimised for mobile devices through techniques such as content adaption.

There are also other technologies that lend themselves to enriching user-experience that have begun to challenge the UX of native apps – such as HTML5 and various JavaScript platforms. As a web design and development agency, these technologies have provide us with the means to create engaging and highly interactive content that can on the surface behave to a greater extent as native apps would do.

Mobile accessibility

The benefits don’t end there – one of the biggest advantages web apps has over native apps, is ensuring accessibility standards can be met. Mobile accessibility standards for web apps focuses on standardising the implementation of HTML in an effort to ensure that content are viewable on mobile devices. Back in the day, WCAG 1.0 concerned itself with standardising good, accessible HTML – but post 2008, due to the diversity of technologies that were supported by modern browsers, such as CSS and JavaScript, WAI were prompted to revise their guidelines to create for more holistic standard. The outcome, WCAG 2.0 – which has since remained the gold standard.

It is important to remember that accessibility standards beyond the browser exist outside of web content accessibility standards. These guidelines don’t apply to the mass app markets we see available for the tablet and smartphone operating systems. Additionally, with native app SDK’s being made freely available to developers, regulating accessibility standards for native apps is near non-existent.

Of course we haven’t touched in this post on responsive designs for mobile web design which we are currently doing lots of work on… so more coming on that.

Resources

If you would like to chat about how S8080 could help improve mobile website design and user experience, call 01792 485566 and ask for Chris or Matt, or email, info@s8080.com.

May 22 2013

Information architecture – content audits and inventories – why we bother and some quick tips

This post is about content audits and inventories, tools we use as a key step in the reshaping of the information architecture and content strategy on any web design project. It has to be said they are an essential but often daunting first step of a big old redesign, restructure or migration…IMAGE of information architecture work shop

Why bother with content analysis, content audit’s and content inventories?

When we redesign or restructure websites the aim is to provide users with better information, user experience and to hit key organisation metrics. To do this we need to know what content there is on the current website, then with some user research we can provide recommendations for gaps, where content may need to be reworked and where we think content can be removed to de-clutter.

It has to be said it is not the task any UX professional looks forward to – but as we work through the site and create a content audit or inventory (typically hundreds or thousands of rows in a spread sheet), we get really under the skin of the website and the content – a crucial step in the UX design process.

The content audit – a sample of the website content not a full inventory

We use the content audit when sampling an existing site in order to inform the UX phase.

The content audit gives a really good feel and flavour for the content of the site, it doesn’t guarantee to have every piece of content logged in a spread sheet – that’s what a full content inventory is for. The content Audit does allow us to understand what is in the existing site so we can reorganise it along with user feedback and the organisation’s objectives.

All of the results are logged in a spread sheet along with annotated images – we typically start on the home page and follow the key links on the page – the key sections of the site. Then for sub sections of the website’s IA we do the same – follow the key links, and then we look at high traffic areas of the web site too.

When we are auditing the content we will be looking at qualitative attributes, like readability, relevance to audience, things that are going to require human or editorial input. We also give a description of the content and we categorise the content – allocating it to themes or genres.

The content inventory – a monster spread sheet

We create a content inventory when we are performing a migration and have to account for every item, the output is a huge spread sheet. The content inventory is a detailed page by page log of all the pages in the site, it helps us to keep track of all of the content and map it to a revised IA, and of course helps us to estimate the amount of effort needed for the migration.

The content inventory is more quantitative than the audit and includes: page title, current URL, H1 tag etc. The content inventory will then evolve into a core part of the web editorial calendar and on-going content strategy by manually adding the content owner, person responsible for migrating and updating the page, review period, when it was published, date it was last edited, ROT status and new Location that we are migrating it to.

For inventories we’ll use crawlers alongside a manual inspection and audit of key pages.

What about content analysis on really large sites – 5,000 pages plus?

We are regularly asked to help on big websites with between 5,000 to 20,000 pages, sometimes XXL websites that exceed 50,000 pages in multiple languages. When we work on larger sites we will typically do an inventory including every page on the site using automatic tools and then layer on top a human audit of the top 2 or 3 levels, plus exceptions, and of course we look in detail at high traffic areas of the site.

Ok that stage of the UX phase was painful… but key

Now we really know what is on the website when layered into the user research (user surveys and card sorting) we can really provide solid recommendations to shape the information architecture – and work through the really fun parts of the user experience process!

If you would like to chat about how S8080 could help improve your web design and user experience, call 01792 485566 and ask for me, Matt Howard, or email, info@s8080.com.

May 7 2013

Customer ratings, reviews and social validation – user experience & persuasive techniques on the web…

Customer ratings (those little stars) and reviews are well used by web designers and digital marketing agencies on shopping and community sites – users like them, and they influence us – yes they do. But why?

Customer ratings, reviews, social validation and web design persuasion (source wiggle.co.uk

The key research on web design & persuasion by recommendations

As far back as 2007 De Vries and Pruyn studied the effect of recommendations on users buying digital cameras, and in a nutshell they found that when recommendations were provided for a particular item it sold 20% more than when there was no recommendation.

So why do I listen to strangers opinion online (I wouldn’t down the pub)?

Online ratings and reviews unconsciously trigger our desire for social validation. Social validation is the process where we look to what others are doing, helping us make a decision more quickly, we look to other people to guide us – the important thing to realise is that we do this automatically and unconsciously.

So on web sites like Amazon and App Stores when  we are looking to make a purchase, we quickly evaluate the worth of a product based on reviews by others. If a page doesn’t have those customer stars and ratings on the first page, the page risks losing your attention very quickly.

Hey – I’m completely rational, logical… those stars only help me when I want help – I make the final decision…

For the most part we are all conformists, and the power of those little stars and reviews, and the triggers for social validation, are so strong that very few of us will be able to fight it and buy a product which has lower stars!

I know I like to do some research before buying – all those data sheets, statistics, pictures, graphs and specifications just allow me to tell myself I’m making a wise and conscious choice… but really this is in the main,  post rationalisation of an unconscious trigger on social validation.

Of course the problem now is that most popular products on Amazon and similar sites now seem to have 4.5 or 5 stars, interesting…

If you would like to chat about how S8080 could help improve your web design and user experience, call 01792 485566 and ask for me, Matt Howard, or email info@s8080.com

May 2 2013

Web accessibility, making accessible video – YouTube vs Vimeo

When we are talking about web design, website accessibility and how to make website content accessible with clients I’m often asked by about making video accessible and working with third-party media streaming services such as YouTube or Vimeo.

Image of video player - web accessibility

Embedding these third-party technologies has been a standard means to deliver video content through websites for a long time – they’re free, highly reliable and can be added to webpages with ease.

Moreover, there’s no question that these technologies offer great user experience – they pack large amounts of information into small areas of web page real-estate. Not to mention, 3G and 4G networks are now more than adequate to support streaming direct to mobile devices. They have become a UX necessity and a marketer’s weapon of choice.

However when you also consider that accessible video ensures inclusive design and can really help improve SEO and search engine findability (by adding video title, tags, captions, annotations and transcripts) the reasons to make sure video content is accessible become very clear.

Closed captioning

Despite this, there are still misconceptions surrounding how accessible these technologies are. W3C’s Web Content Accessibility Guidelines 2.0 (WCAG) has always leant towards limiting the use of embedded multimedia content such as Flash and Java – due to their content being out of reach for assistive accessibility technologies.

But that shouldn’t mean avoid them. YouTube for example, has since 2006 focused on developing inclusive technologies that make their video content accessible with the introduction of automated closed captions.

This is an excellent feature which allows video publishers to add text captions to specific points of the video. They present a mechanism for delivering time-based content in an accessible way. They provide subtitles, and caption text can be exported to create video transcripts – plus closed captions are searchable.

Shortfalls of Vimeo, mixed in with the pros

From an accessibility angle, YouTube has all the right ingredients for delivering accessible content and deliver it very well. But with more and more authors opting to use video to enhance their content, the motives from selecting alternatives to YouTube has begun to make online video prone to potential accessibility pitfalls.

Vimeo is a good example – it has a less cluttered and better looking interface than YouTube which makes it a very attractive option. More importantly, it has also resisted the urge to commercialise its service meaning that viewers aren’t presented by an interface littered with adverts. For this reason, its adoption, especially within the educational and public sectors is steadily rising. This does however come with a cautionary note; in its strive to retain what it sees as its bestselling points, features such closed captions are not yet supported by Vimeo exposing limitations in being a viable accessible technology… for now.

If you would like to chat about how S8080 could help improve your web accessibility and user experience, call 01792 485566 and ask for me, Matt Howard, or email info@s8080.com.

Some useful resources:

Apr 30 2013

Web accessibility, using colour contrast tools to help make accessible images

In this post we take a quick look at some simple best practices work to help improve the accessibility of website design.

As a website design company, one of the more challenging elements of good web design that we face is often in providing the means to deliver engaging visual content for that enhances user experience – but equally as important, ensuring our websites adhere to web accessibility guidelines (WAI WCAG 2.0) and best practice.

Web accessibility and good user experience can sometimes be at loggerheads: on one hand, being conscientious of good user experience principles will prioritise design aesthetics and bespoke functionality to create novel and innovative interfaces. On the other hand, accessibility standards, particularly the more stringent web accessibility AAA standards often present many hurdles for web designers – stipulating strict measures for displaying and surfacing content.

Though AAA standards are strict, it shouldn’t mean that meeting them compromises visually striking web design – nor does it mean web design should be text-heavy with minimal colour combinations.

Colour contrast analysis tools to improve web design

From our experience, working with clients who require websites to meet web content accessibility guidelines, particularly those who operate within the public sector, one of the most common web accessibility standards we find to be overlooked regularly is colour contrast. As a web design agency, we focus on custom web design and website development that adheres to the necessary WCAG standards and accessibility best practice.

But that’s only half the story; what happens after website goes live can really affect how well WCAG standards are maintained on a website over the longer term.

Image showing colour contrast – the one on the left has much more contrast than the one on the right!

Content authors who generate their own content using authoring tools can overlook simple WCAG compliant best practices – especially when adding their own decorative styles to text and when working with image content. Though CMS websites and WYSIWYG editors allow authors to add heading tags to text headings, and ‘ATL’ tags to images, there is no in-built functionality to assess how accessible colour contrast ratios work.

There is however a range of free, but effective tools available online that can validate the colour contrast of content. They allow authors to analyse colour contrast to meet the success criterion 1.4.3 guidelines for WCAG 2.0. Ultimately, these tools offer the means to generate accessible, yet highly visual, image rich content.

Here are a few colour contrast tools worth looking at which will help improve web accessibility

Contrast Analyser – a free desktop application that determines the how well colour contrast ratios adhere to Web Content Accessibility Guidelines 2.0. intuitive and simple to use – considered widely as an industry standard.

Colour Contrast Check is a free web-based validator that allows you find which foreground and background colour combinations are accessible – a simple and easy to use solution.

Luminosity Colour Contrast Ratio Analyser is a simple, free, online colour contrast analyser. By adding the foreground and background colours you intend to use to style your text area or images, this free app can determine how accessible the combination is compared to the success criterion 1.4.3 guidelines of WCAG 2.0.

If you would like to chat about how S8080 could help improve your web accessibility and user experience, call 01792 485566 and ask for me, Matt Howard, or email, info@s8080.com.

Apr 24 2013

EpiServer custom web design and development for CITB

Image of EpiServer custom web development for CITB and the Birches microsite

We have just launched two more EpiServer CMS web sites. The EpiServer development was for CITB, following on the successes of the recent launch of www.citb.co.uk. Our team of .NET developers are really enjoying the quick build time, customisation and flexibility of the CMS platform and it’s robust nature.

  • Web design – Creative & look and feel
  • Web template development
  • EpiServer CMS
  • Technical services, hosting & support
  • Web usability & consultancy
  • User centred design, personas and UX design
  • User testing, card sorting & eye tracking
  • Training workshops
  • Website accessibility and accessibility testing
  • Creative strategy & online style guides
  • Creative concepts, designs & online campaigns
  • Email &email newsletter design and broadcast

Live sites:
www.citb.co.uk/jobs/
www.citb.co.uk/thebirches

If you would like to chat about how S8080 could help develop your web site on EpiServer CMS, please 01792 485566 and ask for Chris Cowell, or email info@s8080.com.

Apr 22 2013

Is a web design company a healthy place to work?

S8080 certainly is!

We have just won a national workplace health and well-being award backed by Welsh Government, basically, the Corporate Health Standard for SME’s.

s8080 web design company health award

As we have an ‘ISO’ in place for team welfare (OHSAS 18001), a lot of the requirements were already in place including regular display screen assessments (the whole team have new twin flat screen monitors), health and safety training, workplace ergonomics and a modern and pleasant working environment right on the sea front.

But it’s the other stuff we do that makes the difference to our digital agency…

  • Friday treats, where we provide hyper-healthy snacks alongside the ever popular muffins and pain au chocolat
  • Hand sanitiser on every desk that helps keep colds and bugs at bay
  • A humidifier running during the winter months to keep the air comfortable
  • Our office is on a Sustrans cycle route
  • A few of us started the ‘Couch to 5K’ running programme
  • We’ve entered a sizable team to take part in the BHF Gower Bike Ride this summer
  • Fresh fruit and veg brought in to share by the gardeners in the team (yes, there are quite a few of us!)
  • But we do still have the occasional Domino’s pizza day too 😉

s8080 digital agency bike rideWe are generally a healthy bunch of web designers and developers, with a good mix of sport and fitness interests including cycling, running, mountain biking and surfing. But as all of our team are 30 plus, it pays to keep expanding waistlines and illness at bay – and we have almost non-existent illness absence, so it’s working!

After a period of consultation and guidance, we were assessed by the Workplace Health team at Public Health Wales and awarded the Bronze standard Small Workplace Health Award, with the Silver standard to hopefully follow later this year. We’d like to say a big thank you to Rhian and Val from Public Health Wales for their knowledge, encouragement and enthusiasm.

You can contact them at workplacehealth@wales.nhs.uk or telephone  08456096006.

It’s valuable to S8080 on many obvious levels, but most importantly, the whole team feed in with ideas and opportunities to do fun stuff together rather than just a drink after work.

Picnic on Pen y Fan anyone?

Update 7th May…

s8080_digital_agency_award

Apr 16 2013

Drupal CMS development for Enterprise Zones Wales

Drupal CMS development for Enterprise Zones Wales - Welsh Government

 

 

 

 

 

 

 

 

 

We have made the Enterprise Zones Wales site live, it’s been a great project working with the team in Welsh Government over the past few months. The project was a rapid turnaround Drupal CMS deployment focusing on the key 7 enterprise locations in Wales.

  • Drupal CMS
  • Web usability & consultancy
  • Information architecture
  • Wire frame design and prototyping
  • Web template development
  • Website accessibility and accessibility testing
  • SEO services & online marketing

Live site: enterprisezones.wales.gov.uk

Apr 15 2013

Email design and broadcast for Fishing Wales and a new e-zine too

Email design and broadcast for Fishing Wales and a new e-zine too

 

 

 

 

 

 

 

 

 

 

 

 

We have just hit send to another big email broadcast to over sixty thousand (yes 60,000)  anglers throughout the UK for Fishing Wales and the Environment Agency. The email was a quick visual email to announce the new season announce the new another issue to the ever successful to the e-zine we design and built. The online analytics showed yet again a huge hit. Here’s a link to the latest e-zine: www.wildfishingwales.com/

  • Email & email newsletter design and broadcast
  • Digital marketing &SEO
  • Web analytics, audits and customer insight
  • Digital illustration
  • Strategy
  • Viral
Mar 27 2013

Dezrez – digital and creative strategy

Dezrez – digital and creative strategy

  • Design
  • Digital illustration
  • Digital strategy
  • Branding
Mar 27 2013

Dezrez – digital illustrations

Dezrez – digital illustrations

  • Design
  • Digital illustration
  • Digital strategy
  • Branding
Mar 27 2013

UK Department of Energy and Climate Change Infographic – household bills

UK Department of Energy and Climate Change Infographic – household bills

  • Design
  • Infographic
  • Digital illustration
  • Digital strategy
  • Branding

Live site: www.gov.uk/government

Mar 27 2013

UK Department of Energy and Climate Change Infographic – energy bill 2020

UK Department of Energy and Climate Change Infographic – energy bill 2020

  • Design
  • Infographic
  • Digital illustration
  • Digital strategy
  • Branding
Mar 27 2013

UK Department of Energy and Climate Change Infographics – energy bill policy impact

UK Department of Energy and Climate Change Infographics   - energy bill policy impact

  • Design
  • Infographic
  • Digital illustration
  • Digital strategy
  • Branding
Mar 21 2013

Business Wales – Welsh Government Drupal web development

Business Wales

  • Designs
  • Website design
  • Website build
  • Templates for your CMS
  • Drupal content management system
  • Drupal custom web development
  • Information architecture
  • Analytics
  • User needs & persona development
  • Wire frame development
  • Usability
  • Accessibility

Live site: business.wales.gov.uk

Mar 19 2013

Royal College of Anaesthetists – Drupal web site design

Royal College of Anaesthetists

  • Designs
  • Website design
  • Website build
  • Templates for your CMS
  • Drupal content management system
  • Drupal custom web development
  • Analytics
  • Information architecture
  • Wire frame development
  • Usability
  • Accessibility

Live site: www.rcoa.ac.uk

Mar 17 2013

Welsh Universities Technocamps – Drupal web site design

Technocamps

  • Designs
  • Website design
  • Website build
  • Templates for your CMS
  • Drupal content management system
  • Drupal custom web development
  • Analytics
  • Information architecture
  • Wire frame development
  • Usability
  • Accessibility

Live site: www.technocamps.com

Mar 8 2013

CITB – Web development

CITB

  • Designs
  • Website design
  • Website development
  • Templates for your CMS
  • EpiServer content management system
  • EpiServer custom web development
  • Information architecture
  • Analytics
  • Focus groups, workshops
  • User needs & persona development
  • Wire frame development
  • Usability, usability testing
  • Accessibility

Live site: www.citb.co.uk

Mar 1 2013

Happy St David’s Day

The team at S8080 wish you all a very happy St David’s Day – Wales’ national day. Treat yourself to a bunch of daffodils for your desk and knock up a batch of Welsh Cakes.

The persistent winter rain seems to have stopped for the moment and the mornings and evenings are getting lighter. It looks like spring is finally with us. A wonderful time of year.

Our good friends at Wales.com asked us to help them celebrate St David’s Day by creating a little interactive and iPad friendly fun. Visit their interactive home and learn more about Wales.

s8080 ipad interactive home

Jan 22 2013

Web design for CAMHS

Surrey Camhs website design by S8080

 

Over the past couple of years, we’ve worked on several web design projects for CAMHS organisations (child and adolescent mental health services). CAMHS websites bring there own special set of challenges due to the young audience and the sensitive nature of the subject matter.

Our first was the Surrey CAMHS website, which was seen as groundbreaking and showed what could be done when a user centred design approach was adopted. We then designed and built two websites for Coventry and Warwickshire NHS – the Moodleton site for younger children and a mobile app based web development for young adults.

Just before Christmas, we started work on another CAMHS web development for a third NHS Partnership trust (more information soon), with a series of alignment meetings with the comms team and the practitioners.

These meetings help us shape the personas, information architecture and web site wireframes and are a valuable forum for brainstorming ideas for engaging the young audiences from the actual people who work with them to overcome their problems.

Content management systems

All of the web sites use a content management system (Drupal, Umbraco, WordPress, even SharePoint in Coventry and Warwickshire’s case) to enable the comms teams to update the website without having to ask a web design agency.

Having a CMS website also means the practitioners can offer up to date advice and information to parents, carers and professionals as well as the young people quickly and efficiently.

The use of open source CMS software means that available budget can be used to develop interactive elements and even mobile website design rather than hefty software license fees.

camhs moodleton website design by S8080

Branding

As you can imagine, each NHS Partnership Trust has very strict brand guidelines, but it’s often the case that their brand agency aren’t digital experts, so it falls to us to extend their brand identity to work well online and for the young target audiences.

During our stakeholder meetings and requirements gathering, we often hear “we don’t want it to look like an NHS website – it puts the young people off”. This is where creative design, carefully balanced with adherence to the brand guidelines comes into play. You can see above how the NHS brand is placed, but the focus is on the creative, characters and the sub brand.

Coming to CAMHS

coming to camhs website design by S8080

Being referred to CAMHS is a difficult time for young people, their carers and families, and a little consideration of how they are actually feeling (and this is where the practitioner’s input into the web site design is so valuable) can help them understand why they feel the way they do, how they can be helped and who will help them.

If you would like to chat about how S8080 could help you design your CAMHS website, call 01792 485566 and ask for me, Chris Cowell, or email info@s8080.com.