(Graphic courtesy of OpenSignal.com)
Responsive design is the latest trend in web design and development, and for good reason.
Take a look at the graphic below.
That graphic roughly illustrates how many different screen sizes are out there on Android and iOS devices. And that doesn't include Windows, BlackBerry or other devices.
According to StatCounter, so far in 2013 almost 14% of US users browsing the web do so on a mobile device - and amount that's doubled since 2011, and these numbers will only continue to go up.
Because of this we can no longer assume that people browsing the web are using a computer with only 3 or 4 possible screen resolutions. Tablets and smartphones have burst onto the scene in the past 4 years, and the industry needed a solution for all these screen resolutions. That's where responsive design comes in.
Responsive design uses fluid grids, flexible images and media queries in CSS3 all of which allow a website to adapt its layout to the screen resolution the viewer is using.
That means if you load a website both on an iPad and iPhone you will see a slightly different looking site, even though the content will be identical, just positioned differently.
Take a look at SurfRightProject.com on your desktop. Now open it on your smart phone or tablet. We built Surf Right using HubSpot's new landing pages and it sports a beautiful responsive design. You'll notice the site has a different layout from the desktop browser to the mobile browser, but it is the same exact site. Same images, same content - just in different positions.
If you don't have a smart phone or tablet you can resize the browser window horizontally and you'll see the site reconfigure itself as you resize the window. Magical, yes?
Images resize, text blocks reconfigure, and the navigation conforms to fit the smaller screen.
Hubspot's main site and blog are currently rocking great responsvie designs, and we will be relauncing our site with a responsive design shortly.
It used to be that if you wanted a site optimized for mobile users you would have a mobile site hosted on a completely different server. That is sooo 2011 bro!
Mobile sites are less ideal because you're now maintaining two different sites. That means if you update content on one site, you need to update it in two places. Double the work, double the risk of issues.
Mobile sites also tend to have less information on them compared to full desktop sites. As more people are browsing the web on phones and tablets you're affectively hiding your valuable content from potential customers and that's a big inbound no-no.
Responsive is also better for SEO. On a responsive site you have one URL, with a mobile site you have the desktop site (www.yoursite.com) and the mobile site (m.yoursite.com or mobile.yoursite.com). Google has said that they prefer responsive sites with a single URL.
The most important benefit of responsive design is to your customers. A responsive site gives your readers a consistent experience no matter how they consume your content.
You May Also Like
