Lab 04

Part I - Coding Fish Creek

Q2. Validating HTML & CSS

a) HTML: I used this handy markup validator to check the HTML on my Fish Creek website and it turned up five errors on my on the services.html page. The first error was related to an iframe, the error told me that there was no spaces between the attributes and gave me the exact line and column.As you can see from the image below, the four other errors seem to be related to a footer tag which I forgot to close.  Error 4 tells me that I have two open <footer> tags which should not be the case. Error 5 is a knock on effect of the unclosed <footer> tag on the closed <div> tag, again it pretty much tells me the issue is that while there is an end div tag there are still open tags within in that need to be closed. The other two errors explicitly tell me that I have an unclosed <footer>.

a) CSS: I also used a CSS validator for my stylesheet which threw up 3 errors as shown below. The first two are related to the nav selector. The first one seems to be an incorrect value for the position property and the second is a problem parsing "relative". Considering relative is a value for the position property and the error is on the same line, I presume both are related. The third error gives me the line number but not a selector which is a bit odd, it seems to be another parsing problem and tells me it's to do with a closing curly bracket. 

b) HTML: The issues were relatively straightforward to troubleshoot and fix. For the first error I knew it was the iframe because of the text shown by the validator ("allowfullscreen"). I had removed some inline css that came with the embedded link and kept the "allowfullscreen" attribute but accidentally removed the space between it and the end of the link. By adding a space I resolved the issue. By closing the footer tag correctly --> </footer>, all other errors were dealt with and I got the all green from markup validator!

b) CSS: To deal with the first two errors I went to line 41 in my stylesheet to see what the problem was and immediately noticed that between the position property and the "relative" value was a semi-colon as opposed to a colon. I made the correct change and ran the updated file through the validator to find that the fix had resolved both error one and two as I suspected. The last error was a stray curly bracket at line 46 that I simply deleted, it did't seem to be causing any issue or error that I could find but was sure to provide a problem as the page got bigger. 

Q3. Browser Compatibility

a) I tested my website across all the major browsers IE11, Opera, Safari, Chrome and Firefox looking for any differences in either of the pages. I developed the site using Chrome as my main browser so I knew that was fine. Of the other browsers I expected IE to give me trouble but everything worked the same as it did on Chrome. In fact the only browser that gave me problems was Firefox. I've posted a screen shot of the Firefox v's all other browsers problem below. As you can see the nav has moved from it's position it it supposed to be in at the top left of the <div> that it's in to the right hand  side of the page, jutting out over the wrapper <div>. This is the only problem I encountered in cross browser compatibility testing.

b) To troubleshoot the problem I opened the html page with both Chrome and Firefox and started editing the nav selector in my stylesheet. I took out each property one by one and very quickly realised this issue was with the display property. I had it set to display: inline. This was a property I had added early on when coding the site, if I recall properly I had my navigation links as a list and needed to have them display inline. However I removed the <li> element but kept the display property without thinking why I had added it. When I removed it I realised it was serving no styling purpose whatsoever and also by removing it I no longer received the position error in Firefox. What was really interesting about this error was that it is a very normal property and value but was only being picked up by Firefox even though I would have expected all browsers to deal with it the same.

Part II - Web Development Tools

a) Firefox
Web Developer 
This extension puts a whole load of web developer tools in your tool bar. Everything including viewing and editing both the CSS and HTML, finding broken links, duplicate ID's, validating HTML, CSS, links, viewing how responsive a page is on other devices, outlining certain elements on you page such as floating elements and headers and a ruler you can call to the page to get the exact size px for your CSS. That's not even half of the functionality. Amazing find.

Font Finder
I'm only getting my head around the various fonts and what they look like, tend to stick with the Arials and sans-serifs of that world. However, I notice how much impact they make on well designed sites so I went looking for an extension that would let me rip the font name from a site. Font Finder does exactly that and more. When you install it you can right click on any element on a page and generate a quick pop up report of the font and related details from that element. You can copy font name, size, colour and paste it into your own CSS or test different fonts on your page (or any page) while it's live. I think this is an extension I'll get a lot of use out of.

