Whether you’re a developer migrating an old site to a responsive-friendly CMS or a project manager wading through all the responsive website buzz wondering what to make of it – the following 6 ideas from our development and design crew will at least get you headed in the right direction.

1) Develop & Plan Your Content Strategy First

Too often, web development shops skip content planning and dive directly into wireframes and design. As a result, they end up with giant blocks of site content that they struggle to mash into poorly planned designs. With the added complexity of responsive planning, the tablet or mobile experience suffer. Unfortunately, you can’t jam all of your site’s desktop content onto a smaller screen without losing your audience. The problem is twofold: mobile devices and networks have lower bandwidth and smaller screen real estate. If you pump too much data through the network, your load times will suffer. Force long blocks of copy or sluggish video embed load times on your audience and it’s game over.

The solution is to spend ample time up front prioritizing and mapping content with your UX, Design and Content professionals. Remember that a mobile or tablet version of your desktop site is simply hiding content as it gets re-sized. So, the servers still have to load all of the content and data. To some extent, developers can help you work around this; however, you’ll still have to tighten the belt around your content if you want your mobile and tablet versions performing well.

2) Test Browsers And Optimize

As you likely already know, every browser treats content and code a bit differently. This is even more so the case with responsive. For example, not all browsers support media queries natively (Like Internet Explorer 8). If you use conditional formatting for all your images and you don’t optimize in IE8, your mobile and tablet sites will look like trash. Make sure you account for all browsers!

3) Use The Right Tools

It’s fairly common for clients to request  developers use an old site as a starting point for a responsive build. Unfortunately, this can end in a whole lot of head scratching. Sites can be running on any number of content management systems and built with a handful of different languages. A responsive website will pull the same content and code for mobile, tablet and desktop versions. That’s the beauty of a responsive website: There’s just one version. It simplifies SEO and content management immensely. So what are the code and CMS implications? You’ll have minimize JavaScript and rely on CSS and HTML to do the heavy lifting. That’s easier said than done if you’re working from a traditional desktop site. In our experience, Concrete5 and WordPress are both solid platforms for responsive. Be careful with overlays, popups, slideshows and iFrames. Stick to video players that can work everywhere via one embed code. If your load times suck, no one’s gonna hang around long.

4) Use An Agile Process

Traditionally web shops use a waterfall approach: analyze, design, build, test and optimize. Unfortunately, the process for responsive is a different beast; it requires strategic thinking in every phase of development. If you’re building silos, you’re guaranteed to fail. Set up short scrums (meetings) throughout the process where designers, developers, project managers, UX and content teams can raise potential flags and suggest small fixes. This will reduce the many headaches that might otherwise occur down the road.

5) Development & Design Need To Own Functionality Together

Building a responsive website requires tight collaboration between development and design. It goes without saying that any design hand-off should include long conversations about how each and every element is supposed to be represented in the real world.

Photoshop doesn’t speak responsive. So, if you’re designing a flashy parallax effect, button or shelf that interacts with other elements – there’s no way to design it completely. Designers should spend time with their developers – listen to what is and isn’t possible – and likewise developers should do their best to execute on the designers vision. Make notes on PSDs, pass things back and forth and keep iterating until it works as intended.

6) Go For Fast, Not Flashy

People typically don’t spend more than a few minutes on mobile, tablet or desktop websites. If your site doesn’t load fast, they’ll go somewhere else. Remember that any flashy graphics or embeds you create might slow down load times, and ultimately ruin your chances serving up your content in the first place. You can create a desktop experience dripping with oodles of sexy sauce, only to find that your mobile load time sucks. Guess what? You just lost your sale, audience, or whatever else you were after. Be smart. There are options for developers looking to overcome heavy RWD sites. First, reduce the number of requests. Each client HTTP request and server response combination takes precious seconds to complete. You can reduce your total number of requests by consolidating CSS and JavaScript files, in-line small images and use HTML5’s new caching features.

Next, reduce the number of bytes. This is simple math. The larger the web page, the slower it loads. Reduce the size of your files and images to a level that both looks good and loads fast. This can take some testing, so be prepared to optimize. Again, keep the process agile.

Fortunately, the future looks good for mobile speed. More and more smartphone users will have access to WiFi, nearly all the time.

Remember to keep the process agile, test everything and shoot for fast load times.

Click here to get in touch and learn more about Spyder Trap’s Responsive capabilities.