Responsive Site

Within the group, it was my responsibility to make the site responsive. Before todays group meeting the site was fixed and when the page size was changed the website stayed the same and required scroll to view the page.

Screen Shot 20 To make the site responsive the main aspects that needed changing were to width and height, an example of the responsive code as seen in Brackets is displayed above. Changing the width to a percentage rather than a defined pixel meant that the width would change according to size of the browser window. Additionally setting a min-height meant that the div would change size according to the browser size, it also meant that the content would fit the box and not over flow making it appear professional rather than messy and amateur.

respon Above is the site in general desktop size of the browser, below is the site sized to its smallest representing a mobile device. A responsive site means that users are able to see the entire page content with ease. Without this they would have to scroll around the page which would cause confusion and mean they loose interest in the site and its content.

responOverall the advantages of using responsive design on the web application are:

  • Flexibility
  • User Friendly
  • Professional Finish
  • Easy to Manage

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s