Responsive Web Design
Ethan Marcotte, author of this original A List Apart article back in 2010, provided us with the concept of Responsive Web Design. Removing the need to develop multiple versions of the same site for different devices, it's popularity led to the release of his book.
I'd like to share with you a few concepts of Responsive Web Design, allowing the content and structure of the website conform to that of the device or browser.
DYNAMIC STRUCTURE
Starting any layout, we typically rely on pixels. Measuring the width of our structure from the design document. Ethan's concept suggests using percentages. Requiring a little more calculation, but otherwise fairly simple.
Now since we do not want to simply shrink everything down, we combine this with the use of CSS Media Queries. These can be thought of as conditional CSS, allowing us to alter the structure as a whole when the browser size drops below a certain size.
Check out this article for a more detailed explanation on media queries: http://css-tricks.com/css-media-queries/
RESIZING IMAGES
Now since images don't adjust themselves into the containing structure like text does, we have to call on the use of JavaScript. We can save out two versions of the image, one optimized for mobile and another for browsers capable of larger sizes and resolutions. The JavaScript is then used to render the image proportionally and at the appropriate resolution.
Here is a demo and how to guide that might help: http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
DISCOVERING AN ALTERNATE SOLUTION
After hearing Ethan discuss this concept at Front-End design conference in 2011, fellow WDD instructors and I found ourselves very excited about it. Now most users do not actively resize their browser as they experience the web, but we found that we disliked that the continual re-render as you do. To this end, I've created an alternate solution based off of Ethan's original concept.
I'd like to share with you a few concepts of Responsive Web Design, allowing the content and structure of the website conform to that of the device or browser.
DYNAMIC STRUCTURE
Starting any layout, we typically rely on pixels. Measuring the width of our structure from the design document. Ethan's concept suggests using percentages. Requiring a little more calculation, but otherwise fairly simple.
Now since we do not want to simply shrink everything down, we combine this with the use of CSS Media Queries. These can be thought of as conditional CSS, allowing us to alter the structure as a whole when the browser size drops below a certain size.
Check out this article for a more detailed explanation on media queries: http://css-tricks.com/css-media-queries/
RESIZING IMAGES
Now since images don't adjust themselves into the containing structure like text does, we have to call on the use of JavaScript. We can save out two versions of the image, one optimized for mobile and another for browsers capable of larger sizes and resolutions. The JavaScript is then used to render the image proportionally and at the appropriate resolution.
Here is a demo and how to guide that might help: http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
DISCOVERING AN ALTERNATE SOLUTION
After hearing Ethan discuss this concept at Front-End design conference in 2011, fellow WDD instructors and I found ourselves very excited about it. Now most users do not actively resize their browser as they experience the web, but we found that we disliked that the continual re-render as you do. To this end, I've created an alternate solution based off of Ethan's original concept.