A Quick Look at Responsive Design

  webd   None


Responsive designs are the current standard for professional websites. They help companies to connect with more users than stand-alone desktop pages could, and with a mobile market that’s predicted to overshadow desktop traffic within the next two years, that’s definitely something that you should consider when you’re building a site.

If you’re entirely new to Responsive Design, here are a few things that may help you out:

  • Responsive layouts are based on percentages, not on pixel count. Container widths will need to be based on a browser’s actual view-port.
  • Images need to be adjustable as well. Start with the maximum size and then work down from there
  • Multiple elements may need to be changed. It’s fairly well known that Apple devices, like the iPhone, can’t load Adobe Flash presentation or elements. You may need to create a version of your site that uses HTML5 instead, among other alternatives. Always keep in mind that with mobile devices, not all formats of media are accepted.

A Few Tips to Get Started

Go mobile first. Mobile designs are friendly toward mobile devices, obviously, but if you’ve ever seen them on desktop computers, they tend to look pretty good there as well. The considerations of graphic size, loading speed, margins, and more can all be taken into account when you actually optimize your site for responsive, but we recommend that you adapt it from a mobile site to a desktop site, instead of the other way around. You may find the process to be far easier.

Test on mobile devices. Re-sizing a desktop to try and see what the mobile experience is like is not a replacement for your mobile version of a site, and the same is true of the reverse if you think that a large tablet can be a replacement for the desktop version. Resolution can play a far greater role than window size, and not every mobile device, even those within the same screen size, have the same resolution.

Consider Server-Side Layers. More of a compliment than an alternative to a Responsive design, server-side layers detect important information and redirect elements when appropriate. When combined with responsive design, it’s known formally as RESS. While coordination will be required between engineers and your design team, the result could be better overall management and a consistency of work flow.

Finally, don’t be afraid to look at how other sites handle their responsive elements. Time.com has been quoted for having as many as 40 different style choices based on their media queries to incoming traffic, which is an incredible amount. It’s not justified, though; the amount of different resolutions, browsers for both mobile and desktop computers, and different operating systems can all lead to some tricky design work if you want your page to look great for every set of eyes that lands on it. While you may not want to go as far as Time has, it won’t hurt to consider broadening your reach either.