Those of you who subscribe to svn commit notifications have probably noticed a lot of changes being committed to svn recently in the skins for mojoPortal. I've been doing a lot of work to improve the markup semantics and accessibility and to better organize the css files.
Some of you may be scratching your head and wondering what are markup semantics so I'll explain a little. Historically most web developers and designers have just done whatever it takes to make a web page look a certain way in the browser, we haven't really considered what should the html itself look like very much. The w3c standards and recommendations have been evolving all the while in the background and they have quite a bit to say about how html documents should be structured.
It starts with simple things like the most important heading on the page should use an h1 element and other things on the page should use h2 then h3 and so on for headings in order of importance and containment. Raise your hand if you've ever put a title in an h1 tag then changed it to an h4 or h5 because it was too big. Hasn't everyone done that at some time or another or perhaps we just don't use any h elements at all we just use css to assign a large font that looks like a heading in the browser. By making the most important heading on the page h1 and the next level down h2 and so on we are adding meaning to the markup without regard to its presentation and that meaning will be there even if there is no css. It gives meaning that is helpful for search indexes, screen readers and other devices or web clients so that they can better understand your content. If the default font size for h1 looks too big that can easily be changed with css. The idea is the html should convey a lot of information about the structure of your content and presentation can be handled by css.
Another important example is with lists, I know plenty of times in the past I've made lists of links by just using a br after each link in the list. It looked the way I wanted it to in the browser but it doesn't convey the idea that this is a list. Its much more meaningful to use a ul with li elements to convey a list but when we tried that it indented and put bullets we didn't like so we went back to the br approach. The smart way is to use the ul and li but style it the way we want with css. If we don't like the bullet we use list-style:none;. If we don't like the indent we can use a margins or padding negative amounts if needed. Now the search indexes know this is a list and it still looks the way we wanted.
A good book for those who would like to learn more:
Another important thing is to reduce as much unsemantic markup as possible. That is avoid extra divs and spans as much as possible. Sometimes you really need them to achieve a visual design goal but keep it to a minimum is a worthy goal both in terms of semantics and in terms of performance. Less markup means faster page loads. The book above and some others have shown me that often when I thought I needed a div to style it was possible to achieve the same result without it, css is very powerful. There is a lot more to it so I recommend the above book as a starting point to learn more but these are some of the core goals and benefits.
I mention this because I've done a lot of work in mojoPortal recently to improve the semantics of the markup including better use of headins and lists. I've also gone through each of the included skins and painstakingly split the css into separate files:
- style.css which ties the others together
- stylelayout.css which has css rules for position, margins, padding, etc
- stylecolors.css
- styleborders.css
- styleimages.css
- styletext.css
These changes are in svn and will be in the next release which should be pretty soon. It was a lot of tedious work cutting and pasting the css to organize it this way in all the skins included with mojoPortal but I think it makes it easier to manage and to understand.