Because so many people now view the Web on small devices, many websites have been updated to be responsive, that is, optimized for being read on phones, tablets, and other non-desktop devices. Still, I have been surprised at how little understood responsiveness is, so in case you’re not aware of it, here are details.
I’m Up A Tree With No Paddle
Seeing an example will help. One way is to take a look at the Treehouse Blog using your desktop computer, and then look at the same site on your phone (or iPad, tablet, etc.). Notice the differences.
Another way is to simply look at it on your desktop computer, and then use your mouse to drag the edge of your browser to make it narrower, and you’ll see the changes happen on-the-fly.
Normal Responsive Features
- The top area, or header, may be re-arranged so that things fit the smaller screen. Sometimes the logo is resized.
- The main content area on the page is made full-width, so it’s easy to read at small sizes.
- Photos will often be re-sized to fit.
- The sidebar area (typically a column to the right of main content) is moved below the main content and made full-width for readability.
- The footer (bottom area) is re-arranged and re-sized to fit, and also goes full-width.
On the Treehouse site, the small version gets a little “hamburger” menu at the smaller size – that is, the little icon with 3 horizontal lines. Instead of cooking up a hamburger, one can also re-arrange the menu items to fit, which is easy to do if your menu is fairly simple (not too many items, no dropdowns).
Extreme Makeover, Small Devices Edition
I am often asked to do responsive makeovers on sites. This can be a straightforward job is the owner is not too picky, and their design is not too complex. If there are a lot of images and many graphic elements, it will take longer, because of the need to re-size and re-arrange more elements. In some cases it helps to vanish unnecessary material at smaller sizes. You’d be surprised at how much material you can leave out. In fact, if someone is extremely particular about their design, they may want a lot of alterations at every size level – something like that may end up being almost a new design at every size level, and that’s a big job.
Does Your Website Hurt When You Do That? Then Don’t Do That
It’s not every day I get to quote the great Groucho Marx. In any case, I use good general modern practices when coding responsively, but one thing I don’t do is guarantee perfection on every single hardware device. That would mean testing on every possible phone, every possible tablet, every desktop, ad infinitum. That’s impossible and impractical. Instead, I use code that will work on the largest possible range of common devices.
I remember one client who was miffed that when he switched from landscape to portrait very quickly on his very obscure phone, the page took extra time to resize, and was slightly off-center. Obscure edge cases are things that I don’t fix. A very expensive specialist could probably do that for him, but is it really worth it? Phone users can cope by doing some scrolling or resizing if need be in these cases, just like they do now with the Dreamweaver dinosaur sites circa late 90’s that are still around.
How Do You Undo the Voodoo That You Do?
I had one client who asked me to make her site look good on her phone. I figured it was a normal makeover. Then I saw that her site was already responsive, and seemed to be work pretty well already. Thinking she simply wanted some mild tweaks, I asked her for details. As with many non-tech people, she had some difficulty articulating what she wanted, so we talked about it awhile. I finally realized that what she really wanted was for her site to be exactly the same as the desktop at small sizes (no responsiveness). A particular type of OCD – falling in love with a design, and never wanting it to change for any reason.
Please Make Sure My Site Is Very Hard To Use
That means you have to do tons of sideways scrolling to view their site on a small device, panning, pinching, swiping, etc. That’s a usability nightmare. The number of people browsing the web on their phones is huge and constantly increasing, so responsiveness is really important. I explained this, but she still wanted no responsiveness, so I simply removed the responsive code, and that was it. I was also asked to do that on another high profile site. Pretty funny!
Based on what I frequently see, for some people their website is so personal that they are unconcerned with what the public will think – all that matters is what they alone can see. It’s madness – don’t let this be you, unless it’s OK to have a vanity project that only you will want to visit.
You don’t want responsiveness? I guess that’s fine. After all, if you annoy thousands of phone and tablet users so that they click away without buying your products, you really never liked them anyway, right? 😉