The Site Slinger Blog

Web Development, Design, and everything PSD to HTML
By Jeremy H.

So what IS responsive web design, anyway?

Don’t get lost in buzzwords, understand why/how responsive web design works.

With the world going mobile there’s no way around it: your site has to adapt to any and every device that’s out there. Think about it… How many devices have you used today? I can count checking my email on three already!

In the past, the solution to differing device screens was to build an alternate version of your site, or even multiple apps optimized for the various mobile OS’s. However, these options often prove to be too costly in development and cumbersome to perform maintenance and updates. So what is today’s solution? Responsive web design!

Well, you ask… what IS responsive design? It’s one of those buzz words being thrown around a lot right now.

Responsive design allows for a single site to be designed and developed, yet performs effectively and beautifully across devices of varying screen sizes and orientations.

There are a few key features that allow this to work:

A flexible framework for content – the ‘grid’

The foundation of the responsive design, the grid provides easy content management across varying screen sizes through the repositioning of content areas or boxes.

Check out some great info on how to use the grid in design and download some basic templates here.

Responsive web design
Content moves based on screen size, but should still relay the same message in an aesthetically pleasing way. (Image courtesy of DezignMatterz)

Adaptable visual content

From images to backgrounds and graphical motifs, a solidly designed responsive site must be able to communicate your vision consistently, regardless of device and screen size. These elements of the page must be able to move around and make sense from a user perspective and still effectively tell the user what you’re saying/selling.

Check out some great examples of sites that do this here.

The ability to respond to devices

Generally done via ‘media queries,’ a responsive site must determine the best display configuration and adapt in an instant to changes in screen orientation and size. This should be done in such a way that the user doesn’t notice the site changing.

Check out some great examples of this here.

The Site Slinger understands the need to develop websites in a cost-effective, multi-platform manner. We love coding PSD to responsive design! You shouldn’t spend all of your resources managing updates or site variations across a seemingly infinite sea of different mobile devices. That’s why we build effective, high-value, responsive sites, giving you the ability to deliver content consistently and reliably to all visitors, whether they’re on a desktop, tablet, or smartphone.

If you’d like to discuss the options for translating your web design into a fully responsive site, please contact us, or submit a quote. We’re happy to turn your vision into a pixel-perfect site via our best-in-the-world PSD to HTML coding.

*For further reference on responsive elements see, “Understanding the Elements of Responsive Web Design

All you need is design to get started! get a free quote I need more details