1 in 4 people have some sort of vision impairment that makes reading on the web more difficult.[1]
With the default text size on most major browsers set at 16px many people like to make their text larger to make it easier to read and I believe the number is set to go up as monitors get larger. Plus I’m sure that many people don’t realise they can increase the text size of a web page by holding ctrl + or selecting zoom via a menu.
Twitter sidebars are a useful way of providing info about yourself to your users and many people have come up with some inventive designs. The problem which I’ve come across with most designs is that at a resolution of 1024 x 768 the sidebar can get cut in half and the extra information you’re trying to provide gets cut in half too:
Have you considered people using magnification programs when building your hover images or navigation? Here’s a quick look into a common problem with magnifiers and a simple fix to keep your users smiling.
This post came about after a dilemma involving my site design. I’m going to be adding icons on the sidebar which when hovered over change colour and have text appear next to them for example,”feed me”, ‘tweet me’, ’shout me’.
Now for screen readers I don’t see this being a problem as can give the text a large minus left-margin: left-margin: -10000px; which pops into the required place when the icon is hovered over. This mean the text is still is readable in the html unlike using display: none which hides the text from screen readers. So I’m sorted for accessibility right? Well not necessarily.
When reading accessibility articles I feel the limitations of magnification programs are often overlooked. When someone is using a magnifier hover images like the ones I’m implementing can be a pain in the arse.
To demonstrate the image on the left shows an example screen area of someone who is partially sited navigating the website using a magnification program. They can see the icon but only partially see the description. In the next image the user has moved the mouse to view the description which cause the text to disappear.
Luckily by happy accident the Eric Meyer’s CSS method to create hover buttons provides a solution to this problem. For the pop up to work the text has to be enclosed in the same <a href> tag as the object you are hovering over. This means the text becomes a link as well and will stay displayed when the mouse is moved over it:
So if you’re looking to use hover images, drop downs or tool tips have a thought about people using magnication programs and how you your navigation will work for them to.
So I thought I would take you through the development of a website revamp I’m currently working on. Hopefully you can see a sneak peak at the design process and if you feel up for it provide me with feedback.
foxholebank.com started out a a single web page. The design of the new foxholebank.com will turn it into a multi page, informative and attractive site which will be a pleasure for people to navigate. The experience should encourage and allow them to book a holiday with ease.
After the initial ideas and research phase I started on a paper prototype. This is the first time I’ve tried paper prototyping and got stuck in with coloured felt tips and sticky tape! Paper prototyping is a pretty awesome way of laying the foundations to a website and I highly recommend it. Paper prototyping the site has made the web design process much easier and accessible to a web designer.
Another great thing about paper prototyping. I have it by my side and just added to it right now. So simple to change things!
Homepage and Main Layout:
I decided that the main layout will be an elastic layout. I want accessibility to be a prominent theme running through all my sites and with the elastic layout the site should look good in the majority of screen resolutions. The min-width will be 76em (yep I’m going to do it using em’s). There will be a branding section, top navigation and footer. I’ve opted for a top nav as I’ve tried to keep navigation items down to a minimum and hopefully each part of the menu will follow logical steps.
The branding header section will have logo, number to call and testimonials.
The two main sections on the homepage will be a javascript scroller displaying beautiful pictures of the surrounding area and asummary box. For those without javascript the picture section will display three of the most popular pictures.
Below all these and above the footer will be a next button. Users can then ‘flow’ through the site.