Accessible & Elastic: www.natko.de

[nils73]

After a lot of work, especially with some plugins, my first CMSMS website has been launched. Those who do not want to read any further, here is your link: http://www.natko.de --- all others: please keep reading for further details.

Design
--------------------
It's pure XHTML 1.0 strict with CSS. Note that there is a Conditional Comment inside the HTML for all nasty Internet Explorers in the world. Since IE does not support all CSS 2 and even misses some of the CSS 1 standards, it was neccessary to have a separate ie.css for buggy Explorers. If JavaScript is enabled in IE you get the same impression that users of standards compliant browsers get by default and without JS. If you enlarge your font-size the layout will scale as you increase the zoom-level. This behaviour is called "elastic" --- very well for accessible websites.

HTML
--------------------
As said - it is XHTML 1.0 strict. That was one reason why CMS made simple was the system of choice. It creates valid XHTML source and is easy to handle. When you dig into the code you will find some tags there. Using unordered lists for navigation is okay but users of screen-readers might get lost because nested lists offer no orientation at all. Therefore I have tweaked bulletmenu to display . Cool indeed that CMSMS has a site-structure that assigns a numbered value to each site-item which made things easier. Some changes to breadcrumb plugin have been made and that was all we had to do for basic CMSMS.

CMS made simple
--------------------
The site is running 0.10b2 - maybe once I will try to upgrade to 0.10 or later version, but there are some hacks that are very special and I will have to check if they still work. However, this one is pretty stable, eventhough it is only a beta. Since the existing WYSIWYG editors didn't comply with what I call standards compliant and accessible, I had to integrate widgEditor (search the forum for it) as a module. To enable use of modules for editors I had to invent a tag called that deals with modules, user-tags and stuff like that. Some more hacks to CMSMS ... but it works. Now we have 6 users (one admin) with different user-rights in different groups working on the content. They are very satisfied with what they've got. One thing we have created was a new contact form and we have meddled with the search feature to have at least some kind of full-text search. You will find both when searching the forum.

Modules & Add-Ons
--------------------

• widgEditor as WYSIWYG editor
• Bookmarks (modified ... more fields now)
• News (modified ... detailed pages did not work, which is fixed in current version of CMSMS)
• Calendar (modified ... code-output was not accessible)
• Backup (nice, would be better gzipped and downloaded though, but still I like it)

The whole website uses only one template which makes the whole thing easy to maintain. Styles have been edited externally because of so many hacks and tweaks --- see Conditional Comments above as just one example. Thanks to all the people here, especially wishy, who always had a good idea on what to do if things went wrong. It is a great Content Management System and it is as easy as promised (even for people who have little or no knowledge what a website is).

If you have further questions, please ask. I will be around (though I will relax a few days) to work on the documentation which is yet another thing not mentioned above: it was easy to create a manual and people did understand the manual without questions. Again: thank you wishy for this great CMS and keep up the good work.

Regards,
Nils

[Woudloper]

Very nice site that has sematic correct HTML! Looks very nice and saw that you used several great features of CMS Made Simple. Are you going to share the customisations of the different modules (or did you do this already?).

A small question about the source of the website. Great explenation by the way about the way you have implemented this site! Why are you also using HR to divide the different sections within the site? I thought that a tells the screenreader that the content is listed within a division, which is in fact a seperate section...

[nils73]

Thanks Woudloper! Most of the module-hacks have been shared around here. Some are very special (only for this project), others simply do certain things I like to use (bulletmenu for example) and should meet only my requirements.

As for the elements: No, not all scree-readers can interpret a -- they are (to be honest) of no use at all and only structure code, but they are not semantic themselves and should be used only if absolutely neccessary.

Regards,
Nils

[nils73]

By the way: comments are welcome ... forgot to say that.

Regards,
Nils

[Matt Jason H]

Looks very good, i like it.

How did you get the top-bar image/background to change depending on which page/section you are in?

[nils73]

Thanks Matt.

It is pretty simple though it is not elegant at all. Just assign a class to a div (here id="header") and also a class like this one:

class="style0{if ($gCms->variables.page) == "35"}1{/if}" .... this will create class="style01" if page-id equals 35. Not very dynamic, but it works here. There might be several other solutions as well, but I stick with this one because it does the trick here. One other solution might be grabbing the site-structure as listed in admin mode, which is also used for bulletmenu where you have:

1. Item 1
1.1 Subitem 1
1.1.1 Susubitem 1
1.2 Subitem 2

You could grab the value before the dot and assign it to the template. Anyhow you will need a user defined tag. Call it "loadgcms" and insert:

global $gCms;
$smarty->assign_by_ref('gCms', $gCms);

Call it before you run the if-statement in the template like this:

{loadgcms}{if ...}{/if}

Regards,
Nils