http://www.Louisbrailleschool.org, Site Review Please Options

[AbleReach]

I'm extremely pleased to introduce you to my mom's nonprofit, The Louis Braille School, a new day school for visually impaired kids. The school opened this Fall, after 15+ years of working, learning, dreaming and planning.

I've volunteered to adopt the current site and help them expand. After we get some restructuring in place, I'll have access to literally years of useful and targeted content covering topics like how braille is written, or how to use tactile labels to customize a deck of UNO cards. I'm excited about what I am sure will be a rewarding and challenging project.

The site's purpose:
Provide a resource for the school's families
Showcase the school for potential students
Promote the school's agenda, including interest in accessible curriculum, braille literacy, braille and Louis Braille
Make information available to potential benefactors and the media

The site should be welcoming to the school's families, supporters and a diverse wider community, while providing smooth accessibility for adaptive technologies that may be used by people who are visually impaired. Adaptive technologies may include software such as screen readers and screen magnifiers.

Ideas, feedback, more?

Here's a little laughter, for your inspiration - :-)

[Respree]

I like the simplicity of the site, Liz.

The width made for very comfortable reading. You kindly didn't hijack any browser controls, when I tested to see if I could make the fonts larger (something, I would imagine a large portion of your visitors might try to do).

My comments have more to do with content, rather than the design (which I thougth was fine).

On the Home Page, I thought it might help if you expand the discussion about the school, perhaps going a little deeper in explaining the curriculum and explaining how you differ from other similar schools (i.e. your USP).

