May 24 2016

S8080 help Nottingham City Council with new Umbraco website

Nottingham city council Umbraco website homepage
When Nottingham City Council appointed us via G-Cloud, we were delighted to learn that they had chosen Umbraco, the open-source CMS, to develop their new online self-service platform.

As an agency, our public sector clients tend to request either Drupal or Umbraco. The Council had spent time during their discovery phase investigating the suitable platforms for a large, busy local government website and Umbraco matched their requirements exactly.

Channel shift is becoming increasingly important for local government as digital transformation strategies are being realised in order to improve customer access to council services. Umbraco (and Drupal) are both powerful and flexible enough for the most demanding council and open source means they don’t pay a single penny for the software. This frees up budgets for the important stuff: user experience (UX), engaging designing and robust, secure functionality.

Nottingham city council Umbraco website mobile

As well as the obvious cost benefits of digital self-service, modern local authority content management systems allow a mobile first approach. This means users can undertake online transactions like arranging waste collections or making planning applications using their phones or tablets as well as their laptops and computers, making life easier for users and the Council. From the outset, our brief was to create a “great looking”, user-friendly, customer centred experience that could stand up against the very best local government websites in the UK. Here’s how we designed and developed the Council website:

  • We co-designed a clear top-task focused homepage
  • We broke down the content into compartmentalised areas to simplify the information
  • The Council’s brand colours were used consistently for content hierarchy
  • We developed a user-friendly column based dropdown navigation
  • The site was designed to be extremely accessible and fast to use
  • The CMS platform was specifically designed to enable the Council to add their own micro-sites
  • The mobile first templates we developed and tested across multiple devices
  • Our Umbraco technical developers Implemented Nottingham City Council’s preferred search solution provided by Funnelback
  • We created a suite of content blocks in which to build the content pages
  • We made it super easy for the Council’s in-house team to further develop the site by componentising and templating the functionality so it can be updated separately
  • We set up the server architecture and deployed the website which  is hosted on Microsoft Azures’ scalable cloud hosting platform
  • We will be providing ongoing maintenance and support, but typically 3rd level technical Umbraco expertise, so the day to day support on the website will be handled by Nottingham City Councils IT team

To find out how your organisation can use an open-source content management system for customer centred digital transformation, take a look at Umbraco and Drupal – two extremely capable and extensible CMS’s.

 

Nottingham city council Umbraco website screens

 

nottscc-mockup-large-4

 

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 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.

Jan 7 2010

Considering a new browser? Browser Speed Tests: Firefox 3.6, Chrome 4, Opera 10.5, and Extensions

Lifehacker have published detailed speed tests for our fave browsers…

“Firefox 3.6 is out, Chrome’s stable version got a big upgrade, and Opera 10.5 is inching toward release. It’s a great time for us to break out the timer, process manager, and code tracker for some up-to-date browser speed tests.”

You can find the results and the final scores here – hard luck Safari users 😉

If you are also considering upgrading the OS on your PC, they have also tested the latest browsers in Windows 7.

Nov 16 2009

Web Accessibility

“The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.”

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

About a month ago, the W3C launched a redesigned version of their site which is easier on the eyes and easier to navigate. They’ve also taken this opportunity to add new content to the site, and one useful page which we wanted to share was this great overview of web accessibility: what it is, why you should worry about it, and how to make sites accessible. It also contains lots of useful links to more resources.

Link: http://www.w3.org/standards/webdesign/accessibility

Mar 6 2009

Readability Bookmarklet

I’ve previously mentioned Instapaper on this blog – a fantastic service that lets you easily mark web pages to read later. One great Instapaper feature is that it provides a ‘text-only’ view of any page you bookmark, removing any clutter surrounding the body of the article. I often find it difficult to read from a computer screen for long periods of time; any superfluous ‘debris’ is likely to distract me and I also find shorter lines of text much easier to read than long ones – so this feature is very welcome.

The guys at arc90 have taken this idea and produced a simple bookmarklet that sits in your bookmarks bar, with the aim of making almost any web page ‘readable’ with just one click. It doesn’t work with every website, as it has to try and work out where the main content of a page is, and some sites prove a bit too tricky. When it does work, it’s great for pages that I’m finding difficult to read, but don’t want to add to my Instapaper queue.

Readability – Read comfortably anytime, anywhere. from Arc90 on Vimeo.

You can get the bookmarklet here: http://lab.arc90.com/experiments/readability/ (you can also customize it to your needs), and read arc90’s blog entry about it here: http://lab.arc90.com/2009/03/.