September 2017 – ACS Reduc 2022

How We Took a Website from Stuck to Stellar

September 26, 2017

When Kyro Systems came to us, they were at the end of their rope. (Somewhat odd, for a company that spends a lot of time hanging from ropes to install skylights).

They were redesigning their website and hit a wall. The project was dragging on month after month. Another web development firm (and we won’t name names) had built most of the website. The website didn’t look bad, but it also didn’t work. Overall, the site lacked organization and was difficult to navigate.

We meet a lot of clients like this. Clients who get most of the way down the road on a new website and need help over the last hurdles. We love picking up projects like these because we understand what it takes to build effective websites, not just pretty ones.

On Time, On Budget

A family business, Kyro Systems installs and repairs skylights and building envelopes in the DC area. They have worked on gorgeous buildings for prestigious institutions like the National Gallery of Art and the Ronald Reagan Building.

After sinking resources into a website that wasn’t working, Kyro had very little budget left to finish the project. We wanted to help them out of this tough spot, so we stuck to a tight schedule to launch an effective site without breaking the bank.

Our finely tuned web development process helps us turn sites around quickly. We present initial mock-ups, receive client feedback and then build out the final webpages from there. By following these steps, websites can be built and launched in a matter of weeks.

At ACS, we place a premium on direct communication. Unlike other agencies, we don’t have account middlemen. Our clients work directly with the creative team, so nothing gets lost in translation. This helps projects run smoothly and efficiently.

Words, Words, Words

To launch a website, you also need to write web-friendly content. This hurdle often slows down many companies. Web copy has to be shorter and easier to read than other types of content, and not everyone knows how to tackle this challenge.

Kyro sent us pages of text they had written about their services. We adapted the content, shortening the sentences and breaking up paragraphs. This way, website readers can quickly scan a page for the information they need.

Thanks to careful planning and client input, the new Kyro website is broken into simple, easy-to-understand categories. Though the original design was unorganized, the new website clearly guides people to relevant information on Kyro’s services, projects and contact information.

Preparing for the Future

The new Kyro Systems website provides a straightforward introduction to the company. But, as with any project, there is always room to grow. In the future, Kyro may want to use their website as the centerpiece of marketing efforts. With the foundation we set up, it will be easy for their team to expand the website whenever and however they choose.

We build all of our websites using WordPress, a popular Content Management System (CMS). WordPress has backend editing tools that allow you to update a website without needing to understand coding.

For instance, Kyro may want to set up a blog on their website. From there, they could share the content on social media or email the articles to their subscribers. In this way, they can keep their brand top-of-mind for valuable customers. The website we built makes this future marketing possible.

We’re so happy to have helped Kyro Systems get their new website up and running. We can’t wait what the future holds for their business!

Your Guide to Image Optimization

September 19, 2017

Since our educational adventure at An Event Apart in Washington DC this past July, we’ve discussed Website Accessibility and Measuring Engagement. Today, we’re diving into the ever-important realm of Image Optimization.

What is Image Optimization?

When Una Kravets, UI Engineer for Digital Ocean, began her AEA presentation with a full screen photo of Bob Ross, we knew this was going to be good. Essentially, Image Optimization is what makes a raw, high-resolution photo or graphic look good and load fast on the web. This is accomplished using various tools and practices, which we’ll get into later. Worth noting, we aren’t necessarily talking about the physical size of an image in inches or pixels here, but instead the file size in bytes.

Every time you visit a web page, your computer is essentially downloading the embedded images to view them. This consumes precious bandwidth on your hosting environment as well as your visitor’s browsing device. The goal of image optimization is to minimize the bandwidth required to experience a website.

As Google so eloquently puts it, “Image optimization is both an art and science” because there is a definitive yet subjective balance between quality and file size. In the example below, you’ll see our original photo on the left, straight from the camera, with zero compression or optimization. To the right, that same photo has been saved at 10% quality to significantly reduce file size.

With any image optimization, there is give and take. The higher the quality (more colors, finer detail) the bigger the file. There have been major strides in lossless compression that retain the depth and variation of photos. Such methods rely on extremely complex algorithms unique to each of the popular file types (JPG, GIF and PNG). Painting happy trees might make us smile, but image optimization is serious business.

Why it Matters?

You might ask yourself why this extra effort is necessary. You have a nice broadband internet setup at your house, so why bother with a saved kilobyte here and there? For that answer, you’ll have to step outside of your own home. When Una Kravets refers to “Responsible Imaging,” she’s talking about serving all audiences, across the world, on any devices, with a wide range of connectivity scenarios. Like her, if you believe access to information should be a basic human right, then image optimization becomes a top priority. If we look at mobile traffic alone, about 50% of all visitors are using a phone or tablet to browse your website – often from a 3G connection. Statistics show that 53% of mobile sites are abandoned after just 3 seconds. Can you afford to lose that much business due to slow page load times?

