Responsive Design

responsive-design
Wed Apr 25 2012

A great deal of talk these days on using a responsive design for your site.

What is a “responsive design” to begin with?

Well it is when your website is aware of the browser’s proportions and corresponds to them, so it can present its content as user-friendly as possible. It is used mostly for effectively displaying your site’s content on various devices (tablet/phone).

How can the browser react to the change of the height/width?

With the use of CSS3. You can add media queries so they can override some css attributes.

For example, imagine this in your css:
@media screen and (min-width: 150px) and (max-width: 600px) {
css here that corresponds to small screen widths
}

You can view an example here -> http://bstavroulakis.com/demos/responsive/ . Try to play with the width a bit and see how the site changes according to the width size.

Over here you can see how the site will look at various devices -> http://www.responsinator.com/?url=http%3A%2F%2Fbstavroulakis.com%2Fdemos%2Fresponsive%2F

Will this work on IE 6,7,8?

No, however you will use this technique mostly to display your site effectively on mobile devices not for the PC.

More cool sites that are responsive?

You gotta love this site -> http://css-tricks.com/
Also checkout these responsive wordpress themes -> http://wpmu.org/16-beautiful-and-free-responsive-wordpress-themes/

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!