5 Tips for Developing Responsive Websites

Drew
Share on Facebook0Tweet about this on Twitter

Spoiler alert: your website is no longer being viewed on a just a desktop computer. There’s a high chance it’s being viewed on a tablet, a phone, a smart TV, a Roku box, a Chromecast or even your video game console.  As awesome and impressive as you thought your site was when you approved its design (and marveled in its beauty from your office computer), if you didn’t plan for your site to respond to all of these different scenarios, you might be in for a shock when you see outside of your desktop.

Don’t despair! Good designers and developers understand the importance of a responsive site and work in tandem to make your website shine regardless of the platform on which it is being viewed. However, even with our best intentions going into a project, there are always little things that crop up in development that we didn’t quite account for.

If you keep some simple things in mind as you build, your end result will be everything you had imagined — and hopefully more.

picjumbo.com_IMG_3642

1. Start with Mobile.

Either out of habit or preference for a larger palette, designers and developers tend to start their process on the desktop site. This is actually backwards. Rather than starting with a grand design and then scaling down while removing elements as you go to accommodate smaller screens, start with mobile and work your way up. It’s easier to expand your content and let it breath than it is to squeeze it down and compromise it.

Focusing on mobile first will also help you concentrate on your core message, presenting it up front and not diminishing it with peripheral design elements.

2. Forget About Pixel Perfect.

This might sound blasphemous, but with so many devices to think about, pixel-perfect designs are an outdated concept — and ultimately unrealistic. With all of the different-sized screens to think about, where would you even begin to establish your “standard?” The answer is, don’t. Instead, focus on fluid widths and sizes that will work with any size screen.

picjumbo.com_HNCK4005

3. Let the Content Be Your Guide.

This ties in with our point about pixel-perfection. It’s easy and tempting to have your breakpoints (the screen size at which your design will change) set to the width of common devices. The iPhone’s width for years was 320px, making for a simple go-to breakpoint for developers. But now the iPhone comes in several flavors, each with their own new widths. The iPhone 6’s width in portrait mode is 375px while The iPhone 6 Plus’ is 414px (not to mention the vast number of Android devices, each with their own viewport size).

Rather than relying on individual devices, let the content tell you when you should set a breakpoint and simply consider your general form factors – mobile, tablet, desktop and widescreen – and how your content is presented in each scenario. Your content is king. It should not be shoehorned or truncated just because of one particular device.

 4. Develop Concurrently.

Cool – your top content area looks great on desktop. Let’s move on to the secondary content area.

Pump the brakes! Developers may want to build an entire desktop site out first, saving the mobile versions for their next phase of development. But in the end, this will cost you more time than you realize.

Instead, develop each component of your site for each platform concurrently. Does the top content area looks good in desktop? Did you check it in mobile? How about tablet? Portrait? Landscape? You should do so before moving on to your next task. This will help you avoid headaches in our next step.

5. Cross-platform QA.

So you’ve finished developing your site. It certainly looks great on your desktop and you’re pretty sure you’ve viewed every page on your phone, too. But it’s easy to get tunnel-vision when developing, and that’s when cross-platform QA comes in.

Make a spreadsheet for yourself, and try to get a second pair of eyes on your site. View every page, every component, every nook & cranny of your site on as many screens, devices and browsers as you can. Before you mark something as fixed, check everything again to make sure your fix for something on the iPhone didn’t change something on the desktop site, or vice versa. Your audience will be viewing this site on any number of combinations of browser, screen size and operating system, so do your due diligence and make sure what they see is what you intend for them to see.

Need some help with your website? Our digital experts are here to answer your questions.  Contact us  for more information.

Questions? Comments? Tweet us @QuinlanCompany

Leave a Reply

Your email address will not be published. Required fields are marked *