Responsive design is implemented through the coding. Initially, coding is typically designed for the desktop site—just like always. But with responsive design, other codes are put in place that order elements to move around a bit when a certain device accesses it.
Let’s say you have a few elements prominently displayed on your current website:
- A logo
- A single row of six horizontal photos that link to key features
- A navigation
With RWD, there is coding that essentially says, “If an iPhone visits, move these photos over here, make the logo a little bigger and move the navigation to this spot.”
That horizontal row of six photos might become three vertical rows of two photos each. Your logo size might be increased, so it retains the proportion you want. The navigation might be relocated so it remains prominently displayed.
The iPhone and desktop user both see what you want them to see. And you’ve done so through the development of a single site.
One Site
The single-site concept is an important component of responsive design. A single site eliminates the need for mobile sites, and the costs that go with them.
Also, the world of devices is no longer split into desktop computers and mobile phones. There is increasingly a gray area that includes tablets and iPads and e-readers and a host of other devices. Neither the desktop site nor a mobile site is a perfect match for these devices—and you might need “perfect” for completion of that call to action.
Responsive sites cost a bit more to develop, mostly in upfront coding and design. Still, it is not nearly as much as the cost of developing a second site—or more given the number of devices. (Also, the coding is somewhat sweeping in that you don’t need it written for every type of device. A few types of coding modifications enable the site to adjust to all the devices.)
You’re also developing content for only one site—and when the site is operational, you’re only updating one content set as well.
The bottom line with RWD is …
- The site will look like it’s custom-built for whatever device accesses it
- Key content, images and navigations are still prominently displayed
- RWD sites represent your business the way you want it represented
- There is only a single site to develop and maintain.