b) Chrome
Web Developer Checklist
It's only been 4 weeks but I already have ten's of links to tools such as the html validator, SEO check list and so on. Now I've found the Web Developer Checklist extension. Open up the web page your working on (has to be hosted, not on your desktop), click the extension and it'll give you a red to green indicator of where you are generally as well as itemised list of the things you have and haven't done under headings such as SEO and Accessibility. For my fish creek home page it's telling me I've ticked the box for the meta description but need to add robots.txt. I don't know what that is so it handily enough gives me a link to a tutorial so I can now go and add it! Godsend.

Corporate Ipsum
While working on the broader layout of pages for my fish creek website I've found it hard to imagine what it will look like with content on it and if the styling I've used will suit or if the colour for background or text will make it difficult to read or follow. At times I've written a couple of words and copy/pasted them across a paragraph, tedious stuff. I've just found and installed Corporate Ipsum which is a text filler extension generating between one and five hundred words. Now I can open text wrangler, style my page, view it in Chrome and then use the Corporate Ipsum extension to generate a bit of text to put in my paragraphs or divs, put it in my HTML then refresh the browser. Life saving and the content is quirky!

Part III - Perception & Attention

Q2. Visual Perception 
Visual Blink
I got 730 points which gives me a brain age of 36. So I tried again and again and again until I got a score of 1160 which gives me a brain age of 20. Great to be young again. Some things were pretty easy to spot but others took me a long time to cop on to. Good for making you aware of how you focus on a screen and what the blind-spots may be. From a web design perspective it makes you aware of how important it is to have major CTA's, buttons or messages very clear. Just because you think someone will see it, doesn't mean they will.

Spot It!

I hadn't read the instructions properly so I was very lost at my first attempt. After re-reading and understanding I tried a few more times with my best attempt being 11. Every time I tried I thought I had found a new strategy that allowed me to see both cards clearly but quickly realised the changing colours, size and rotation of the items made a mess of all my strategies. I found this harder than the first game but more addictive. 

Scientific Psychic
This site has a series of paradoxical graphics that blow your mind a bit. After checking each one I'm not sure I can entirely trust my visual senses anymore! From a web design point of view it adds to the realisation that much much more needs to be considered beyond how to code the site up. Placement, contrast, shape, colour of everything on every page will effect how the user visually perceives your site. You want them to immediately understand what your site is about and how to navigate it and as such should be aware of how the brain works with visual perception. A good example is the leaning tower of Pisa illusion for any such images you may be displaying side by side on a page. How they brain works to decipher you site will impact use behaviour and understanding. When something is not obvious the user may not know what the message is or what to do and as a result may leave the site.

Q3. Visual Memory
Pattern Memory
The game tells me that I definitely have a ceiling for memory capacity, couldn't get passed level 12. I learned that I quite liked when the patterns were familiar, like lines, triangles or diagonals and didn't like when they seemed to be random. I liked to deal with the outlying dots first and then come back to the clustered dots.

In order to succeed I unconsciously used the gestalt principle of proximity; when there were some dots that appeared near each other and one or two far away I grouped the ones near each other, dealt with the far away ones first and came back to easily deal with the grouped dots. The game is naturally built on another gestalt principle, similarity; the contrasting shape and colour of the dots mean they stand out for the brief time you see them and help you remember where they are stored. Another gestalt principle I unconsciously used during the game was figure-ground; the white squares are the only thing I'm focussed on during the game, the green space completely fades into the background allowing me to focus where I need to for the game.

It's a nice game to play because of how it has been designed and elements of it, that I never paid attention to before, will help me as an interaction designer. Elements such as the contrasting colours and shapes as strong ways to highlight differentiation. Also, the set up of the interface is visually pleasing, fun and gives entire focus to the task at hand particularly though the use of a stable figure-ground. The use of space is another important element of the design for such a game, it removed any competition for my attention and generated a sense of calm and purpose while I was playing.

