Home » Blog

Category: Blog

Speed Test Case Study: Upstairs Hair Affair

Q: Why care about how fast a website loads?

A: One of the major ranking factors in the Google Search algorithm is how fast a page loads.

Page load times also can negatively affect the user experience of your site. If it doesn’t load quickly enough, visitors will abandon the page.

Here is a speed test case study for one of my recently completed projects: upstairshairaffair.com.

pageLoadCaseStudy1This speed test is made using the tool at pingdom.com. What I really love about this speed test is that I can see how the page load speed performs over time.

Before we get into how we helped this client bring her load time down from 6s to 1s, it should be noted that the design and development of a website are only a part of the speed equation. In a test like this one, you will quickly see that your hosting server also plays a huge part in the load speed of pages. The more photos, videos, or interactive elements you have on a page, the slower the load times, as well. A good web designer will keep this in mind when developing a site. The site here consistently comes in at 1-2 seconds across all of the pages on the site. The fastest page to load is actually the image gallery, so it’s possible to have media and still load a page quickly.

In this image, we can see that I first tested the site at the end of October. It took 6.65 seconds for it to load the home page. After a complete redesign of the website, including a switch to the fantastic Site 5 hosting servers, the load time came down to under 1s (see image above). That’s a full 5s off of the original home page load time!

pageLoadCaseStudy3This image gets to the heart of the speed issue. It wasn’t like I went through and hacked out every image or process on the website. I didn’t strip it down to nothing. In fact, there is a larger hero image on the front page now than before! What happened is that the size of the page increased but the request count decreased. That, with a quicker response from the server, saved this site a lot of time loading. Choosing simplicity over complexity and focusing the message of the page greatly decreased the loading time of the site. It also allowed us to put heavier content on the front page without making any sacrifices.

pageLoadCaseStudy4Finally, here is the overall page speed score from this test. It went up almost 10 points from the time I checked the page load time in October.

Conclusion

So, what does all this mean? There are several takeaways from this case study on page load speeds.

  1. A good web host is vital to a fast website (I recommend Site5.com)
  2. It is possible to have media and interactive elements without slowing page load to a crawl
  3. If you simplify and focus what is happening on each page, it will greatly decrease the page load time
  4. Simplifying processes, not necessarily elements, on each page will speed up a website

 

Does Your Website Have Too Many Stop Lights?

“Why do you have so many stop lights in America?”

This is a question I was recently asked by a student from Saudi Arabia. We were driving down a major thoroughfare with commerce on either side–the kind you’d find in any city in America.

I asked him what it was like in Saudi Arabia. Only a big, wide street, he said. No stop lights.

The prospect of this is probably horror for most Americans, but the reality is that it’s a lot faster to go from here to there on those Saudi roads.

I was thinking about web design and how we often put stop lights all over our sites. Every time the user has to reload–stop light. Every time the visitor has to go through one more page to purchase something or donate–stop light.

I’m not advocating no stop lights. The user does need to stop and think about interacting at some point. But you don’t want the user to stop when he should be moving along with the flow of information. Does your site actually keep people from reading? Are there poorly placed ads or calls to action? How can you find a balance between moving the user along and getting his attention to stop and look, watch, or participate?

As you evaluate your own website, what do you see? Do you have too many stop lights or not enough? How long does it take to go through your site before someone is confronted with a stop light?

5 Key Website Elements for Nonprofit Organizations

Modern website design can be daunting for many nonprofit organizations. If you’ve decided to create a site yourself or you are working closely with a freelance web developer, here is a framework that you can use to get up to speed in designing a modern website.

Rather than build out something completely new, we’ll be taking a basic framework from the folks at volunteermatch.org and their article, The 5 Elements of Great Nonprofit Web Design.

Element 1: Site Structure

Key Question: What are we going to put on this website?

