Page Layout
Q1. Colspan & Rowspan
The colspan attribute is used in the table element to merge a cell across two or more columns. This attribute can be very useful when creating a title for a table of more than one columns as the header cell will need to take up all cells across columns to indicate it is the name of the table.The rowspan attribute is also used in the table element, however instead of merging cells across columns it merges cells across multiple rows. It can be very useful if you have several columns and rows in a table and you need the first row to cover the cells down in order to categorise the rest of the rows. I've created a mock html table on my website (here) as an example of how colspan & rowspan are used. The table contains information about Sunshine Camp Attendees in four columns (group, first name, last name and age). To give the table a title that spanned all four columns I used colspan. Each individual attendee is represented by a row, however the attendees are grouped their group number and as such that row has to cover 3 rows per group. I used rowspan in order to do this
Q3. Coding Tables
Coding up tables is a painful experience. There's a lot of html involved in simply getting a few rows and columns together, for example, the table I used in the previous question has 8 rows and 4 columns but the html from <table> to </table> was 47 lines. So one serious downside to using tables is the amount of the code as the table scales. The complexity of the code is another consideration, to set up a table you have several tags and you often go a few tags deep before you input any text. In this example <table>--<tbody>--<tr>--<td>some text</td> it is the forth tag before some text is input, this makes the code unwieldy to work with and read. I don't necessarily see any upside to using tables when the functionality can be replicated used <div> with some css styling which would have significantly less code that would be easier to work with and maintain.
The colspan attribute is used in the table element to merge a cell across two or more columns. This attribute can be very useful when creating a title for a table of more than one columns as the header cell will need to take up all cells across columns to indicate it is the name of the table.The rowspan attribute is also used in the table element, however instead of merging cells across columns it merges cells across multiple rows. It can be very useful if you have several columns and rows in a table and you need the first row to cover the cells down in order to categorise the rest of the rows. I've created a mock html table on my website (here) as an example of how colspan & rowspan are used. The table contains information about Sunshine Camp Attendees in four columns (group, first name, last name and age). To give the table a title that spanned all four columns I used colspan. Each individual attendee is represented by a row, however the attendees are grouped their group number and as such that row has to cover 3 rows per group. I used rowspan in order to do this
Q3. Coding Tables
Coding up tables is a painful experience. There's a lot of html involved in simply getting a few rows and columns together, for example, the table I used in the previous question has 8 rows and 4 columns but the html from <table> to </table> was 47 lines. So one serious downside to using tables is the amount of the code as the table scales. The complexity of the code is another consideration, to set up a table you have several tags and you often go a few tags deep before you input any text. In this example <table>--<tbody>--<tr>--<td>some text</td> it is the forth tag before some text is input, this makes the code unwieldy to work with and read. I don't necessarily see any upside to using tables when the functionality can be replicated used <div> with some css styling which would have significantly less code that would be easier to work with and maintain.
Cognition
Q4. ZA News Websites
Looking through a number of South African websites such as Cape Times, Spotlight News and the Sunday Times you start to notice a number of design qualities that they share. For example, the colour red in text, border, buttons and so on is ubiquitous, perhaps related to the fact the red is an important colour in the South African flag. There is also a heavy presence of pictures across the sites, with most sites having a picture per article. The sites tend to use a very definite column structure on the homepage usually having 3 columns across that continue all the way to the footer. The forth feature that they share is the presence of social media icons in very central locations, either in the navigation bar or in the header.
Q5. USA News Websites
United States news websites including; The Washington Post, Los Angeles Times, Chicago Tribune and the New York Times also share a lot of design and layout features. One stand out feature is the amount of content and cluttered style of the sites, particularly the home pages. They tend to scroll to an indefinite amount of content. Another similarity across them is the use of a particular style of font for title of the paper, which seems to be Old English Text MT, Cloister Black or similar. It makes the name of the news site stand out from the rest of the content so you know almost immediately what the name of the site you are on is. In terms of the layout, they employ a series of columns to display news articles with the column on the far left being breaking or most relevant news which seems to lie with research showing where browsers eyes track when they land on your page. A fourth feather they share is a section & search icon in the top left hand corner all using the same icon meaning that no matter what site you land on you immediately know how to find the icon that will allow you to search the site or navigate to the section you want.
Q6. ZA v's USA
The US sites and South African sites aren't massively dissimilar at first glance. However, having spent a good bit of time perusing them, there are a number of differences. For example, I would say that the US sites are much more cluttered than the South African sites. Pictures feature much more and take up more space in the South African news websites in comparison to the US ones. US sights are more consistent, a lot more similarities and once you've become familiar with one you begin to know your way around the others. This is not the case with the SA sites.
Q7. Flat UI Design & Skeumorphism
a) Flat UI design is a two dimensional design technique used to make the website as simple as possible to use while maintaining a visually impression look via open space, bright colours and flat images. It is minimalism applied to web design, where all non-essential elements are pared away, focussing the user on the the key functionality or content. The website for Huxtaburger (fast food restaurant in Australia) is a good example of how to implement flat design in that it is neat and tidy, has very simple content and the page colours are bold and bright.
b) Skeumorphism is a rich design style that attempts to make elements of the site resemble real objects that people interact with and as such will be able to easily use and navigate. A lot of work tends to go into this design style. For example, this designers website is set up to look like a noticeboard you may find at home or in a coffee shop. Each pinned item represents a category of work for the designer and when you click one of them it brings you in to his portfolio for that category (clicking into the photos category will show photo's displayed as a old photo film roll). Also, there's a vinyl music player at the bottom left which you can drag vinyl onto and play. Very cool!
Looking through a number of South African websites such as Cape Times, Spotlight News and the Sunday Times you start to notice a number of design qualities that they share. For example, the colour red in text, border, buttons and so on is ubiquitous, perhaps related to the fact the red is an important colour in the South African flag. There is also a heavy presence of pictures across the sites, with most sites having a picture per article. The sites tend to use a very definite column structure on the homepage usually having 3 columns across that continue all the way to the footer. The forth feature that they share is the presence of social media icons in very central locations, either in the navigation bar or in the header.
United States news websites including; The Washington Post, Los Angeles Times, Chicago Tribune and the New York Times also share a lot of design and layout features. One stand out feature is the amount of content and cluttered style of the sites, particularly the home pages. They tend to scroll to an indefinite amount of content. Another similarity across them is the use of a particular style of font for title of the paper, which seems to be Old English Text MT, Cloister Black or similar. It makes the name of the news site stand out from the rest of the content so you know almost immediately what the name of the site you are on is. In terms of the layout, they employ a series of columns to display news articles with the column on the far left being breaking or most relevant news which seems to lie with research showing where browsers eyes track when they land on your page. A fourth feather they share is a section & search icon in the top left hand corner all using the same icon meaning that no matter what site you land on you immediately know how to find the icon that will allow you to search the site or navigate to the section you want.
Q6. ZA v's USA
The US sites and South African sites aren't massively dissimilar at first glance. However, having spent a good bit of time perusing them, there are a number of differences. For example, I would say that the US sites are much more cluttered than the South African sites. Pictures feature much more and take up more space in the South African news websites in comparison to the US ones. US sights are more consistent, a lot more similarities and once you've become familiar with one you begin to know your way around the others. This is not the case with the SA sites.
Q7. Flat UI Design & Skeumorphism
a) Flat UI design is a two dimensional design technique used to make the website as simple as possible to use while maintaining a visually impression look via open space, bright colours and flat images. It is minimalism applied to web design, where all non-essential elements are pared away, focussing the user on the the key functionality or content. The website for Huxtaburger (fast food restaurant in Australia) is a good example of how to implement flat design in that it is neat and tidy, has very simple content and the page colours are bold and bright.
b) Skeumorphism is a rich design style that attempts to make elements of the site resemble real objects that people interact with and as such will be able to easily use and navigate. A lot of work tends to go into this design style. For example, this designers website is set up to look like a noticeboard you may find at home or in a coffee shop. Each pinned item represents a category of work for the designer and when you click one of them it brings you in to his portfolio for that category (clicking into the photos category will show photo's displayed as a old photo film roll). Also, there's a vinyl music player at the bottom left which you can drag vinyl onto and play. Very cool!
No comments:
Post a Comment