Q4. Testing Attention and Working Memory
Attention Experiment
My attention was completely focussed on keeping track of the passes, which was relatively difficult because of how they were moving around and due to the existence of the people in black t-shirts also throwing passes. I got the 15 though but that wasn't the purpose of the exercise, the purpose was to show me that I didn't see the gorilla!! After looking back at it I cannot believe I didn't see the gorilla considering it was waving at me from the centre of the screen. I have very selective memory!

Having looked at the comments and asked other people to do the experiment I realise that my experience is not universal. Either way this is relevant for Human-computer interaction (HCI) because it tells us if a user is completely focussed on something on the interface then there is the possibility they will ignore absolutely everything else on it. When designing a site or an application this needs to be taken into account by ensuring that it is constructed and designed in a way that the users attention is focussed on what is important at a particular point and other important or relevant items or information are not competing for attention at the same time. It tells us that there are perhaps things we could do as developers/designers so that this behaviour is combatted. For example if the gorilla was wearing a distinct red coloured costume it would improve the chances of the user seeing it. User interfaces should be designed with these kinds of experiments in mind. 

Lab 03

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.

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!

Lab 02

Part I - The Meta Tag

The meta tag is used to provide information or metadata about the HTML. It is stored in the <head> second of the HTML and therefore is not visible in a web browser. Below are four different uses for meta tags.

1. To post a short blurb explaining who you are and/or what your site is about. Obviously this is not available to read on your actual web page, instead it is the blurb that'll be returned by search engines. It doesn't improve search engine rank it simply helps people surfing the internet understand what your site is offering before clicking on the link. Considering how important search engines are for traffic this is an invaluable tag for getting your main message across succinctly. The following example shows how the tag is set up, choosing the "description" tag and setting the "content" to exactly what I want to appear in search engines below the link to the site page. E.G.<meta name="description" content="Web Developer building mobile friendly websites for small businesses in Dublin">
2. To auto refresh your page. This is one I benefit a lot from when viewing a live blog of football matches I don't have the rights to watch on TV. Instead of having to manually hit refresh to update the page, this meta "refresh" tag updates it a set time intervals. The meta is proceeded by a http-equiv tag that communicates information to the browser about the page. In the example below the tag is instructing the page to refresh every 30 seconds. If Ireland were 1-0 up with 30 seconds to go I'd want this to be refreshing every second! E.G. <meta http-equiv="refresh" content="30">
3. To help make the website device responsive. According to w3schools, viewport is "the user's visible area of a web page" and naturally will be different on different size devices. With my fish creek website I noticed that the page was laid out really small on my mobile and used the "viewport" meta tag to make sure the visible width matched the width of whatever device it was being viewed on. The code I used is: <meta name="viewport" content="width=device-width, initial-scale=1">, and in the mobile screen shots below you can see the difference it has made (right side is after application!). The content component of the tag allows you set the width of the viewable area, this can be fixed to a certain size but I have chosen for it match the width of whatever device it is being viewed on by selecting width = device-width. The second part of the code (initial-scale =1) sets the zoom level when the page is first loaded.
   
   
4. To point out who the web developer of the page or site is. This meta tag provides no contribution to the page beyond keeping track of who created each page of the site. As you can see from the below example, the code starts off by identifying the meta tag type, in this case I have chosen "author". In the content the name of the web developer is identified. Jerry West recommends putting first and last name of the author for specific identification, however argues against putting the email address in as it may lead to the author being spammed by "site scrapers'. I have left the email address in to show how it would be formatted. E.G.<meta name="author" content="Peter Kinsella, peter.kinsella@mydit.ie">

Part III - Search Engine Opimisation 

Search Engine Optimisation (SEO) is the art of optimising a website by various means in order to drive more traffic to the site from search engines when most traffic comes from. Below are four key guidelines I'll be following when designing any website.