A new website is akin to a blank book or blank canvas. It holds a million possibilities. The first questions to ask concerning your website have a lot more to do with your organization than with HTML5 and CSS3. These are basic questions but they must be answered first:

  • Who are we?
  • Why do we want to build a website?
  • What do we want the world (literally) to know about our organization?
  • Where do we stand on the issues important to our organization and those we wish to work with?
  • Who is going to build and maintain the website?

Questions like these don’t typically come to mind when thinking about a new website, but they should be at the center of all that you do. They are are the Web equivalent of a business plan. Without a clear understanding of who you are and what you want your website to support (yes, it’s a supportive piece within the organization) the site will fall short (at best) or be completely useless and a waste of time and resources (at worst). Take the time to sit down within your organization and flesh out who you are before beginning the design process of the website.

This approach is a huge advantage for the organization and the designer(s). Finding the answers to the questions above, will create a clear path for the design and implementation of the website. The person(s) designing the site will thank you.

Element 2: Usability

Key Question: What will we do to get users to interact and communicate with us?

With books, magazines, ads, and direct mailers, there was an understanding between the user and the organization that the initial communication was all one-way: organization to viewer/reader. On the Web it’s a completely different story. Not only is two-way communication possible from the very first moment the visitor loads the site in the browser, but it will be expected that there is a way for the visitor to participate in some way. Users are willing to give you (potentially) valuable pieces of information in exchange for the opportunities or products you can provide. They want the freedom to ask questions, chat, connect with an individual person, or click something that makes something else move. They expect to feel powerful. To meet the user here, the mindset of the organization must become one of pulling others alongside their organization rather than confronting them. It is not face-to-face that will attract new volunteers; side-by-side is the new motto of the Millennials. If you have to sell them, they’ll walk away to the next guy that will help them become a part of the organization rather than a cheerleader.

What does that have to do with usability? Everything.

From the beginning, the designer(s) must take every possibility of how the user will interact with each individual page and element on the website. A lot of questions need to be asked and different things need to be tried to ease the friction of using the website and make it as painless as possible to move down that two-way street. Here are some good questions to ask:

  • What does this site/page/element look like on a desktop? on mobile?
  • What do I have to do to interact with the elements on the screen?
  • Is that element too far away for a one-finger interaction?
  • How many clicks is too many to get to the conversion?
  • Are interactions clearly presented?
  • Is the content clearly presented?
  • Is the site simple to use?

“But it’s my content,” you might be saying. True, but the visitor has more power than ever before and desires to come up eye-to-eye with the organization. They want to accept you based on their own evaluation, not because someone told them it’s a good place to put their time or money. Your organization must make it a point to equally consider your own interests and those of the visitor. Even if it’s not your intention, it’s easy to talk down to visitors. It’s hard to engage them and invite them to come alongside through two-way communication, discourse, and invitation. Considering how to engage the user and create a design that allows for interaction will help you as you consider the next element: content.

Element 3: Content

Key Question: What are the common threads in our content?

I deal in web development and spend most of my time in the content and design areas. There is a lot to say here, but I’ll make an attempt at brevity.

What is content? Content includes all of the substance of the site: text, video, images, etc. It is found in the elements that fill all the boxes created by the design team. Only that’s an outdated way of creating a website.

The optimal way to build a website is not to create content for the design but to design the site based upon the content. If your organization has taken Element 1 seriously, you should have a great idea as to who you are and what you want to show others around the world about your people, mission, and organization. If you’ve documented the process of answering the questions about who you are then you’ve got content enough to put together a website.

Communication is noise unless it’s focused and clear. From Element 1 your organization probably has a ton of great content. Some of it is gold, the rest is just noise. For instance, it would be a great idea to record your sessions as you talk through who your organization is. The problem is that a session like that might take several hours. There’s no way you’d want to put that online. It would be a testimony to your irrelevance. However, if you sift through those hours of video (or audio) you are sure to find the core parts of who you are. With a little editing you’ll be able to cut the noise and clarify who you are, what you’re doing, who you’re helping, and why you need others to join in.

