The mobile device market is expanding by the day. As of January 2014, 58% of American adults have smartphones and 42% of American adults own a tablet computer. We are getting to the point of not being able to keep up with the onslaught of different mobile device screen sizes.
If you’re in charge of your company website, what should you do? Building a website for each screen size would prove to be impractical. Is your company’s website taking advantage of these varying screen sizes? If not, you should look into responsive web design (RWD).
How many times have you looked at a website on your smart phone only to have to do the dreaded two finger zoom or having to scroll horizontally to see everything. With RWD you have one code base or one site whose elements respond differently when viewed on devices of different sizes and orientations. Your site will conform to whatever device screen size someone is viewing it on whether that be a desktop computer or a tablet or smart phone. In addition, responsive web design provides other advantages.
Better User Experience
Instead of having to manually resize a website on a mobile device or constantly navigate with that swiping motion, responsively designed sites bend, flex and resize to the frame provided, making the website easier to read and navigate on smaller mobile screens. No matter which way you rotate your device, portrait or landscape, the website will rearrange to fill the screen.
RWD Improves SEO
Maintaining separate sites for a desktop version and a mobile version require duplicate content, which Google doesn’t like. By having one site across all platforms, this duplicate content is eliminated allowing everyone to access the same content on any device.
Having a responsive website ensures that any device that comes out in the future will be able to display your content correctly.
One Design to Fit Many Screens
In simple terms, responsive web design requires just one website layout to fit many different screens. But where should you start – desktop to mobile or mobile to desktop? In the design phase it doesn’t much matter. As a website designer, my personal preference is to work at the desktop level first. This approach lets me get all my graphics, styles and colors in place, before tackling how the mobile site will look.
When designing the mobile website, there are many questions to consider. Do I have room for a full menu? Probably not. So a hamburger icon, those three small lines that symbolize a navigation menu, with the menu either expanding below it or moving in from the side will work fine. Should I hide the sidebar on mobile or should I make it drop below the main content?
Do I have a slider or hero image in the desktop version of the site I’m working on? This may not be suitable for a mobile layout. Heavy content with too many resources make for a bulky experience where mobile users are concerned. According to research from Compuware, 75% of mobile website visitors will wait only about 5 seconds for a mobile site to load, and only 46% will return to a problematic website.
A Responsive Framework to Get You Up and Running Quickly
The momentum of mobile websites is not slowing down. With the preferred use of smartphones and tablets in the marketplace only increasing, web developers should be building websites to match. Don’t underestimate the importance of building a site that is compatible on all platforms.