EasyWebTutorials » Web Design http://www.easywebtutorials.com/blog www news, internet and computer tutorials. Fri, 12 Mar 2010 13:11:59 +0000 http://wordpress.org/?v=2.3.3 en New SEO WordPress Themes Released http://www.easywebtutorials.com/blog/2008/08/12/new-seo-wordpress-themes-released/ http://www.easywebtutorials.com/blog/2008/08/12/new-seo-wordpress-themes-released/#comments Tue, 12 Aug 2008 07:53:28 +0000 guido http://www.easywebtutorials.com/blog/2008/08/12/new-seo-wordpress-themes-released/ Hi everybody,

it´s been a long time since I announced the creation of new WordPress themes and finally, after much more work than estimated, the new themes are ready for you to use on your WordPress blogs.

(more…)

]]>
http://www.easywebtutorials.com/blog/2008/08/12/new-seo-wordpress-themes-released/feed/
New Web2.0 SEO WordPress Themes in Development - Your Help Needed ! http://www.easywebtutorials.com/blog/2008/03/19/web20-themes-development/ http://www.easywebtutorials.com/blog/2008/03/19/web20-themes-development/#comments Wed, 19 Mar 2008 17:11:42 +0000 guido http://www.easywebtutorials.com/blog/2008/03/19/web20-themes-development/ A few weeks ago, I felt the need for a new set of SEO themes, purely based on CSS (i.e. no HTML tables) and with a Web 2.0 look and Web 2.0 features. I saw the Tigopedia reloaded theme which inspired me to use rounded boxes, but tigopedia is just not flexible enough and the sidebar content comes above the main content in the source, so it´s not well optimized for good search engine rankings.

Since I am developing this new set of themes not only for me, but also for you, I wanted a much more flexible theme, so you can easily change the layout width, the header, the sidebar widths and the whole color scheme. Therefore, I also want to ask you for your input regarding design elements and features that you would like to see in the new theme. Please submit your ideas and suggestions as comments to this post.

You can see the current state of development by selecting the “web2.0″ theme from the theme switcher as your default theme for my blog.

I started with a 3 column theme, with two sidebars on the right (my favorite layout) and a blue color scheme. The borders of header, top navigation, main column and footer are very flexible in width and height. For the sidebar widgets, I created subheading backgrounds and bottom borders (with rounded edges) in different widths (130, 150, 170, 190, 210, 230 pixels), so you can switch between these values (there will be a tutorial showing how to do this).

3 different color schemes are available right now: blue, green, red

In addition to the current layout (3 columns, 2 sidebars on the right), there will be:
- 3 columns with one sidebar on each side
- 2 columns with sidebar on the left
- 2 columns with sidebar on the right

The layouts are all based on the LayoutGala CSS Layouts. For the SEO aspect, these layouts are designed in a way that the main content comes first in the source code, before the sidebars, regardless where the sidebars are located (left of ride side).

The sidebar uses the normal HTML markup for WordPress sidebars (nested unordered lists), so it should work well with any widgets, just in case you are using this feature.

Below each post, there´s a box with links to categories, tags and different social bookmarking sites. Already integrated, the “social marker” button that allows people to bookmark your post to several services at once.

Well, here I am, open to your suggestions.

Remember, these themes are for you, so contribute your ideas to the development !

]]>
http://www.easywebtutorials.com/blog/2008/03/19/web20-themes-development/feed/
Webpage optimization - the HTML table trick http://www.easywebtutorials.com/blog/2006/08/09/html-table-trick/ http://www.easywebtutorials.com/blog/2006/08/09/html-table-trick/#comments Wed, 09 Aug 2006 11:29:18 +0000 guido http://www.easywebtutorials.com/blog/2006/08/09/html-table-trick/ To rank slightly better in the search engines, one thing you can do is to optimize the source code of your webpages in such a way that your most important keyword focused content is placed as high as possible inside the source code.

If your website layout uses a sidebar on the left, you will usually find the content of this sidebar above the main content inside the source code. Here is where the HTML table trick comes into play. Let´s take a look at a very simple example.

title trick scratch 1

The scratch on the left shows you a simple website layout with a header box, a left sidebar (menu) box, the main content box and finally a footer box, designed purely in CSS.

In the two boxes below, you see the CSS stylesheet and the relevant part of the HTML source code which both together form this website layout. As you can easily see in the source code, the sidebar content comes first and the more important keyword focused main content of the page is moved downwards.


Stylesheet (styles.css)

#wrapper {
width: 700px;
margin: 0 auto;
border: 2px solid #369;
}

#header {
width: 100%;
border-bottom: 1px solid #369;
margin: 0;
padding: 0;
}

#menu {
width: 200px;
float: left;
border-right: 1px solid #369;
margin: 0;
padding: 5px;
}

#content {
width: 500px;
border: none;
margin: 0;
padding: 5px;
}

#footer {
width: 100%;
border-top: 1px solid #369;
margin: 0;
padding: 5px;
}

HTML source code

<hmtl>
<title>webpage title</title>
<link rel="stylesheet" type="text/css" href="styles.css">

<body>

<div id="wrapper">

<div id="header">
Your Website Header Goes Here.
</div>

<div id="menu">
This is the sidebar ( menu ) of your webpage. As you can see, it comes before the main content inside the source code of your webpage. And this could be quite a lof of stuff if you have many links and ads in your sidebar.
</div>

<div id="content">
This is the box for the main content of your webpage, starting with the H1 heading.
</div>