The main types of content are text, video, and images. Here’s an overview of the strengths of each element:

Text

The words on the page are the workhorse of the publication, whether print or digital. Text is great for clarification, instruction, and ease of use. It is the fastest and easiest element to load onto the page. Because it doesn’t look like advertising, it can easily be separated from the graphic elements and will often be the first thing the visitor focuses on.

Video

Moving images catch the eye, even if they don’t hold the eye. There are times when the combination of visual and audio express the fullness of what you want to say. It’s also easier to listen to someone talk for 5 minutes than to read the same thing as text. A design advantage is that you can say a lot in a small amount of screen space.

Images

Because an image doesn’t change it has the power to affect a visitor longer than a video that is cutting quickly between images. Images rarely instruct or clarify. Instead, they are great at getting to the heart of the issue or the organization. They freeze time and allow the user to dwell on the moment captured in the image. People remember images so make sure your images show the mood/feeling/attitude you want visitors to remember about your organization.

Many things go into the content of an organization: the way the people operate, their corporate behaviors and governance, their mission, the people they serve. All of these connect together to form a unique organizational fingerprint. If you take time to observe the organization through photos, video, and text, this unique fingerprint will become apparent. That is the starting point of the design. Designers need to know not only what types and pieces of content do we have, but what is the content of that content? Is there a thread of connection moving through all of the organization’s content elements? Use that thread to determine the aesthetic feel and design of your site.

Element 4: Connection

Key Question: What can we do to ensure we connect with visitors?

The generation of current internet users 18-35 want to connect with everything they do. They are powerful and are learning how to use their power to come alongside companies and organizations to be personally fulfilled. They want to participate. They want some human connection. The rise of social media is not because of boredom; it’s happened because there is a personal disconnect in the world created by the last two or three generations. The sense is that our humanity is getting lost and social media allows people to once again participate in the lives of their families, friend, and even strangers.

A connection like this is possible but it requires that your organization do more than just create a channel of one-way communication. Like Element 2 you must create a situation in which a real human connection is probable (not just possible). The most obvious places are social networking platforms (like Facebook and Twitter). This is an area where many organizations really mess up. If you are going to set up channels for people to connect to your organization, you must man that channel. It must be a place filled with people who care not only about the organization but also anyone who shows interest or care in the organization.

I once heard social networks described as outposts. No one in their right mind would send someone to a deserted outpost. Likewise, your social media accounts need to be active. If that means directing people to only one account, then do that. It is better to send people to one active account than create the possibility that they might go to an inactive platform. Build up one platform at a time if you don’t have the manpower or resources to commit to more than one.

Even though social media gets a lot of the attention, there are other ways that you can kill the connection with users. Your site should have the ability to contact you in most common forms of communication for your country or target user. The abundance of communication offerings is pretty astounding: email, telephone, fax, text, chat, IM, Skype. The list goes on and on. Here are the secrets of connection:

Speed

It’s easy to set up a website that has every available way to contact your organization. If a user tries to connect with you and you don’t get back to them quickly, they will move on. All of the examples of communication above move very quickly. Email is no longer much like mail. It’s actually a lot more like chat. It’s on your phone, computer, tablet, tv, etc. Users know this and they expect that you will not only get back to them but get back to them quickly. If you don’t answer with speed visitors (potential donors and volunteers) will move on.

Humanity

One of the worst things to happen when visitors finally take the time to stop and communicate with your organization is for them to get an automated response in return. The expectation online is that there is a human on the other end of that email address. To get an email back that says someone will get back to them in the next week is disheartening, at best. Don’t be one of those organizations. Commit to having a human on the other end of every communication tool (e.g., email address) for your website.

Listening

