Fun with Tables and more Website analysis

Fun with Tables

The tag for a table in HTML is <table>. The rows are defined by <tr> and headers are <th>. Each data or cell is defined with <td>. The default for headers are bold text that is centered. The <td> elements would be regular and left aligned. Spanning rows and columns in a table can be done using <rowspan> and <colspan>. Remember to state how long they are spanning, i.e. colspan = "3", as seen below.

<table>
       <tr>
           <th colspan = "2">Colspan Heading</th>
           <th>Heading</th>
       </tr>
       <tr>
            <td>cell data</td>
            <td>cell data</td>
            <td rowspan = "3">rowspan<br>in<br>action</td>
       </tr>
       <tr>
            <td>cell data</td>
            <td>cell data</td>
       </tr>
       <tr>
           <td colspan = "2">colspan in action</td>
       </tr>
</table>

Here is how the above table would look. I have styled the borders and margins a little, just to make the components clearer.

        

Initially I found coding tables to be a bit of a confusing mess but I have found, with some trial and error, that best practise is to lay the table out using only the <table> <tr> <th> <td> tags as a skeleton first. The rowspan and colspan are best added after. Initially I also mixed them up, learning that it is best to do a very basic version of what you are trying to program and testing it before commiting. I would have saved myself a bit of time and head scratching if I had done this first!

Something that is key for me with programming in general is making use of indentation and whitespace - without it I would be much more lost with the entire thing, so I am keeping disciplined and ensuring to use it as I go. A table is a perfect scenario for this as it has multiple components, especially a non standard one like the one I programmed above. Visually being able to see very quickly where the rows are etc. is key for looking back and alterting code or data.

Cognition

American University Websites

I have analysed the following American university websites for commonalities:

Art Center College of Design
http://www.artcenter.edu/

University of Rio Grande & Rio Grande Community College
https://www.rio.edu/

Faith International University & Faith Seminary
https://faithseminary.edu/

All three websites have a navbar spanning the top of the sites that runs across the page, and are on every page on the site. The navbars are also responsive and immediately flip into a little navbar icon when the window is made thin, i.e. these navbars are all mobile compatible. These navbars also “stuck” to the top of the page while scrolling downwards, which is a really nice feature in terms of navigation.

Each website has a particular colour scheme and branding that is strictly adhered to throughout the sites. ArtCenter has a dark theme, Rio has red and white, and Faith is based off a purple and yellow scheme. On “inspecting” all the sites it was discovered that none of the sites used any pure white for backgrounds, they were all slightly off white which was pleasing and relaxing on the eye.

The sites feature sans serif fonts for paragraphs and text that are highly legible and clear to read. The kerning on all the fonts was well spaced and placed. There are no glaring colours like bright whites with bright text that can affect legibility. Even the Faith website, which featured amounts of yellow text, cleverly used a more ochre/ off yellow shade to avoid a glaring font, which I felt was a nice detail that kept with their theme.

All sites feature photos of “real people” i.e. past students and lecturers, who are also highly diverse from each other in every site. This is presumably to connect with the end users (much more likely to connect with a bigger group with diverse photography) and send out a good message about inclusivity in these places of learning. There are also blurbs regarding educational ethos and experiences from both lecturers and past students available to read.

In terms of responsiveness all sites were responsive. When flipped into mobile mode the sites all went from a 3 column grid into a single column grid which is highly suitable for phone, due to the lack of width on a mobile device. The top of the sites was the most noticeable change with all three of them becoming highly simplified at the top and only showing a logo and a button for opening up the navbar. Visually this was very nice on the phone as it was super clear and simple. Only the information necessary to navigate was shown, and having the logo up beside is was a nice touch/ brand reminder.  All the images downsized for a mobile and spanned nicely across the page in mobile format. One issue with one site was the Rio sites banner, which did not resize. 

Irish University Websites

Next, I analysed the following Irish university websites for commonalities:

Dublin City University
https://www.dcu.ie/

Royal College of Surgeons
https://www.rcsi.com/

Trinity College Dublin
https://www.tcd.ie/

All three sites feature the logo of the University at the top left hand side of the page, which is clickable and sends the user to the homepage. Only one site, the RCSI, has a logo that changes colour upon hovering (it goes slightly transparent/ greys out slightly). My guess is this commonality is in place in order to hack the typical reading pattern of most end users from left to right. This logo stays in place no matter what (i.e. when I drag the page in to mimic a mobile) and therefore responsive no matter what device is being used.

