Jump in to Responsive Web Design: Take the Plunge and Enhance Your User’s Experience
Many mobile websites have a separate url (e.g., m.myawesomecompany.com) with a limited scope compared to the PC website. Is this the first impression you really want to make? If you advertise your website in a public place (or even on TV), people are going to tap it into their phone.
Mobile first responsive web design (RWD) is the idea that the same webpage and content can be viewed on any size screen. Obviously, the site needs to provide the information differently on a phone vs. a tablet vs. a PC vs. a TV, but this can all be taken care of in the code. Start by designing WHAT you want to tell people, and then build in your HTML and CSS the code to deliver it to different platforms.
Check out BostonGlobe.com and resize your browser to see how a responsive design can work. Here is the full screen on my PC:
We start off with 3 columns of news. As I shrink the window to “tablet size”:
Note: now there are just 2 columns of content (vs.3) The Menu has shrunk from a list of sections to a dropdown menu with a list of sections. The advertisement (Tom Brady tossing a football) is still there, but has dropped below the fold. Let’s keep shrinking to smartphone size:
Now we are down to one column. The left column (John Kerry and Hamid Karzai) is now directly below what was originally the center section. The right column (with the ad) is below that.
Looks cool, right? This is the experience your customers are expecting on mobile. Give them everything – no matter the device. There are performance issues to be had with RWD. You need to make sure that your homepage is simple. While Bostonglobe.com looks great, there are a lot of files, and it uses 1.5MB of data. This takes TIME to download on a mobile device, so you must make sure to include performance as a metric of your RWD.
Is your company website mobile-ready? Could RWD help you make the leap efficiently and effectively?