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.
Fill out your twitter feed and rss reader with some of the top creatives and thinkers from the www. 24ways is a yearly web developer advent calender. Each day providing an interesting and inspiring article. I’ve compiled a list of links to each authors blog and twitter. A great starting point for fledgeling web designers and those who want to find inspiration from highly regarded people in their field.
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.
What is doctype?
Doctype basically tells applications like your browser or online code validator what type of markup you’ve coded the page in. The majority of users will either use HTML or XHTML, Transitional or Strict versions. Transitional is used for old markup which has been coded for older browsers. Strict requires the markup to be well coded and standards compliant moving the page towards working with more browsers and screen readers.
Why do we need it?
If a browser is given a doctype it can interpret the markup you’ve used to render the page correctly. If it’s not given a doctype it will try to interpret the markup as best it can and therefor the page may not render correctly. For example: If IE6 isn’t given a doctype it works in ‘quirks’ mode and doesn’t honour CSS auto margins. If you start designing your pages with XHTML strict in mind you are giving yourself a helping hand to code more elegant, robust and standards compliant markup.
Where can I get it?
To add a doctype to your document it’s as simple as copy and paste. Below are the doctypes for XHTML transitional and strict. Paste them above your HTML tag in your document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
To view more types of doctype to add to your document check out the W3C recommended list of doctypes.
For further reading I recommend:
University of Minnesota Web Design References
Transitional vs Strict Markup by Roger Johansson
Fix your site with the right DOCTYPE! by Jeffery Zeldman
If you found this helpful add me to your RSS reader! Thanks.
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.