Similar to the American universities, all sites feature banners of a diverse group of people right on the homepage, first image under the navbar. All images were professionally taken and a wide range could be found across all the sites that included the grounds, students, lecturers and various activities/ curriculum in action. The RSCI featured a clever little branding trick with its images that I liked - a strip of red across the top of groups of images, which effectively banded it together and added to the overall cohesiveness of the site. It also tied in with red lines that were seen across the site - a nice detail. A good example of this is here: https://www.rcsi.com/research.

In terms of navbars and navigation they have all gone for a horizontal navbar, and all navbars are responsive upon hovering over the links – be it that they change colour (TCD), change colour and feature a dropdown option (RSCI) or simply a dropdown option (RSCI). Strangely enough there is no navigation bar on the homepage for Trinity, bit of an oversight there in my opinion - it was definitely the hardest site to navigate as a result. All the navbars are responsive/ mobile friendly and turn into an icon in the mobile version that can be extended out.

With regards colour these sites were generally well branded but I noticed a few issues. The sites were similar in that they all had a light theme for a background and good colour control (i.e. stuck to one or two colours max), which is a nice simple choice for legibility. Each site had a specific colour scheme and obvious brand idea. The TCD site was the most consistent but made some (small) questionable choices regarding colour - for example on the undergraduate page (https://www.tcd.ie/study/undergraduate/) the grey background actually blends into one of the photos featured - not the biggest sin especially as they respond to hovering - but still lacked clarity between the features. That page actually features three bands of grey (disincluding the footer) where I feel just two would have been sufficient - sticking with the lighter one and the darkest.

All three websites were responsive here. Similar to the American sites they went from 3 or 4 column grids down to a single column for the mobile, with photos spanning the page nicely. They all were designed with slightly different attitudes to the top of the page design. In my opinion RCSI tackled the top of the page in the nicest manner - similar to the American sites it was kept simple with a logo and icon to display the navbar, with some space before the content started. Trinity was similar however the space given for logo and nav was quite small and it felt a little crowded with the content going right up to the top. DCU was my least favorite - the top went down a third of the page on mobile (this is without scrolling down), and had two search bar options that were tiny and difficult to get at. There were a few menu options that could have definitely been tidied up - and a lack of clear alignment (i.e. some things were left aligned, some right, and some in the middle) made for a slightly chaotic look and I found it a bit overwhelming looking. 

Flat design and Neumorphism discussion

Flat Design

Flat design is a style of design that came into popularity in roughly 2010, and is characterized by a minimalist style that features no three dimensional aesthetic to it. Influenced by popular design tropes like the Swiss minimalist style, flat design is defined by a very clean interface with zero skeumorphism. The advantage of flat design is that it loads quickly due to the lack of features and is highly aesthetically pleasing. In theory it is also very simple to use and clear, however, there are many issues with flat design in terms of useability and navigation. It can be very unclear what button to click, or what even is a button at all! Text can be very very thin, illegible, and unclear as to what purpose it holds - all in the over-pursuit of minimalism.

A big advantage of these flat design pages is the loading time is extremely low. As the elements to load are simple, the page can load very quickly, which is a really important feature in terms of end user expirience and SEO.

In terms of the websites discussed above, the "flattest" is the ArtCentre site (http://www.artcenter.edu/) although this is really quite useable still due to some clever use of photographs and video. The buttons are also responsive which makes this site OK, in my opinion. Attention has been paid to font legibility, and the logo, while flat, is highly clever and distinctive. Another example of flat design in a website is https://www.buildinamsterdam.com/cases

Neomorphism

Neomorphism is very similar to flat design, except with a bit of upgrade in terms of legibility and usability. It borrows elements from skeumorphism, which was the most popular visual design trend in technology and computers for decades. Skeumorphism is a graphical user design that attempts to copy real world elements in appearance - an example is the recycle bin on your desktop. 

Neomorphism is a lovely combination of both flat and skeumorphism - keeping the design minimal and elegant while inserting some light gradiants/ shadows and shading. Colour is important here as well - bright colours are involved here, making for a more accessible and practical interface. For example - a flat design may feature a grey background with a slightly darker grey button/ the outline of a button. A neomorphic design might have a slight shadow under the button and a bright red colour on it. This makes it more obvious that it is a button that can be clicked!

Neomorphism has one of the advantages from flat design in that it is also quick at loading due to the minimal nature of the elements involved. Its a great combination of skeu and flat in this manner - it has the advantages of both.

A website that features Neomorphism from the discussion above would be the RSCI website (https://www.rcsi.com/). Neomorphic traits can be seen in the accent colours above photographs featured on some of the pages (accent colours are a very important feature in neomorphic design), and even directly on the home page - the photographs that are "slashed" with the links for Research/ Society/ Surgery all have a light gradient between them starting on the left hand side - another example of neomorphism. Its a nice little detail that adds a degree of legibility to the page that could be easily overlooked!