WordPress Notes

Notes for the theme authors – part 2

This is the second part of my series (See Part 1 here). Here I am going to talk about a few more things that I want to tell the theme authors.

I want to re-iterate that these are not hard and fast rules. These are something like a ‘nice to have’ things in the theme.

Now straight to the part 2.

Content First / Sidebar Next :

This is the way it usually looks when you view the source of a page.

<html>
<body>
<div id="rap">
<div id="content">The post’s contents goes here</div>
<div id="sidebar">sidebar content goes here…</div>
</div>
</body>
</html>

Some theme authors put the sidebar div first as in

<html>
<body>
<div id="rap">
<div id="sidebar">sidebar content goes here…</div>
<div id="content">The post’s contents goes here</div>
</div>
</body>
</html>

These authors do this, because it is easier to style it, than when it is next to the content div.

This is mainly a problem, if a website is read by some kind of ‘reader’ software.
The reader softwares are used for reading the content aloud, for those visually impaired people.
If your theme puts the sidebar’s content first, then it will read out all of it, before even trying to read the actual post’s content.
Thats the reason it should be avoided.

Use Relative Font Sizes

This is something that can be taken care of, very easily.
Whenever you define the font-size property in the stylesheet, define it something like 10px, 0.9em, or 0.9ex etc.
Do not use ‘pt’ unless you think it is absolutely necessary.

“font-size: 10px;” is good. “font-size:10pt” is bad.

why ?

Every modern browser has the feature that allows the users to increase or decrease the screen’s font size.
It is in the toolbar, ‘View – > Text Size’ (for both Internet Explorer and FireFox).

If your theme defines the font-size as ’10pt’, then it stays in the same size no matter what size people pick in their browsers.
Those who cannot read small fonts, are obviously going to hate you, the designer, just for this.

(To be continued)

2 thoughts on “Notes for the theme authors – part 2

  1. px – means the number of pixels that will be occupied by one single character in a given font.

    em – means the size of the character ‘M’ in that particular font.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s