How to Transform Your Static Site into a Responsive Website

With consumer reliance on smartphones, your site must be responsive. It's not an option anymore. Here's how to transform a static site.

As businesses grow, so do the expectations of consumers. Today, 58 percent of Americans own a smartphone and use it daily to access the internet. Consider the facts:

74 percent of mobile users will leave unresponsive sites. Nearly a fourth of all internet users access the Internet solely through mobile devices (Tweet This Stat).
More mobile users than ever before are using their devices to make purchases. Investing in a responsive site ensures that you don't miss out on the growing mobile market.

Before transitioning your static site into a fully functional responsive website, it's important to understand the key features of responsiveness and what this means for site coding.

Understanding Responsiveness

Since the earliest days of the Internet, web designers have focused on creating sites that function within the contexts of the screens or devices on which they would appear. These contexts have been rather uniform and basic. However, demands have heightened in conjunction with technological advancements. From massive desktop screens and laptops to tablets and smartphones, designers are required to think beyond limited contexts.

Several years ago, web designer Ethan Marcotte introduced the concept of the fluid grid. He wrote an article that explored the concept of a design that changed depending on context. In it, he referenced the concept of creating columns of content with widths determined by a percentage of the browser window. As the size of the context changed, so would the size of the content. This would eliminate the need to recreate similar designs for each type of context.

Because this fluidity allowed users to view similar content on a page regardless of the device being used, it revolutionized web design.

Editor's Note: Looking for website design services for your business? If you're looking for information to help you choose the one that's right for you, use the questionnaire below to have our sister site, BuyerZone, provide you with information from a variety of vendors for free:

Transitioning into Responsive Design

For site owners like you, this means you no longer have to create a separate site for mobile users. Now, to transition to a responsive design, you must:

Choose a Framework. As you can imagine, switching to responsiveness takes a lot of work. Fortunately, frameworks such as Twitter Bootstrap and Foundation can do the heavy lifting for you. Instead of starting from scratch, these frameworks allow you to modify and upgrade your existing site's code (Tweet These Tools).
Convert the code. Be sure to review everything you need to know about converting fixed width. You'll want to add meta tags such as width=device-width, initial-scale=1, and maximum-scale=1. Furthermore, when moving from fixed layout to responsive design, establish "break points" that will trigger CSS style rules. The more you identify components suitable for replacement, the easier it will be to convert your site's code. Take it in bite-sized chunks by moving one page at a time.
Review your site. Test your converted site on multiple devices to ensure that everything is responding accordingly. Try visiting your site on an iPhone, tablet, and other devices with varying screen size. The more you test your responsive site, the better the user experience will be in the end. Also remember to invest in responsive video, as embedded videos from sites like YouTube have fixed sizes. Another consideration to check is whether or not you have printer-friendly styles.

CSS3, HTML5, and Media Queries

Web designers rely on CSS3 and HTML5 markup languages to transform files into functional web designs. Most modern browsers support these standards, but media queries must be considered with regard to responsiveness.

Media queries enable designers to change the CSS based on browser window size, screen size, or the particular device in use. Combining fluid grids with media designs makes it possible for designers to effectively create responsive websites without sacrificing quality user experiences.

When using CSS, add this code into the <head> section:

This code ensures that your site renders correctly on the browsing device. Furthermore, utilize "@media" to set CSS for corresponding screen widths. This will determine how your site appears on various devices.

Options do exist for the creation of separate websites built exclusively for mobile devices, but opting for responsive design is ultimately more convenient and more efficient. For example, content development is only needed for one site instead of different versions. Responsive design also requires only one back end infrastructure. A singular responsive design reduces the costs of designs for mobile devices and desktops as well.

For media queries, it's probably best to ignore the cliché device dimensions of 320px = iPhone portrait, 480px = iPhone landscape, etc. Instead, since the web is so inherently fluent, determine breakpoints based on the content of your site. By treating your layout as an enhancement of your site's content, you create an interface that looks nice on every screen. This creates a focus on major and minor breakpoints, which results in a more functional site.

Responsive Images

Text is only one component of responsiveness. Due to the ever-increasing use of infographics, photos, and videos, images are also significant aspects of the experience. Users more readily process this type of visual stimulation, so it makes sense that businesses and brands are using them as much as possible. Furthermore, images are in great supply, inexpensive, and easy to find -- not to mention develop.

When considering the use of responsive images, the experts at FatCow suggest laying some basic groundwork prior to implementation. For instance, it's important to consider what aspect ratios will be used, the maximum sizes to be set, and specific color pallets. A (somewhat) automated image flow could be employed via PHP, JavaScript, and HTML. With these platforms, the site's server manages most of the work.

When using CSS for images, insert the code ".my-img { width:100%; height: auto; }" to automatically keep the image in proportion. This way, you never have to worry about max-width/height distorting the image.

There are several ways to achieve satisfactory responsive images, each of which should be considered based on individual resources and needs. For example, to employ a performance-optimized approach, numerous different sizes of each image can be considered when deciding what should be used on a given device. It may take time to size and store all the images, but is not likely to cause issues with bandwidth or performance.

Regardless of the approach, the primary question to ask is what users will value most and what can most effectively be accomplished with the resources available.