I wrote an article on my personal site some time ago and it has gotten consistent traffic over the past 8 months. So I thought I’d expand upon that original article and put my developer hat on for a little while.

Why are iFrames bad?

• They are not web standards compliant.
• Content in the iFrame will be treated as a separate page by the search engines.
• iFrames don’t work in all browsers.
• iFrames are hard to style, my alternative is easier.

Now I really don’t want to get into a ‘web standards’ debate with anyone. I find that using XHTML and CSS to create web sites, and generally conforming to the standards, to be the best way for me to make web sites.

So what is an iFrame Alternative?

The alternative iFrame does not use the “iframe” tag what so ever, instead we are using simple CSS to create a ’scrolling div’ – making it standards compliant. How does it work? Read on:

First, you need a DIV placed around the content you want contained in the iframe/scrolling div. I’m going to give the DIV a class of “iframe”. Then, place your content as you normally would in that DIV (as seen below):

<div class="iframe">
<p>Here is some content.</p>
</div>

Next up is the CSS. You can either put this in your CSS file (good), or place it in the actual HTML document as an inline style (bad).

In our CSS file we’re going to style the class we created, called ‘iframe’, to include the following CSS properties:

.iframe {
width: 400px;
height: 100px;
overflow: auto;
}

The ‘overflow:auto;’ element above is the key. It is what will add the scroll bars to the div with a constrained width and height.

The sky is the limit from here, some things you can also do include:

• Add borders.
• Background colors and images.
• PHP Includes.
• Position the scrolling div anywhere on the page using CSS.
• Add javascript effects, such as an open/close box.

Example of the alternative iFrame or ’scrolling div’

Whether a site is big or small, there will be limits to what can be altered if it is not being actively redeveloped it. It might be branding that’s the headache, or it might be the CMS; it might be the legal department, or it might be the cranky CEO (no offence to CEO’s, being a CEO is tough… or so I’m told). In many cases it’s the lack of authority and support given to in-house SEO leads.

This post assumes limited access to web dev resources, and no design resources.

Fail-safe approach …pretty much

First, conduct an SEO Gap Analysis.

Once the site’s current level of optimization has been assessed, an easy and effective way to move forward is proposed below:

1. Basic, Quick Fixes

• Conduct effective keyword research
• Sort out the canonical issues, redirect using .301s
• Ensure that there is a custom 404 error page
• Review the robots.txt file (is …/images disallowed? – that’s not unusual, and it’s also probably not a good thing…)
• Alter the titles, META data, ALT attributes and copy to reflect the primary keywords
• Make these visible elements enticing and use marketable copy while sticking to Google’s 70 character limit for titles and 170 character limit for META descriptions (check the logs files, going on a limb here, but I’ll guess that the majority of most sites organic search traffic comes from Google.)
• Keep that core focus on usability.

2. Slightly Tougher/Longer Fixes

• Rewrite your primary URLs utilizing primary keywords without resorting to http://www.mysite.com/products/white-mother-of-pearl-inlaid-japanese-feng-shui-foot-massager-free-delivery/ *gasp*
• Clean up the code
• Rework the copy including headers and ALTs to reflect the keyword research.

3. Conduct a Major Backlink Campaign

• Without moving into the realm of redevelopment, that’s about all that can be achieved on-page… but if these changes are supported with an effective ongoing backlink campaign, there will be search engine exposure and ranking improvements..

Please give us your thoughts, comments and ‘the bits we missed’ below in the comments!

This is not to say that if you have a site that has no SEO you should consider it a lost cause. In fact is you have a site that is not going to change any time soon, tomorrows post might be of more interest. This post is going to focus on where and how to integrate SEO best practice to a new web project.

In a perfect SEO world these are the 10 steps I would follow in approaching every web redesign or new development project:

I have not covered every element of IA, design or the other disciplines mentioned. I’ve also taken the (admittedly big) liberty of assuming the client simply agrees with everything we suggest in the interest of expedience, and I assume that the client has bountiful human and financial resources…

1. SEO RESEARCH – Conduct Online Market and Keyword Research.

• This is not a post about keyword research. This is.
• Once you’ve conducted the keyword research, determining which of the phrases are of the most importance to your users and your business, and which you have a shot at getting is the next step. Compile a list of the primary phrases for which you would like to have you site rank well in the organic results.
• Each primary keyphrase should be supported by a list of at least 10 variations on the primary phrase. For example, phrase expansions with additional words, different suffixes, etc – call it the long tail.

