Before the launch of the iPhone in 2007, surfing the web on a mobile device was a painful experience. For smartphones in the era of Windows Mobile 6.1 and earlier, it was necessary to use temperamental zoom features to zoom in and out of parts of a full-sized website.
For feature phones that had to use WAP for mobile browsing, this was even worse. It took a long time to load even the most basic of information, images were nearly impossible, and you only had a small square screen to read it on.
Separate Mobile Sites
The solution in the late 2000s was to create a separate mobile site, often mimicking the original iPhone UX. This was much more primitive than the full desktop version, but it was easy to use, but it was problematic as it meant maintaining two sites, using a WordPress plugin, or clever scripting to make the two versions run side by side.
It was made worse by the fact that 3G was a relatively new technology, and mobile data packages were very expensive. So your mobile browsing experience was terrible and you had to pay an arm and a leg for it.
Responsive Web Design
This all changed in 2010, though. A web design called Ethan Marcotte published a blog post in which he urged designers to begin using “responsive web design”.
His argument was that responsive design was the only way websites could be designed in the future as it would become impossible to create versions for all the different sized screens and different input methods.
He even provided examples of how this responsive design could be set out in the CSS, using methods now that are standard right across the internet.
Examples of Good Responsive Design
Since the technique has been around for several years now, there are many great examples of responsive design. These include:
-
- PokerStars – the experience on mobile is just as easy as on a desktop, with images resizing and the layout falling into place below other objects, instead of alongside.
- Dropbox – the site uses a fluid grid with flexible visuals that make the experience great on any size device. Font colours even change as it moves over different backgrounds.
- GitHub – the design responds seamlessly between desktop, tablet and smartphone devices, changing from two columns to just one and even replacing a sign up form with just a sign up call to action on the smartphones.
Apps
Sometimes a mobile app is a more appropriate solution, even if a mobile website can be offered. For example, Dropbox also has a mobile app for users of its service that is separate from its mobile site. The site is more aimed at selling its services, while the app is designed to be easier to access and manipulate cloud files.
The same applies to games. Mobile apps are much more appropriate for mobile games as they can make use of full screen and more of the device’s features. For example, it would be difficult to play the Call of Duty: Mobile from inside the Safari or Chrome app.
Mobile First
Since 2019, Google has been indexing new sites as “mobile first”. This shows that the search giant understands that the mobile experience is now often more important than on desktop.
More than 50% of all of Google’s sites are now indexed as mobile first, reflecting the fact that a similar proportion of all searches are now done from mobile devices.
It’s therefore never been more important for your website to be responsive and be designed to work well for mobile devices. Some research has even suggested that 40% of users will even choose a competitor business if the mobile site does not offer a good user experience.
In addition to the better user experience, a responsive design means only one website to maintain, one set of analytics and tracking, and lower overall costs.
So in 2020, a mobile-friendly, responsive design is the only way to design a website. It provides a better experience to its user and lower costs to its owner, making responsive web design win-win.