<div id="footer">
Your Website Footer Goes Here.
</div>

</div>
</body>
&l6;/html>


title trick scratch 2

In order to move the main content above the left sidebar inside the source code, you can use the following layout trick using a HTML table with two rows and two columns like illustrated in the scratch on the left.

The first table cell in the first table row has the same width as the sidebar but it remains empty, so it´s only a few pixels in height and can´t be seen by your visitors. The second table cell in the first row spans over two rows and forms the largest box which contains your main content.

Only in the second row, you will find the sidebar content inside the first table cell. Take a look at the source code below and you will see how the main content is moved towards the top while the visible layout remains almost the same.

Stylesheet (styles.css)

#wrapper {
width: 98%;
margin: 0 auto;
border: 2px solid #369;
}

#header {
width: 100%;
border-bottom: 1px solid #369;
margin: 0;
padding: 0;
}

#table {
width: 100%;
border-collapse: collapse;
border: none;
}

#empty {
width; 200px;
border-right: 1px solid #369;
margin: 0;
padding: 0;
}

#menu {
width: 200px;
border-right: 1px solid #369;
margin: 0;
padding: 5px;
vertical-align: top;
}

#content {
width: 500px;
border: none;
margin: 0;
padding: 5px;
vertical-align: top;
}

#footer {
width: 100%;
border-top: 1px solid #369;
margin: 0;
padding: 5px;
}

HTML source code

<hmtl>
<title>webpage title</title>
<link rel="stylesheet" type="text/css" href="styles.css">

<body>

<div id="wrapper">

<div id="header">
Your Website Header Goes Here.
</div>

<table id="table">
<tr>
<td id="empty"></td>

<td rowspan="2" id="content">

This is the second table data cell in the first row and contains the main content of your webpage. Notice how it spans two rows and inside the source code, it now stands above the sidebar content.

</td>

</tr>

<tr>
<td id="menu">
That´s the table data cell which contains the sidebar (menu) content.
</td>
</tr>

</table>

<div id="footer">
Your Website Footer Goes Here.
</div>

</div>
</body>
</html>


Feel free to copy the codes from the boxes above, experiment with them and modify and use them for your websites. Get my HTML video tutorial if you want to learn html with ease.

]]>
http://www.easywebtutorials.com/blog/2006/08/09/html-table-trick/feed/
optimizing your web pages for higher search engine rankings http://www.easywebtutorials.com/blog/2006/08/08/web-page-optimization/ http://www.easywebtutorials.com/blog/2006/08/08/web-page-optimization/#comments Wed, 09 Aug 2006 05:45:15 +0000 guido http://www.easywebtutorials.com/blog/2006/08/08/web-page-optimization/ Optimizing your web pages and your website structure for higher rankings in the search engines is no rocket science. However, a well optimized website doesn´t guarantee high rankings, as there are way more factors that influence the rankings of your webpages. This article talks about the on-page and on-site factors in search engine optimization.

I recommend you read Google´s webmaster guidelines first. This short document tells you how you should structure your site and gives you tips about what Google considers quality content and also the kinds of techniques that you should avoid.

Now, let´s talk a bit more about how you can exactly optimize a single webpage to rank well for a given search term and let´s take this page as a practical example. To optimize this page to rank well for the keyphrase “higher search engine ranking“, quite a popular and very competitive keyphrase, I would do the following:

1) Include the keyphrase within the HTML title tag (see page title in your browser) and in the meta keywords tag. In the meta description tag I would only try to include secondary (similar) keywords, because repeating your main keyphrase too often may cause the search engines to think you´re trying to trick them. Over-optimization can actually hurt your webpage´s rankings.

<meta name=”keywords” content=”higher search engine ranking, rankings, optimization, seo, meta keywords tag, optimize”>
<meta name=”description” content=”This article explains how you can optimize your webpages for better search engine rankings.”>

2) Include the keyphrase in the h1 heading ( see above )

3) Include the main keyphrase 2-5 times in the webpage content, depending on the total amount of content. If it makes sense, try to include it in bold text or in subheadings (h2, h3). But you shouldn´t repeat the same keyphrase too often, otherwise it could be a spam signal and the search engines could drop your webpage´s ranking.

That´s as far as the content goes. Another important part is that the source code of your webpages is clean, valid and not cluttered with lots of style tags. There should be more real content in the source code than HTML tags, style attributes and other codes. Therefore I recommend that you use CSS and define all style rules in an external stylesheet.

Finally, try to place the most important content (starting with the h1 heading and the text below it) as high as possible in the source code. Website layouts with a sidebar (menu) on the left have the problem that the content of the sidebar ( links, ads, etc … ) comes first inside the source code, thus watering down your actual webpage content. So, from the SEO point of view, a sidebar on the right would be better.

Fortunately, there´s a design trick with HTML tables that allows you to move the left sidebar below the main content inside the source code in order to optimize your webpage layout for a higher search engine ranking. I will explain this briefly in the next article, but if you study the simple website templates included in my HTML tutorial, you will quickly find it out.

P.S.: if you try to find this page in the search results for “higher search engine ranking”, you will probably get disappointed. It´s a very competitive term with currently over 60 million results and it takes more than on-page optimization to achieve top rankings for a webpage for such a keyphrase.

To learn more about the off-page factors in search engine optimization, I recommend you download and study this free SEO book (right click and choose “save target as” to download the book).

]]>
http://www.easywebtutorials.com/blog/2006/08/08/web-page-optimization/feed/