1. Proper keyword research using a tool such as Google Trends to find out what particular searches related to my site or page are popular. To get variants on the keywords being used from tools like Uber Suggest . The information gleaned from this process will define the primary and secondary keywords which will be used to define the SEO strategy for the content of my site. 
2. The page title has a direct impact on SEO results. I'm going to put the main primary keyword in the title (at the start if possible) which should be relatively short (50-70 characters) and unique. 
3. Place keywords in important places in the <body> of the html. For example using the primary keyword in the <h1> tag, secondary keywords and synonyms in the other <h> tags; having images relevant to the keywords and getting that keyword into the alt attribute; making sure there is a sprinkling of the keywords and their synonyms in the main content without over doing it. 
4. Link to relevant content on other pages on my own site and also link to external, reputable sites where the link is relevant to the keywords that have been targeted. The anchor text for the links need to be descriptive of the content that's being linked so it gets picked up by the search engine. 

Lab 01

Part I - Beginning Web Development

Q3. Web Development Articles

a) I found two nuggets in an article discussing design ideas and how they become a reality. The first one being hallway testing your wireframes. With the amount of back and forth involved in this stage of the design process I assumed that testing would be a long, laborious (and costly!) process towards the end but article points out that testing with 5 or so people can help you spot 95% of design issues! Just grab 5 people from a busy corridor in the office and get their feedback. Simple.

The second must remember piece from the article is from the stage proceeding wireframing; prototyping. You've spent an immeasurable amount of time arguing over where a button should go or the column width on different pages but at the prototype stage the article advises forget design and focus on functionality. This is a really valuable piece of information because it brings you back to the essence of what you're doing, building something, and it has to work properly or it won't matter how good it looks!

b) I'm new to the Web Development game so when I read this article about common mistakes I felt very at home. A couple of key points really rang through for me such as seeing everything going back and forth from the browser to my site as a cost. This relates back to the point on the previous article about what the product is supposed to do. The website it supposed to load quickly and keep the prospect interested. If it's loaded with heavy duty graphics the advice from the article is to omit them or use a tool to shrink them.

The second key point I took from this article was about SEO. SEO is really really important in making sure browsers can find your page, If you don't implement to correct tags in your HTML then no one will be able to find your page on a search engine. This is a fundamental piece of advice because an eternity can be spend on the content and style of a page but if you don't use SEO then it'll have been in vain.

Q4a. Article Terminology

The term wireframing was introduced in the first article so to find out more I searched the term in Twitter. Twitter handily breaks the search out by tabs [Top] [Live] [Accounts] [Photos] and [Videos]. In the [Top] tab I came across a post from SEO Bangkok comparing 29 of the top wireframing tools for developers, which was really useful as I assumed it was most done in photoshop/illustrator. I also found an interesting live debate on whether wireframing is dead. The [Photos] tab in the search bar brought up a donut chart posted by Content Formula which broke down the % use of wireframing tools by product, turns out that Sketch is number one with 27%.

In the second article I came across the term responsive design and again searched the term in Twitter to find out a bit more. In the [Live] search section on Twitter I found the most up to the minute posts and articles including an article preaching to marketeers about the importance of mobile optimising email campaigns. In the [Videos] section I watched a short embedded video on how to make a responsive layout using a product called bootstrap.

Q4b. Who to Follow
#1 Web Designer Depot
Twitter account of a Canadian Web Designer. Blog has over 700K subscribers and the twitter account posts about all things web design but with a particular focus on the design and UX side of things. Decided to follow the account to see the world through the eyes of a web designer and also because it was one of the top accounts for a Twitter search of "Web Design"!

#2 HTML5 & CSS3
Digital agency (Boxlight) who specialist in back-end and UI design. Regularly post tips and tricks for HTML5, CSS and Javascript and all code related news. Following to get snippets of help and to keep abreast of all developments code related.

#3 Web Awards 2015
Web Awards Twitter account  (take place mid October) which hands out awards for all things web and e-commerce related. Following to keep track of which agencies and websites make it into the finalist categories and particularly to find out who the winners in the awards are so I can learn from what they've done.

Part III - Analysing the UI

