Graphic of desktop, tablet and phone

Four Web Designs that Work on Every Device


Not even five years ago, the vast majority of websites were designed for computers because that’s where people were surfing the Web. But today, the phrase “World Wide Web” is more accurate than it’s ever been—and we access it from more devices than ever before.

So, web designers, developers, businesses and brands have needed to figure out ways to create websites that look great – and function better – not only on the diverse range of devices at our fingertips today, but also on the many, many more that will crop up within the next five years.

Here are four of the approaches worth considering when building a beautiful, functional website in the multi-device era.

Responsive Web Design

Responsive web design (RWD) has become an expected standard in websites today. According Tarun Mitra with Think Next, “Responsive web design … websites are optimized for screens of all sizes: small mobile devices, tablets and large desktop monitors. We will see RWD drive the decline of standalone mobile-optimized sites and native apps. In fact, it is already the trend and the right path to follow.”

You know RWD as those websites that shrink down with the browser when you adjust its size on your computer. They can also shrink down to fit phone screens and tablets, thus responding to the size of the device. With mobile device web browsing as prominent as it is today, RWD is the new standard of web design.

Device-Agnostic Web

Responsive web design sounds inherently device-agnostic; after all, the entire premise is that it functions on any size device. However, some developers argue that the two approaches are not quite the same thing – at least not yet. So what does device-agnostic design really mean?

Web guru Trent Walton describes it this way: “A device-agnostic approach … takes into account infinite combinations of screen resolution, input method, browser capability and connection speed. I use the term device-agnostic, now synonymous (to me) with good Web design, to distinguish those sites that embrace the inherent variability of the Web.”

So instead of designing a website that can respond to any screen size, device-agnostic site design isn’t dependent on knowing what device the website is being displayed on at all.

Scalable Web Design

Perhaps even less familiar than responsive and agnostic design is scalable web design (SWD). As defined in Think Next, “Scalable web design is a methodology for designing websites capable of being displayed on screens with both low- and high-pixel densities.”

For the graphic designers in the audience, scalable web design uses scalable vector graphics (as opposed to raster), capable of adjusting in size without a loss of detail. In theory, scalable vector graphics work well in all environments – and, as a bonus, work well with slower Internet connections, too.

Flat Design

Last – but not least – on our list of approaches for building websites that work on any and every device is flat design. Flat design is a style that doesn’t use any three-dimensional elements, even going so far as to exclude gradients, bevels or shadows. The look, as described by the name, is essentially flat. The logic behind flat design is that web designers can save a lot of time in the development process, as the design only needs to be created once and will look great on all screen sizes.

So why do all these web design options matter? Mitura answers it this way: “In the future we need to develop products that algorithmically adapt and respond to a user’s behaviour, needs and maybe even moods, in real time.” At The Brandon Agency, we’re already taking these trends into account with the websites we work on – thinking through how the website will suit users’ needs both today and into the future.

Comments