If you’re standing on someone’s shoulders make sure they’re a giant

Today I’d like to tell you about the cost of being too lazy.

As part of building a software project you will also need to build a website. When building the website for telepresence I looked around for a suitable documentation theme for the static site generator I was using and eventually settled on one that more-or-less fit the project vision.

Over time I discovered many problems with the design, and specifically the hand-rolled CSS it used. I fixed the most obvious of the problems, or at least the ones that were most obvious to me, and moved on; thinking about web page rendering was very low on my priority list for the project.

One day, however, a colleague pointed out that the website was completely broken on smartphones. I hadn’t bothered to test the page on a small screen since I assumed most people reading documentation do so on a larger computer screen. A few days later I decided to verify this assumption.

Turns out something like 30-40% of the visitors used smartphones. And the website was completely broken when using a smaller screen, so up to 40% of visitors were getting a very bad first impression. I spend some time wrestling with the CSS, and eventually managed to make the website look OK on small screens. Not great, but it was better than nothing.

One obvious mistake here is making assumptions and the other is using some random person’s hand-rolled CSS design.

There is a reason that CSS/HTML frameworks like Bootstrap exist: building responsive, accessible websites that work across a variety of screen sizes and browsers is difficult to get right. I couldn’t do it myself, without a lot of time spent doing research, and really there was no reason to think some random person could do it right either. And I’d already observed design choices that indicated some level of ignorance (animations that made pages appear to load more slowly than they actually did is a bad idea; faster load times are preffered.)

I’d tried to save a little work by using a pre-designed theme, but I hadn’t bother to filter on “uses a standard framework.” If such a theme couldn’t be found I would’ve done better by taking Bootstrap or some other such framework and using it to build the design I wanted. Then I could have spent my time getting the design right, instead of having to fix problems in a domain I am not an expert in and don’t have the time to learn in detail.

Don’t make my mistake: if you’re dealing with a complex domain like web page design, use a framework or library built by experts who actually understand best practices. Even if there’s a little bit of a learning curve, it will prevent many mistakes you and save you time in the long run.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s