On the Louise Braille page, I was surprised there was no mention of that bumpy writing he invented (I guess it's called "Braille").

The contact us page could benefit from posting your office hours, which I assume nobody is there 24 hours a day.

On your top navigation, I though the 'Home' link was a little out of place. I instinctly wanted to look left, but it was on the right. Maybe just a personal pre-judgement or preference.

I also noticed that the site has almost no links, either externally or internally. You may want to provide other resources (external links) to help the visitor understand the organization and potential special needs a little better.

I'd rethink the mailto: link, wherever you mention contact us. No doubt, that the spam harvest bots will come to pay you a visit shortly.

On the images (Louis Braille), you might want change it so that you can also click on the thumbnail images (to view larger images). When you get to the larger images, I think it's a nice touch to put "next," rather than force the user back to the main index of thumbnails. That way, they're not going 'in' and 'out', so to speak.

Hope these comments help.

This post has been edited by Respree: Dec 10 2006, 10:05 AM

[AbleReach]

Thank you, Garrick!

The original designer offered this design as a way to get started. Once more content was added, navigation problems developed.
I'm going to add a vertical nav to supplement the horizontal, to make it easier to get around in pages that are more than one click off of the home page.

The "Braille" page will need some rethinking. Eventually, we may want it to serve as the entry to braille literacy, learning braille, braille displays on computer keyboards or braille notetakers, braille in everyday life, and biographies of people like Helen Keller, in addition to the Louis Braille biography. They may get a lot of search engine traffic in January for Braille Literacy Month. A revamped section geared towards kids looking for resources for school reports would be handy to have online by the end of December, in time to garner some nice .edu links.

The same navigation issues apply to the newsletter section.

When I start the navigation restructure I'm going to use Joe Dolson's skiplinks tutorial as a jump start for a fresh template.

While I'm at it, certain other features will be included -- such as (LOL!) putting office hours on the contact page. Good catch. They will get a kick out of that!

BTW, schools like this are very unusual. In this case, the USP may take the form of building an authoritative position, with good, linkable resources. Regardless of the USP-ish ness, I think readers will appreciate a USP-like approach.

[travis]

Liz,

Who designed that ? It does not have your name on it.

[joedolson]

Hey, Elizabeth! Glad you're going to use my tutorial .

One thing I noticed pretty quickly for this site was how difficult it is to navigate using keyboard-only means. Although the navigation is simple, straighforward, and right up front, it's still a bit of a problem because of the lack of a :focus state. While tabbing through the links, it's very difficult to see which link is currently in focus!

Although most browsers do provide a default focus, it's very subtle: a gray dotted border. Not really sufficient to stand out for anybody with vision difficulties, for example.

I definitely suggest adding a strong :focus state -

CODE

a:focus, a.button:focus, a.webstyr:focus, a:active, a.button:active, a.webstyr:active {
background: #222; color: #eee;
}    

That's very basic - it'll just make the background dark gray and the text off-white, so it may not be the ideal choice for your design, but it WILL at least make the focus highly visible!

[AbleReach]

Here's a draft template: http://www.louisbrailleschool.org/test/
I haven't looked at it in IE or Opera yet.

Basically, I put it into CSS, increased contrast between text and ground, and added a vertical nav area at one side. Updating will be soooo much easier with clean code and the nav in includes. This is my first attempt at CSS for structure, and, so far, with considerable help from The CSS Anthology, it hasn't been too bad. Granted, I haven't dealt with differences in how padding & margin will be applied in other browsers... but it's a start!

I'll deal with replacing "that bumpy writing" (LOL Garrick) later.
Hours of operation are now on the contact page.
mailto link is no longer live - for a few days there will just be text that says "director @ louisbrailleschool.org"

Travis - The design was put together by another designer, and content has been added by several people. It's been through two WYSIWYGs, a home-made CMS, and a little text editing.

Joe - My previous accessibility experience has been with screen readers, not so much with visual interfaces. Learning to use :focus well is definitely on the list. It seems logical that a:focus states should be the same as a:hover. Is this correct?

Thanks, all!

[travis]

Joe,

That TAB keyboard stuff is interesting.

I tabbed through my website, and it controlled the Flash animations which was cool.

How many people use this form of navigation ?

And how do I focus the first TAB on the second menu item ?

[TheManBehindTheCurtain]

Hi Liz ...

Sites such as this really do perfectly capture the true meaning of "a labor of love." Good luck with this!

A few design suggestions ....

I'd suggest that the "Louis Braille School" type in the header be complemented with some sort of additional tagline (perhaps the one from the <title> tag) to reinforce the school's mission.

For the header itself, the school's architecture, the snow-capped mountains in the background, and the picture (which looks like a bust) all suggest a European feel to me, perhaps Switzerland. Perhaps a mention of the locale would help as well in the tagline. While I think providing a resource for information on Louis Braille is an excellent service, the school's strongest mission is in serving its local community.

To that end, I think from a content perspective I would find a way to humanize the pages more with more pictures of the children in classrooms and social settings. My wife works at a school for severely learning-disadvantaged children, and one of their biggest challenges is breaking down misconceptions about these children and getting the local community more used to welcoming them in local businesses. Most people are so uncomfortable around these children, and I think showing pictures of them doing the normal things that kids do could begin to send the message that they should not be hidden and should be treated as much as possible like other children. (Sorry, off the soapbox now.) Also, showing the children in a supportive environment would seem to me to be the best way to encourage parents to contact the school.

To return back to the header ... I've been staring at the middle portion of the collage and I think that might be a keyboard, but it also reminds me of a bank of turbines at the foot of a dam. In other words, just too obscure, and it is smack-dab in the middle where my eye begins to obsess about it. I'm even more wanting to see some children in there instead.

In your test menu, is the contrast between the pinkish secondary (indented) menu items strong enough for your audience? Likewise, the reddish headings against the white background. Is the delicate serif type and the color strong enough? Is the main body type a dark gray instead of black? I think I'd go for strong black and increase the line-height significantly. (Years ago when I was working at a magazine, I taught the wife of a coworker -- a university lecturer who was legally blind but sighted enough to read large large type -- how to use the typesetter. She printed out lecture notes in 24-pt bold sans serif, about six lines to a page if I recall correctly.)

Also, looking at it in IE6, the layout breaks out about 10 pixels to the right all up and down the length of the page. Something I'm sure you'll fix ... mentioning it "just in case."

Good luck on this!

[joedolson]

Joe - My previous accessibility experience has been with screen readers, not so much with visual interfaces. Learning to use :focus well is definitely on the list. It seems logical that a:focus states should be the same as a:hover. Is this correct?

I'd generally say no. Although the use of :focus and :hover are pretty much distinct behaviors (people using keyboard navigation are unlikely to switch to a mouse to click on a link), I still like to keep the states separate, visually. Partially this is for my own preference, I suppose - I like to see something different when using keyboard than when using a mouse. I'm not sure there's any strong accessibility reason it should be one way or the other, however.

How many people use this form of navigation ?

And how do I focus the first TAB on the second menu item ?

How many people? I don't know...it's generally people with some kind of mobility difficulty which impairs the use of a mouse - which could include not having arms (using a mouthstick for navigation), having a condition such as Parkinson's disease which makes control of the mouse very difficult, arthritis which makes fine motor skills painful (easier to take a break while using the keyboard), etc. It's a broad range of possibilities.

You can control where the first tab falls by using the tabindex attribute: tabindex="1" will place the focus there first. I don't especially recommend using this, since it can actually disrupt things more than you'd think. Still, it is part of the WCAG 1.0 recommendations for accessibility, and in limited use it can be quite effective. In your case, you might want to consider specifying the "1" index but not any others, leaving them in code order.

[AbleReach]

I backtracked to tables because it's going to be quicker for right now. My Windows machine is on the fritz and I have no access to quickie peeks at IE. If someone could post screen shots for IE 6 I'd much appreciate it.

Frank - LOL - I thought that the piano was the top of a wall somewhere in the vicinity of the Louis Braille Musum in France. Goodness gracious!

[Respree]

Here you go.

[AbleReach]

Thank you, Garrick!

We're puzzling over what to call an area for fundraising events, wish lists, volunteer activities/recognition, etc. We need to give thought to content and arrangement. Some nonprofits use "Making a Difference," which the staff currently likes. They think "Support Us" sounds like a demand. I'm looking for something short.

[Respree]

Maybe Philanthropy?

[joedolson]

Maybe Philanthropy?

My first reaction was "hey, good thought!", but the second was questioning whether the term is universally known enough to be a good usable term. "Giving" or some such simpler term may be better for reaching a broader audience. Philanthropy, to me, implies an upper level of donations: rather than the whole volunteering for an hour a week, more along the lines of "naming this building after me."

I know that this meaning isn't inherent to the term, but it sometimes seems like these longer, high-falutin' terms are more likely to be applied to upper-crust donations, whereas a simpler term may appeal to a wider audience.

[AbleReach]

"Making a Difference" does have an appealing sweetness too it.

For the header itself, the school's architecture, the snow-capped mountains in the background, and the picture (which looks like a bust) all suggest a European feel to me, perhaps Switzerland. Perhaps a mention of the locale would help as well in the tagline. While I think providing a resource for information on Louis Braille is an excellent service, the school's strongest mission is in serving its local community.

I'm leaning towards suggesting that down the line the header image be used in a separate braille resource. A tagline should do more than counteract an impression given by the header.

Right now, over 90% of search engine traffic pertains to Louis Braille and braille information. The rest are very specific, such as the phone number of the school, or a worker's name. 80% of traffic overall is from bookmarks or inlinks that go straight to braille info. I want to find ways to integrate that lovely existing 80% with the child and family centered mission of a school. Some of those viewers will have an interest in the school, too.

As time allows, developing some SE-attractive content about kid stuff will help the traffic reflect the target audience. Since the Center became the School, I am seeing some searches on interesting topics like "teaching music to blind children" or "learning numbers." "Accessible Curriculum" is a focus that needs to be reflected in search terms that parents may use... again, as time allows.

[AbleReach]

"Giving" or some such simpler term may be better for reaching a broader audience. Philanthropy, to me, implies an upper level of donations: rather than the whole volunteering for an hour a week, more along the lines of "naming this building after me."

"Giving" got the vote.

Thanks!

[tinkerbellchime]

Elizabeth,

This is a great and worthy project. My bet is that it will continue to grow and become an authoritative voice in its field. I see a long term project here that will age well. I’m an educator, so I felt inspired by your site and its philosophy.

Here’s a list of what stands out in my mind about the Home Page:

Banner—Cleverest use of texture I have ever seen. I enjoyed reading about the significance of the objects in the box at the bottom of the page. My solution to Frank Elley’s comment about the piano: I think the piano could be moved below the bust of Louis Braille. He’s right about it being in the dominate position of the home page. Other than that, I love it. It sets a nice tone: solid, long lasting, calming, sophisticated. It tells me that children at your school will not just spend the day learning survival skills to cope with their handicap. Instead, they will also be enriched by the finer things in life too, much like Louis Braille was.

About the School – Perfect write up…smart way to start the website. Answered all the questions users have when they go to a website. If I were a parent looking for a school, I’d feel confident that I discovered the right place.

Location—Nice section with interesting information about the surrounding areas. It made we want to book a flight. What about adding a link inside the paragraph to the map on the Contact Us page.

Navigation Bar—The buttons are in the perfect order of importance for parents looking for a school for their kids. Philosophy to Curriculum to Enrollment to Louis Braille to News to Contact Us. I followed the links in the order you set them up and was sold on your school by the time I got to Contact Us.

The Philosophy page is wonderful; heartfelt, clear, descriptive, concise. Throw in the word ‘enrichment’ somewhere because I get the impression that the school goes beyond everyday skill building.

The Curriculum page is perfect.

Somewhere I saw a navigation tab that said “School Closure.” My heart sank because I thought the school was closing due to lack of funds or support. When I clicked on the link, it had information about vacations, etc. Please add an ‘s’ to ‘Closure’ so it reads “School Closures.”

Many blessings to you, your mom, and the kids. I’ll be sure to pass the word.



Favorite Quote: If you think education is expensive, add up the costs of not having one. –unknown-

This post has been edited by tinkerbellchime: Dec 30 2006, 03:23 PM

[SEOigloo]

What a fine project for a wonderful school. It was a pleasure looking at this, and thinking about the work involved in helping children with visual impairments. Having worked as a child educator in the past, I know the satisfaction an adult feels when they help a child to learn, and I would say this satisfaction would be even greater when working with children who need learning methods adapted to their vision needs.

We just finished a site for a fellow who designs special garments for deaf children who wear cochlear implant speech processors. I had never even heard of these until taking on this contract. It was a good learning experience for us.

A couple of comments:

I am concerned about the height of the masthead pushing most of the content down below the fold. My first impression was that I had to focus on it, rather than on the text.

However, if that vertically broad banner is a must, I really second the vote that a super image of children be used to replace the piano. I think this would really uplift the whole mood of the banner, and instill a positive, engaging light into the design.

I'm a big fan of phone numbers and at least partial addresses in the masthead. It immediately tells a visitor that this is a physical location...not a cyberspace entity, and would also help to locate the school in America, which I feel this site needs to stress, as the feeling is definitely European at first glance.

One other comment:

It sounds like you are going to develop some great content for the site. May I cast my vote for a biography on Laura Bridgeman? She is not as well known as Hellen Keller. She was a blind, deaf and mute child who was born in the 19th century, and was one of the very first children with these disabilities to be fully educated in a school for the blind. As a child, I read and re-read a children's book about her called Child of the Silent Night, and was so inspired by her story. Charles Dickens came to visit her on his trip to America, and she was truly an amazing person. Just thought I'd mention this for your future content brainstorming.

I hope these suggestions are of use to you and your mother, and wish you all the best of luck with your great endeavour!
Miriam

[AbleReach]

Thank you, tinkerbellchime and seoigloo! This is very much a labor of love.

I've been working on the site in another directory.
What I have so far is now at www.louisbrailleschool.org/test/
About 2/3 of the content is there.

I got this content today: www.louisbrailleschool.org/test/news/ :-)
I love the way filling things out highlights how involved they are with the community.

