Stallion Responsive The Holy Grail SEO Layout

Comment on Stallion WordPress SEO Theme by SEO Dave.

The quick answer is no, the max width is the 1,000px wide no sidebars layout set under the “Layout Options” : “Sidebar Layout” – “12 – Main Content : No Sidebars”.

With this setting in a Desktop device the main content width is around 1,000px and the left and right widget areas drop below the main content into two widget areas: two side by side footer widget areas.

There are several reasons why there isn’t say a 1,300px wide layout or a fluid layout.

To have 12 desktop layouts with varying types of left/right sidebars and main content widths whilst using the exact same SEO HTML output (the main content loads high in the code no matter which layout is set) is REALLY difficult to achieve: look up the “Holy Grail Layout”, Stallion Responsive uses a custom SEO version of the holy grail layout (took me weeks to iron out all the CSS layout problems, was a huge achievement getting it to work for 12 layouts). I doubt any other theme can achieve the same as the Stallion Responsive Holy Grail SEO Layout for so many different layout sizes.

If you compare the code source (the HTML output in a browser) of a Stallion Responsive left sidebar layout vs a Stallion Responsive right sidebar layout you will find they are identical : achieved using different CSS files only.

The Stallion Responsive HTML output is:

Head Area : Home Page Link, Tagline…
Main Content : Most Important Content (we want this high in the HTML code)
Left/Right Sidebar : Widgets, Sitewide Content Not Important (we want this low in the HTML code)
Footer : Widgets, Sitewide Content Not Important (we want this low in the HTML code)
Navigation Menu : Sitewide Links, Not Important (we want this low in the HTML code)
Social Network Links : Stallion loads an iFrame with Facebook, Twitter links… for SEO reasons

The above is important SEO wise, main content is high in the code source and less important content is pushed to the bottom (loads last).

If you use a random WordPress theme with a left sidebar layout, the vast majority of the time you’ll find the HTML code for the left sidebar loads above the main content.

Head Area : Home Page Link, Tagline…
Navigation Menu
Left Sidebar
Main Content : This is in the wrong place
Footer

If you use a random WordPress theme with a right sidebar layout, the vast majority of the time you’ll find the HTML code for the right sidebar loads below the main content.

Head Area : Home Page Link, Tagline…
Navigation Menu : Ideally would be lower
Main Content : This is almost in the right place
Right Sidebar
Footer

If you use a random WordPress theme with a left and right sidebar layout, the vast majority of the time you’ll find the HTML code for the left sidebar loads above the main content and the right sidebar loads below the main content.

Head Area : Home Page Link, Tagline…
Navigation Menu : Ideally would be lower
Left Sidebar
Main Content : This is in the wrong place
Right Sidebar
Footer

The Stallion Responsive Holy Grail SEO Layout is as good as it gets SEO wise, doesn’t matter which layout is set the HTML output is always the SEO version and to achieve this requires a fixed width and I had to choose a maximum width due to header/banner image sizes. For non Stallion Responsive theme users you might take always from this is avoid using themes with a left sidebar, they aren’t as SEO friendly.

All the Stallion Responsive headers and banner images have a maximum width of 1,000px. This a compromise between having flashy features (big image at the top of a page) and image size (smaller image sizes are better SEO wise). Had we started with a 1,300px wide header image rather than 1,000px wide it would have a negative SEO impact.

On Layout Width Trends

The trend has moved towards mobile first design (smaller layout widths), not wide layouts per se (Desktop output is becoming secondary) as more users are accessing the web using mobile and tablet devices.

Stallion Responsive has 12 mobile/tablet device sizes covered to account for the vast majority of mobile phones and tablets on the market today. Any device width below 800px on the screen has the browser output (what you see on the webpage):

Head : title of site, Header/Banner Image, responsive navigation menu
Main Content
Sidebar Widgets
Footer Widgets

It still uses the same SEO HTML output listed earlier, the CSS code outputs all the different layouts without changing the HTML output that Google cares about.

Since mobile first design is the new norm I’m planing in the future to start again from scratch (not planned exactly what to do yet and it’s a while away).

Currently working on pulling out a LOT of the SEO features from the Stallion Responsive theme to put them in the Stallion WordPress SEO Plugin (which is free) and other plugins. In the next Stallion WordPress SEO Plugin release (working on version 3.1.0) the meta boxes (found on Post Edit screens etc…) for Stallion Responsive SEO titles (and Yoast SEO and All In One SEO titles/meta descriptions etc…) and Stallion Responsive Keyphrases (1-4) are part of the plugin.

The current plan is to remove those meta boxes from Stallion Responsive 8.5 (the next theme update) so users can install the Stallion SEO Plugin to access those SEO features.

Other theme developers will also be able to create new themes which use the Stallion WordPress SEO Plugin features that are currently only available in Stallion Responsive.

The plan is to do the same with other SEO features, for example the Stallion Responsive Layout Option : Display Widgets has been significantly improved and added to a new plugin called Display Widgets SEO Plus (it’s free). The new plugin has a lot more widget logic options, works with the WPML language plugin, BuddyPress/bbPress and WooCommerce (it’s much better than the Stallion Responsive built in version).

By breaking Stallion Responsive up into modules (stand alone plugins) will make updates far easier for me. I currently have to do huge theme updates and though Stallion Responsive is awesome SEO wise, the SEO features are all locked into one SEO theme.

When it’s all broken up it will be possible to create new themes (or modify current themes) to use Stallion Responsive features (via plugins) without using Stallion Responsive: a fluid width design with a right sidebar layout for example wouldn’t need the full Stallion Responsive Holy Grail SEO layout code as it wouldn’t have a left sidebar version: could then have a wider (fluid) main content area.

Don’t ask when, it’ a huge amount of work as it’s taken about 10 years to put all the SEO features into one theme :-)

David