The third thing that can kill the connection with visitors is if your organization insists on doing all the talking. Your organization will get a lot farther if you commit to listening to what users have to say than trying to speak all the time. If there is a problem, listen to users. If you don’t know how to fix the problem put a short-term plan in place to find out how to fix it and then get back to users quickly with a solution. Remember, your organization should come alongside visitors, not confront them.

Relationships are about connections. The stronger the initial connections, usually the deeper the friendships can go. The same is true of your organization. Not everyone connects with your cause. However, when someone does connect with your cause you must make sure that you don’t kill the relationship by dehumanizing your organization or failing to listen to your new friends.

Element 5: Design

Key Question: How does who we are affect the site design?

I’m putting design last here but it’s a huge part of your organization’s website. The design tells the visitor many things. For instance, what is this organization’s:

  • Energy
  • Attitude
  • Mission
  • Seriousness

It has the ability to answer many of the questions a viewer comes to the site with initially.

  • What space is this organization in?
  • Are they cheap?
  • Do they care about their online presence?
  • How does this make me feel?
  • What are they about?
  • Do they care about people or money?

Every user comes to your site with these questions in their heads. The design elements can help to answer some of the users’ questions immediately. Does your design show what you do or just tell visitors? Does your design bring clarity to your mission or just muck it up? Does your design send the right or wrong signals, tone, and attitude? Studies have shown that users make up their mind about your organization after only a few seconds. There are a handful of gates that you must jump through for the user to open up to your message. The design is one of the first. (The first is: Does the site load on the user’s device or not?) Care equals trust. If you put care (time, money, energy, effort) into your site people will be more apt to trust your organization, even if they’ve never heard of you. After they see that you dress the part then users will move onto judge the content, or substance, of your organization.

Each element of the design speaks to the user. Here three key elements and what they convey to the visitor:

Type

We have a tendency to associate fonts with specific time periods, people, feelings, events, etc. At some point the way the letters and words are formed takes on as much meaning as the ideas the words are conveying themselves. Choosing the right type for the organization and specific piece of content is a large part of winning users over in the first few seconds of viewing the site. One other consideration is legibility. If the visitor can’t read the message, who cares what it says?

Color

Choosing colors is a tricky business, especially when dealing with a global organization that has users from around the globe. Colors tend to mean different things in each culture. Using website analytics, your organization can track where most visitors are from and try to plan for color palettes that are pleasing to everyone who comes to the site. In general, black and white are safe for every culture.

Layout

Is your website a website or a blog? Users can tell almost immediately which it is. Many discerning users can tell if you’re using WordPress or not solely based upon layout. Layout is where logic kicks in. Each part of the page–and even the whole page–should be laid out in such a way that the information is clear, concise, and logical to the user. Read and think through each of the elements on the page. Does it make sense? Is there a hierarchy of information that can be helped by the layout?

Many designers talk about what’s above the fold and its importance. It’s true. What’s above the fold is of huge importance. Honestly, though, most users come to a website ready to scroll. My advice is to use what is above the fold to get the user to take an immediate action and/or to scroll down the page to learn more. I also suggest using that space to immediately inform the user about who you are as an organization. This can be through text, images, video, design, etc. Content above the fold should impact the user immediately and move him or her down the page to more information and calls to action.

Conclusion

There are many things to think about when looking at designing or redesigning a modern website. I apologize for having to leave out so much of the rest. A new website begins with organizational self-discovery and an internal conversation. From there it moves over into a conversation with the user. If you are clear on who you are and what you’re doing as an organization it will help you to effectively engage users and visitors to your site or blog. Through that engagement a connection is made and your organization begins to move quickly in positive directions. This is the game plan, at least. The waters of reality,however, are much more difficult to navigate.

I’d love to hear your feedback on these 5 key elements of nonprofit web design. Are there some I’m forgetting? What did you learn? Has your organization recently gone through this process? If so, what did you learn along the way? Leave a comment below.

Content is the Substance of Your Website