Additionally, search engines like Google are starting to place increased importance on page load times. Websites that load faster rank higher in search results and that will only become truer as expectations evolve. Just for fun, check out your current Google Page Speed Score.

According to Una’s HTTP Archive data, nearly 66% of a site’s total size is comprised of images. Stylesheets, scripts, HTML code, and fonts are barely a sliver on the pie chart compared to the bandwidth consumption of graphics and photos. Look around at the current trends in website design. Pages are adapting large, full-width images and big, bold graphics throughout for an impactful brand experience. With this movement comes an increased need to keep quality up and file size down.

How Image Optimization is Done

It’s best practice to get into the habit of optimizing your graphics before uploading. Again, there are a handful of great tools and software to make it happen, but it often requires a human touch to get just right. Starting from scratch is one thing, but optimizing a website that is already established and packed with images can be a real challenge. Doing so in a creative, innovative way is a whole new level of complexity. Luckily, ACS Creative is always up for the job…

Take a webpage we built for our client, B-FOR. The company provides international trade show and exhibit services. We designed their original website, and we recently expanded the site to include their Brand USA content. Brand USA encourages international travelers to visit the United States.

On one of the new Brand USA pages, we included dynamic images. Each time the page loads, a new header image appears. Normally, this would slow down a webpage. But we changed the typical way an image loads. The full image does not load all at once. For a split second, the image is blurry. This allows the rest of the page content to load, while the rest of the image catches up. Customers can see the content they need right away, without waiting those extra painful seconds for the page to load.

Optimizing the images on your site doesn’t always mean crunching the file size. Replacing icons and simple graphics altogether with web fonts is also an effective measure. Furthermore, uploading images that are no larger (in pixels) than their use on your site is equally crucial. For example, your logo file doesn’t need to be 900px wide if it never appears larger than 300px wide. Don’t serve an image that could be a font and don’t serve an image with unnecessarily large dimensions, and you’re already off to the races with your optimization efforts!

Tools of the Trade

Over the years, we’ve utilized several means of image optimization. Here are a few of our favorite tools and resources:

Adobe Photoshop (software)
Photoscape (free software)
Ewww Image Optimizer (WordPress plugin)
WP Smush (WordPress plugin)
Optimizilla (web interface)
TinyPNG (web interface)
Kraken (API)

These will get you started, for sure. When experimenting with different image optimization services and settings, it’s important that you save the original graphic files separately. If you opt to utilize one of the WordPress plugins, be sure to backup your site before running any automated functions.

The Future of Image Optimization

Perhaps the most engaging element of Una Kravets’ presentation was her excitement about how far image optimization has come – and where it’s going. This fascination extends far beyond the current capabilities of common file types, but is also stunted by the limitations of cross-browser support. For instance, the WebP file format, which boasts transparency, better compression than JPG, as well as animation, or the Picture Element fallback, which controls responsive images based on the visitor’s resolution. WebM promises stunning open video compression with minimal loss. These are just a few examples, of course. The future is bright for image optimization, and we intend to remain at the forefront of progress.

We’d like to thank Una Kravets (@una) for inspiring us to share this fascinating topic with our readers and clients. Be sure to follow her for wonderfully whimsical insights on digital marketing, community building and technology.

Nonprofit Websites: Your Mission, Our Vision

September 12, 2017

Nonprofit organizations have the distinct task of conveying and executing their missions on a tight budget—and those goals are of no less import than their for profit counterparts. We get that. With hubs across the DC Metro area (a hotbed of nonprofit organizations), we have decades of experience helping causes economically harness the power of the web to communicate information, raise funds and do more good with their nonprofit websites.

Inform and Educate

A modern, strategically-designed website can help you reach a larger audience on the internet. Older websites that are not responsive (meaning they don’t adjust content to fit all devices) don’t rank as high with search engines—if at all. Any company, regardless of whether it is nonprofit or otherwise, needs a website that shows up when people search. We’d argue though, that properly designed websites are even more advantageous for nonprofits because a little spend really goes a long way. Compared to other forms of advertising, investing in a website that is communicating who you are and what you do 24/7 is a very smart marketing move.

Fundraising Efforts

If your nonprofit depends on donations, then a website can be a valuable fundraising tool. You can pitch your cause online with stories, images and case studies, and give potential donors the ability to send funds instantly and conveniently. This creates a sense of immediate gratification–which can lead to more donations. If folks have to mail checks in, chances are they won’t.

