Sites That Work Beautifully on Phones, Tablets, and Computers
Responsive design creates sites that adapt to any screen size
Your Content, Everywhere
In the past few years, web browsing from phones and tablets has grown tremendously, approaching one-third of all traffic for many sites. Now that people can view your website wherever they are, the potential impact of your site has expanded dramatically.
To take advantage of this opportunity, your site must be easy to use on a wide range of devices.
Responsive Design to the Rescue
To improve the browsing experience on smaller screens, responsive design has evolved as the most widely used approach to making sites work well on all devices.
The example below shows how the same design adapts from a desktop screen, on the left, to a phone, on the right. Note that, unlike unresponsive sites, the type size doesn't shrink on smaller screens.
How Responsive Design Works
Responsive design is based on a few central techniques:
- CSS media queries are used to apply different CSS rules depending on the width of the device that is viewing the site.
- Images are scaled by the browser, typically to a percentage of the column or page width.
- Column widths are generally set as a percentage of the page width, rather than as a fixed size.
We build sites using the Bootstrap framework, which provides an excellent toolkit for quickly creating high-quality responsive designs.