Internet Marketing - Matt Bailey [171]
Wednesday: Test Your Site Search
Thursday: Consider Site Maps
Friday: Use Local and Mobile Marketing
Monday: Compare Tables and CSS
When I bring up this topic in seminars, I immediately can see who knows what is coming simply based on the reactions. Marketers who have no idea about this will stare at me with “deer in headlights” regret, thinking that they have stumbled into a programming class. Programmers and developers, who are familiar with this, know that they can take it easy for a half an hour, because this is old knowledge to them.
If you’ve done any amount of programming, you’ll be familiar with the concepts of tables and Cascading Style Sheets (CSS). For marketers, these are layout instructions that build a page. Tables are a method of arranging content on the page. CSS does the same but goes further than simply location-based instructions; CSS includes color, size, action, and more, and it does it in a very elegant manner when compared to the traditional HTML programming, which uses tables.
Tables
Tables are a simple way of laying out content, and this was the primary method of building a page in most early What You See Is What You Get (WYSIWYG) website development tools. By making layout easy for the nonprogrammer, programs would build code and arrange the images, text, and objects into a table-based format.
Picture building a website in a spreadsheet—you can merge tables for larger fields and lay out paragraphs in the places you want them to be. However, if you add a picture, it will make that row and column extremely large when compared to the rest of the rows in order to accommodate the dimensions of the image. So, if you want to align the text around the image, you have to start merging cells, rows, or columns in order to make the content flow around the image.
Figure 15-1 shows the table-based layout of the computer content on the Costco website. When only looking at it from a layout perspective and blocking the images, you can begin to see the structure of the website’s layout. You can see the block-type layout for each product and category outlined; some cells are merged, and some cells contain many other cells in order to show the information in the right order.
This type of layout is why many websites do not render well on smartphones. Until the iPhone came out with the Safari browser, most smartphones were not able to render websites the way they were intended. How the older generation of smartphones renders a website is similar to how the search engine reads a web page. Both view the code from top to bottom as a linear set of instructions. In doing so, the table-based layout is read in order from the top-left column to the bottom-right corner. The search engine and the phone read the code from top to bottom and display it likewise, even though the table-based layout creates a left-to-right design that is viewed in browsers. This is called linearization.
Figure 15-1: Costco.com’s table-based layout
Some mobile browsers do not have the capacity to render web pages similar to what one would see on a computer. The processors just aren’t able to handle the instructions. Older smartphones have trouble with sites that use tables. Navigation is hard to find, content is near the bottom, and nothing is in the right place—it all appears chunky and out of order. This is the result of a table-based layout. The new generations of smartphones, such as the iPhone, Android, and Windows phones, however, are able to render the website on the phone just as one would see it on a computer browser.
On both search engines and some smartphones, linearization will read the top-left cell first and then everything in the left column. At the end of the column, the top of the second column and everything in that column will appear, and then subsequent columns will be read and rendered (Figure 15-2).
Figure 15-2: The rendering and reading of a table-based layout is column by column.
This is simply based on the code and how it is read and rendered within each device and browser. Tables, while visually