Monday, March 31, 2014

Responsive web Design

A Responsive web design is for desktop to mobile design, keeping it easy to read, navigate, and making sure resizing and scrolling is at best. 

Having this type of design will allow one website, but many devices, while having it better to manage.

Media Queries is a CSS3 module that adjusts screen resolution for high definition or a phone. They help make different styles and keeps the coding simple by adding media attributes.


A Break points are like place holders in the source code that will allow you later on to disable at anytime and work on debugging an application, or stopping applications.


 CHECK OUT TATTLY  website for a great example of responsive design.

 
This has a nice four column layout, with the search menu back in the right corner, and the banner still stretched and big on each position. This time however there is an extra search that lets you narrow down the design. The image size stays the same to maintain proportion to the rest of the page.
   
    The title stands out above a large picture meant for stretching, with columns underneath in alignment.  There is also a clear “search” bar at the top to help navigation. The content is clear and is good because of the pictures they included, which is for advertising.

 This has a nice two-column layout and left alignment for the text. It’s readable, and gives a nice view of what and price. The sizes are congruent, except for the “banner under the title. Also the search menu has now grew and stretched out to the page.
 

1 comment:

  1. That's a nice example. You are actually talking about a different kind of breakpoint.

    ReplyDelete