Lab 4 - Web Developer Tools and Validation
HMTL Validator
I used the following validator for html: https://validator.w3.org/
Detailed below are the problems it picked up.
1. Consider adding a
lang attribute to the html start tag to declare the language of this document.It is important to set the language of a webpage as it becomes the default language for the content. This is important for useability (i.e. it will make the page easier to translate for an add-on or for Google. I was able to fix this issue by adding the following code into the <head> of the document:
<html lang="en">
2. No space between attributes
This was easily fixed by adding a space between so it read as follows:
<meta name="author" content="Becks Kelly">
3. Bad value
100px for attribute width on element img: Expected a digit but saw p instead.I realised I had been incorrectly sizing my images as "XXpx" when "XX" would do, so I have since adjusted this.
4. Bad value 30% for attribute width on element img: Expected a digit but saw % instead.
I have adjusted my code, similarly to above, to have a numeric value (i.e. 100) instead of a percentage when sizing images.
5. No p element in scope but a p end tag seen.
Rogue </p> tag found! I have since removed it.
6. A document must not include more than one
meta element with its name attribute set to the value description.Very good catch by the validator, I have since deleted the extra meta tag.
CSS Validator
I used the following validator for CSS: http://jigsaw.w3.org/css-validator/
Two issues were found in my CSS document:
1. footer: Value Error : margin
solid is not a margin value : 5px solidYou cannot have a "solid" value for a margin, only specify the value desired in pixels or by %. I have since deleted this.
2. footer: Value Error : text-align
center-left is not a text-align value : center-left"center-left" is not a value for the text-align function. I have since changed it to "left"
The Browser Test
I then opened my code in 3 different browsers - Mozilla Firefox, Microsoft Edge and Google Chrome. Being honest, I did not find any issues in them across the three browsers. However, something about opening them in a different browser and viewing them in a slightly different context did inspire me to make a few changes to text sizes and colours. I also completely understand the value of testing code across different browsers as different browsers may catch issues with things that others do not, and not every end user uses the same browser - so the site has to work with them all.
CSS Game
Firstly I tried the following game: https://flukeout.github.io/
I got to level 14 before giving up to finish my work, but I may come back to it. I was cynical about this initially but after playing a few levels it certainly helps you get into a more CSS mindset. I learned a bit of syntax and also how to select elements within your CSS, below are the main ones I recall. Who knows, I might come back for some more later!
* select all
, also style [x]
+ style element directly after element [x]
~ sibling selector
> element inside another element
Web Developer Tools
I "inspected" my site in Chrome and checked out the web developer tools. In terms of mobile- compatibility my site is entirely mobile unfriendly - it is not responsive and basically stays the exact same regardless of the size and shape of the device being used. I will be using this tool when developing sites and to test across different devices and see how my site views in them. This is key as the typical user accesses most of the internet from their phone.
Extensions
Firefox - "Font Finder"
For Firefox I found the "Font Finder" extension. This is an incredibly useful little extension that tells you the html tag used (h1, h2, h3 etc), class applied (if any) and also the font name, hex colour, background colour, style and weight, letter spacing, along with a few other pieces of information about the text selected. I will absolutely be using this exension going forward when I see nice pieces of text.
Chrome - "CSS Peeper"
I found this very interesting little extension for Chrome called CSS Peeper. It allows you to "see" the CSS styles used in a webpage. Fonts and styles are also broken down in an easy to view manner. Addtional information about the CSS, such as the file size and load time are also included. It breaks down all the colours used on a page, along with their hex numbers in a very user friendly manner. All the images are listed in a similar manner and easily downloadable. Any element can be inspected as well with the CSS clearly displayed.
Perception, Attention and Memory
Visual Perception (Attention and Memory)
My Brain age was 56, which is fairly shocking as I would consider myself to have an excellent memory and ability to learn. I found this game a bit sore on my eyes being perfectly honest - I also didn't understand some of the rules and really failed at a few of the tests.
Stragegies I incoperated were pattern construction, sounding stuff out with my lips, talking to myself in my head, and drawing an imaginary line where something was. Although, I wouldn't recommend following any of my advice here looking at my score!
Visual Memory
I made it to level 11 before I failed. I think I managed ok - it was more my style of game than the one previously played. I managed to remember most of the levels by building patterns in my mind and trying to recreate the scene as quickly as possible before it fell out of my short term memory.
I absolutely did use Gestalt principles when trying to beat this game. I sought patterns in the boxes, and grouped close objects together mentally (proximity) to build even more patterns (law of closure - I saw triangles and boxes in this pattern game and it helped me beat a fair few levels). The boxes that were further away from eachother were more difficult for me to remember. My brain was trying the whole time to see patterns in the snapshot before playing the game.
Upon reflection, it is clear that the human brain loves patterns and seeks to see them in everything it encounters. A fun game I often play with myself is how many faces can I see in my surroundings - with the result being houses, cars etc. all having faces! It is clear that this is really hardwired into our brains to find patterns.
As a designer I feel I have to make the individual elements in my design very clear and very easy to distinguish from eachother. In practical terms for a website or a 2D design, this can be done with weight/ thickness (i.e. a heavy line weight), a colour (i.e. a bright accent colour) or a graphical element (such as a shadow adding dimension). Boxes, coloumns, tables and other visual organisational tools for information will really help here as well. I also feel that having a design that is not overly "text heavy" and has images, drawings, buttons etc. on it will help engage the user more. This will really tap into that "pattern reading hardwiring" that was discussed above, and really enable end users to use my designs/ sites with ease.
Testing attention & working memory
Another test that I failed - I would pride myself on my focus but I only saw 13 of the 15 passes. I was good at ignoring the other players and only focusing on the players wearing white shirts, until the gorilla arrived. Clearly I fell for the gorilla trick hard and became distracted by it. It was just so fun, I only wanted to look at the gorilla - I find those suits extremely entertaining.
In terms of HCI it shows that anything onscreen that is "out of the ordinary", distinct or perhaps with more character will be heavily focused on by the end user. In order to keep the users focus the design will perhaps have to be dynamic and maybe even "change" throughout the site - an example could be a 3 column grid scrolling into an image that takes over the whole page of a screen.
http://flukeout.github.io/
Comments
Post a Comment