Saturday 31 May 2014

Logging the work and define responsive design

Responsive design

One of the things I forgotten to place in this blog is defining responsive design. Responsive is a keyword that defines the term "responsive design' as a design that accommodates the user's environment based on the device and the screen size. The use of media quires allow designers to create one website that respond to the user's needs. At the moment website developers design sites that accommodate users using mobile phone, graphics tablet and desktop.

Flexibility is one benefit of making a website responsive. The use of percentages on website images enables the designers to produce sites that includes all important graphical elements that enable the user to understand the information. It also shortens the process of adjusting the image's size to suit each device's screen.

Responsive design also shorten the workload in the production stage. Many frameworks features responsive columns that are measured in percentages. Using a responsive framework allows the imagery and content to be automatically repositioned and rescaled, making the website look structured on all devices.

CSS

One of the things I have learned is to use dirty markup to tidy my code. There was a moment where understanding my code was almost impossible. Solving this required me to place the CSS into the website that processed the mark up and then presents the code clearly. This has taught me the importances of following common house keeping tips to make the code look understandable.

There are some practices being following to make CSS that look logically correct. CSS tags are positioned in the correct sub sections. I managed to used commenting as headings to help me locate code. Designing from the outside in also caused me to design the graphical elements with ease.

Jquery


One of the best achievements of this assignment was exploring Jquery. I used Codeacademy  to understand the basic syntax of the code. I followed two Jqeury tutorials on You Tube to placed a fixed navigation bar and smooth scrolling functions on the website. This is to ensure that that the process of navigating through the website feels efficient and smooth.



I used Codedrops to insert a functional slider. However, the use of this interactive object was kept to a minimum to ensure the user does not get distracted regularly. There is an issue with the imagery not covering 100% of the slider but the background is not too striking.



http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

No comments:

Post a Comment