Cert 4 Web Design Cluster: Week 17.


This week we looked at testing our web site by looking at usability how it responded in web browsers and revalidating our web pages for errors.


We looked at a article by Jakob Nielsen on Usability 101: Introduction to Usability. On what it is and how to implement it in ease of use and why it is important and how to improve it to our web sites.


Then re-validating our web sites using the World Wide Web Consortium (W3C) validates to look for errors in our HTML pages and CSS links. Found a couple of stray close div tags on a couple of page that needed to be removed. Found it interesting how some imported scripts tags from Facebook and Imager came back with errors but worked fine. Marcus said not to worry about this errors at the moment.

As a side activity it was suggested to ran same popular websites Ebay, Twitter and Facebook through W3C validator they all came back with errors eBay came back with 751 errors, Twitter with 7 errors and Facebook with 25 errors it shows that web sites can still work with errors on the web.

Browser Testing

We looked at browser usage and what are the must popular browsers are. Had a look at W3Counter Web Browser Market Share, https://www.w3counter.com/globalstats.php?start=NaN3%20March%205877521%20at%20-8:-31:-23%20%20GMT+10:04:52NaN andStat Counter Browser Usage Map, http://gs.statcounter.com/#all-browser-ww-monthly-201511-201511-map?start=NaN3%20March%205877521%20at%20-8:-31:-23%20%20GMT+10:04:52NaN-bar

Google is the most popular browser with 47.49% according StatCounter and 58.7% W3Counter of the market with Safari coming second with 12.84% and 12.7% of usage.

And what is the most popular used screen size, mobile browser and operating system being used.

Also looked simulating user environments web sites in how to test our web site to see in how it will respond regarding browsers, operating systems and mobile devices if we did not have this option.

We looked at Browsershots which tests web sites in several browsers and operating systems at once and giving screen shots of how the web page response when opened to see if there will be any errors.

I will be testing my web site with Windows 10 operating system with Google Chrome, Mozzila FireFox, Microsoft Edge and MacBook Pro running El Capitan operating system with Safari.

It was interesting to see how my web site responded in different browsers my text content over flood in certain browser like Edge and FireFox so I needed to make the container box area larger to make it work. But it looks all the same but bet different in areas with spacing between text and boarder line edge. I am happy with final out come.

Google: Text class to bottom line of the border box as it should be.
FireFox: Bet of larger gap between text and bottom line of boarder box.
Edge: The gap between text and bottom line has increased.
Safari: The gap is the same as in Edge.