The Butterfly Effect – “Can” and “We” in Web Development

How a simple request cascades into a myriad of changes.

By Tim Lu
November 2, 2018

My Two Least Favourite Words

In the tech industry, my two least favourite words are “can” and “we”. And only when they are used in that specific order. Unfortunately, in the digital design industry, these two words are used all the time, in one form or another:

 

  • Can we make it so that…?
  • Do you think we could…?
  • Would it be possible if…?

 

What do all these questions have in common? It’s that the answer to all of them is “Yes”. Always “Yes”. And a question that always provides the same response doesn’t generate anything of value.

Yes, we can implement a mailing list form on your website. Yes, we can add scrolling animations to you home page. Yes, we can automate your inventory count. So what if we *can* do these things? The real question is: “Should we.. ?”.

In the realm of technology development, I can guarantee that for every problem, there exists a solution. 99.99% of all the problems that are solved each day have been solved before. Given enough time and budget, there is always a solution.

And when factors such as time and budget are taken into consideration, a lot of other important questions begin to reveal themselves. Questions such as: How long will this solution take to implement? Is there an alternate, quicker solution? Are we even solving the right problem here?

My biggest problem with the “Can we…?” question is that it promotes a non-forward way of thinking. Regardless of intent, it pushes the actual effort of evaluation towards whomever was asked. And that’s just lazy.

 

The Problem (aka The Context):

One of our clients, Kennedy Construction, needs an area on their website to showcase their past construction projects. Their estimators will use this part of the site to draw in potential clients, and site visitors can browse this section to potentially convert into leads.


Their current project showcase only shows a maximum of three projects, which is not enough to provide enough social proof of their services. The updated showcase will need to show more projects, but shouldn’t just be a wall of pictures that might overwhelm the average visitor.

 

The Proposed Solution (and the Forbidden Question):

“Can we add a ‘load more’ button for the projects?”

In retrospect, it’s a good solution to the problem at hand. Estimators would have the ability to browse all the projects by loading more (if they so choose), and a site visitor wouldn’t be overloaded by content on page load. But as soon as I heard the “Can we…?” portion of the question, my immediate reaction was to consider all the deeper implications of the problem:

 

  • Are the loaded projects hidden on the page by default, then revealed? Or are they loaded over another HTTP Request?
  • How many projects should be loaded per click? What if some projects are taller/shorter than the others?
  • Is there a limit to the number of projects loaded? What if there aren’t enough projects to require a ‘load more’ button?

 

Often, when I find myself frozen in decision-making scenarios like this, I find that the best way is to just proceed with solving a single requirement of the problem (and then proceed from there).

The Process:

So the first requirement was to add more projects to the showcase. So we code the PHP template to include all the projects:


Then hide some of the projects (using some Javascript):


Then we add the ‘load more’ button, using some Javascript code/logic to reveal more projects:


100 lines of code later and we’ve finally got a barely working solution for our original problem. We should probably check if this solution works on a mobile phone.

The Butterfly Effect (aka “Here We Go Again”):

Hmmm… that doesn’t look right. And now we’ve run into another consideration.

Have you ever used the same website on both your desktop and on your phone? If you haven’t, try it now. You’ll notice that for popular sites (e.g. Reddit, Facebook), the mobile version of the website never looks exactly like the desktop version of the site. That’s because there’s simply not enough width on your phone screen to fit the same amount of content. Thus, web developers solve this problem by changing how many items fit on the same row.

In our case:

 

  • On desktop, it’s three projects per row.
  • On mobile, we can only fit one project per row (making it more of a column, really).
  • So, does the ‘load more’ button load three projects (and thus, three rows worth of height), or load only one project (only one row’s worth of height) at a time?

 

If so, that means that the Javascript logic for mobile project loading will have to be different than the logic for the desktop project loading. Depending on the screen size, we’ll have to implement different types of code.

I think you can begin see my point here. What seems like such a simple request (“Can we add a ‘load more’ button?”) often turns into a plethora of considerations.

‘Load more’ buttons aren’t a new invention. They’ve existed on the internet for as long as I remember. And even with all the available resources on ‘load more’ buttons, it’s still a lot of effort to make sure we have a working feature.

Now imagine, at the very beginning, when I was asked “Can we add a ‘load more’ button?”, that I proceeded without question. We’re already so deep in the rabbit hole that if it turns out that the client doesn’t like this solution… well, let’s just say our goodbyes to those few hours of effort and budget.

The Conclusion

Have you ever become frustrated when something on a site doesn’t work the way you want it to? We’ve all been there. It’s funny because there’s such a large disparity between the amount of well-built products and the amount of talented designers and developers in the tech industry. You’d think that at least every other site would be a pleasant experience.

I’d like to believe that it stems from a general tendency to build the wrong solution for the wrong problem. Under pressure to perform and produce, designers and developers come up with quick solutions without spending enough time planning and preparing.

As you can see, sometimes the simplest of solutions requires a lot of consideration and foresight. I’ve been working in tech for about two years, and I can say that this foresight only comes with practice.

I would like to add that I spend an unordinary amount of time planning for worst-case scenarios and that this has contributed greatly to my pessimistic and anxious personality. But it has also helped me avoid shooting myself in the foot in certain scenarios.

So regardless if you’re a project manager, a marketing strategist, or even a developer, it’s important to set yourself in the right mindset when approaching problems. Try to avoid the surface-level questions like the “Can we…?” question. I’d rather spend thirty more minutes thinking about all the possibilities than finding out halfway through a solution that I’m going to end up doing twice as much work than originally planned.

Because can we do it?

Yes, we can.

But, the right question is: Should we do it?

I don’t know. Let’s sit down and talk about it.

author_abatar

Tim Lu

Web Developer

Tim is a Web Developer at Goatsocial. It is observed that that he has a healthy appetite for loud music, cold beers, and computer games.