Q1.Websites and Visual Impairment
Blogger.com
The site is almost entirely in text and small text at that. The text is also not contrasted to the background which makes it even harder to read. There are no videos explaining how to use the site or any other items that may be helpful to those who are visually impaired. This is a very bad site for those who are visually impaired.
Amazon Website
The homepage has lots of pictures illustrating what you may be looking for and text is relatively large. When you click into any of the deals the price of the item is not large enough. The add to basket button is easy to see and understandable as is navigating to the basket icon which is white bold with a graphic on a navy background. The fine print is very small and a lot of the tab items are too small to read. Overall the site has some good points but also some things that could be improved upon.
CNN Website
Text is relatively large on all headlines and accompanied by proportional pictures for each headline. When I click into the main headline there is an accompanying video. When you hover over the text of any headline it changes colour providing some contrast. Likewise the tabs at the top of the website for sport, technology etc. all show the headlines in large text with accompanying pictures. In general I would say this is a relatively good site for those with a visual impairment.

Q3.Questionnaires V's  My Analysis
Blogger.com
Surprisingly scored better in the questionnaire than in my own analysis. It still scored the worst of the three websites, however I gave it a good score for some categories including consistency, simple and natural dialogue and shortcuts which I hadn't considered in my analysis.
Amazon Website
After conducting my own analysis for Amazon I was of the opinion that it was quite good but could be improved upon. After completing the Nielsens Heuristics questionnaire and re-evaluating how I analyse the site I find that there are are a lot more issues for people with visual impairments than I first realised, particularly pertaining to clearly marked exits, help & documentation, feedback and shortcuts.
CNN Website
The CNN website definitely scored the best of the 3 websites on the questionnaire. The website was the one I identified as relatively good for an individual with a visual impairment, however through the eyes of heuristics I found issues that I hadn't considered and as such I think the site is not as good as I originally considered, such as feedback, clearly marked exits and help/documentation.

Q4.Analyse Mobile Responsiveness with Validator
a) How mobile friendly are they?
Amazon got 36% for mobile responsiveness with one critical failure, one severe failure and three medium failures.
CNN got 0% with one critical failure,  three severe failures but no medium failures.

b) What are the problems?
The critical failure for Amazon is related to the size of the page. The suggested size is 20KB, the Amazon page is 209KB with the CSS sheet making up the bulk of it. Big pages take a lot time to download on mobile and can be costly for the user. The medium severity failures are caching (no caching information is served with the document), minimising (more than 25% of the page characters are whitespace or comments) and character encoding use (content type head doesn't specify a character encoding). CNN's critical failure is the same as Amazons but at 1.6MB goes much further past the suggested size of 20KB.One of the severe failures is also related to size, specifically the size of the markup (78KB) which exceeds the suggested size of 10KB. CNN also had an issue with syntactically correct CSS and the last severe failure points out an invalid certificate which are rejected by mobile browsers preventing the page from rendering.

c) Could you find a website that rates higher than 60%?
I tried A LOT of sites using validator including; facebook.com, microsoft.com, disney.com, kooba.ie and websummit.net which are all websites I would have expected to score very high but none got near the 60% mark.

Q5.Analyse Accessibility with Wave
a) How accessible are they?
Amazon has 47 errors, a significant chunk of which breach the priority 1 checkpoints, which are checkpoints that must be satisfied, meaning that the Amazon site is considered inaccessible.  The CNN has 6 errors, none of which breach the priority 1 checkpoints, meaning it is far more accessible than the Amazon site

b) What are the problems?
There are 2 major issues with the Amazon page. The first one is missing alt attributes in images. The alerts for the site also show that where there are alt attributes they are too long or similar to those already being used. Without the alt tag or without a relevant one the content of the image is not available to screen readers. The other major issue is empty links, the page has 23 of them and they can cause confusion for screen readers as the function of the link is not presented. The CNN accessibility problems are confined to buttons and links with no text, missing document language and missing form labels.

c) Are there similar problems in both?
Both have similar problems related to missing document language which is used to assist screen readers read the content in their language and helps with automatic translation.  The sites also shared problems relating to buttons with no text, causing difficulty for screen readers indicating the function of the button, and links with no text meaning the function of the link is not presented to the user causing problems for keyboard and screen reader users.