You may have heard the term “responsive web design” before and wondered what it is and how it’s different from regular old web design? In the past, screen sizes were more standardized and web sites were often built at a fixed width. If your screen happened to be smaller you’d get a horizontal scroll bar. People are accessing the web on so many different screen sizes now though and a new, more flexible approach is needed. Enter responsive design.
A few approaches emerged when considering mobile devices and their smaller screens: a dedicated app visitors install via an app store, a separate mobile site (commonly called m. sites), and responsive design. In the latter, your site is built once on one platform but in such a way that the layout can grow, shrink and adapt to the screen it’s being viewed on. There’s just one backend to maintain and it can be faster to build than dedicated apps and sites. Responsive web design is our preferred approach to the flexible screen size problem.
Our designers and developers start with the smallest screen size (typically seen on smartphones in portrait mode) and then size up the browser window until the design could use some love. At this point they put in a breakpoint to show that some new layout and design rules are applied. They repeat this process until we have a site that looks good on everything from small phones to large monitors.
The intent is to have the content formatted in the best way for the current screen size. This means that the site won’t look identical on every device but that’s ok. What works on a 21” monitor doesn’t always work on a 7” touchscreen and vice versa.
Responsive web design gives us the tools to make the site work for every screen.