I have learned – slowly(!) how to be much more careful when using Dreamweaver – mistakenly saving files in the wrong format (eg html instead of xml) and problems of previewing temporary files in a browser.
I also had a problem with not having the xml info as the very first line in my document:
<?xml version="1.0" encoding="iso-8859-1"?>
… and am wondering where this information will go if xml is part of an HTML document (or part of an XHTML document) …?
I have completed the booklet – and was surprised to find that it will only work ‘properly’ in Internet Explorer. The font sizes display accurately in Firefox but not the colours …
I am creating a website for the mature students I teach in an FE college. They arrive at college barely knowing how to hold a mouse or access the internet and progress to level 2/3 IT skills. Ages range from early 20s to 60s, with most around 30-40; mainly female. Generally speaking, they don’t like small fonts and they like everything printed out. The 3 “users” or aspects of use will be: on-screen; teaching via a projector; and print. I have been concentrating tonight on the print media – discovering how to
display: none;
so that only essential details are on the printout (not the navigation bar (menu) or the breadcrumbs, and then moving the content to an appropriate position.
I have created a home page using an external css stylesheet. The masthead, breadcrumbs and menu boxes are inset 30px from the left and the masthead is placed 30px down, as I think this gives the page a clean look. The widths are set at 90% for the same reason. (The menu has been given a border only for this exercise). The menu has a set width, so the left margin for the content has been set accordingly.
Padding has been applied to set text away from the edges of the various backgrounds. The text line height for the masthead is set smaller than for the body (any text wrap on headings should not be too spaced out, in my view).
My website can be found on my wiki.
Site Layout: My website uses tables with and without borders, set at percentage sizes to adjust to screen widths.
Colours: There are 2 choices (i.e. 2 stylesheets) – and this is an area I am still experimenting with.
Fonts: For both stylesheets I have used a sans serif font for paragraph text, and a serif font for headings. I would reverse this for a printed page as serif is easier to read than sans serif (you’re unlikely to find a novel written in a sans serif font). The fonts are quite large (for my target audience).
Navigation: A navigation bar is on the left and breadcrumbs are at the top. (In a ‘real’ site the breadcrumbs would show fewer links than the navigation panel).
Hyperlinks: From page to page (but NOT linking a page to itself); and also from bottom of page to top.
Images: None used
Language: Short sentences and paragraphs.
Ease of use: My target audience would be older people with few IT skills.
This is more like it!! I found the real McCoy: The British Dyslexia Society
The BDA website is speech enabled with both Readspeaker and Browsealoud.
The official website has a very pleasing pale yellow background with black text and olive green underlined links. However, there is no change on “hover” or on “visited” for these links – which seems a missed opportunity …
The background and links can be changed on the bar at the bottom of the website – as can the font size, font face, colour, etc. There are also Dictionary and Thesaurus links in this bar – an excellent idea for checking your understanding when reading a web page! (Unfortunately they open in the same window – which can be confusing as there is no “back” button for returning to the website.
The navigation bar links do show a change for “menuhere” but not for previously visited links.
… a very clear site overall.
I decided to check out the Dyslexia website and I expected to find nothing to complain about! … just take a look: DLYSEIAX!
The use of narrow columns (which look to be different widths) with a very narrow gutter in justified text is, in my view, A MISTAKE! It is necessary to scroll down a fairly long page before moving on to the second column of text.
The blue left-hand column has text ‘bleeding off’ (near the bottom of the page). The yellow blocks are different heights (for no good reason) and not all placed within the blue border. The suggestion “To find out more click” is NOT a hyperlink.
NONE out of 10 for layout!
Moving on to subsequent pages, there is a lack of continuity: no longer in short columns; at least now the text is ragged right – but the blue border makes it difficult to read.
As you wander through the website, you can’t tell which page you’re on. The section on “Education” (how did I get there?) suggests links which don’t exist.
I found another page on “Famous Dyslexics” – with no navigation bar on the left apart from the “PREV” “HOME” “NEXT”. The single column on this page changes width and is again justified.
The Home page is a different display – and the (huge) hyperlink does not work.
I am just about at a loss for anything else to say … there is no .css style sheet: ‘nuff said!
I found the following from web style guide
Always check your page designs on typically sized display screens (800 x 600 pixels) to be sure that all major navigation and content areas fit well within the horizontal area of the screen. Usually that will limit your page layouts to no more than 760 pixels in width. Many users with slow modem connections routinely turn off the image display in their browser. Try turning off graphics in your Web browser and look at your pages — are they still intelligible and navigable? Do you use ALT statements for every graphic? Do you use blank ALT statements (ALT="") to hide irrelevant graphics or spacer graphics from text-only browsers?
It is important to think of all users when designing your website. Using different css style sheets could be aimed at unusually small screen widths. ALT statements are essential, not only for users who choose to turn off the image display but also for blind users using a ‘reader’.
Do not produce Web sites that depend on one browser technology or browser plug-in .
Users can be put off a site that suggests downloading a plug-in.
A website with 3 different external stylesheets can be found on my wiki
I couldn’t get my footer to co-operate!
