Tips for Responsive Design on Mobile Devices

Responsive design spells the difference between creating one version of your site and creating dozens. Instead of tailor making your website for each type of mobile device, you let the responsive design take care of the heavy lifting. When you create a responsive design with mobile device compatibility in mind, you want to keep a few best practices in mind.

Content Fluidity

Focus on making your content (from the start) adaptable for each screen size that comes its way. You know the lower and upper resolutions that visit your site, so keep your content looking good on the extremes and everything in between. It's particularly important for media to scale, as text is easy to wrap and work into smaller screens. Pictures and video content, on the other hand, require more effort. It's important to scale your media so it still looks good on a smartphone or tablet. You don't want your pictures going all over the place when you switch from a computer to a smartphone, so design your content with a responsive site in mind.

CSS Rules

Some content and design elements simply do not play well with mobile devices, or you may not want to display all of your content for mobile viewers. This is particularly useful if you have a heavy amount of video content on your page, and you don't want readers running through their mobile data when visiting. CSS rules adapt your responsive design to restrict content for mobile devices. Pull those flash videos off of your page and display a different content elements to promote usability for mobile viewers.

Declutter Your Content

The more bells and whistles you add to your site in the way of design elements, the harder it is to make everything work well together in a responsive design. Par down your basic site design as much as possible so you don't over extend yourself making a complicated assortment of design elements work responsively. You also don't want to overwhelm the content you're featuring on your site. Current design trends are moving toward minimalist and flat design styles, so keeping your readers happy by staying on top of trends is a useful practice as well.

Tools for Creating a Responsive Design

Plenty of tools are available to help you get your responsive design implemented. Browser Stack helps take care of the pesky problem of testing across multiple browser and platforms so you can fully test compatibility in mobile and desktop versions. Fitvids.js gives you a bit of javascript that saves you a lot of headache if you want to keep videos in the mobile versions of your responsive site. It retains the normal aspect ratio of the video when it's resized. 

Author: Eddie Tabush