Compassdesigns.net

Teaching - Web - Sailing

  • Home
  • Services

6: Enhancing a Template for Joomla SEO

December 10, 2005 By barrie@compassdesigns.net Leave a Comment

Some basic changes to the Joomla CSS

Let’s first make the text a little more readable, two quick changes to the joomla CSS.

body {
font-family: verdana, arial, helvetica,
sans-serif;
font-size: 76%; /* don’t go smaller than this */
}

Note we dropped the style being applied to “html,body” as we didn’t want the
percentage font size being applied twice!

This makes the font a more reasonable size. Remember, we talked about how we
were sizing our fonts in one of our previous articles, A
Blank Template CSS file for Joomla
. I have also chosen a sans-serif font:
verdana. Web pages have the opposite readbility of paper pages. On paper, serif
(like Times New Roman) are more readable, on the web its the opposite.

Next, let’s center the page.

body {
text-align:center; /* for IE */
}
#wrapper
{
position:relative;
width:85%;
margin:0 auto;
}

OK, so here we have centered the page and made it a little wider. This is a fluid joomla CSS layout, the main part
of the page will always be 85% of the browser window. It re-seizes depending on
the screen resolution.

Now, we have to do a little changing of the column sizes. This is important,
if columns overlap, it can break a layout in a browser.

#leftcontent {
width:175px;
}
#centercontent {
margin-left: 190px; /*tweaked a little to get a slight gap*/
margin-right:165px; /*tweaked a little to get a slight
gap*/
}
#rightcontent {
width:150px;
}

I have reduced the width of both side columns and increased the margins. Note
I have made a small gap between them and the center column.

Let’s make a splash of color, C00 is a shade of red and fff is white:

body { …..
background-color: #C00;
……}
#wrapper
{
background-color:#fff;
}

Joomla SEO

OK, so here is the really good bit. It’s to do with joomla search
engine optimization
or joomla SEO. The closer
something is to the beginning in the xhtml code of your page, the more weight it
carries for yoursearch engine ranking . Unfortunately, a joomla
website outputs alot of xhtml. This means that your important
content (the middle column) gets pushed down. But, CSS to the rescue, remember
that we absolutely positioned our side columns. This means that they can appear
anywhere in the source, as long as they are in their container, the “wrapper”.
So let’s put them after the main content! Heck, if you wanted and had alot of
non-vital content in it, you could even make a header container and put that
after the main content too.

Overview of a Joomla Design

<body
<div id=”wrapper”

<div id=”centercontent”
<div
class=”insidecenter”
<?php mosMainBody();
?
</div

<div id=”header”
<?php mospathway() ?
<?php
mosLoadModules(‘top’);?
</div

<div id=”leftcontent”
<?php
mosLoadModules(‘left’);?
</div

<div id=”rightcontent”
<?php
mosLoadModules(‘right’);?
</div

</div

<?php mosLoadModules(‘bottom’);?
<p
uri=http://livesite.compassdesigns.net”
target=”_blank” title=”W3C Joomla Design”

</body
</html

We had to add this rule (you can see it in the xhtml above) to push the
center column down.

.insidecenter {
padding: 100px 0 0 0;
}

Last but not least we move the footer below the end of the wrapper div,
putting it into the colored page background.

Now we add some titles for the site.

<div id=”header”
<h1
<h2
<?php mospathway()
?
<?php mosLoadModules(‘top’);?
</div

Notice how the name of the site and its url are in header tags. This does two
things, first it is good practive for semantic layout, so increases the
accessibility of the site, second, it helps your joomla SEO as anything in a
header tag is given slightly more weight as a keyword.

So, there you have it, a source ordered joomla template, this week with a
little kick for your joomla SEO needs.

A Joomla SEO template

Is it still a W3C valid joomla template?? Well, what do you think?

Filed Under: Uncategorized

The Skinny

I am an entrepreneur, web consultant, author and educator.

I have been involved in starting a K-12 School District, a Private High School, and three web tech companies. I also wrote one of the original and best selling books on Joomla.

And I like sailing with kids.

Recent Posts

  • Teenager Invents New Type of Hunting Camo Suit
  • A Parent’s Guide to Proficiency Based Learning
  • Proficiency/Competency Based Learning in NGSS Classrooms
  • Hunting Camouflage Website Launched
  • Get More Email Newsletter Signups With These Easy Tips
  • Proficiency Based Learning Resources
  • Social Media Redux
  • How to turn off WordPress Comments if you use Disqus
  • The API was Yesterday. The Tomorrow is iPaaS
  • Left Hook Digital Named Zapier’s First Integration Developer Partner

Top Posts

  • What Exactly is Standards-Based Teaching and Learning
  • Joomla Extension Reviews - Tienda and Anahita
  • Displaying the Joomla Search Results Page with the Correct Template and Modules
  • 22nd Century Learning

Blogroll

See3D Camo

Blaze Orange Camo

Vermont CPR

Copyright © 2023 Compass Designs ยท Musings on Education, Life, Joomla and the Web by Barrie North