All pages have skiplinks started - though destination links generally aren't set up yet.
Most pages work make sense with heading navigation.
There is an a:focus state that shows up when tabbing through in Firefox. It's not supported in other browsers, outside of forms, but I understand that there's a way to accomplish the same effect with javascript. If I ask nicely, perhaps someone will volunteer to walk me through it?

I've put in a navigation sidebar and added a current state for each page. What do you think?
Using CSS to highlight the current page is my neat trick of the month. I just learned how to use php to set the current page's CSS automatically.

So far the original collage is still on the top level pages. I haven't settled on how to put more happy people pictures in the header in the long term, but for now there are a few on sub category pages. After we get more high quality kid photos in the text, shrinking the heading height would be a good idea.

So far we've resisted taking on too many new ideas at once until more is polished - LOL - but here's one to share ahead of time --
On a staff page, I think it would be fun to have a short "hello" recording associated with photos of staff members. That way, prospective students could "see" the feeling of a future teacher's voice.

This post has been edited by AbleReach: Feb 7 2007, 09:33 PM

[tinkerbellchime]

I like the new masthead, but I miss the raised Braille bump texture of the old one. It was such a cleaver use of textures. Plus, you could interpret what the bumps say for the rest of us by adding an alt tag to the picture. Hey, your tagline could be in Braille with a rollover giving the script.

I miss the warmth of your original home page. It was more comforting. Even though I don't know you or your mom, I think it captured the personality of the two of you more than the new one. But the idea of adding a location in the masthead and making it shorter is good. I always longed for a more classical education than is provided nowadays in America, so I was fond of the old European look.

I would love to learn more about the bios that were mentioned. I'm thinking that a whole collection of them would be wonderful and might get you links from .edu sites. I like simple short stories even at this age.


Great idea to add speech to the teachers’ page. Wonderful use of technology.