5 Ways To Do Responsive Web Design Poorly

Responsive Web Design is a website design methodology that seeks to adapt the way a website is displayed depending on the capabilities of the device that is displaying the site. Frequently Responsive Web Design is used solely to adapt to the screen resolution of various devices, but it has other applications that are yet to have full browser support, such as delivering smaller graphics automatically for low-bandwidth connections, etc. As with everything, some people do it well, while others, well, they do it poorly. Below, I show my Top 5 Ways to do Responsive Web Design Poorly.

1. Hide Content From Mobile Viewers - While there are some reasons to hide certain types of content from a mobile viewer, such as videos that are unable to be played on the device, this is a rarity. Frequently I run across sites that I have visited on a desktop browser that has information that I need easily available, however, I am away from my desktop, so I am using my mobile device instead, and discover, much to my dismay, that there is absolutely no way to access the same content on the mobile view of the company’s Responsive Website.
2. Use Images that are not scaled to display size - Many users on a mobile device are using slower internet connections or have connections that are metered. When a site does not scale down the image sizes for these users, they are costing their visitors precious time and money for no benefit due to the small size of the screens.
3. Use a full-page ad for your app for every visit to your site - One of the most annoying things I run across when browsing the web on my mobile device is when a website thinks it needs to show a full-height and full-width image advertisement for their mobile app. As others have said, if I wanted to use your junk application to browse your information, I would not have visited your website. If you want to advertise your fancy new Android or iOS application version of your website, do so at the bottom of the page. Here’s looking at you, Yahoo Sports .
4. Use fonts that are so large that “awards” must be displayed on multiple lines - Anyone writing content for a mobile site must be aware of the screen space that is available for said content. However, when the web designer adds so much left and right padding and margin, and uses a large enough font size, that six letter words must be split across multiple lines, it can wreak all sorts of havoc with awkward word splits that can have different meanings. In the end, it makes it hard for visitors to read your content.
5. Use a Fixed Header that covers more than a single tap-area height - Granted, all sites need some sort of branding that the marketing folks will want displayed at all times on a website. However, there are sites that take this a bit too far, such as the LifeLock Blog , which displays the logo on its own line, and then the next line shows the collapsed, full-width view of the menu. On the standard iPhone 4s and previous screen sizes, this takes up over one-third of the vertical space on the screen. It makes it seem as if they really don’t want you to read their content on your mobile device.

Responsive Web Design is a great tool in a website developer and designer’s toolbox when used properly. One thing every web designer should remember though, is that its always about the users.