5 Tips to Utilize Responsive Web Design to Look and Convert Better on Mobile

           There is no doubt that the meteoric growth of the mobile web will continue into 2014 and beyond, changing the landscape of online marketing in a profound and lasting way.  The proliferation of smartphones and mobile devices in our society goes well past the development and purchase of apps, and Internet marketers must be aware of how quickly the user's focus has shifted to the mobile experience if they want to stay ahead of the game.  Every web designer and SEO strategist is aware of the fact that a mobile presence is important, and to the corresponding need for responsive web design, but few enough are dedicating their efforts to improving responsive design considering just how many people are getting online primarily from a mobile device.

            These numbers are underscored by a recent Google study showing that 75% of all online purchasers prefer using mobile-optimized websites.  46% of Internet shoppers use smartphones to research local products or services, and since 2012, there has been a 35% yearly increase in online purchases made directly through mobile devices.  This is a staggering level of growth that should serve as a wake up call to everyone who calls themselves an Internet marketer. 

            So what is responsive web design? Responsive web design is the process of making your website easily accessible across a variety of platforms and devices.  The key to responsive design is in the name-you must structure your website in a way that anticipates and responds to the technical requirements of a variety of mobile devices, thereby maximizing its flexibility and operating quality, wherever the user may be.  The precise design will naturally vary from website to website, but the following 5 tips should help you maximize the functionality of your site across a wide range of devices.  This will only become more important as time goes on.

1) Keep It Simple

            Simplify and eliminate unnecessary page elements as much as you can without sacrificing the visual quality and integrity of your website.  A responsive design should be able to work just as well on mobile devices with low bandwidth and resolution as it does on a high powered desktop.  Use HTML5 and provide a straightforward navigational layout.  Avoid CSS3 special effects, float positioning, and Javascript and Flash if you can.  To design a responsive site that works well across a variety of mobile devices, play to the lowest common denominator.  And if there are complex elements you simply aren't willing to sacrifice, use .not_mobile to keep them out of the mobile world entirely.

2) Begin With Media Queries and a Flexible Layout

          Starting with a fluid layout will make your site more functional and visually appealing across a variety of screens.  Organize your content by columns, and size all elements with a relative rather than a fixed width.  This will reduce load times and maintain the desired appearance and proportion of page elements.  Supplement this simple layout with media queries that will load alternate stylesheets depending on the device's screen width, and your page should function well even if the layout must adapt drastically.

3) Use Adaptive Sizing For All Images

            Images can be your best friend or your greatest enemy.  Poorly formatted images will mess with your layout and slow load times considerably.  Problems with image loading are probably the single greatest cause of a poor mobile bounce rate.  Use adaptive resizing to define your images on a percentage basis relative to screen width, rather than with a fixed resolution.  You can anticipate the likely break points and provide alternate resolutions for the most common mobile devices, but this will still increase your data stream and slow load times somewhat.  Adaptive sizing is the way to go.

4) Identify The Breakpoints

            Screen resolution is going to vary widely from device to device, but you can optimize the performance of your mobile site by anticipating the breakpoints of the most popular mobile devices.  Here is a list of the screens you should be most ready to serve:

5) Maintain Your URL

            Make sure to serve all mobile devices from the same URL, so that the same HTML is being transmitted to all types of devices and is simply being converted by CSS.  HTML5 is the preferred language in this regard, and this approach will improve your mobile SEO and reduce load time on mobile devices considerably.  Taken together, these 5 tips should give you a mobile web presence that is both flexible and functional, appealing to users across the variety of mobile devices that are turning the engine of online marketing today.