Rethinking responsive web design

As many people know, “Responsive web design” means building pages that will render appropriately on a wide range of devices and screens. This technology is continuously evolving, and so are the ways in which we interact with digital content. The tools and tactics we use to create that content are evolving as well – in ways that can allow for a greatly improved user experience at any screen size. In this post, we look at some trends you should keep your eyes on.

1. Think mobile first.

Smartphones are now the primary device and way people access the Web. While designers used to start with the desktop experience, and then work out how that content would look on mobile, it’s been commonplace for several years now to design the mobile view first. As such, the emphasis is on maximizing readability and ease of use – even if it means more scrolling, and a simplification of the information that’s being presented.

2. Think bigger, too.

When starting web design with the mobile experience, the trick is to make sure that the same content works well on a larger screen. Simply making the content larger can result in an awkward desktop experience, with a great deal of wasted space. This is especially important given that the resolution on many users’ desktop screens is getting higher and screens are getting bigger. Pages formerly designed to accommodate a 1024-pixel desktop screen now must achieve resolutions as high as 1920 pixels or more, with screens 32 inches wide or larger.

Thoughtful designers can take advantage of larger screens to add additional material – such as graphics, navigational elements, and even ads – that amplifies and complements the basic content, but is not missed when only the basic content is being viewed on a phone.

3. Goodbye, Bootstrap; hello, Grid and Flexbox.

The tools that designers and developers use to create responsive page layouts have evolved dramatically, in ways that allow a lot more flexibility for creating a positive user experience.

Most developers formerly used Bootstrap, a fairly rigid composition tool that involved laying content out on a 12- or 16-column grid. Based on the number of columns, the content would take up eight columns, for example, and graphics would take up four columns. When viewed on a bigger or smaller screen, the contents of those columns would simply grow, shrink, or stack.

Now, tools such as CSS Grid and Flexbox provide much more flexibility, allowing designers and front-end developers to build experiences that will be attractive and readable on any screen size. Page elements can wrap in a way that suits each screen size while preserving the flow of information. (See this related post for a more extensive discussion of CSS Grid.)

As design, UX, and technology continue to evolve, we’ll keep moving with it, staying open to new ways of working and new tools to add to our skill set.

Stay tuned to Backe social, where we’ll continue to share our marketing insights and digital experiences working in pharma and healthcare, in our ongoing Digital Expertise series.

Comment on this article using #TalkBacke
Find us @BackeMarketing

Backe is a digital marketing and brand communications agency, focused on creating smart, beautiful and strategically-driven work. We build communities, relationships, and meaningful connections.