Whether you know it or not, you’ve visited a responsive website in the last week while surfing the wonderful World Wide Web. And even if you don’t know what a responsive website is, you’ve probably heard people throwing around the “responsive” buzzword for some time now. If you need to get up to speed, or want to learn more about why a responsive website might be a good idea for your business, I encourage you to check out Industrial Strength Marketing’s primer, “Don’t Make Me Zoom: 7 Reasons Industrials and B2Bs Need Responsive Websites.” Besides serving as a general introduction to responsive websites for business, it covers the benefits responsive sites provide, such as SEO, onsite conversion increases, and streamlined content management and analytics.
As a developer, I’ll be coming at it from a different angle. My job is to make responsive websites, so I’ll be talking through some suggestions and technical tools that can help developers build responsive websites that sing on desktop computers, tablets, and smartphones.
Start with Process
Getting good processes in place before going into development will help the workflow once a website project makes it into the development phase. Wireframing how each layout will stack will help the design team build an effective mockup. In turn, having a mockup or wireframe will give the developer something to reference while they code the site.
Including the developer in the user experience and design conversations will help the entire team understand what’s possible and what’s outside the confines of the chosen framework (see below). This goes both ways: In some cases, the developer may need to make some decisions about how everything will lay out if the submitted designs don’t conform to the standards of the chosen framework. In those instances, it will be helpful to have the designer sit with the developer to give some input.
Select a Framework
The most important tool in any developer’s bag for building responsive websites is a CSS framework. These frameworks were created to help front-end developers gain efficiencies when building websites. Through the years they’ve evolved to reflect changing development needs and practices. Today, many include grid systems that facilitate responsive development, changing the layout of a website to fit the size of the device used to view it.
The first step for implementing a CSS framework is obviously to select a framework to build in. There are way too many to list here, but a few of the more well-known frameworks are Foundation, Skeleton, Gumby and Bootstrap. At Industrial Strength Marketing, we’ve used a number of frameworks in the past but made the decision to stick with Bootstrap as our framework of preference. One of the biggest reasons for choosing Bootstrap is that it’s more than just a CSS framework. It includes a number of additional tools that can help optimize your website for responsive design.
Test with Tools
It’s critical to have some go-to tools to test the responsive nature of the website you’re working on while you’re building it. Most modern browsers support media queries so resizing your browser will, in most cases, give you a pretty good idea of what your site will look like.
Google Chrome Developer Tools
The Emulation tool in the Chrome browser is very helpful and provides support for many popular devices, including iPhone, Nexus 7, Samsung Galaxy, and even BlackBerry Z10. To get to the tools, you right click on a web page and select “Inspect Element.” To get to the Emulation tab, you’ll need to use the “Show Drawer” icon on the right, which looks like an arrow and three lines. Clicking on it will open the tab section at the bottom of the screen and give you the option to select Emulation.
Firefox Developer Tools
Much like Chrome, Firefox has its own developer tools. The Responsive Design Mode is a bit different in that you can set some custom sizes (width and height) or use the handles to resize to your desired dimensions. To access the Responsive Design Mode, right click on the web page and select “Inspect Element.” Once in the Inspector, there’s a small icon on the far right in the top bar which switches over to the Responsive Design Mode.
Videos embedded from sources such as Vimeo and YouTube generally don’t play well on responsive websites. The Fitvid.js jQuery plugin solves this issue by resizing videos based on the containers they are embedded in so they don’t overflow the viewable area on a device.
Responsinator is an easy-to-use online tool for helping you visualize how your website will appear on various devices. Enter your URL and Responsinator will place your website in “wrappers” that show you what your website will look like on a number of specified devices. This is a user-friendly tool for those who aren’t familiar with developer tools in general.
Whether you are a seasoned veteran or new to front-end development, you undoubtedly want to avoid the inevitable headaches that come with debugging sites and resolving technical issues. Adopting some of these practices and tools will save you time when working on responsive websites, as well as help you streamline your processes in general.
Having said that, I’m always open to suggestions. I’d love to hear what you’ve got in your developer’s bag and how you’ve managed to create efficiencies. So please leave a comment.