• Choose a category
• All
• Classic-Fiction

By Root 673 0

showing the programmer and the end user a traditional left-to-right reading order, are simply code that is meant to render visually left to right in a browser. However, the code is written as instructions, starting with the top-left cell and the subsequent leftmost column. The instructions then move on to the next column, starting at the top, and so on. Older mobile browsers cannot render the left to right instructions on the screen, so the table columns appear “stacked” in a linear layout, which causes an appearance of an unorganized layout.

The Costco website appears to make sense when looking at the browser-based rendering and reading of the code, but when linearized, everything is then stacked up and looks unorganized (see Figure 15-3).

There are many solutions to this dilemma. One solution would be to create a mobile-friendly website that will enable visitors to access the information that is critical to them. The type of business you have and how customers interact with your information would determine the type of mobile site you would offer. Another solution would be to redevelop your website into a CSS-based layout, with consideration for mobile access. This would be a significant investment, but it is an investment that has far-reaching benefits, because the CSS-based layout enables your website to be rendered on multiple devices, multiple browsers, and multiple operating systems.

a

b

Figure 15-3: Costco.com: computer page table-based layout (a) and then with the same page linearized (b)

CSS

With CSS, website development took a leap forward, because the ability to separate the instructions for layout, design, text attributes, and many other visual elements were able to be distilled into single document. This document would reside on the server, and each page of the website would simply call out the instructions from the central document, and the design would be applied to the page. Figure 15-4 shows an example using www.csszengarden.com.

The same base code is used in each of the designs. The only change to the code in each page shown is the callout to a specific CSS style sheet that controls the design, layout, and text markup. This callout is contained in the heading of the code (see Figure 15-5). The callout is as follows: