One website, many devices
What is Responsive Web Design?
Responsive Web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.
Responsive web design aims to give users easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).
A site designed with Responsive web design adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.
Why use Responsive Web Design?
Mobile devices, phones and tablets, will become the most popular way to access the internet, which is why responsive WordPress themes are in high-demand.
Google Recommend it
Google states that responsive web design is its recommended mobile configuration, and even goes so far as to refer to responsive web design as the industry best practice.
This is because responsive design sites have one URL and the same HTML, regardless of device, which makes it easier and more efficient for Google to crawl, index, and organize content. Contrast this with a separate mobile site which has a different URL and different HTML than its desktop counterpart, requiring Google to crawl and index multiple versions of the same site.
One Website, Many Devices
A responsive website can provide a great user-experience across many devices and screen sizes. This is an important characteristic, since it is impossible to anticipate all the devices and screen sizes searchers will use to access your site. A site that works well regardless of these variables will provide a better and more consistent user-experience than a separate mobile site that is designed for a specific device and screen size.
Easier to Manage
Having a separate desktop and mobile site requires twos sets of pages to manage. It can also mean having separate SEO campaigns. Managing one site and one SEO campaign is far easier than managing two sites and two SEO campaigns. This is a key advantage a responsive website has over a separate mobile site
Responsive designs share common elements
- Content is the same no matter the device’s screen size (WordPress posts and pages)
- Style, coloring, branding, etc. are the same or substantially similar across devices (logos, images, color palettes)
- Layout adapts to the screen’s size, with optionally specified minimum and/or maximum widths (usually using CSS3 media queries)
Some responsive WordPress themes have options for browser-targeted styling and other options, but that’s not really a new way to do things, and browser-specific targeting can be a pain to implement.
Alternatives to Responsive Design
Here are the alternative choices when considering how to best serve your mobile visitors.
Static Width
Tried and true. Your site is 1200 pixels wide and that’s it. Mobile browsers like phones and tablets do a pretty good job fitting it all into the small screen width, and pinch-to-zoom works well for getting a bigger view. When pinching to zoom on responsive themes, the site’s layout changes as if it’s a new browser width to adapt to, just like resizing your desktop’s browser window. Static width sites just stay put and let you zoom in and out all around.
Static widths are the easiest to design for; they’re predictable. For users, though, sometimes they’re a pain (horizontal scroll bar anyone?).
Separate mobile site
A separate mobile site is just that, separate. It’s content, style, and layout are all different from the desktop version. Separate mobile sites are great for user experience because they’re specifically designed for your phone or tablet. Mobile WordPress plugins like WPtouch and Onswipe are quick, easy, and free ways to have a dedicated mobile site for mobile phones (WPtouch) and tablets (Onswipe).
Other plugins exist to redirect mobile visitors to your URL of choice (like m.example.com or mobile-example.com).
There are different ways to make a separate mobile site. The good news is that your site looks great and is pared down for mobile. The bad news is that your mobile site might not have much in common with your desktop site, which isn’t ideal for branding and user experiences. With a bit of customization and tweaking, a separate mobile site might be your preference, but you should really consider how the content and style relate to that of your desktop site.
To choose or not to choose Responsive Design, that is the question
Like anything, responsive design can be done well or poorly. Designing for mobile first helps keep page bloat down, increases site speed, and improves user experience. Anyone can create a website and pick a theme, but it takes more know-how and experience to design a website for mobile and create posts and pages with mobile first in mind, which is how you do responsive design well.
When done well, a responsive WordPress theme, or any of the alternatives, will have the desktop and mobile versions of the site very similar, if not the same, in styling. This helps extend branding to and reduces confusion of users who visit both versions. It will also display the most relevant content with the best possible layout, since mobile screens are smaller and content extends vertically quicker than on wider desktop monitors.
In addition to the user experience benefits, responsive WordPress themes are (usually) easier to maintain than separate mobile sites. Your site’s style is already implemented; you just have to make the layout “respond” to different screen sizes. You’ll need to make your design decisions based on your expected audience, budget, and preferences.
Leave a Reply