CMPU4063 Lab 3

Lab 3

Part I – Reviewing this week’s lectures

1. What do the attributes, colspan and rowspan do when using tables? Provide examples

colspan - specifies the number of columns that a cell should span in a table

rowspan - specifies the number of rows that a cell should span in a table

Here is an example of the HTML for a table I made to categorise rock types, using the attributes colspan and rowspan (information from University of Alaska Fairbanks, 2016):

Here is the resulting table:

3. How did you find coding tables? Outline positive or negative observations, providing examples

I found coding tables to be quite straightforward in terms of the basics; making columns and rows. Tables have a very clear and formulated format which appears simple once the correct tags are used. Tables can be useful for conveying information clearly, as in the rock category table above; they are clear, neat, and tidy. However, I did find it to be a bit confusing with various rowspans and colspans and putting the same tags in the right order to get the result that I wanted, when using CSS to style a page would be a lot clearer and could be applied to multiple pages to keep the same information. Also, I found the table to be quite restrictive in terms of styling, while in CSS different sections can have different tags to separate them and give them different styles such as <nav> and <footer>, it is harder to distinguish different columns and rows in a table and sections within the columns and rows to give them different styles, making tables less dynamic than CSS. I also think that if I came back to a previous table that I made it may be difficult to remember what each section was for on each page as opposed to reading a CSS sheet which styles defined sections covering multiple pages.

4. Browse some news websites in the USA (observing content, layout, colour, responsiveness ...): http://www.onlinenewspapers.com/Top50/Top50-CurrentUS.htm. State four features that these websites have in common. You should state which websites you have analysed

Websites: USA Today, The Washigton Post, Los Angeles Times, Anchorage Daily News, Miami Herald

i. Colours

All of these websites stick to a simple colour scheme; white background and black text. Some have slightly different colour headers and footers, but the overall colourscheme is plain and easy to read. 

ii. Layout

The layout for all of these websites is very similar; the homepage has the main story as the first and biggest photograph and title, at the top of the page, followed by more articles underneath. They all also have very long homepages, with the exception of USA Today. Apart from USA today, they all follow the layout of separating articles into categories such as sport, world, national, and most recent stories. USA Today's homepage is much shorter, and is the only one of the five to not have a menu or search bar at the top of the page. The articles are also laid out in a similar way on all of the websites, though some of them have ads in them while others do not. Comments at the bottom are also common, as are options to add your email address to subscribe to news letters.

iii. Links (internal and external)

All of the websites are full of links. Every article on the homepage is a link, with every article having its own page, with links at the bottom of each article to more articles on the site. There are also links on most of them to their social media accounts; twitter, Instagram, Facebook.

iv. Responsiveness 

The websites were all very responsive, each page is quick to load, the article videos begin quickly once the play button is clicked, menus load quickly, drop-down menus appear as soon as they are hovered over, and each website is fast to navigate around.

5. Browse some news websites in Hong Kong(observing content, layout, colour, responsiveness ...): https://en.wikipedia.org/wiki/List_of_newspapers_in_Hong_Kong#English-language_newspapers . State four features that these websites have in common. You should state which websites you have analysed

Websites: Hong Kong Free Press, The News Lens, The Standard, China Daily Hong Kong

i. Advertisements 

Something that really pops out in all of these websites is the large number of unrelated advertisements that populate each page. There are ads in between stories on the homepages, and there are multiple ads within each article, and at the end of each article.

ii. Colours

While the headers and footers tend to be colourful, the backgrounds of these websites are white and the text is black. 

iii. Navigation

The navigation of all of these websites are the same; the homepage has top stories, followed by smaller stories below. There is a menu bar at the top of each page which can direct to different news topics, as well as a search bar for searching for news articles. There are links to more articles at the bottom of each article, and with the exception of The News Lens, each article has its own page.

iv. Responsiveness 

These websites are quite responsive, though while clicking from one article to another there is a bit of lagging, and photographs and videos take slightly longer to load. 

6. How do news websites in the USA compare to news websites in Hong Kong? Are there any major differences?

For the most part, news websites in the USA and news websites in Hong Kong are quite similar in terms of layout, navigation, and promotion of social media links. There are slight differences, such as the USA websites are plainer compared to the Hong Kong sites which use a bit more colour. The USA websites also generally have one top story followed by smaller ones underneath, while the Hong Kong websites tend to have multiple top stories with a slide of photographs at the top of the page automatically changing every few seconds to show a different story. The USA websites appear to be more similar to each other, more uniform, while the Hong Kong websites have more differences amongst themselves. For example, every article on the USA websites has an author, its own page, black and white colour scheme, and the content is laid out quite similarly in each article. However, some Hong Kong websites have more colours than others, may or may not list an author, have different size articles, and have articles sharing the same page. While both are quite responsive, the USA websites are slightly more responsive, perhaps because they have less ads, videos, and photographs on their pages. Overall though, the USA and Hong Kong news sites seem to share more similarities than they do differences.

7. b. What is the meaning of flat design? What website uses flat design?

Flat design is a simplistic graphic design, based on using minimalist features, two dimensions, and having a clean, uncluttered look. Originally flat design faced some issues, such as being over-simplified which led to user confusion, not being able to distinguish links from normal text, and not being able to find menus or navigate a site. The newer version of flat design reincorporates shadows, gradients, colours and distinguished links to keep the simple and clean look, but avoid confusion (Blue Compass, 2019). The concept of flat design rose in popularity with the rise of smartphones such as the iPhone, which had flat design icons for apps. Websites, as well as physical companies changed their logos to fit in with the new trend, as having an outdated logo or icon meant being seen as outdated in general (Marie, 2018). Many social media websites use flat design, such as Instagram, Facebook, Twitter, and the online market website Etsy.  All of these websites have simple logos, icons, and page layouts, focusing on a two-dimensional design, and clear font such as blue underlined links compared to black text.

7. a. What is the meaning of skeuomorphism? What website uses skeuomorphism?

Skeuomorphism means that something copies the shape of another object, but uses different methods or materials, such as the calculator application on iPhones, which resembles a physical calculator in appearance and functionality (Kriyoruchko, 2019). It is seen as being a form of realism, using realistic textures, appearances, designs and functions. It has been seen as the predecessor and the opposite to flat design, focusing more on details, decorations, and similar to real life. However, the two are not necessarily opposites, and they can co-exist. The calculator app design has changed to have more of a flat-design appearance; losing the shadows, shine and realistic textures, but it still has a realistic design in terms of functionality; it is still laid out like a real calculator, meaning that while is has a flat design, it is still skeuomorphic (Beslic, 2018).