by Michael Loscalzo

Invisible (but crucial) considerations to take into account when building a website

The success of a website isn’t solely contingent on its beauty

fo58pJ8HEmYspDJvUX2kR0DSNXdDChfOnDSN

An ugly website will surely fail, right?

Wrong.

i24EumC-yLkXKb8HQvQavHa8EC76Wvil182N
Craigslist

Despite its homely appearance, Craigslist operates in 70 countries and receives 50 billion page views per month.*

How can this be? The fonts used are Arial and Times New Roman. Bland color scheme. Where are the pretty pictures?

Is Craigslist an anomaly?

Nope.

Example number two…

JJjp2Zk3LdhPavE2hcvyVQ2yFLSY2VVQOov8
Reddit

Few people would try to convince you that Reddit is one of the more visually compelling sites accessible via the world wide web. Nevertheless, Reddit is the 4th most visited website in the United States and ranks 6th globally.**

The composition is crowded! Ugh, those tabs and buttons look so dated!

These aesthetically-challenged websites are absolutely crushing it, because they’re gorgeous behind the scenes and they provide unique value to their visitors.

I’m not writing this post to encourage you to abandon your personal sense of aesthetics. But, what I’m saying is that sometimes the invisible aspects of a website are even more important than the visible ones.

0-5S5ZDKbPgYk7KuWad1Fj2z-rCJpj9Lr-CB
The Invisible Man (1933)

Learning from my mistakes

In July 2007, I abruptly lost my job as a Graphic Designer when the corporation that I worked for declared bankruptcy. I’d been a part of the internal Marketing team, and my responsibilities included the design of flyers, postcards, brochures, and other printed marketing materials.

I began to look for a new job and found a number of openings in web development. Technically, I didn’t have much experience. But I was confident that designing for the web was the same as designing for print.

During the last decade, I have learned that I was very wrong.

In recent years, you have likely heard the proclamation that “print is dead”. Yet there are many that still approach digital content with the same mindset that they applied to printed material, just as I did 10 years ago.

In print, we were entranced by visual beauty. We took pride in good kerning and had strong allegiances to our favorite fonts. We accessorized our designs with spot varnish and carefully selected paper stock. When the product looked great, we could bask in a job well done.

With digital content, we need to be conscious that our product is interactive. We need to strive to create a marriage of form and function. Don’t forget the invisible!

qXoNTrPNK2bv66Ct6opndUlwveTlzD5p-ekh
The Invisible Man (1933)

Let’s unwrap the five “invisible” elements of a great website. There are important decisions that need to be made:

  1. UX Decisions
  2. UI Decisions
  3. Performance Tradeoffs
  4. SEO Considerations
  5. Data-driven Design Decisions

UX Decisions

“User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product.”***

UX is a growing field and is complex to explain. There are definitely “visual” aspects of UX. For the sake of brevity, let’s simply think of UX as “functionally across browsers and devices”.

If your content looks beautiful, but is not mobile-friendly, that’s bad UX because the content isn’t widely accessible. If your content is cutting edge, but only works in one browser, that’s bad UX because the content isn’t widely usable.

Far too often, the majority of effort is expended on visuals at the cost of adequate testing, and the price is content that does not function as intended for some (or all) users.

UI Decisions

“User interface design (UI) or user interface engineering is the design of user interfaces … with the focus on maximizing usability and the user experience.”***

Like UX, there is an obvious visual aspect to UI. But when you are developing content, it can be easy to lose sight of the way the end user will interact it. Consistent and intuitive UI is crucial to a successful interactive experience.

3XI27gzsVM1AtwITkAkmrIfys6DBHXRvZfTd
Illustration by Jennifer Aldrich.

Keep in mind, not every user is as familiar with modern interactive experiences. For example, some users may not recognize the “hamburger menu” as the access point for all website navigation.

Performance Tradeoffs

According to Google, 53% of mobile users will abandon a website that takes more than 3 seconds to load. You can test your website speed for free with GTmetrix.

pW10gthTqyWQqdf3kAn0cxMuVptZZsRQkBPH
craigslist.org receives high marks for speed!

Many companies use a Content Management System (CMS) to operate their website. A CMS is a great tool, but it will not help you write clean code for unique content. For example, the wave animation below could have been achieved with an animated GIF, but using CSS cuts down the weight significantly.

xhAKhjaoSjUMMgfU5bv2VQ8LUQklQqFaiHrI
This “wave” animation utilizes small images repeated across the x-axis. These smaller images and coding approach is part of an effort to reduce the weight of the content.

Site speed is tied directly to your SEO and UX!

SEO Considerations

“Search engine optimization (SEO) is the process of affecting the online visibility of a website or a web page in a web search engine’s unpaid results ...” - Wikipedia

Google strives to drive their users towards content that is safe, relevant, mobile-friendly, and loads quickly. Other search engines operate in a similar fashion. Can people find your awesome content? If you are not considering SEO, your ranking can be nonexistent. Typically, a higher ranking can mean more traffic for your content.

SEO is a huge topic with many facets. Patrick Curtis describes a 32% increase in organic traffic from fairly simple on-page SEO techniques.

Data-driven Design Decisions

How can you prove that your design or campaign has produced a return on investment? We now have access to an array of tools that will help us evaluate the Key Performance Indicators (KPIs) of our web content. These metrics offer objective evidence and we no longer have to rely on personal opinions alone.

There are a ton of tools! But here are some examples…

  • Google analytics: Measures website, app, digital, and offline data to gain customer insights.
  • Social media analytics: Twitter, Facebook, and YouTube all offer helpful analytics tools.
uqTjZ2B7444HJQmneLmMsI2pbvLES6E2RJm1
What caused this spike in followers? My Twitter analytics can help me figure out what content and/or actions were effective on May 22, 2018.

Regardless of your talent and experience, it is nearly impossible to create a perfect website that requires no adjustments. What type of devices are your visitors using to view the content? Where are they from geographically? How were they referred to the website? What content is most popular? We can evaluate the metrics, form a hypothesis, revise, and test. This process can be repeated to refine a website.

  • Learn more about making data-driven design decisions from freeCodeCamp (Post written by me ?)
  • Learn more about KPIs from David Zheng
Yc1LoeMaYgxYoaVwxpqtCPNcU19I2mWc65hf
The Invisible Man (1933)

? Thank you for reading! If you enjoyed this story you can Read more or Follow me on Twitter.

* Source: expandedramblings.com

** Source: https://www.alexa.com/siteinfo/reddit.com May 13, 2018