Archive | March, 2013

VIA Idea #25: Responsive Web Design

7 Mar

Let me introduce you to Responsive Web Design. It’s relatively new on the scene and is so practical that you will love it and embrace it easily. Responsive Web Design is crafted to provide a fluid layout that resizes across multiple viewing devices and screen sizes (from desktop computer monitors to mobile phones). We build and maintain one single website, where previously you needed a separate mobile website.

Answering to the Popularity of Tablets and Mobile

Mashable is calling 2013 the year of Responsive Web Design because the mobile market is growing so fast. The global sale of tablets is expected to exceed 100 million this year. The shift to smartphones and mobile usage is happening at an extraordinary rate of speed. Even though the debate about web or app continues, we think a small business can’t possibly keep up with the diversity of mobile devices on the market today or the amount of app stores to contend with. With Responsive Web Design, you can make sure your website works easily on all devices.

How it Works

Flexible images and fluid grids re-size themselves to fit the screen. Examples are seasonslandscapeinc.com (VIA developed), xpointchurch.org (VIA developed), sony.com, and disney.com. If you view these websites on a desktop browser, try making your browser window smaller. The images and content column will shrink, and then the sidebar will disappear altogether.

The fluid grid concept calls for page element sizing to be in relative units like percentages or EMs, rather than absolute units like pixels or points. Flexible images are also sized in relative units (up to 100 percent). Designers love pixels. Photoshop loves pixels. But a pixel can be one dot on one device and eight dots on another.

So how do you approach Responsive Web Design if everything is pixel-based? You stop using pixel-based layouts and start using percentages or the EM for sizing. You turn everything into relative sizes. We will also include dynamic functionality with JavaScript and HTML5 to give you performance. We can also program device-specific functionality and features where they fit.

The latest research from Google tells us that “90 percent of people move between devices to accomplish a goal, whether that’s on smartphones, PCs, tablets, or TV.” The three most common ways users move between devices are:

  1. To search again on the second device
  2. To directly navigate to the destination site
  3. Via email, that is, to send themselves a link to revisit later.

 

Reduces Future Maintenance

Responsive Web Design allows future updates to be made in one place at one time. That saves you time and money each time a revision is needed.

The Benefits are Obvious

Build your website once, and it works seamlessly across today’s multi-screen world. Contact us today to discuss how you can move to Responsive Web Design in 2013.

Call us at 219-769-2299, email, or go to viamarketing.net.