Lab 3 - Starting CSS

Coding Tables

The colspan and rowspan attributes communicate to the browser to display a cell that spans the width of multiple lower-level columns or rows. The colspan attribute specifies the number of columns that a cell will span and rowspan attribute specifies the number of rows a cell will span.

For example in the following table the colspan attribute is used to display one column cell labelled Annual Sales Volume in the first row which covers the four lower-level columns underneath. Similarly the rowspan attribute is used to display a single cell in the upper-left corner that spans the width of two column rows.

 
The following is a snapshot of the code used to create the above table . Line 12 shows the rowspan attribute used within the table data tag and was given a value of 2. Line 13 shows colspan used with the table label tag and given a value of 4 followed by the name of the column label.

It was easy to write the code for the first table seen in Example One above as the table followed a basic orderly structure. It is the type of table that is straightforward to read left to right in rows which makes it easy to visualize beforehand therefore it was obvious which parts of the code to write first.

Using a table to format a webpage was more difficult. It was necessary to examine the webpage layout beforehand to organize the table and determine which page sections go into which area of a table. In writing the code it was not obvious which table tags to  use. There were further attributes to consider that were not immediately obvious such as setting the table border to 0, specifying how wide the table cells should be relative to the webpage and aligning the cell contents. In doing this exercise I referred back to the examples and needed to edit the code a lot more to get the webpage to display correctly and further work is necessary to separate and style the contents of the table properly.

Cognition

The South African newspaper websites listed on http://www.onlinenewspapers.com/  displayed the following common features:

1. Colour - The websites use white backgrounds with black text and some red, blue and grey text.

2. Layout – The layouts use multiple columns with a header and navigation section at the top of the page, content in the middle sections and a footer.

3. Content – The content is mostly text with some photographs and is organized by news type eg News, Sport, Lifestyle.

4. Responsiveness – The webpages were easy to read and navigate on a laptop screen.

The USA newspaper websites listed on http://www.onlinenewspapers.com/  displayed the following common features:

1. Colour -The websites use mostly white backgrounds with black text and sometimes text in an array of other colours with contrasting backgrounds.

2. Layout - The layouts mostly use 4 columns with a header and navigation section at the top of the page, content in the middle sections and a footer.

3. Content - The content is mostly text with a lot of photographs and videos also. Content is organized by category.

4. Responsiveness – The webpages were easy to read and navigate on a laptop screen.

In comparison to the USA news websites, the South African news websites appear to be more basic. The USA news website display richer and dynamic content in each part of the layout. For example the header sections contain log in and subscription details and information on the weather. The USA websites have a greater quantity of main content with many of news stories  headlines accompanied by a photograph. The US websites contain several navigation areas in the header and footer.

Flat UI Design

Flat design is a minimalist web design style that does not use three dimensional visual effects in webpage graphics such as shadows, textures, outlines and highlights. 3D techniques are typically used as cues to help users understand interactive elements such as clickable buttons or text entry fields and differentiate them from other data elements. Flat design omits these effects and instead relies on icons, labels, colour and the context of the webpage, such as having clickable navigation links at the top of the page. It is a design pattern that works well on touch screen devices. This design can be seen on the Apple homepage and in Windows 8.

Skeuomorphism is the replication of the design features of everyday objects into the design of webpage objects. The logic is that this representation will help users understand the purpose of a webpage object based on experience of real world objects. For example Amazon used a bookshelf graphic as a background in Kindle for organizing digital media.