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.
Future Proof
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
There are numerous frameworks out there that can provide a head start with responsive web design. Two in particular lead the pack, Twitter Bootstrap and Foundation from Zurb. These are frameworks based on the 960 grid system. Both have customizable download options. Just choose which CSS and JavaScript files you need, enter how many columns you want, media query breakpoints, colors, typography, the options are endless. Both have extensive support and documentation to help you along your way.
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.
{{cta(‘175d149c-dd6d-4e86-9f78-894e405cfcac’)}}
{{cta(‘a3cdc066-5983-448d-8ae3-469379bdbd4d’)}}
Leave A Comment