Category Archives: Communication Technology

Building a Green Website

An Earth Day consideration of UX.

Today is Earth Day and a perfect time to publish this last in a series of posts about designing your next website with a focus on User Experience (UX 2022). 

Environmental impact being a critical issue for everyone and every endeavor, it’s good to consider ways to mitigate any negative impact caused by our design choices. 

Digital’s Huge Aggregate Impact

Computers don’t have exhaust pipes. So, sustainability isn’t the first thing that comes to mind when building a website. Yet, the collective impact of communication technology is substantial.

While the aggregate footprint of all computers is huge, an individual organization’s share is likely miniscule. So ignoring the problem may be tempting. Which would be a missed opportunity to be part of the solution and/or raise awareness and engagement on behalf of the environment. 

Tiny and Incremental Steps

It’s true that your individual website generates a tiny negative footprint and any design choices you make will only help on the tiniest of margins. The reverse also is true. The impact of individual web design choices can add up to a substantially positive aggregated impact. 

As a general design principle, eliminating “interaction friction” means fewer steps, smoother transitions and less computation, all leading to using less energy and generating less heat/friction. 

The following are some choices you can make to reduce interaction friction:

Be a Solution Minded Organization

From a cost perspective, building a new, greener website, or replacing the functionality in your current site just to make it more efficient will not save money. Typically, organizations rebuild a site every five years or so.  If cost-saving is the objective, the next scheduled rebuild will be the best time to incorporate more Earth friendly design choices. 

Beyond the material benefits, however, there is goodwill value in a greener website. Your Earth friendly design choices tell customers, employees and other stakeholders that your organization is both aware and part of the solution. 

Just like tiny energy savings add up to a real impact, tiny individual efforts on behalf of the environment can add up to entire communities and societies that value the environment–when everyone does their part.

UX 2022 Series 

In 2022, a good UX has become the standard for good website design. In this series, we’ve looked closely at important UX features, how they work, and how they can improve a website. All articles in this series can be accessed via the links below.

UX 2022 (An introduction.)

Core Web Vitals: Googles three essentials to user experience. 

Thumbs Up! The ergonomics of great mobile UX.

Speed: Slow websites are quickly abandoned.

More Ideas

Speed

Slow websites are quickly abandoned.

The User Experience must be fast.

As we detailed in a previous article, Google has changed the ranking metrics for websites to optimize UX (user experience.) Google’s Cores Web Vitals influence a website’s Google search rankings and how well it works on the popular Chrome browser. Google’s outsized influence on the web makes their Core Web Vitals the de facto standard for good web design.

Two of these metrics focus on the speed of your website­­—how fast it loads and how fast it responds to inputs. Slow loading and reaction speeds feel excruciating to users, causing them to abandon a site prematurely out of frustration. Optimizing speed is not only good practice, it’s essential. 

The key to speed

Achieving faster website speeds is somewhat technical. Yet the underlying concept is relatively simple––don’t present users with content until they need it.   

Three key to speed is to quickly load a stable framework and then optimally position your content for speedy, on-demand access. This will make your site smaller, less cluttered, and faster.

These three principles can help guide your planning:

  • Use a framework that allows you to manage content flow.
  • Strategically map your pages and your content flow to keep your site uncluttered both visually and on the backend.
  • “Outsource” content to larger, faster, more geographically strategic, networks, so it can load faster without affecting your page. 

Speed checklist

When working with your developer, you’ll want to use technologies and techniques that streamline your pages. This checklist is a great starting point:  

  • Choose VPS* not shared hosting
  • Maximize browser caching 
  • Make images Internet friendly (smaller files)
  • Don’t overuse “plugins” and CMS* features 
  • Host your content on a CDN*, not on your page
  • Only load content for a page that’s currently open
  • Have content load as your scroll

* See below:

VPS—virtual private server. Instead of being on a single dedicated server or a shared plan, content is distributed across the Internet on large server farms. This speeds up website loading based on geography and real-time Internet traffic. 

CMS—content management system. The framework behind most modern websites, CMS keeps them very stable and makes updating content easy. Examples: WordPress, Shopify and Squarespace. 

CDN—is content delivery network. This brings features similar to VPS to your content. Broad distribution allows much faster loading.  Examples: Amazon’s AWS, Google Cloud and Cloudflare.

UX 2022 Series 

In 2022, good UX has become the standard for good website design. In this series we look more closely at important UX features, learn how they work and how they can improve a website.

Here are other articles in this series:

UX 2022 (An introduction.)

Core Web Vitals: Googles three essentials to user experience.

Thumbs Up! The ergonomics of great mobile UX.

Building a Green Website

More Ideas

Thumbs Up!

The ergonomics of great mobile UX.

It’s the holiday shopping season––snow is falling, bells are ringing, and people are all headed downtown to the department stores to help Santa with his list. 

No. No, they aren’t.

If they’re like me, they’re thumb scrolling their way across various shopping sites looking for that perfect French bulldog tumbler or rustic garden trowel. In fact, almost 1/3 of all retail sales are transacted on a mobile device, and that number is only growing. 

