Your site looks amazing: you’ve got slideshows, lots of content, and plenty of images. But then someone tries to visit your site on their phone. Uh oh. Your site will be a pain in the neck to view, and they’ll probably hit that back button. That’s where the revolutionary trend of RWD comes in.
“What’s RWD,” you ask? Great question! It’s responsive web design, the process of taking a website that looks amazing for people on computers and making it look amazing on phones and tablets! There are multiple ways to accomplish RWD, and we’ll look at those in a bit. First, let’s talk about why RWD is so important.
According to a recent study, traffic from mobile devices is expected to rise 237% from 2009 (from 800 million users to 1.9 billion) in 2015. On the other hand, from that same time period (2009-2015), desktop traffic is expected to rise only 1%, from 1.4 billion to 1.6 billion. The drastic difference in the trends between the two illustrates the tremendous amount of traffic that phones and tablet are capable of generating. Responsive Web Design aims to appeal to those 1.1 billion new users, and make sure you’re getting as much of the traffic as you can.
Additionally, RWD can help with different desktop and laptop screen sizes. As new laptops come out, the screen size can either be smaller or larger. Rather than calling complicated CSS profiles for each screen size, modern RWD uses a fluid grid system to automatically shuffle different parts of the site around to make everything presentable.
Finally, RWD is much more SEO-friendly than previous design approaches. Previously, in order to accommodate mobile devices, designers had to create a whole new site strictly for mobile, which diverted traffic from the main site; or, even worse, designers would strip content and other SEO elements to accommodate. With responsive web design, one site can serve the same content to all platforms, drastically increasing page traffic.
It's clear that responsive web design has definite SEO benefits, but you're probably wondering how on earth RWD works. I can gladly tell you that it doesn’t involve a lot of magic and wizardry, it just takes some HTML and CSS knowhow. There are really three main ways to implement responsive web design, and we’ll touch on these in “SEO Best Practices: Responsive Web Design: Part 2”.