I’ve been reading so much about typography and layout lately; I’ve been inspired to design a WordPress theme. I’ve also been wanting to do it from scratch so that I’m completely familiar with all the code.
I’m no PHP whiz, but so far things are working and I know what everything is doing in my template. With the exception of those lines that say //please do not delete this or //if you delete this the sky will fall on your head. It took me a little while to get comments.php to work: I’d omitted an endif and a }. 😛
Heirarchy
Before I’ve even down a photoshop mockup, or started styling my new design, I can at least try to get the code in a sensible order. So, I’ve been considering hierarchy. Particularly headings (h1, h2… h6). What is a good, semantic way of using these headings?
By section or by importance?
It makes sense to me to start from h1 in each section and work down from there, which seems to be what W3C suggests. However, it also makes sense to me that you would start with h1 at the top of your page (the title/header) and work your way down from there, h2 as post heading, h3 as post sub-headings etc.
I read a few articles: jogin.com ponders the same things that I do, and links to some good articles on the matter. Andy Budd has a nice summary of the directions in which you could go.
These all led me to think that you should start the heading hierarchy for each section. As Jogin elegantly put it,
- Content
- Entry title
- Another entry title
- Yet another entry title
- Menu
- Menu section title
- Another menu section
- Yet another menu section
- Possibly a sub section
Robustness
This is not the way my current theme, Copyblogger, has done things. Chris has used the other method of importance, rather than sections. It’s not a bad way to do things and he might have very good reasons for doing things that way.
My only problem now is, do I go the way I want to (as above), therefore needing to change the layout of all of my posts (which currently use h3 as the highest subheading), or do I stick with the other method for simplicity’s sake?
Does anyone know an easy way to “find and replace” in posts? Perhaps I could do it directly through the MySQL tables?
I can’t design, so I can’t give you any advice 😀
But I am glad that my understanding of how my blog works has increased since the day I ventured into the codes. I have gone from somebody who didn’t dare touch the PHP files to someone who dares do it for other people!
They’re definitely not as scary as they first appear. It’s pretty sweet when you go from not wanting to touch it, to making your own little adjustments here and there. Then perhaps someday you write your own! 😀
Hi,
I think the best advice I can give you is to use the H1 for your site’s name. I usually use an image for this, so I put the name or relevant keywords in the alt text.
The default theme in wordpress makes heavy use of H2 tags. This isn’t something that I completely agree with for SEO purposes, but I’m no expert in that field. I usually make the page titles h2 tags and posts titles h3 tags. I also make the tag line an h3. This way you can add some static content titles for your index.php, category.php etc, with the very important h2 tags targeting your keywords.
I enjoy your blog and I hope this helps!
I have always done it as h1 is the blog title (this is good for SEO purposes, too), as Josh said. H2 I would use as the page/post title and h3 as subtitles. Beyond that I don’t think it matters.
Have you checked out A List Apart or Designing with Web Standards? You should find those very useful as to semantic markup. Let me see if I can get my husband over here to comment (or at least to tell me so I can come back and share his advice). He’s really good at all this stuff!
Ok, here’s what the husband says:
Does that help? I’m sure that 4 experts have 6 different opinions on what you “should” do, so just follow what seems most right to you after looking at everything!
Thank you all! Very helpful.
Josh, thanks – I don’t remember seeing a comment from you before, so, welcome! I like what you’ve done with Tuscon Labs, I look forward to seeing what happens with it when you get those things “worked out”.
LaurenMarie – Thanks for that info and asking your husband. 🙂 I’ve added that book to my wish list. 😛
I had seen A List Apart on your site as an example of grid design. They also have so nice typography, don’t they? I hadn’t read their articles yet though. Looks like serif-fonts for headings are becoming a “thing”. I kind of like it, it used to be a no-no to mix serif and sans-serif, but heaps of people are doing it now – throw in some italics, it’s sweet!
On the H front – I guess the idea above was almost correct, but starting with page heading (blog title) as h1 then section heading as h2, sub-heading as h3. So the structure is the same as above, except it all comes under the blog title.
I think I will go with that – then I don’t have to edit my previous posts!