Using ems in CSS
It has been the tradition to specify all fonts sizes as ems which allows everything to size in relation to it's context. This has always appeared to me to be a best practise, but it is also difficult to do if you allow the fonts to be zoomed. Allowing users to zoom is pretty important for users whether they have a visual disability or not.
Body text and Headings are fine to scale as this should flow easily but there can be issues with navigation falling apart if the font is zoomed by the user so it get's quite tricky.
Catching up on Boagworld podcasts I heard in interesting discussion where several leading lights in web design and CSS are starting to hard code font-sizes in pixels which seems like a backward step, however there are some pretty good arguments. The main argument is that most common browsers now support Pixel Zooming instead of font zooming, which means that the layout of the design remains as the page is zoomed so this is a good thing for people trying to maintain the integrity of their design/layout but still enabling users to zoom. There has apparently been some heated debate. You can catch the discussion at http://boagworld.com/podcast/171.
For me there are some interesting points and I am tempted to combine the two approaches i.e. use relative em based sizes for content and fixed pixel fonts for things like navigation.
What this does also emphasise is the need or lack of need for JavaScript based font sizing as found in templates such as beez. The browser has all the controls already and users who need to increase font size for readability will most likely know where these are as they will need to use those features for sites which don't have zoom features.
Liquid layouts
For me, liquid layouts are cool but I am not sure what use they are. They are certainly an excellent demonstration of best practise CSS and markup, but in reality I am not sure they are that useful. I won't be using liquid layouts for my design, but that doesn't mean they shouldn't be used.
Semantic Markup
This topic however is critical for accessibility. Making a site accessible (for sight impared users) is technically quite easy, making the site make sense for them is much harder. I have seen that semantic markup is a benefit in SEO, presenting a much more understandable page for the search engines to index. So it is common sense to make the effort to markup content semantically.
The important thing to do is tag the content with the appropriate tags so the content is structurally marked up. The common tags would be Headings, Lists, paragraphs, Strong, Blockquote, Emphasise etc. whereas "bad tags" would be bold, italic, font etc. I found this article http://blue-anvil.com/archives/guide-to-semantic-mark-up which is quite a good explanation and goes on to provide some of the benefits including the SEO advantages. There is also a great guideline on the BBC's website from their future media and technology department.
Using semantic markup ensures machines and users can always tell the structure of a document and see where the emphasis is important, there is a huge benefit in Search Engine Optimisation so this for me is a no-brainer.
Rich Text Editors and Semantic Markup
Users love to be able to format their content just how they want it, which can end up with some interesting design issues where fonts are applied, sizes are hardcoded etc.. This can lead to some really horrible page designs and all the hard work on the template kinda wasted. It is also pretty nasty if you want to re-skin your site when users have hard coded style changes etc.. My plan will be to disable all those items in JCE and just leave tag markup options. We will see how this goes as to whether it is accepted by the editors.Template Layout and making it more readable for screen readers and Search engines
The other angle which I am not sure whether this is part of Semantic mark-up or not but is very closely related is how the rest of the web page is constructed. If you go to any web page and turn off images, javascript and CSS to emulate what search engines and screen readers see, this will be a great demonstration of just how much sense your web page makes to a screen reader user or a search engine. Just as you want your core content to be in the right place in your visual design, so should your core content be in the right place when read by a machine. As an example left columns further down the page may not visually be the dominant content on the page, therefore the less important content is usually placed there. If you look at the page source or disable CSS and images you often find that that content is higher in the page than the more important content.
Take for example this page in the Joomla docs http://docs.joomla.org/How_do_you_get_rid_of_the_breadcrumbs%3F. If you turn off CSS while viewing the page, you will see that it still makes sense, the content is displayed first and some simple links at the top which allows someone to skip to the navigation, which is particularly useful for screen reader users.
A quick look at my own template from the last post shows me I have some serious work to do. The first items seen are a login form, a search form, navigation, and then some content. No where on the page does it tell me what web site this is or even what page I am on! So I have alot of work to do on that, which will get covered in another post.
0 comments:
Post a Comment