Responsive Websites research and technical research part 2

HTMl5

HTMl 5 is the newest form of HTML that replaces HTML4 and xHTML. This code's function is to structure the text of the website. The code links the document to Jquery and CSS files to help the website be styled with colour, shadows and other graphical elements. Many conventions, such as the The World Wide Web, agreed that this version of the code should reduce external plugins, for instance Flash. The code's primary functions are to offer more markup rather than scripting and enable the website to be device independent. The elements introduced includes video, audio, new form of tags and control, such as calendar.

http://www.w3schools.com/html/html5_intro.asp

CSS3

CSS by itself is a markup language that stands for Cascading Style Sheets. This language enables designers to code in the look and style of the website.  CSS3 is the lastest addition of this but it has few new features that offers designers very efficient tools.  The main characteristic of CSS3 is to allow designers to develop media-rich website.  CSS3 code enables websites with advanced graphical features and enhance interface design to upload at a fast pace. 

Today's web browsers accept CSS3. FireFox, Safari, Chrome and Internet Explorer can present websites with desktop attributes, such as drop shadows. In regards to Internet  Explorer, only 9 and above can only read this code. 

http://www.maclife.com/article/features/what_css3

In relation to the previous post, I felt there was not enough responsive designed websites analysed.

Browser market

One of the things to consider as web designer is to consider the market share of the web broswers. According to W3schools,  Chrome used by 58% of the world's users whilst Internet Explorer is 8.9%. Firefox has the second highest marketshare of 24.9%. These results suggests that designers still have create website for all 3 browsers listed above.

http://www.w3schools.com/browsers/browsers_stats.asp

On the interesting note, screen resolution usage has unexpected results. At the moment 34% of users have a screen above 1920 x 1080 resolution. This would include Retina display and 4K display. The conventional screen resolution 1024 x 768 is only used by 6% of the world's users. Skeleton is a framework that is fits everything into a 960px container. 

http://www.w3schools.com/browsers/browsers_display.asp

Website Research

Design Council impression 

Generally this is a very usable responsive website with an effective home page. It presents a very vibrant image with its tagline on the foreground. This immediately informs the user about the company in a catchy tagline.  There is great content about their beliefs, values, their clients and their employees to demonstrate that the agency is a trust worthy site. The site mainly aims at designers and businesses who work in the industry. Users in the 21-50 age demographic would explore this site to find design related jobs.

Responsive Design

Desktop

This is one the most professionally designed responsive websites in the market. The desktop version presents a evenly constructed layout containing a massive image with a vertical navigation positioned at the left of it. The large scale of the link boxes enables the user to interact with the navigation with ease. The link is activated even if the cursor selects the background; not the word. This applies that the design has put in a lot of interface design considerations into the navigation section.

The large scale of the text enhances the readability. It is a very common practice to have a maxium of 60 characters per line. Block of text with more than the limit causes the audience to lost whilst reading.

Ipad

The Ipad version of the site is generally the same in terms of layout. The scale of the images reduced to accommodate enough empty space. I feel that having a lot of white space causes the composition to look natural to the human eye.

The navigation has altered dramatically on the Ipad website. The vertical navigation bar only appears if the user selects the button with the 3 buttons. When activated, a short transition appears to make website feel fast. The link boxes are large enough to accommodate finger interaction.

Kojo

Although the animated background causes the website design to give an overwhealming impression, the interface elements creates an captivating user experience.  A massive navigation bars with links leading to the primary page bar appears. Having an attractive navigation bar as the main focal point causes the audience to explore Kojo.

Kojo is a website with useful information that the user can obtain.  The large quantity of information available suggests that the company offers many products and services. There are 6 categories of services it offers: post, events, digital, film, motion sound. The process of entering some of the pages are too long but the brief information  may cause the user to ignore that factor. The content per page is around 3 paragraphs, making reading a short experience.

Responsive Design 

It is very unusual to positioned the navigation of the left hand side of the website. However,  the navigation bar size  and the high amount of graphical elements on the right section of the design causes it compliment the design.  When viewed on desktop, the animated links, which appear as logos, they appear as on the image above.  

There is a dramatic change in the postion of the navigation bar on both the Ipad and the Iphone version of Kojo.com. Presenting the links on the top of the page and place the links in a horizontal bar maintains both good user experience and interface design. The links are massive enough for user to touch the them with their fingers but the positioning of the links prevents the symbols overlapping. 

The layout does not change when viewed on the Ipad. The text and images are scaled down in relation to the device width and lenght. For example the text becomes very small when the website is presented on the IPhone version.