The Future of Responsive Design

Responsive web design, a concept that allows for an optimized website viewing experience across multiple devices, is no longer the wave of the future. Instead, responsive design is here to stay. Trends within the world of responsive design might change from year to year, but as long as the market demands a wide variety of devices the concept of building one website that is functional and aesthetically pleasing on screens and devices of all sizes will be the prevailing philosophy for years to come. So what are the latest responsive design strategies for 2015?


Infinite Scrolling. The mobile device has changed the way people interact with the internet not just on a social level, but on a physical level, as well. Smart phone users have long been forced to tap with their fingers to navigate through websites, a vestige of design that favored the mouse click. But it turns out that instead of tapping to different sections of a website, users would prefer to just simply keep scrolling down and down. This is the idea of the single long scrolling page, and it actually translates back to the desktop, too. Mousers can simply use their scroll wheel instead of their thumb on the screen. An excellent example of the infinite scroll design is The top of the page is the traditional “above the fold” lead stories that might be national or world news, but scrolling down takes you to Sports, Entertainment, and Local L.A. news, taking the user on a seemingly never-ending ride though news content.

Minimalist Approach with Large Photo as Background. The infinite scroll is great for websites with a ton of content, like a major newspaper such as the Los Angeles Times. But this approach isn’t necessary for all websites, especially those seeking an artisanal feel or personal connection. For these types of websites, a single large photo filling the whole screen as the background creates a simple but elegant look. The navigation menus may be hidden in drop-downs on the sides or top of the screen, or they could be just a scroll down to another large photo below the main image. Or a website could take both approaches, such as Uber’s website. Uber uses large images on the main initial view, which change periodically to focus on different aspects of the company. A hidden drop-down menu is located on the top, and even more content can be accessed by scrolling down. The main challenge with this design is picking the right photo resolution. If it’s too small, it won’t look great across all devices. If the photo is too large, page loading time will be slow, especially for those using cellular data.


Mobile-First Approach. While the mobile-first approach isn’t exactly new—it’s in a large part the impetus of responsive design, after all—many designers are fully embracing this philosophy for 2015. As Neilsen research has shown, about half of all consumers believe that mobile is their “most important resource” to research products. More than one-third said that they only use mobile for making buying decisions. Over 60% of total time spent on digital media is done using mobile platforms, according to ComScore. All of these stats certainly suggest that we are heading in a direction where instead of mobile being an afterthought, larger-screen designs should be left in the dust. Indeed, some designers go a step further and say that we’re heading to a “Mobile Only” world, as Brian Solis does in AdAge. Others, such as Alan Trefler, CEO of Pegasystems would disagree entirely. “It’s a big mistake companies are making,” he says. “This whole mobile-first thing is replicating a failure that we saw 15 years ago, when the web started kicking off. Companies with great pride would say, ‘Hey, we set up almost a separate division or separate whole organization to run the web.’ What happens then if you overbuild in that individual channel?” Again, Mobile-First isn’t a new concept for 2015. But the heated debate over how important an idea it is will still be around for this year and beyond.

Scalable Vector Graphics. For the flat design that is so popular today, designers can use Scalable Vector Graphics, or SVG images to create both mobile and desktop-friendly designs. The huge advantage to SVG images is that they are not resolution dependent like bitmap or raster graphics are; these types of files will appear pixilated when enlarged. SVG images, however, are scalable at any zoom level meaning that they will look just as sharp on an iPhone 4 as they will on a 27” Retina display. SVG images are XML files that work with all major web browsers, including Safari, Google Chrome, Internet Explorer, and Mozilla Firefox. They can easily be implemented using CSS and JavaScript. While they are just one element of design, SVG images can give designers more time to focus on the layout of the website instead of addressing concerns over image resolution.


Google Material Design. As much as Google looks toward the future with elevators to space and driverless cars, the company has gotten back to basics with their material design specification. The idea is to combine the tactility of paper and ink with today’s technological advances in design. “The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments,” reads the design spec. “These elements do far more than please the eye. They create hierarchy, meaning, and focus.” The goals of the specification are to create attractive transitions and animations that effectively communicate to users while appearing aesthetically pleasing. The design specification will use all of these elements and others from the physical world (such as directional lighting and shadow) to create meaning that is instantly translatable to any user at any time. By replicating the real world that we have been interacting with since birth, Google seeks to implement a design specification that is as simple as drawing on or reading from a chalkboard, so that designers of all skill levels can easily create a website that tells their audience exactly what they mean to say.

Leave a Reply

Your email address will not be published. Required fields are marked *