Modern Responsive Design

Author by Carl Schweitzer

Responsive design is something that has been with us for several years now. It is a way to provide flexibility to websites so that they still look good across multiple screen sizes and device types. Responsive design has also done a little growing up as well over the last five years. This week on the MS Dev Show, we interview Karen McGrane, a leading responsive design expert. At the heart of responsive design, technically, is CSS media-queries. These allow us to change our design by applying different CSS under varying circumstances. With this basic tool, we can keep our site looking well in all scenarios. We also get a lot for free while doing this. If we design a site in a mobile fashion, we also have a site that looks good if a user makes their browser narrow. in additional to media queries, you'll want to look into fluid grids, and flexible images. One of the larger shifts in responsive design in the last few years is how to target our media query breakpoints. Initially we'd look at our analytics and see the sizes of the screens that our users used. This led to forcing our content into "mobile", "small-tablet", "large-tablet", "small-monitor", and "large-monitor." The best way to determine breakpoints now is based upon our unique content. As we resize our site, we should set a new breakpoint whenever the site no longer looks good. This way, we design for our content. With the proliferation of devices of all sizes, responsive design is more important than ever. From mobile devices that we started responsive design for, to ever larger monitors and even the ultra-large Surface Hub, we can keep our web sites looking professional and stylish in all scenarios with this technology.