Jump In To Responsive Web Design

Every week there is an article on how many more users are relying on their mobile device or tablet to browse the internet instead of their PC. It is no secret that more and more consumers are turning to their phone to look up companies on the internet.  So, what does YOUR mobile website look like?

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.

Did you know that NetworkExchange Blog uses RWD?  You can see how RWD works by simply resizing your browser (yes – right now!)  Here is what the homepage looks like:



We start off with 3 columns of posts (at the bottom). As I shrink the window to “tablet size”:



Note: now there are just 2 columns of content (vs.3) Notice that all of the images are resized to fit the screen (happy guy in car, I am looking at you!). There is no loss of content for our readers on tablets.  Let’s keep shrinking to smartphone size:


Now we are down to one column. WE did lose the banner ad (happy guy in the car), but for the most part, that will not be missed by smartphone users, and the site will load faster for these users.

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. BostonGlobe.com is another great example of RWD. 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?
Doug Sillars Principal Technical Architect AT&T About Doug