Sunday, April 6, 2008

Design an accessible Website using CSS

Designing the web page layout is an essential step in the website development. It affects almost every aspect of the website development, from styles, content types, photos, search engine optimization SEO, and definitely the website user friendliness.

There were a deep misunderstanding to the Web as a capable media for content publishing and a potent marketing tool, the graphics designer were using the Internet shamelessly as a mere brochure. I mean they were designing a brochure (a real one) and convert it to a web page using one of the web graphics application like Fireworks, or Dreamweaver. The conversion was usually done using image maps and slicing. Graphics slicing were obscenely abused, I saw many crimes where developer create or import a brochure into Photoshop and start slicing the image into small chunks of gif images, and export the whole design as an HTML. At best they export part of the design from Photoshop and integrate the dynamic parts into the body area of the layout.

Leaving Photoshop and brothers to do the HTML is not a good idea. Really. It is like translating an English site to Arabic language using a machine translator. The end product is gibberish. The sliced layout with mixed Html and images, is harmful for many reasons I will try to highlight them in this post.

HTML is not a presentation layer. Using HTML to design the layout is not the job of HTML. HTML is an XML format to define the data structue of the web page document. I like to describe a document in terms of paragraphs, menu list, sidebar, blockquotes, ordered list, unordered list, those elements are unsurprisingly the elements of HTML. But how you want to render or represent the menu lists, the sidebar, the blockquote, representing those elements is entirely the job of CSS (Cascading Style Sheet) and not the HTML.

What made me a true believer of CSS layout, CSS styling and using HTML only in representing the document in its basic elements is that our eyes are not the only consumer of the web page we develop, there are others, like; search engines crawlers, blinds, mobile web browsers, printers..etc all those consumers will not see or use our graphics as we intended for it to be seen

Search engines will not understand that my website is concerned about farming and agriculture if I did export the titles of the agriculture sections as images from Photoshop. So People searching Google will not find your site only because Google didn't find thesearch keywords in your site. The same goes for blinds. There are using the Internet in a daily basis in Egypt, Arab countries and around the world. For blinds they use Text to speech software to convert "text" to speech, it will simply ignore images, so blinds will miss your website sections menu if it was made of a bunch of images racked into an HTML Table.

Another reason for using CSS is that blinds are needlessly forced to listen to a lot of repeatable content on the top of each of our pages, for no reason but that HTML is rendering first things first, so if we want to put the site menu, contact us, about us, login, and sidebars on top of the page, you could render it on top if you want to, but there is no need to fill the blind with boredom in order for him / her to reach the body of your page content, and force him / her to read through all those content again and again in each of your website pages. We can always use CSS to render different page elements in any position regalrdless of its order as an element in the HTML document.

To summarize the characteristics of a good Website design I can say;
  • No style graphics are embeded in HTML, all design and decoration images located in a separated CSS file. No menu list, titles, or any content is represented only by graphics, it should be a text first and then styled and decorated with any graphics the designer decide.
  • No Tables are used to define layout columns, Tables are only for tabled data, and not for layout.
  • Web page content comes first in the order of HTML document. The title and body of the article of the web page is the first thing you see if you open the source code of the page or see the page without CSS styles, that's good, cause that's how other blinds, search engines, mobile browser will see your page.

I am yet to see CSS developers in Egypt, job posts for CSS developer in Egypt are none. Employers do not know what they are missing, they bet on graphic designers to do the job, and usually graphic designer have no idea what CSS is all about, they will use CSS for styling at best, and not for layout. That's why I will do a small contribution and start a mini series of CSS lessons (hopefully in Arabic too), in order to implement the mentioned principles in designing a good website design.

1 comment:

Jordi Ferrer said...

Hi Ibrahim,
Nice and clean writing, congrats.
I am about to start an English and Arabic web site. Could you please brief me on the things to have in mind when doing the Arabic pages from a HTML/CSS perspective. Many thanks in advance!


JavaScript bloat is a more real problem today than it ever was. Bundlephobia lets you understand the performance cost of adding a npm pack...