Most of us, when designing a website or a webapp, design for a specific size and resolution. But today, users access the site from various devices including their laptops, tablets and smart phones. ""Responsive Design"" is a solution to optimize and display content for a variety of screen sizes and resolutions.
Responsive design is quite simple, all you need is a flexible layout grid, flexible images, and CSS media queries. All right, it's not that simple! It's a downright nuisance trying to figure out the precise percentages required for the width of a container, the margins, the padding ... and once you're done, you still need to do it all over again for a different resolution!
But it does not have to be tough. SASS takes care of all the heavy lifting and calculations, so that you can focus on what matters, getting your work done. I'll show you how you can use the new tools introduced in Rails 3.1 to easily implement a responsive design that works across devices (smartphone, tablet and laptop). Along the way, I'll also cover current best practices and explain the reasoning behind them.