CA 2 Introduction

Web Programming CA 2 

The second web programming CA was to design and develop a fully responsive website of our choice. We had to propose three different sites of our choice to develop. 

My sites were : 

1. A portfolio site

2. A redesign of a friends website www.robertsofdalkey.com

3. Another redesign of a friends website www.vibe.ie

I picked the portfolio site for myself as I wanted to create a site to display my designs the way I wanted them to be displayed. 

Inspiration 

I based some of my design choices on some of the recent websites I have come across

• http://supereightstudio.com
• http://victorerixon.com
• http://simpleasmilk.co.uk

Far too many websites try to cram as much info into a website as they can. I'm a firm believer of the opposite. It is proven that people scan text on websites. I wanted to get my message across but also encourage the viewer to browse the site rather then hit them with a wall of information. If they want to know more they will get in contact. 

Responsive Design

Responsive design is the new buzz word  in web design but every site has a different approach to it. With the recent explosion of mobile and tablets devices on the market there is a huge range of screen sizes to accommodate. Below is a list of the methods used in responsive web design.

 

Adaptive - Using media queries,  the layout of the site changes depending on the width of the browser. 

Pros : Easy to implement , Design will appear as you intended 

Cons : Have to specify exactly screen size to adapt to 

Liquid grid - The width of all the elements are set to % so they scale according to the screen size. 

Pros: Will work on every screen size

Cons: Can get quite tricky using calculations to specify the width , Because it scales to any screen size the design can look different on devices

Fully responsive - Using a combination of both adaptive and liquid grids, the site will adapt to any screen size but the layout will change with the use of media queries. 

Pros: best of both worlds, Will work on every screen size and with the use of media queries, the design will appear as intended. 

Cons: Calculations to define the width of the element in %

I used the combination of liquid grids and adaptive design. The calculation used to determine the percentage of the element is:   target / context  = result  src

for example 

a 300px div within a wrapper of 1020px would be

300 /1020 * 100 = 29.41176%