We created such an opportunity for online fundraising for Fairfax Casa, an organization that pairs court appointed special advocates with the children that need them. Fairfax Casa relies on both donations and volunteers, so the website we designed for them has several red and dark blue buttons on the homepage that grab your attention and encourage you to act. The images of the cute kids really help the nonprofit’s cause, too. There’s a powerful story being told here, and that story pulls at the purse strings.

Serve Your Interests

While we often associate nonprofits with heartfelt causes, many have other equally legitimate agendas. For example, we designed a website for AAEI, the premier trade organization that represents US companies engaged in international importing and exporting. Conducting global business is a complicated affair. AAEI assists these companies by conveying the latest information on government regulations. They have members and hold conferences. What better way to collect and dispense information about laws and events than through a modern, easy to navigate website? And that’s exactly what we designed for them.

Event Promotion

The Federal Administrative Law Judges Conference (FALJC) is an annual meeting featuring seminars and other networking opportunities. The website we designed for them makes it easy for visitors to find other members, meet the officers and learn about upcoming events. There’s also a message board for folks to address common concerns. The clean website design really allows the information to be the hero, which is perfect for FALJC. We don’t believe in flash for flash’s sake.

Measuring Engagement

September 5, 2017

This is our third post in a series on the web design and development conference, An Event Apart. After you learn about measuring engagement here, read up on improving website accessibility.

There’s a popular meme we like. The image shows a beautiful brick walkway, designed to get park visitors neatly from point A to point B. Right next to the walkway, there’s a dirt path, well-trodden by people who have ignored the intended route.

This meme perfectly demonstrates how users behave on your website. Some will take the beautiful path you laid out for them. Many more will move through your site in ways you never predicted. As we’ll explain in this post, effective web design isn’t about controlling your visitors – but adapting to how they behave on your site.

We all wish our website visitors would follow the paths we laid out for them. We wish they would find what they need quickly and painlessly. We know that’s not always the case. So what do you do about it?

One guy might have the answer. Gerry McGovern (@gerrymcgovern) helps companies improve their customers’ experiences online. He capped off DC’s An Event Apart with his presentation, “Measuring The Customer Experience.”

During his presentation, Gerry showed us different examples of less-than-ideal customer experiences. He then explained how he helped resolve those problems with research, testing and analysis.

He opened with an example from Canada’s travel website. As you can imagine, it was difficult to manage, with different government agencies contributing to different parts of the website.

With testing, they found that visitors were having trouble finding information on travel documents for tourists. They expected users to look under “Immigration” for this information, but tourists did not know to look there. By moving the content to the “Travel” section instead, many more site visitors found what they were looking for successfully.

Why does measuring your customer experience matter?

As with the Canada website example, it is important to keep in mind what your website audience actually does, not what you want them to do. That way, you can keep them on your website longer, even though attention spans online have never been shorter.

As Gerry put it, we expect our Amazon deliveries within hours of purchase. We expect websites to load in milliseconds. In that way, we also expect information to be available instantly.

Gerry was quick to point out that wait times are your competitor’s opportunity. The longer it takes to find valuable information on your website, the more frustrated they’ll be. If your website is hard to use, customers will abandon you pretty quickly.

How do you prevent this frustration? First, you need to identify customer pain points. These are the blind spots on your website that slow down your customers and hurt your bottom line. To find these frustrations, you can run tests to measure how quickly customers can find key information on your website.

How do you set up these tests?

Creating these sorts of tests is easier than you think. Gerry outlined a few key steps to help get started.

Keep your sample group fairly small. You only need 13-18 people in order to get reliable results from your tests.

Set up a simple testing environment. You don’t need a fancy lab to learn more about your customer’s experience. You should have the customer at one computer and a proctor following along at a second computer.

Carefully design your questions. Have them track down specific information on your website; there should only be one possible answer for each question. Your questions should be short, 20-30 words max. You want to be clear, but you don’t want to give them too many keywords or clues on where to find the answers.

Have target goals in mind. See how quickly customers can complete the tasks you designed. The target times should be somewhere between 20 seconds and 2 minutes.

How do you measure success?

With these tests, you should be able to see which tasks tripped up your customers. Don’t worry too much about outlier results. Instead, look for patterns. See which parts of your website could be improved based on these pain points.

If you need to sell these improvements to management, Gerry recommends showing videos of customers trying and failing to complete the tasks you designed. By combining data and empathy, you can overcome office politics and make real improvements to your site.