Common problems in responsive websites

Common problems in responsive websites

responsive-sitesI can speak for all designers when I say that the acceptance of responsive design is a huge step in the right direction. Mobile views are where users are and will continue to be if the trend continues.

There are some things to watch out for when making a site responsive before calling it “done”, and all can be found by testing. Here are a few things that keep showing up in sites I see, and ways to fix each problem.

Type bloat. This is the first sign that the site still needs to be adjusted, or was built with mobile as an afterthought. Text that looks fine with lots of space on the left and right in a wide column becomes stuffy on a mobile device unless type is given room to fit the space.

The solution is to look at it on a small device. When a smaller phone isn’t available, I try to simulate what a site would be like for someone on an early smartphone to help content stay legible.

Sorry, mobile users.
Stuffy, bloated text in mobile view.

The order of content. You have multiple columns on a desktop, but if you design on the desktop to start, what will happen to your site in one column? If you have ads on the right, will they appear on top of your site’s content or at the end – or should they show up at all?

The solution for each situation is different but the first step is testing the page to make sure elements flow throughout in an expected way (unless you want to design with mobile first and head this problem off sooner).

Speed loss from frameworks. Many designers like Bootstrap, Foundation, etc. for the way they make getting a site together quickly. The biggest trouble (besides sites looking the same) is that so much of the code is unused by your site at the end of the project. Every visitor to your page will have to call on the entire framework to load a few elements for your site to appear. It can affect their data usage and your site’s speed.

To help counteract this you can use a framework in the mockup stage and build the site with only what you need. Keeping the framework handy as a mockup tool will allow you to revisit areas in the future without the need for the entire framework at once.

Web-friendly images. The most common way to slow down a site is to keep pictures larger than needed. Stock photo sites, cameras and our (sometimes) fast connections are to blame here. If they load quickly for us, why should we think otherwise for a site? Unfortunately, unreliable internet speeds keep this a problem.

Web safe images can help. Photoshop’s “save for web” is a fairly easy way to see the file size of your image while comparing quality. Be careful to provide images for retina displays as well if needed. There are some methods of providing images to viewers based on CSS but none as easy as “save for web” right now.

This might seem like a lot, but it adds up to a better site for your visitors and is well worth the effort.

If you need help, send me a message and I can help keep your site looking good and loading quickly.

Comments are closed.