2. INFORMATION ARCHITECTURE – Provide These Lists of Keywords to IA

• IA is about usability and so is SEO. They are not mutually exclusive disciplines. Integrate them whenever possible. SEO and IA should work together in determining what search query language speaks to which search query intent.
• IA then proceeds to develop a page for each primary term, map the navigation effectively to keep folder levels to a minimum, and name the primary navigational elements and URLs based on the primary keywords. All within reason. 
• IA then would work with SEO to determine which, if any, of the supporting keywords should have a dedicated page, and which should just be left for copy to work into the body content. While we would like the web site to rank in the search engines for relevant keyphrases, there is no point from a usability perspective to have seven pages with basically the same content but different keywords in the title and copy. This is also pretty much not a great idea as far as the spiders are concerned. An example would be creating a page each for ‘natural wart treatment’, ‘alternative wart treatment’, ‘wart treatment’, ‘wart removal’, ‘natural wart removal’ etc all for the same product with the same content, but swapping words in the titles, headers, copy and so forth to be ‘relevant’ for the targeted term.

3. SEO COPY – Site Plan to be Passed to SEO Copy writers

• Copy now has the page outline, the primary keywords as per the URLs to include in the headers, title and META data tags, and a full list of long tail terms to utilize within the pages in case they run out of inventive steam.
• SEO Copy is a smidge different to let’s say ‘normal’ web copy. It’s not ‘better’, it just has a slightly different deliverable objective, which incidentally speaks more to usability than flowery brand speak which is the norm on most branded sites today.
• SEO copy would then be mapped to the site plan

4. DESIGN – Site plan with SEO copy to be passed to Design

• SEO to brainstorm basic design options with design.
• It’s pointless to squeeze the designers too hard. Flash is fine, so is Ajax and just about everything else – within reason, and not in any of the navigation elements – that would just be silly .
• Usually designers are not too precious about molding to fit SEO requirements when they understand what the objective is, and as long as they know they can make it ‘look GREAT’. That is after all their job.
• Designers are professionals. They know what to do. They know what will look good and appeal to the users. Sometimes it is just a case of explaining the SEO objectives. Not all designers know what SEO is. I would venture that clarification and communication should start with SEO as that is usually where the confusion lies.
• Explaining the importance of the navigation elements and image placements will also provide some guidance. Optimizing images is important. Image search is the second most popular search activity. Relevant contextual placement is part of what is called ‘image optimization’.
• Involve development and SEO with design in a meeting to cover all the facets of the designs before showing the flats to your client.

5. SEO COPY – Approved Flats Go Back to Copy BEFORE Flats go to Client

• Flats go back to SEO copy for tweaking on sub-headers and other areas that have been highlighted by design.
• Image ALT attributes and image names are created and inserted.

6. DESIGN – SEO Copy Tweaks Back to Design

• Penultimate flats produced.

7. QUALITY ASSURANCE

• Each lead team member (SEO, IA, Copy, Design and Development) independently reviews the flats.
• A final meeting is held to thrash out any issues, concerns or to highlight any errors or trouble-spots.

8. DESIGN – Final Client Facing Flats Produced

9. DEVELOPMENT – Receive Approved Flats and Other Relevant Information

• Provide the approved the final design flats along with design requirements.
• Web dev now has the URL and image naming structure protocols, the title tags, META data and ALT attributes as well as the approved copy to insert.
• Your developers must have SEO knowledge. Don’t hand a fully optimized project to an ‘un-SEO-educated’ dev.
• Start each dev project with a meeting with SEO to ensure that everything that needs to be done for the project is fully understood. Not all web devs know very much about SEO – a lot do, but not all. Devs are smart, but like design, they sometimes need a little clarification.

10. MANAGEMENT

• If the SEO lead is not entirely involved in every part of the project, there is a pretty good chance there will be train-wreck at some point. If the client objective is optimization, then SEO is the primary lead. SEOs are also kind of smart, and they can keep it together.
• Not all of SEO’s are evil. If you are a client, or a company that is considering a redesign in-house, make sure your SEO lead has management experience, and that he or she is not a push-over. In the real world there are a lot of egos, each fighting for what they legitimately feel will be the best deliverable for the client.
• If it’s SEO’s call, give them that authority.

11. BONUS STEP
The most vital long-term element of this whole effort is to get backlinks which utilize your core phrases in the anchor text. Get going on that while dev is underway.

In the next post we’ll poke our noses a little further into this topic and consider integrating SEO into an existing website.