articles tagged with: web-development
Guesswork can only get you so far before it becomes a problem. My 'genius' theory of 'If in doubt choose B' served me well in my multiple choice French exam. It proved less useful in my oral exam when I told my teacher I keep a large duck in my kitchen every other day.
Yet it's come to light that many people with disabilities are navigating websites with the help of good guesswork, such as assuming the 'Contact' button will be the last link in the navigation bar.
A website should be intuitive to anybody who chooses to use it. Nobody should have to guess their way around and risk missing much of it's content. Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web.
Alastair Campbell oversees both usability and development aspects at Nomense, a company that believes, just as we at focus do, that everybody has the right to access inclusive design, regardless of ability. He spoke with us about the importance of considering accessibility right from the start of the design process. We want to share a few of those things with you.
The main content is often not the first thing on a web page. Keyboard and screen reader users tend to have to navigate a long list of links, sub-lists, corporate icons and more before ever arriving at the main content. So these users will thank you for enabling them to bypass or 'skip' over repetitive web page content. You can press the tab key on the Nomensa site for an example of a skip link http://www.nomensa.com/
You should be able to achieve everything with keyboard controls alone.
• tab key to progress through links and controls
• shift-tab to reverse
• enter to follow links
• space to select form controls (e.g. tick boxes)
• cntl-f / cmd-f to find a link or text
On many sites, the closer you zoom in, the more of the site's content is lost off-screen. Not with the Microsoft website: https://www.microsoft.com/en-gb/ this responsive site behaves as if you are viewing it on a smaller device each time you zoom, so eventually you are looking at a mobile view with all content still easily accessible.
Make sure the results of user input happens close to where they perform the action. To experience the difficulties that incur if you don't, zoom in on this website https://www.overclockers.co.uk/index.php and add something to the basket. When you do, you're left wondering as nothing appears to change, unless of course you navigate all the way to the top right of the screen and view your basket. Do the same on amazon and an 'Added to Basket' notice immediately appears within view. Yes, that ab-cruncher I'll never use is mine all mine!
Alistair, photographed above, says there are 4 questions to ask yourself:
• Can you use it with a keyboard?
• Can you see it when zoomed?
• Does it provide appropriate information to
• Is it easy to understand?
Yes, it's a lot to take in and on the surface it may seem that this will limit your creativity. If anything, these guidelines will push these limits as you discover visually pleasing designs that improve the online experience for a wider set of users. And that's a fact. Even in French.
Created on Friday October 16 2015 11:42 AM
I watch as person after person pulls furiously on a door handle before giving it a shove, flying through the doorway much to their surprise and quickly patting down their disheveled attire.
(I'm allowed to laugh as it makes me feel better about doing it myself shortly before, only much less gracefully).
The problem here? The door handle was giving the wrong message. What looked like a handle was indeed a hinge.
My point is, the need for accessibility is everywhere and it is as important in web design as it is in architecture.
When designing for web we must consider various factors such as colour contrast and text size but many forget to consider screenreader users (Screen readers are audio interfaces that convert text into synthesised speech so that users can listen to the content). Luckily there are a few simple things that can be done in order to improve usability for screenreader users, and ultimately all web users...
Unlike sighted web users who can scan a web page and pull out at random what they consider to be the important information. Screen reader users tend to listen to a page from start to finish, top to bottom, left to right. So it is best to have the important parts towards the top of the page.
Descriptive page title
The first thing a screen reader user hears is the page title. It is imperative that this gives users a clear idea of what to expect from that page. Obviously this benefits everyone as anyone can use the page title to orientate themselves and confirm they are where they want to be on the website.
One of the most important usability features for screen reader users is on-page headings. The page structure can then be more easily understood. Although text on the page may appear to be a heading for sighted users, screen readers read through the HTML code so it must be labelled as a heading within that. The screen reader will then announce it as such.
Descriptive link text
Screen reader users can call up a list of on-page links and browse a web page that way. They simply activate links of interest to them. Therefore non-descriptive link text like ‘click here’ is meaningless out of context so avoid it like the plague!
Using lists within the HTML code is super useful as screen readers announce the number of items in each list before reading them out. This way screenreader users have a better idea of what to expect when hearing a list of items, for example site navigation.
A bit like the way an answer machine tells you how many messages you have received rather than just reeling them off one after the other. You feel more prepared for what you're about to listen to. The use of lists (using the <li> tag) is a behind-the-scenes change to the code that shouldn't really affect what the website looks like.
The great thing about these screenreader friendly tips is that each and every one of them will improve overall user experience.
We as humans like to know what to expect and are comfortable with what feels familiar. It's always good to bear this in mind when designing for web and there is no reason this should jeopardise your creativity. Maybe give the web equivalent of dodgy door handles a miss though, just a thought!
Created on Wednesday August 26 2015 03:06 PM
After some deliberation, Annette and I decided that two laptops AND an ipad between us definitely wasn’t technology overkill, so we headed off for the BAWA Centre in Filton – the venue for the WECIL conference 2015. The subject of the day was Direct Payments and employing Personal Assistants; an area of Adult Social Care that we both felt we would benefit from learning more about.
We arrived nice and early and set up our stand, right next door to Well Aware and not too far from the tea and coffee. The room filled up and Claire Charras (WECIL's Online Systems Project Developer and friend of Focus) welcomed delegates, following up with an introduction to My Support – a new online PA matching registration service.
Keynote speaker Alex Fox CEO of Shared Lives Plus was up next and spoke about the changes around Direct Payments and the potential effects of these changes; his thoughts on the importance of tackling isolation through Community engagement really struck a chord. SLP appears to take a different approach to Social Care which poses the question - when considering wellbeing, do we need to think less about how much money is needed and more about how much Community is needed? Certainly food for thought!
Throughout the day we had lots visitors to our stand and plenty of interest in ‘what on earth we do’…. perhaps we needed to rethink our banner (!) Once we got over any initial confusion the feedback on our websites was excellent; everyone seemed to engage with the concept of our solutions and had lots of questions for us. We took the opportunity to give demonstrations to on-lookers and hopefully raised awareness of the exciting work going on at Focus.
I think everyone in attendance would agree that the day was an all round success and we came away with an enhanced understanding of the changes heralded by the Care Act 2014. The team at Focus would like to say a big thank you to WECIL and to Claire in particular for inviting us along - we look forward to seeing you all again soon!
Created on Tuesday March 31 2015 02:47 PM
Sure, I was hungry but I wasn't just there for the sandwiches. When I heard Accessible Bristol was hosting an event for anyone interested in the web and accessibility, I saw it as an opportunity to ensure our clients get what they want. Here at Focus we work with a lot of local authorities and for websites such as theirs, accessibility is key.
I was keen to hear from one of the most recognisable and respected people in the web accessibility industry; Steve Faulkner (pictured). An enthusiastic man who has dedicated 15 years to web accessibility. In 2001 he started his career with vision Australia. Today he has kept his accent and is Principal Accessibility Engineer at The Paciello Group as well as being co-editor of the W3C HTML5 specification, and a contributor to other specifications including Accessible Rich Internet Applications (ARIA).
Sitting excitedly in the front row I was pleasantly surprised when the casually dressed, relaxed man sat amongst us took to the stage. This immediately likeable character delivered a highly knowledgeable presentation and although it was very much focused at developers rather than designers such as myself, I still felt included despite being somewhat outnumbered by the 'techies' in the audience.
Steve went through an alphabet themed slideshow; A is for ARIA, B is for Button, C is for Canvas and so on (view slides). Admittedly it was like learning a new language but I always strive to be a better designer, and if learning 'techie talk' and understanding ways I can work more in sync with the development team will help towards that, then count me in.
Once the sandwiches were scoffed and the slideshow slowed to a stop, it was question time. I plucked up the courage to ask a design focused question and felt all eyes on me, then a few more of us admitted to being in the design 'camp' and conversation started to flow. Talk ranged from not knowing where to begin with a blank canvas, to a woman with dyslexia and dyspraxia expressing her frustration when surfing the net.
When it all came to an end, the message that stood out for me as a designer was this;
“Think about accessibility first and foremost, because if you get it right for disabled people, you get it right for everyone.”
If you would like to know more about accessibility, Steve recommended the website http://webaim.org. On there you can find a simple checklist that presents Webaim's recommendations for implementing HTML-related principles and techniques: http://webaim.org/standards/wcag/checklist
You can keep up to date with all Steve has to share by following him over on Twitter @stevefaulkner
Created on Wednesday January 28 2015 12:09 AM
Heard of Rails? Heard of Girls? What about RailsGirls?!
(Ruby on) Rails is, and I quote Wikipedia: "an open source web application framework written in Ruby". In layman's terms, it's what our clever web developers use to make our websites.
Girls are... well, insert your own answer here.............. (try wonderful, clever etc). But for me as a Girl, I didn't know much about Rails, or Ruby - and in fairness, I don't need to - but I was starting to want to.
Over the three years I've been here at Focus, I've seen and heard lot of code-y, tech-y stuff, like 'Gems', 'Frameworks', 'Scaffolds' and the like. I see black screens with white text on that looks like something out of the Matrix, and I am DEAD impressed. So when I heard about the latest Rails Girls event in Bristol, I signed myself up to find out more.
So a couple of Saturdays ago I headed over to At-Bristol (where loads of cool stuff was going on with kids flying drones and all sorts!), and got stuck in to a really informative, interesting and empowering day. The guys running the sessions all had different experiences with Ruby and Rails. We learnt some basic information, terminologies and the like, did some tutorials, had a yummy lunch, and then onto the highlight - building our own web application. With the assistance of several experienced helpers, I managed to set myself up a server and make myself an 'ideas application'. I made CSS styling changes, created new 'ideas' (headlines with text), I even made buttons that facilitated an image upload.
Back at work on the Monday after the event I proudly showed off my work. I think the developers sniggered into their sleeves a bit :-) but everyone was interested in what I'd done and how I'd done it.
Moreover, I now feel better informed; when talking to our developers and also hearing them talk, and seeing what's happening on their screen when I ask for changes to a website. I know what a Gem is, and what it means to create a new scaffold. And it helps talking to clients about their website work, I can better picture what might be involved with what sounds like a simple change...
So huge thanks to @RailsGirlsBriz - I enjoyed the day and learned lots of new stuff. And the fact they run these events for free I think is marvellous. Can I go to the next one?
Created on Wednesday December 10 2014 09:43 AM
There are so many ways a website can be rendered on screen. Not only is there a huge variety of phone shapes and sizes but all of these can have multiple browsers (e.g. Chrome, Firefox, Safari, Opera and Internet Explorer). Then there's the fact that they can display in landscape or portrait mode. Users aren’t using a mouse but are instead using their fingers (some with 'digits' a little less delicate than others!).
It’s difficult for us developers and designers at web design agencies to predict just how our latest website might look online. There are of course websites that are meant to emulate how it will look but they're not always accurate.
This is where Open Device Lab steps in to make life that little bit easier. We headed over to their offices at Aardman to test one of the responsive website designs we're currently working on. We were able to test it on multiple popular devices from the iPad to a Blackberry. In doing this we could avoid the on-line emulators, we didn't have to pester friends with a different phone to ours to "borrow it for a second".
At ODL we could use a pretty handy piece of kit called 'Ghostlab'. Ghostlab synchronises browser testing. It scrolls, clicks, reloads and form inputs across all connected clients. So what you're testing is not the simple page load, but the full user experience. We also had the option to abandon that and fiddle with each device individually which is good for spotting usability issues that could possibly go unnoticed otherwise.
ODL Bristol are sponsored by the digital marketing agency 'Noisy Little Monkey', these guys made us feel super welcome and we were comfortable knowing we had coffee and support at hand (if required). More importantly, we left feeling we had done a thorough job of testing for our client.
So what did this cost us?... absolutely nothing. We're not sure if that's ever due to change but at the moment so long as you book ahead, you're welcome to pay them a visit. A the moment this gem feels like our little secret but you know what we're like at Focus, we promise to keep you guys updated with all things digital and this is definitely worth 'whispering' about.
Created on Monday December 01 2014 04:42 PM
We're looking to increase the technical team at Focus with the addition of an experienced front-end web developer, who will work on projects and campaigns big and small across a range of sectors for the likes of Bristol City Council, The Multiple Sclerosis Society of Ireland, Scottish and Southern Energy and the Department of Health.
As well as technical excellence we're looking for bags of enthusiasm and a genuine passion for digital and for creating usable and innovative web sites and applications. The right person will have real input into the technology we use and the solutions that we create.
Candidates should have a good few years commercial experience in building accessible and responsive web sites, with an impressive portfolio of work. This is a technical position rather than design-based, so skills and experience should include:
- solid HTML5 / CSS3.
- Bootstrap and full knowledge of building responsive web sites using semantic HTML and CSS.
- experience of integration with back-end code – ideally any MVC database backed framework (we use Ruby on Rails).
- full understanding of cross-browser and cross-device testing and fixes.
- excellent communication skills: you’ll be meeting clients and talking them through projects.
Nice to haves:
- SASS and SCSS.
- UX / wireframing experience and the ability to create a clean, functional interface.
- SVN / Git.
- knowledge of W3C-WAI Accessibility guidelines.
Salary will be between £24k and £30k dependent on experience and skills.
Other benefits include great location in modern office facilities, subsidised restaurant, flexible working including work from home, minimum 23 days holiday and Christmas shutdown.
Applications should be sent by email to include your background and lots of information about yourself! Any work you can point to as your own would be appreciated as well.
Strictly no agencies please - we operate a 'name and shame' policy on those agencies that can't take 'no' as an answer :-)
Closing date for applications: 26th Sept 2014.
Created on Tuesday September 09 2014 01:13 PM
The BIG launch! The new-look "Go Places to Play" is here - an online park finder that makes it easy for you and your family to enjoy fun and exciting play opportunities in and around Bristol.
We've recently redesigned goplacestoplay.org.uk for Bristol City Council so that it not only looks better than before but it works better. "Go Places to Play" is now even more intelligent so that you can find parks and play areas far more quickly and efficiently. We understand that you live busy lives and need information at your fingertips - wherever you may be. The site is now responsive so it is easy to use on smartphones, tablets and laptops. This means you can quickly find your nearest park when you're out and about. You can click on map points to get further information about the park or site you are interested in, or you can use the postcode search to bring up sites in your area.
The online calendar means you can search for local events that suit your requirements and interests. You'll be provided with results if you search using a relevant keyword, or you can find something more specific using the handy advanced search which allows you to search by event type, location and distance from your chosen postcode.
There are also some great ideas for play featuring tips and suggestions from our Play friends and partners - a particularly good resource for the school holidays. Plus, our brand new FAQs section answers many of the common questions we get asked.
As before the option is there to register as an event organiser which means you can upload your own events to feature on the events calendar. Once approved you will see them published.
People like to feel as though they are a part of a website and the 'community' that use it. Interaction is key so if you find something you like on Go Places to Play you can "Share with a friend". Regular news updates also ensure that everybody is on top of all that's going on. It's a site that seems to have people talking, if you want to be a part of the excitement please like the Go Places to Play Facebook page here: https://www.facebook.com/goplacestoplaybristol or better still, go and check out the site to see for yourself!
Created on Tuesday August 05 2014 04:16 PM
'Big Wecil' has been the affectionate name throughout the summer for one of our larger and more complex projects - which gets it's first serious airing tomorrow (Wednesday 11th September) at Disability Somerset - the south west's leading independent living exhibition.
We're not going to give too much away at this stage, but it's a hugely exciting and innovative way for adults who require social care to plan their care and manage their personal budgets - all in line with the ongoing requirements from government for more personal choice and decision making.
'Big Wecil' has been designed from scratch to work across all platforms and devices, such as iPads and iPhones, includes lots of features to enhance accessibility, and throughout the project there's been a real focus on system usability. The software looks set to provide a truly collaborative environment for professionals such as GPs, social workers and health visitors.
With the BBC and other news outlets at tomorrow's exhibition, we're looking forward to revealing a little more about the project - meanwhile as we might be on telly, we need to go and check our hair.....
Created on Tuesday September 10 2013 11:36 AM
Retail analysis from Capgemini has revealed that online retail has got off to a fast start in 2013 - with 16% growth on the same period last year. This against a background of traditional retail and the high street continuing to struggle in tough economic times.
The same report is predicting overall growth in online sales of 12%.
So what are the big trends and changes that online shop owners should be keeping an eye on for the coming year, to ensure they take advantage of this growing sector?
1. Mobile / Responsive Design
2012 was the year of responsive web design - and the stats show that retailers need to stay on top of their mobile offering during 2013. The same Capgemini report states sales through mobile devices were up 193% in January 2013 compared to same period 2012. "Mobile commerce is here to stay", it states. "No longer are customers shopping from their sofas at home, but instead spotting products in store and choosing to purchase online instead on the grounds of cost or convenience."
The goal of responsive design is to give shoppers the same user experience independent on what device they are using to access online stores: a desktop, laptop, tablet, smartphone or 55 inch TV screen. A responsive eCommerce store adapts itself to be viewed in an ideal manner on any screen size. Combined with Google's new Enhanced AdWords, targeting users with specific devices with pay-per-click ads has never been easier.
There's so much that goes into mobile commerce (M-Commerce) that it deserves a blog post of it's own - so that'll be coming soon.
2. Product Images and Videos
Customers are faced with massive choice; a store that can show them clear, fast loading images of their desired products stands better chance of conversion than using small, ineffective product photographs that reveal no detail.
Videos are increasingly important in helping customers decide that a product and a shop are for them. This is especially relevant where complex products are being sold, or products where it's difficult for a customer to view it 'in situ'. A demonstration video of a product working can be very useful. Videos also lend themselves for use in social media campaigns and platforms such as YouTube and Twitter - helping drive more genuinely interested traffic to your store.
3. Content, Content, Content
Keep it short - attention spans seem to be getting less and less all the time. Content should be benefit led, highly readable, SEO friendly - yet concise so that it appeals to visitors - tricky stuff!
But an effective content strategy that's followed throughout the entire store can really make the difference in conversion rates. Don't forgot to apply these principles to information pages - such as delivery details and how customers return items.
Collecting personal information has always been a sensitive topic - never more than during the rather strange implementation of new cookie laws in 2012 - but I'm not sure the average user is too worried about giving personal data in return for a more enjoyable and personalised online experience.
2013 will see agencies like Focus continue to see how personalised content can be implemented and presented - using the wealth of information gained from analytics, browsing and order history, user behavior and user preferences. Today, users have 'Amazon like' expectations from eCommerce stores, and advances in technology mean this functionality no longer out of reach for online retailers.
5. Conversion Rate Optimisation
CRO is nothing new - but in 2013 with competition never more intense, it's crucial that store owners don't waste traffic once it's arrived.
Made up of trends already mentioned - such as content strategy, mobile and personalisation - CRO adds the need to stay on top of technical developments and user expectations. For example: isolated checkouts have shown to have beneficial effects on conversion rate. Simple changes can make dramatic differences.
A/B testing and external user testing are more accessible as ever - store owners need to make an ongoing commitment to CRO, too much money is spent on acquiring new customers, only to lose them when they arrive at a store that doesn't work for them.
Created on Monday February 25 2013 11:13 AM
Bristol: 0117 949 8008