Responsive Web Design

Responsive Website Design for more online business

Responsive Website Design for more online business

Responsive Web Design Simply Explained

Responsive web design is the hottest and most ubiquitous Internet trend going into 2013 and will be for years to come. But why? And just what does it mean to have a “responsive” or “fluid” website?

A Responsive Website Design means more business

Let’s begin by answering with some questions. Did you know that desktop search declined for the first time in the history of the Internet in September of 2012? Did you know that Facebook disclosed in its IPO Prospectus that 90 percent of its 900+ million users access their site via mobile device? Did you know that Twitter handles a whopping 1.6 billion search queries every day, has a 70 percent retention rate and of its 500+ million registered users, 55 percent access the social network via mobile? What these impressive figures mean is that people are increasingly accessing the Internet through their mobile devices. And while this doesn’t necessarily make desktop computers obsolete, it does mean your site, in order to stay in-line with technology, should be completely viewable and fully functional on a mobile scale.

Why Mobile-First

Mobile or adaptive design is fast becoming a must-have element for any website. By the end of 2012, Apple alone sold 85 million iPhones and 34 million iPads, according to the Washington Times–and those numbers don’t include Sony, Samsung, HTC, Windows, Motorola and other manufactures’ mobile devices.

Several other popular news media companies, including TIME and USA Today, are also taking advantage of [responsive design], which helps to neatly distribute content across a wide variety of devices, from desktop computer to smartphone and everything in between. It’s not just news outlets that have taken a responsive approach. In the ever-popular WordPress market, nearly all newly released themes come fully mobile-optimized, bearing the mark “responsive” on their download pages. —Mashable

So, any sites which do not have a liquid feature to make them accessible through mobile platforms are missing-out on millions of consumers being able to view their site alternatively to desktops. And that means web properties which do have progressive enhancement are going to be preferred by a majority of consumers. It’s also important to note that responsive website design not only makes a site accessible via smartphones and tablets, but makes them convenient for people to use at any time they wish. That translates into more pageviews, longer time on site and increased conversion rates.


Implementing Responsive Web Design

Understanding the way people view a website and how they interact with it is key to implementing responsive design. For instance, if a site is an ecommerce store, then product browsing, a shopping cart and checkout are necessary for functional responsive cyber properties. If a website is selling a service, then it should accommodate visitors who want to book an appointment, schedule a service, or purchase a service on-demand. Other considerations about a mobile site is how it will interact with third-party platforms, such as social networks. Features are just as important. Every mobile site should have certain elements in order to be of the greatest use:

  • Consistent branding. Your mobile site and desktop site should have the same look and feel for a sense of continuity.
  • Calls to Action. Just like your desktop site, your mobile property should have conspicuous calls to action. Features like “Click to Call” are among the most important.
  • Optimized images and code. Visitors will quickly bounce off a mobile site which doesn’t quickly load. Rather than wait, people will just click away and go elsewhere.
  • Large buttons and easy navigation. A good responsive site takes into account the limitations of mobile devices. So, it should have big buttons and intuitive navigation.
  • Link to your full site and conspicuous contact information. Mobile visitors may want to bookmark your full site and view it later on a desktop or email the URL to a friend–give them that opportunity. And because they’re already using their mobile device, be sure to have your phone number, address and email handy.

If you need a responsive design incorporated into your website, then contact us for a free consultation. We can make your site viewable and functional for any mobile device.

Converting WordPress to be Mobile-Friendly

A Mobile Friendly WordPress website has never been more important.

Responsive, Progressive Enhancement or Mobile plugin?

As mobile devices becomes less of a luxury and more of a necessity, the bottom line is becoming obvious: your static WordPress theme needs to be Responsive. Now’s the time to seriously consider converting your WordPress theme to be Mobile-Friendly.

Not too long ago, the primary way to adapt to a mobile audience was to create an extra theme. Developing a mobile version of your website has drawbacks. Constantly evolving mobile gadgets have added to continually changing screen resolutions.

Keep this in mind; that you are converting your WordPress theme NOT for any one individual device, but for different screen sizes.

There are a number of WordPress plugins available that automatically generate a mobile-friendly theme for a variety of devices. However [ in my opinion] they come at an unacceptable cost to your Web site’s graphics and user-experience design (UXD). We’ll focus on Responsive design. Responsive is a general term that identifies a liquid layout that conforms to the viewer’s screen size regardless of how large or small.

WordPress Page Structure

WordPress Page Structure Diagram

If you’re not ready to delve into code, find a SIMPLE well-written plugin. There are several plugins that will accomplish aspects of our Responsive conversion. For the sake of expediency, there are a few responsive (aka fluid) plugins available that will get your site part of the way to our goal.

It’s always better to code customizations into your [child ] theme’s templates instead of installing plugins.

Fluid, Static, Rubber, Flexible and Elastic

There are various coding techniques which adapt your Web site layout to different screen sizes. Some rely solely of Cascading Style Sheets, while others rely on a combination of CSS and JavaScript.

Fluid containers, image sizing, and CSS3 Media Queries are the basic ingredients for responsive web design.

Deconstructing Your WordPress Theme

To better understand the way things work, it’s sometimes best to take it apart. Let’s visually deconstruct your Web site by breaking down the basic components of the default (Twenty Ten) WordPress page structure. I’ll reference the basic HTML structure Twenty Ten for this tutorial.

As of March 12, 2012 the default themes bundled with WordPress is Twenty Ten and Twenty Eleven. The latter is a Responsive theme.

Scaling Images Efficiently for Screen Size

In the Fluid method the same large image used for all screen sizes which can adversely affect load times. For example; imagine a 1000 pixel image having to load on a Mobile phone, only to end up being scaled back down to 100 pixels. That’s wasting time and bandwidth, as well as very taxing on your device’s resources.

The best [overall] solution is to load smaller versions of the larger image for smaller screen sizes. Then via JavaScript (approximate the closest size needed) load it, and make it fluid via CSS. Simple Responsive Images plugin does just that: dynamically replaces image src based on the browser width, starting with an appropriately sized mobile-friendly image.  There are other similar methods including Filament Group’s Responsive Images… Stay Tuned for the next in this exhaustive series!