How has responsive website design affected the way websites look?

How has responsive website design affected the way websites look?

One of the most exciting advancements in web design over the last five or so years has been the introduction of responsive website design; a development technique that allows a website to respond to its environment and adapt to best fit the size of the viewer’s screen. 

This has allowed designers to create websites that suit all variations of screen size, from desktops and laptops to smartphones and now even smart watches. The surge in popularity of responsive design has not only revolutionised the way that we as end users access and experience websites though, it’s also had a huge impact on the design industry. 

Beyond just developing the necessary ‘responsive’ technology, designers have been faced with the added challenge of creating new concepts and techniques to provide users with a seamless experience across all devices. The following trends have emerged as a result.

Flat Design

One of the most significant trends that has come about as a result of responsive website design is flat design. In the past, designers have been largely focused on showcasing their creative abilities by producing flashy illustrations and animations to “wow” their visitors. Emphasis was placed on skeuomorphic design; a style which mimics real-life objects by way of implementing faux-realistic shadows, reflections, textures and detail. 

Then came flat design; a trend which opposes all of these ‘artificial’ design techniques to make way for open space, crisp edges, bright colours and two-dimensional illustrations. 

Microsoft was the first of the big players to implement flat design with the launch of Windows 8, and this was seen by many as a backlash against the then-popular skeuomorphic design style that was featured in Apple’s iOS6 interface (Apple quickly responded with the launch of iOS7 in 2013, hailed by many as ‘the end of skeuomorphism’). Rather than trying to replicate the detail of real-life objects, flat design identifies with minimalist icon-like images and discards ornamental elements that are simply considered “clutter”.  

Flat design

But just because it lacks flashy design, doesn’t mean it’s boring; flat design uses bright, contrasting colours to grab attention, and forces the focus to be on user experience rather than aesthetics. This is part of the reason it was so highly influenced by responsive design, which was born out of an effort to improve and simplify the experiences of mobile web users. 

Grid/Card Layouts

The birth of responsive design also helped the web to become a little bit more modular, as the constraints of smaller screens ushered designers to develop ways of breaking up page components to better suit mobile phone and tablet screens. 

Thus attention became focused on ‘cards’; a design pattern for displaying information in bite-sized containers. Pioneered by Pinterest, cards are perfect for mobile devices and responsive designs because they allow pages to populate based on screen size without disrupting the flow of content. They come in all sizes, and adapt to fit vertical or horizontal screen orientation without the need for any drastic page restructuring. And since cards are predominantly rectangular or square, they provide convenient breakpoints which makes rearranging page content for mobile phones and tablets a piece of cake. 

Card layouts in responsive website design

Hamburger Menus

Another thing that we’re seeing time and again as the web becomes continually more mobile-friendly is the hamburger menu. The hamburger menu was introduced to simplify navigation on mobile devices, allowing for cleaner, less cluttered designs. Its widespread use means it has become easily recognised by most mobile web users, but some have criticised the tool arguing it has negative implications for consumer engagement. 

Hamburger menus in responsive website design

The initial purpose of the hamburger menu was to conceal messy navigation bars and save screen space on mobile devices, but the trend gradually began to creep up on desktop sites, and not without damaging consequences. 

Essentially the hamburger menu hides a website’s features off-screen, and as the saying goes, what’s out of sight is also out of mind. Therefore any navigation options that are hidden behind a hamburger menu are likely to be forgotten about altogether. And though many have become accustomed to recognising and using the hamburger menu, it is nondescript to many which adds to the risk of content being lost or forgotten about. 

Despite these shortcomings, many mobile apps including Snapchat and music streaming service Tidal still use the hamburger menu because it’s an easy way to pack lots of functionality into an app, but we are now beginning to see them disappear from desktop websites.  

One-Page Websites

A one-page website is pretty much what it says on the tin; a website that comprises one single HTML page. 

In the world of search engine optimisation (SEO), the concept of a ‘one-page website’ is unheard of; since Google uses the information on your website to decide whether it’s relevant to a search or not, having only one page of indexable content dramatically reduces your chances of being returned in its search results. 

But with partial thanks to responsive website design, one-page websites have come to exist. Due to their simplistic design they are great for mobile viewing, and require very little restructuring for mobile devices. They also offer slightly faster browsing as the user isn’t required to navigate through different sections of the website, which is why they appeal to today’s increasingly impatient generation of mobile-users. 

That being said, while this trend is currently a popular one, it’s not particularly practical. A one-page website can be confusing to the user if it’s trying to put across too many messages, and they generally contain less information compared to your average full-scale website which can be frustrating for some! 

Wrapping Up

So as you can see, the web has changed considerably over the last few years and we owe much of that to responsive design; a huge umbrella that encompasses and influences a number of different design styles. 

Like in most industries, trends are evolving all the time and as technology continues to move forward, it’s inevitable that the ones we’ve mentioned here will be substituted for new ones.

Having said that, with Google constantly making updates to its algorithm and the importance that it places on mobile-friendly design, responsive design is more relevant than ever, and we can see it staying that way for a long while to come. So, if you’re interested in finding out more about how it works exactly, keep your eyes peeled for our next post which will provide a deeper insight into the technicalities of responsive design. 

READ NEXT: 6 reasons why Google loves responsive web design



Responsive website design, Design trends, Flat design




Post a Comment


We always try our hardest to avoid using confusing technical terminology, and endeavour to explain e...


Social media is a phrase widely used over the last decade. People have started to use it vaguely to ...


Ever wondered how can you create web copy that ranks well with Google, while also persuading your po...


Nowadays we are so heavily reliant upon technology that it's hard to believe so many small businesse...


Copywriting in any sense can be a challenging task. But when writing content for your website, not o...


Let’s face it; we’re all guilty of Googling our own businesses occasionally. For some of us it’s ...


In our recent series of SEO tips, we recommend bringing your content in line which the related Googl...


A lot of small-business owners are unaware that most of the images you find on Google are licensed f...


While their main objectives are to add visual appeal and to support and strengthen marketing message...


It’s unbelievable how much free software there is out there. In fact, you’re pretty spoilt for cho...