Tuesday, 12 February 2013

TERM 2:
Week 12 - 13

The last few weeks we started looking at responsive web design.  Responsive web design is when the site responds to the screen size and displays the webpage in a format that best suits the screen.  This is looking to take over from separate web pages for each device.  This is a better way as the web designer does not have to update separate sites, therefore the information is always the same no matter where the user views it.

We looked at two ways of  doing this in class, one was a "semi-responsive" site, where the page uses media queries and when the browser window is reduced the next CSS properties are loaded and the page"jumps" to a new style layout.

The other kind was a new Liquid style.  The liquid style uses percentage for most of its sizes and this way the site constantly changes as the window is reduced.  This way of doing it is allot trickier that the first method but the site is Fully responsive and therefore is arguably the better way to go about a responsive site.  If this method is achieved correctly it will cut down on the amount of CSS within each media query, making changes easier and a less chance of overlapping CSS or any hierarchy issues the CSS follow.

Either way responsive sites are soon to be the norm and not understanding, or not looking into this method could be a huge disadvantage going forward, and as students its up to us to be at the top of modern ways when we leave here, as this is our best chance at making it as web designers in the future.

An example I like is http://www.tilde.io/  This is a good example of a responsive site.  The key to designing a site like this is how the menu changes as the screen is reduced, and how the content changes, eg the image changes to a small circle and the text flows under it.  Parts like this are the real idea behind responsive sites and where a good design is becomes a great design.  Knowing what information to keep and what to discard, but at the same time making sure the user feels "at home" in every window size.

No comments:

Post a Comment