David Boyle - Lab 1

David Boyle
D16124360

Article Observations:

10 Common Web Developer Mistakes:

• I find it interesting how creating a web page to fit a particular browser, for example google chrome, will often result in the quality of the web page dropping significantly when opened on a different browser, like internet explorer. I learned from reading this article that there are some tools, like free VM’s or site scanners, that are easily used to check how your page looks on different browsers.

• Do not fill you page up with too many images or make the source HTML markup to complex as this can slow down the processing speed of your page and sometimes cause errors. This can cause users to become impatient and even give up on the page altogether.

Turning Design Ideas into Reality: Brainstorming, Wireframing, Prototyping:

• Brainstorming in groups can be a very efficient way coming up with ideas. If you take time out to splint into different groups and discuss different aspects of what you are trying to achieve, a lot of the time you will have 3 or 4 main ideas instead of 10 or 15 rough ideas.

• Function over appearance. When building you prototype, functionality should always take preference over appearance. In the first stages of you prototype, tackling the way the site functions is the more important as you can come back and focus on the appearance at a later date.

Terms:

Term: "Wireframing"

http://conversionxl.com/wireframes/ 

I discovered that wireframes are the blueprints that define how a web page is layed out, what content is on it, and how it functions. There are certain tools that can be used to create a wireframe like Indesign or Balsamiq.

Term: "Forking Code"

http://whatis.techtarget.com/

The term "Forking Code" refers to when you take the source code from other software with an open source program and then use this in order to develop a brand new program.

Who I followed on Twitter:

CoderDojo @Coderdojo:
I followed CoderDojo because it is a page that posts links informing new learners how to code, hack, and develop games, apps, and websites.

Web Design Ledger @webdesignledger:
The Web Design Ledger page is a page written by web designers for web designers that frequently updates its page with different web designing and computer tutorials.

Web Designer Depot @Designerdepot:
The web designer depot also blogs about tutorials but it also keeps you up to date with popular we design trends.

Website Analysis:

Sports Direct: 

The sports direct website seemed to almost have too much going on in the opening page. It reminded me of Windows 8. The slides at the top of the page also move very quickly which might not gove a user with visual impairments the chance to see what it is they are advertising.

The Irish Times:

Similar to the sports direct website, the opening page of the Irish Times website has an awful lot going on. There are too many small scattered articles that go the whole way down a very long page. The right side of the page is crammed with more news, videos, podcasts and pictures. Everything on this page has been minimised in order to fit everything on to it. This would make it very difficult for someone with a visual impairment to find exactly what they are looking for.

Codecademy:

The opening page for codecademy.com is much more simplistic and minimal than the previous two websites analysed. Everything on this site is well structured and marked making it much easier to understand. However the colours used on the webpage may make it difficult for someone with a visual impairment to read the print on the page.

Questionnaire: 

The questionnaire did provide some varying results to my original analysis of these websites. Firstly, it pointed out whether the websites had help options or not for the users. Another aspect that the questionnaire brought light to was whether or not the websites spoke the users language.

Mobile Validator:

Sports Direct:

When run through the mobile validator, the Sports Direct websites received a 0% overall rating, meaning it is not mobile friendly at all. Overall there were 29 reported errors, with 3 critical errors. Some of the problems reported are:

• It relies heavily on web standards.
• It has severe HTTP errors. 
• The size of the documents markup exceeded 10 kilobytes
• The total size of the page which was 2MB exceeds 20 kilobytes.

Irish Times:

When run through the mobile validator, the Irish Times websites also received a 0% overall rating. Overall it had 32 reported errors, with 5 critical errors. Some of the main errors are:

• There are more than 20 embedded external resources.
• The CSS style sheet is not syntactically valid CSS.
• More the a quarter of the page characters are whitespace or comments.

Codecademy:

When run through the mobile validator, Codecademy received an overall rating of 5%. Overall it had 20 reported errors, with only 1 critical error.. Some of the main reported errors are:

• The document contains a frame, frameset or iframe element.
• The certificate does not match the requested URI.
• The size of the document markup exceeds 10kb.

One website I found that, when put through the mobile validator received a rating that exceeded 50% was Instagram.com. Instagram received an overall rating of 75% and had no reported critical errors.

Analyses through Webaim.org:

Sports Direct:

When put through webaim.org, the sports direct website came out with a calamity of errors, 203 in total. Showing that the website is not very accessible at all. Some of the main problems with the site are:

• There are 181 cases where the image alternative text was not present
• 14 cases of links that contained no text
• 8 instances of two nearby images containing the same alternative text

The Irish Times:

When put through webaim.org, the Irish Times site proved to also have a multitude of errors, although nowhere near as many as the Sports Direct site. However, it still proved to have limited accessibility. Some of it main problems are:

• There are 12 cases of a form label being present, however not containing any content.
• 29 cases of images having very long alternative texts.
• There where also 3 instances of a link containing no text

Codecademy:

Codecademy also proved to have limited accessibility, however it is not a limited as the previous two websites. Some of codecademys main problems included:

• 6 cases of a form control not having a corresponding label.
• 10 empty links.
• 5 cases where a heading level was skipped.

Both Sport Direct and Codecademy made the error of not having image alternative text present on their webpages. All three sites had cases where a form control did not have have a corresponding label.