Your website is being viewed on all kinds of devices: desktop computers, tablets, phones, laptops, etc. This can be a challenge: you want your site to function and display well regardless of screen size or shape. “Responsive web design” is a term for designing and developing a layout that changes to fit a variety of screen sizes.
There are a number of advantages:
– Only one site to maintain.
– Much more likely to work with new devices.
– Responsive is the recommended method by Google.
And a few challenges:
– File sizes have to be small enough to work with potentially slow phone internet speeds.
– More difficult to test.
We use a variety of tools and libraries to create responsive layouts. One of our favorites is the Skeleton CSS boilerplate. It uses a grid system with multiple columns that combine and reorder as the screen size changes. It provides a foundation of basic styles in a series of CSS files, and uses media queries for the scalable grid.
The media queries Skeleton uses are not based off specific device screen dimensions, but rather min and max widths to account for every possible screen size and shape. This allows for your website to look great on any device and increase overall traffic to your site.