AF103 Design for the Web - Research

After a needed easter break it's time to get back into the routine. We've been set a new brief for our new project which is Design for the Web, we are required to transfer all of the information and content we used for our previous iBook project into web form, this involved rearranging the information we gathered and making it suitable for use on the web.

Before I go into that I'm going to look at existing websites that are out there and what makes them successful covering the design aspects, interactivity elements and general build and navigation quality, these factors all make the difference between a good and bad website.


First up - http://www.jr-associee.com/ a artist management and creative content agency.

Desktop

Here is the full size, desktop size version of this management website. The main content elements are full size and in a three column layout the right hand size expandable bar is present.

Laptop

Here is the slightly smaller, laptop size version of the website this is adjusted by simply making the website smaller and watching the responsiveness automatically adjust the dimensions and grid system of the website.

Tablet

In this screenshot you can see the the tablet version of this website, there isn't too much of a difference in terms of layout and column style however there are a few changes,  if you look at the welcome message it is on a three line paragraph in a bigger font making it easier to read on smaller devices this is a sign of responsive web design. The main thumbnail images have also become smaller.

Mobile

This when scaled down to an even smaller size is the mobile version of the website, it has reduced its column size of the main content to just one in a single file order, the welcome page has now gone and the interactive side bar that slid out has no been moved up to the top that reveals the welcome information, a nice touch to keep the website as simple as possible when viewing it on a 4" mobile screen.

This is the basic and fundamental process of a 'Responsive Website' it changes depending on the resolution of your view port and scales the websites elements in % rather than pixels to give it a consistent, not stretched and professional look across all platforms, this is a very simple and useful element of a website that is so often overlooked and is absent in even website such as www.bbc.co.uk.