Sat Mar 27, 2023

Theestar.com.my re-mark-up #1

I'm posting what I have of the new XHTML validatable code as well as the design notes. (Sorry, I mean mark-up. Code is something, Ditesh keeps reminding me, only PHP, C, Perl programmers and the like do.)

It consists of the masthead and the document head.

1. One of the first problems I tackled was structure of the elements. I had to ensure that every element could be uniquely identified for the future compatibility of the document. Even the individual list elements. This I achieved, although many of the list elements are not used in the CSS files.


2. You'll notice that I have split the CSS files into five, mainly for my own sense of organisation:
   
   • global.css - for all the elements that apply throughout the document
   • masthead.css - for elements in the masthead
   • mainbody.css - for elements that apply to the mainbody only
   • footer.css - for elements that apply to the footer
   • print.css - for hiding all the design and advertising elements when it comes to printing, leaving only the content


3. I decided early on that I would place all the menu links and even the advertising banners into lists to keep them semantically organised. They're all basically lists, after all. The difference is I made them horizontal. I managed to achieve this by applying a few simple CSS tags to the list tag and each list item. They're the same ones I use to create a footer menu to this blog.
   
   

   #toplinks ul
   	{
   	list-style: none;
   	margin: 0;
   	padding: 0;
   	}
   #toplinks li
   	{
   	display: inline;
   	}



4. The problem I took the longest time tackling was a readability problem. I know of one person who habitually reads every website with browser-enabled triple size fonts. He won't be the only one.
   
   But when I attempted to position the textad links at the top right hand of the masthead with padding, they tended to disappear behind the blue-coloured links menu when I tripled the size of the text. I could have used z-index to bring them forward, but that would have obscured the links menu. In the original tables form, the textads just pushed the links menu downward, keeping them both separate no matter how large the fonts became. So I made a very tough practical decision to keep the table for the topmast.


5. I also decided to keep using the original ASCII bullets for the channels and the mystar links. I wouldn't have successfully been able to re-produce them exactly as the original website -- even as images -- because different platforms would display them differently.


6. If you closely compare the original with my new XHTML version, you'll notice one tiny difference. It couldn't be re-produced in CSS, but the damned link underline for the Contest link couldn't be coloured without first removing it. It was originally done by colouring the font tag. I could have just substituted it with an image, but it would have looked the same on different platforms, which wouldn't be the same as the original.


7. There is a spelling error of an extraneous period at the end of the original Mobile Edition link. I took the liberty of removing it.

All in all, the website is virtually indistiguishable from the original, yet is XHTML validatable.

The work continues.

http://timyang.com/validated/thestar/

COMMENTS