The more I read about content-driven website development the more it all just makes so much sense. The way your site looks is important, but the content of your website (text, photos, video) is the substance of the site.

Think about it in terms that we can understand. If a person is wearing particular styles, he or she can be categorized quickly and easily. This is the same as the design of your website. It should mentally put your organization into a category immediately.

But what about once the person opens his or her mouth? You will know immediately if there is anything of substance to the person or if he or she is just posing as the real thing. It’s in the content of their speech and actions that you will know if the person lives the lifestyle or just looks the part.

Website designs should immediately put organizations into the right categories for users. This is everything above the fold: logo, colors, images, fonts. This all speaks to categories, not expertise. Organizations can’t stop there, however. They must continue to show their character and expertise with the content of the website.

People do judge books by their covers, but they tell other people about books that have substance and move them in some way.

Is your content worth talking about, sharing, exploring, connecting with? Or do you just have a beautiful site design? Your organization must make both design and content a priority in everything you do online.

How does your content look? What are you doing to make content a priority? Which websites are doing a great job combining great design with substantive content? Leave it in the comments below.

Video: Uploading and Managing Media Files in WordPress

The new web is all about media. When you create blog posts or pages for your WordPress website, it’s good to include images, text, video, slideshows, etc. for users to consume. You’ll need to learn the ins and outs of managing your files in your media library in the WordPress dashboard. This video introduces you to the basic concepts of uploading, deleting, and managing different types of media files.

Video: Overview of Page Builder Plugin

If you’re one of my clients, you may have seen the Page Builder tab next to the Visual and Text tabs on your page editor. I use Page Builder when I want to create unique layouts or add interactive widgets. What the plugin does is widgetize the main content window, allowing it to behave like a sidebar or footer. It’s a great, free tool that has allowed me to quickly and easily add beautiful, functional elements to my clients’ sites.

Website Complexity and Maintaining Your Site

Everyone wants an amazing, complex, do-everything website. A key question to ask, however, is, “What do I have the time and expertise to maintain?” The more complicated the website, the more need there will be for complex maintenance.

Think about websites as new cars. You buy a car and the dealer hands you the set of keys. It’s easy enough to just take the car home and begin driving it. But what about maintenance? Eventually, it will need some work. The two big concerns are: 1) Where will you go to maintain the site and 2) how much will it cost?

Before the complexity of the modern car men and women all over America would fix their own cars. They were relatively simple combustion engines and electrical components. While major work required the help of a certified expert (or a more knowledgeable neighbor) most everyday maintenance was within the reach of car owners. As cars began to grow in complexity (e.g., the introduction of computerized components) car maintenance began to move beyond the capacities of most car owners. Today, owners don’t handle as much of the maintenance and repair as before.

A website is like the cars above. It was once relatively simple to maintain a website. If you knew HTML and CSS, you had all the tools you would need to create and maintain a very nice website. With the introduction of more complexity in web design, however, much of that maintenance seems out of the scope of the normal site owner. Site owners must learn not only HTML and CSS but also other, more complex, languages such as PHP, Javascript, and AJAX. There are also third-party management systems to learn. These systems make creating a beautiful and complex website possible for the average person but do require some time and experience learning.

I’m sometimes asked to create a complex website, which I’m happy to do. However, with that complex website comes complexity in maintenance. A simple brochure-type website created in WordPress will be a breeze for the average site owner to maintain. The introduction of more complex (i.e., interactive) elements, however, requires a significant investment in time learning how to maintain those elements.

So the next time you ask your developer or designer to add in complex functionality, consider whether or not you have the expertise already–or the time to gain the expertise–to maintain those complex functions. If not, then it’s either time to hire someone to care for your site or scale back the complexity of the website.

Do you have a website that is too much for you to maintain? I can help. I offer two maintenance packages that are priced to fit your budget. I can help you maintain your WordPress website so you can spend your time and energy growing your business or organization. Find out more about my maintenance packages or contact me today.