Santa is mobile now. With all the gifts he has to get, Santa needs websites designed to be easy, efficient, fast and comfortable to use with only one hand. (The other is busy  with reindeer, chimneys, cookies and the like.)

As we continue our series on UX (User Experience) web design, let’s take a closer look at the physicality of web design. Let’s focus on our thumbs. 

Swipe left. Swipe right.

Ten years ago, websites were being upgraded to include responsive design. Now more than half of all web traffic goes over mobile devices. Mobile apps and mobile versions of a website should anticipate the way people interact with a phone to facilitate easy and fast navigation. 

A great example is Tinder’s “swipe left, swipe right” search method. It’s a super easy and economical movement that has become a cultural touchstone synonymous with Tinder’s brand. Tinder’s content display was built to facilitate ergonomically efficient touchscreen interactions. Some designers call this “thumb friendly.” 

Thumb Friendly

There are three elements to the principle of “thumb friendly” design:

Understand the role of the thumb. When holding a phone in your hand, you can most easily activate the touch screen by using either your free hand or the thumb on the hand holding the device. Assuming that people are often multitasking while looking at their screen, incorporating movements for the thumb make sense. On a right-handed person, the thumb pivots and swivels from the right bottom corner of the screen. 

Design to natural thumb movements. The thumb can easily move up and down. It can tap the phone and it can swipe left or right. Designers build devices to facilitate natural movements such as tilt, pinch, zoom, tap, double tap, swipe, scroll and more. 

Because these movements can be done with the thumb on the same hand holding the phone, as much as possible, UX web design should make navigation and important content choices accessible by locating them within the “thumb zone.”

Use the thumb zone as your guide. When designing mobile pages, keep the images below in mind. They are a good template for creating  thumb-friendly web design because they’re focused on optimizing ideal ergonomic movements. 

Left Thumb Map
Right Thumb Map

UX 2022 Series 

In 2022, good UX has become the standard for good website design. In this series we look more closely at important UX features, learn how they work and how they can improve a website.

Here are other articles in this series:

UX 2022 (An introduction.)

Core Web Vitals: Google’s Three Essentials to User Experience.

Speed: Slow websites are quickly abandoned.

Building a Green Website


More Ideas

Core Web Vitals

Google’s three essentials to user experience.

In 2022, UX (user experience) is being driven by one of the most powerful companies in the world. 

There are over 1.7 billion websites in the world. To find a site within this universe of possibilities we depend on search engines. Google is the most well-known, popular and powerful. To access and read/use a website, we depend on web browsers. One of the most widely used and influential browsers is Google Chrome.

In its role as a leader and organizer of the web, Google seeks to optimize their search function, their Chrome browser, and the way the web operates as a whole. They do a lot of research, which they share with developers. And they also set industry standards.

In 2020, Google revamped their algorithm to prioritize the UX over other technical criteria. Google grades websites in order to improve their own functionality and to inform their search rankings.  

The new grading priorities are: 

  • Loading performance: How quickly does a page load?
  • Responsiveness: How fast does a page respond to user input?
  • Visual stability: Do things stay in the same place on a screen?

Google calls these new “user experience criteria” Core Web Vitals. While subject to change in the future, these criteria are made up of the following three metrics.

First impressions

Largest Contentful Paint (LCP) measures the time it takes for the largest piece of content to show up on a user’s screen. This could be an image banner or text. It’s the first thing a visitor sees when visiting a site. 

Scoring well means that a site loads its initial impression in under 2.5 seconds. This type of speed signals the user that the site is functioning well. If the first image loads slowly, users often leave before interacting with content. 

Don’t make me wait

First Input Delay (FID) is another speed measurement. It tests how long it takes for a site to respond to an interaction (Google tests the first reaction). This could be a button tap on a mobile devise, or a link click or scroll on a desktop.

Scoring well means that a site reacts within 100 milliseconds or less. Responsive, quick reactions are key to keeping users engaged with content. Slow reaction times create frustration, and then abandonment by users. 

Hold still

Cumulative Layout Shift (CLS) measures the visual stability of a website. It looks at whether or not things like placement on screen, navigation buttons, content, etc., move around on a website as it’s loading­.

Scoring well is not measured in terms of time, but as a compilation of various factors. Users get frustrated when they see the content they want to access but need to wait for an image to load before a button will work or when a button moves to a different location on the screen.

Making it happen

Major content management systems (CMSs) like WordPress are constantly refining functionality issues like those measured by Core Web Vitals. If you use a CMS, consult with your developer about the most current specifications for your platform. If you’re building a site from scratch, make sure the developer is aware of these evolving conventions. From a strategic point of view, use this information to make smart choices about what content goes where to maximize UX.

UX 2022 Series 

In 2022, good UX has become the standard for good website design. In this series we look more closely at important UX features, learn how they work and how they can improve a website.

Here are other articles in this series:

UX 2022 (An introduction.)

Thumbs Up! The ergonomics of great mobile UX.

Speed: Slow websites are quickly abandoned.

Building a Green Website

More Ideas