Visible And Invisible Web Design

Visible and invisible web design refer to two parts of basic web design and development. The layout and look and feel (Visible, design), and invisible (Tags, CSS, Meta, Coding). These are the 2 fundamentals of web development.

VISIBLE WEB DESIGN

The simplest approach to web page design is to use tables and place text, images, links etc in cells of the tables. In this way it is possible to create attractive layouts, with lots of white space and also make it possible to place images easily as well as to align objects. It allows color application, text font variation and so on.

Do not use frames. Search engines are confused by frames.

A SIMPLE LAYOUT OF WEB PAGES

Almost all websites or web pages involve the extensive use of tables for layout purposes. Tables really are extremely useful. However:

TWO WARNINGS WHEN WORKING WITH TABLES

1. Never put everything on your web page in one large table. If you do the visitor will see nothing on screen until the complete table has been loaded. This is obviously bad news in a situation where you have an impatient visitor click through to your site. These days this means nearly everybody.

Knowing this you can now help yourself and your visitor by including at least the headings and maybe more outside of the table in this way your visitor has something to look at and read while the rest of the page loads.

You will not normally come across this information anywhere. It is assumed it is known and of course it is NOT widely known. It cost me a lot of extra work when I realized the mistake I had made initially.

A number of smaller tables are better than a single big table for the same reason.

2. When a search engine spider comes across a table it reads the content in the top left cell and then the next one to the right until it has finished reading the first row. If you do use a table at the top of your page then do not place your links in the first cell on the first row unless you want these to be read first by the spider.

You have almost certainly seen during searches that the text beneath the TITLE says link1, link 2, link 3 etc. This is not what the designer expected the searcher to see. It happened because this information was placed into the top left hand cell.

Let me try to explain this important step and at the same time show you a bit of HTML and how it instructs the appearance of a web page. This 4-celled table in the picture below was first constructed…

Below is the HTML generated by Expression Web to create the table.

Remember Expression Web is a WYSIWYG editor meaning it creates the HTML for you. You just tell Expression Web to create a 4-celled table using a basic menu similar to MS Word, its as simple as that.

Basic HTML Table

Now lets place some text in the table as below and just assume the word LINKS represented the actual links you might want to include on your actual web page .

Placing Text In A table

Take a look at the corresponding HTML:

Corresponding HTML In Table

Notice the first text is the word LINKS and this comes before your KEYWORDS. Notice the next entry after KEYWORDS is the content of the left hand cell on the second row . STORY.

Table For HTML

In practice you possibly want a search engine to see the KEYWORDS before it sees the LINKS.

To make sure that your KEYWORDS are seen first by the spider and that there is no interference form the LINKS complete the table as below.

HTML Table Design Layout

Now take a look at the HTML for this design layout. The first text any spider will see is LINKS exactly as you intended.

Of course you could place your heading containing important keywords before the table as follows:

and the HTML for this layout is:

Example HTML Coded Table

The conclusion is that it is good practice to place your heading containing important keywords before a table and leave the first cell of a table empty to force the spider to read important text before it reads links. This sounds simple and it is but you will be hard pressed to find this important information anywhere.

Before and above my main heading I tend these days to place a surheading which is something I learned from Michael Fortins book. A surheading goes just above the main heading. We will discuss this later, for the time being take note of this.

I also tend these days to place internal site links right at the top of the page in a shared border area. These links always contain my important keywords.

The best place to show links is at the top of a page or down the left hand side based upon surveys of web surfers.

INVISIBLE WEB DESIGN

I am not referring to one of the common search engine spam tricks keywords are repeated time and again converted to white text and placed on a white background Humans cannot see and at one stage neither could search engines but they found out. Consider tricks like this a serious infringement of Googles business ethics never mind your own. Dont even think about it.

By invisible web design I refer to that bit of HTML you do need to get to grips with. Forgive me here but I can only explain what I mean using Expression Web as the example. I am sure similar commands or instructions are to be found in other programs.

Essentially all web pages are made up of Head and Body. Body eventually becomes seen on a website screen for all to marvel at.

Head is not seen by the casual visitor but is always looked at by search engines and good web designers/Seoers.

Take a look at this HTML coming up just below here. First let me explain how I got it and where it came from and then you can try it yourself.

I went to Google search, typed good cheddar cheese (no inverted commas) and clicked on the SERP in number 1 position. This site happened to be this shown below.

Google search webpage example

Below is the Google return for the search I did. The TITLE was Cheddar Cheese Debate as you can see below. Google always puts the TITLE of a website first in large blue letters and underlines it because it is a web link allowing the searcher to go to the site.

We have discussed this before but you will notice the TITLE does NOT appear on the actual visible web page. The apparent title of the page is more accurately the Heading. Not Your Childhood Cheddar is not the site TITLE as far as a search engine is concerned. The TITLE is Cheddar Cheese Debate as you will see below.

Google Search Examples

So where did Google get this information from? It got it from the invisible web HTML in the HEAD section. Confirm this by looking below.

Page Source HTML Code

You view this HTML by right clicking anywhere on the web page. Then select view source and there it is ready for copying and examining in the greatest detail if you want.

Note the two sections Head and Body. All web pages have Head and Body. Head is important to Seoers and search engines and especially website owners.

Do you know the TITLE of your own web pages? You should because your important keyword must be in the TITLE to stand any real chance of being found on a Google SERP for most keywords.

<TITLE> in the Head section is where every search engine finds the web page title.

This is why you need to understand a little bit of HTML so you can find out about anyones title and a few other important things.

You no doubt noticed that the body contained the text that appeared on the actual website.

This site is a great example of no flash, no pictures nothing but text. But it got number 1 page 1 on Google out of 86,400.

Remember this page forever, recall it whenever you are tempted to add that one extra picture to your web page a good page does not need to be full of pretty pictures to succeed.

This page re-emphasizes the importance of content.

Pin It on Pinterest

Shares
Share This