A better look for my blog

Filed in Technology

A few days ago, I began looking at the way my blog was styled and considered methods of improving it or at least making it look nicer. I'm a perfectionist in many ways so placing style information within the actual web page was not the way to go. Instead, I used style sheets (technically known as Cascading Style Sheets or CSS for short). They're similar to the way text styles work in word processors. They were developed by the World Wide Web consortium as a way to simplify and centralise the visual design of web pages but took a very long time to be fully embraced by the web community at large. These days, we're looking at version three of the CSS standard and other than Internet Explorer, almost every browser is on board to fully support the standard soon.

I'm not going to bore you with the techie details because they are boring for all but the people actually using CSS to make their web sites more attractive, functional and manageable.

Anyway, after three nights of customising the layouts and style sheets, my blog's pages are fully scalable. So if you think the text is too small to read, simply enlarge it using your web browser's Bigger Text function and the whole page will scale appropriately; even the left and right columns. If you need really big text, I'd suggest getting a 17" monitor and enlarging the page to the full size of the screen. I tried it, and it works great.

Other improvements: Pictures within the stories will scale down if you narrow the middle column, and they now have a nice black border for better definition. The calendar in the left column now indicates dates with linked stories much more effectively.

And in case I forget, there's also the new Subscribe to email notification feature in the right column. If you'd like to be notified every time I post a new article, type your email address into the field and click the Subscribe button. RSS news feeds still work too if you'd prefer to use RSS.

I'm definitely not a web expert, so if you find any glitches in my blog regarding the placement and size of the text or pictures, please let me know.

As advanced as CSS is, there are still a few aspects of it which are quite mind-numbing. How properties 'cascade' is a little complex in some situations, and creating a scalable page using relative em values was not easy either. The technology still has a way to go before it's really mature, and we're still waiting for wysiwyg web page layout applications which fully support CSS rather than tables and in-tag style properties. On the other hand, if you write the code for your web page with sound structure, then laying it out and adding appearance properties to it becomes relatively easy; once you fully understand how CSS works.

I won't talk much about web technologies. I suspect that for the majority of my readers (Douglas excepted of course), web technologies would be very boring to read about.

My next article will be more to the liking of most of my readers: ie, coffee!


Comments (Comments are closed)

5 Responses to “A better look for my blog”
  1. ling_M'sian says:

    Displaying images not in their original resolution is not a good idea. I suggest u improve on that.

  2. 河國榮 says:

    are you using IE?

    the problem is with IE. it doesn't follow the standards and doesn't understand the max-width css rule. it therefore expands images beyond the resolutions I've set in their rules.

    if you use Firefox or Safari or Opera, you won't see that problem. it's just IE.

    Firefox is free. it's modern and it's really fast. I'd suggest you download it and take a look.

  3. ling_M'sia says:

    But there are so many IE users out there.

    By the way, there is a mistake in the "World Wide Web consortium" link.

  4. 河國榮 says:

    yes. unfortunately, many PC users don't realise that IE is very old and that there are FREE modern fast browsers available for download (Firefox is available for free at http://www.getfirefox.com ).

    if I was a corporation, I'd have to write my code to allow the inferior IE to display my code ok. I'm not a corporation though and I'd prefer to educate people that there are far better choices out there than IE.

    I might however have to make adjustments to the image display for IE users. like you said, there are many IE users out there and if I can make IE-specific changes without too much effort, I might do it anyway.

    thank you for the heads-up about the w3 link. strange! I'll fix it asap.

  5. 河國榮 says:

    hi ling_M'sia.

    I've added a bit of code to my css which should effectively only change the setting for IE.

    with modern browsers, the images in my posts will scale down when the width of the column narrows, and they scale up to a maximum of 100% when the column is enlarged so that they always look great. for example, an image is 400 pixels wide, if the column is 300 pixels wide, the image will also scale down to 300 pixels wide. if the column is 500 pixels wide, the image will scale itself up to its native size of 400 pixels wide but not any larger. IE unfortunately doesn't support this. it's too old.

    I've added code to my css so that images when displayed with IE will not shrink or expand with the width of the column. this means that they'll always be 100% of their original size and people viewing the blog with a window of less than 800 pixels will see the images overlap into the right column, but it's probably better than seeing warped images.

    let me know if it hasn't worked. I don't have IE to check.