To build a website that performs well on smartphones remains a challenge we’ve yet to completely crack. Back in the day, mobiles were used simply for calls and messaging; what a way we’ve come since then. Today’s smartphones are powerful computers, with expanding 3G and 4G networks enabling us to stay connected almost anywhere. In tandem, we’re also seeing the gradual disappearance of the dedicated mobile website, thanks to the ascendance of responsive web design. The speed at which technology now develops is unprecedented, and the design world must do its best to keep up. This article covers some of the key aspects that have altered web design as a result of increased smartphone and social media use over the years.
What is responsive web design?
Very simply, responsive web design is the use of design elements that will enable a web page to automatically respond to the screen size and ratio of the device being used. In the past, what many businesses did instead was build a custom mobile website with its own URL, which would tell the page to rearrange itself to fit a mobile screen, rather than a desktop.
Responsive design has changed the game for a number of reasons, the first being SEO (if you’re not familiar, see this guide) and the second being user experience. Having two separate websites makes it hard to consolidate and streamline your SEO efforts to ensure that you rank for the top relevants keywords in Google and other search engines. Meanwhile, the improved speed and visual appeal of a responsive website makes for a much smoother and less frustrating experience for visitors.
No such thing as a standard screen size
In its earliest incarnation, responsive design was simply about enabling websites to automatically adjust to a new screen size. At the time, most smartphones had a standardized screen size, and the primary tablet on the market was the iPad – again, just one screen size. Flash forward to today, and the screen sizes on different smartphones and tablets can vary drastically. For instance, the Galaxy Note II is 5.5” and 1280 x 720 px. The Galaxy S4 is 5” and 1920 x 1080 px. And the iPhone 5 is just 4” and 1136 x 640 px.
Therefore, design elements have to take into account these differences in screen size to ensure a collectively good experience across all devices – not just one. Designers and coders have had to find new ways of approaching CSS to account for these small variations.
How mobile devices have changed us
Smartphones and tablets have shaken up a lot of our viewing and media consumption habits. Let’s start with what they were originally designed for: communication.
The world’s first mobile phone was made on April 3 in 1973 by a senior engineer at Motorola. They started to become more widely available in the mid 1980s, and by 2011, it was estimated that more calls were being made via mobile than landline. Mobile phones gave us the amazing (and frankly underrated) ability to send and receive calls and messages around the globe, from wherever we happened to be. The smartphone came along after the Millennium, and added additional layers of usability such as email and web browsing. Now, we take it for granted that we can access the internet at almost any time, wherever we go.
Then came the social networks. The first social media site – Six Degrees – was around as early as 1997, but they didn’t really start to take off until the early 00s with the advent of MySpace, LinkedIn, Facebook and Twitter. The boom in social media popularity was enormous, and the medium has since become a constant object of our attention, as well as one of the top ways of driving web traffic. The average person will spend more than five years of their lives on social media (Source).
Our smartphones also give us access to a plethora of useful (and less useful) applications, from essentials like GPS, email and online banking, to definitive non-essentials, such as Punch Quest and Flappy Bird. According to NY Daily News, 84% of people worldwide say they couldn’t go a single day without their mobile device. In other words, we are addicted.
The overriding point is that to succeed online, websites simply have to be mobile-friendly. More and more consumers are using their smartphones and tablets to access the internet, and increasingly, to shop online. If you’re running an ecommerce business, the importance of using a responsive mobile commerce theme cannot be overstated.
Exploring layouts
There are 7 responsive navigation design patterns that have emerged in recent years – the toggle, the toggle overlay, the multilevel toggle, etc. In addition, we can also see two popular layouts that have become particularly pervasive, largely dictated by social media. These are as follows:
Scrolling layouts
Until fairly recently, web design was very much focused on creating websites that could deliver a message instantly, without any need to scroll down for more information. Google even released an update that would penalise sites for doing so. And while delivering that instant message remains key, social media feeds have since trained our obedient fingers to scroll, and we do so almost without thinking when we land on a new website. Likewise, a surfeit of apps that require us to swipe also make this an automatic response. For this reason, many web designers will employ some sort of parallax scrolling effect, enabling websites with long pages to make use of creative design elements.
Tile layouts
Likewise, we have also been influenced by social networks such as Facebook, Twitter and Instagram into introducing a card-style layout, which can be seen on these networks’ home feeds. Essentially it means content that is boxed off – observe how Instagram’s home page is arranged in tile form – and it enables up to scroll through the feeds more quickly.
The two conventions in combination have since been adopted by a great many sites, particularly news sites or online magazines that have a lot of content to display in a relatively small space.
What next?
It’s clear that for anyone who intends to make a name for themselves online, responsive web design is the way to go. Designers and developers have come up with all sorts of guidelines and best practices that do a lot of the legwork for you – not to mention the wide range of responsive themes and templates available that require very little behind-the-scenes work.
However, we should remember that ultimately, responsive design is still in its infancy. A lot of websites still don’t have it quite right, and there is certainly room for improvement. Responsive design does, for example, sometimes fail to take into account the correct way to handle information, favoring usability over context. What’s more, we have new devices and technologies in development all the time, with who knows what potential impact.
A standard ‘brochure’ website with a simple text and header image combo may do the job for some, but increasingly there is a trend towards website owners tailoring their online brand with mobile users in mind – and this is very wise. In a typically fast-paced and fast-changing industry, it’s always fascinating (and encouraging) to see the intuitive solutions that the best mobile web designers and developers come up with.