Skip Navigation

Thought leadership from SAI to accelerate your performance
 

Systems Alliance Blog

Opinion, advice and commentary on IT and business issues from SAI
Keyword: sai digital

When you’re trying to stand out from the competition in a crowded digital space, how do you capture—and keep—your audience’s attention? Attention spans are shorter than ever as more people have become fluent in technology and digital platforms are embedded into most daily routines.  When users are searching for answers, they want quality information, and they want it instantaneously. How do you differentiate your content and separate your brand from the competition—in about 8 seconds or less?  The answer: make your content more visually engaging.

This Fast Five infographic highlights a few ways to execute this tactic by finding a balance between text, imagery, animations and data. By finding the right blend of strong visuals, clear content hierarchy and engaging layouts, you can grab your audience’s attention and drive your message home. 

Infographic Visual Content

Are you interested in learning about a website evaluation and exploring a new approach to your digital strategy? Contact SAI Digital today!

This week we had the pleasure of sponsoring HighEdWeb’s 2016 Annual Conference in Memphis, Tennessee. We shared SAI Digital’s Web Strategy for Gen Z white paper, gave out a fleet of paper airplanes, and awarded a lucky winner an iPad mini. We heard some killer blues music and soaked in the rich culture and delicious food of Memphis. I even had my picture taken with Elvis. But the best part of the conference for us, was getting to meet over 600 talented and dedicated web professionals across the U.S., Canada and beyond. (Okay, we didn’t meet every single person, but we sure tried!)

Jeanne & Elvis HighEdWeb

As a UX professional who has worked in and for higher educational institutions over the past 20 years, it was an enriching opportunity to listen to lessons learned and inspirational ideas for the future of higher education websites, recruiting and marketing. While I didn’t get to attend every session (there were close to 100) I did see a few major themes emerge that many higher education institutions are currently facing.

Understanding Your Audience

Quite a few sessions focused on understanding the post-Millennial audience that will reach college campuses in the next year or so. Doug Tschopp from Augustana College provided thought-provoking research on generational theory, while we pondered how technology shaped the next generation of college students. Gen Z’s have not known a world without the Internet and may have first connected with technology before they could walk (or in the case of Doug’s example, during potty training). It’s no surprise that there were multiple sessions about how and when to start texting and Snapchatting with prospective students.

Doug Tschopp

There were several presentations on providing personalized experiences to site visitors. At SAI Digital, we know that many of our Higher Ed clients would like to provide an Amazon-like experience for interested students. The CMS vendor, Terminal Four, walked through possibilities for personalized experiences based on geographic location, email campaign click-throughs, and website behavior depending on which academic program was viewed. The opportunities are exciting, but we must be careful because far worse than not providing a personalized experience, is making incorrect assumptions about our visitors or providing an experience that feels intrusive.

The presentation that sparked my imagination the most was from Melissa Dix and Bill Mortimer at Beloit College. Beloit shared their bold and unapologetic approach to marketing and recruiting which centers on the idea that hefty viewbooks are a thing of the past and the future is less permanent, student-authored content. Beloit formed a collective of students and invited them to collaborate and even drive the content authoring process. (And when I say drive, I mean literally drive. Check out their In a Van series on YouTube.) As a result, Beloit is able to provide fresh, fun and authentic videos and messaging that prospective students are overwhelmingly connecting with through email and social media, especially YouTube and Snapchat.

Beloit College

Managing Websites and Redesign Projects

Several presentations focused on how to build and manage a web team, especially when departments are understaffed or resources are decentralized across the college or university. Jennifer McFarland of NC State University provided an insightful (and hilarious) view into NC State’s move from two web team members to an expanded team of more than six web professionals and interns—all while moving their CMS from Drupal to WordPress.

Lisa Catto of Western Oregon University (WOU) emphasized the need for a more thoughtful and strategic process when undergoing a major website redesign. A poor vendor relationship and lack of campus buy-in led to a painful redesign of the WOU website. Some of the key takeaways for improving the redesign process in the future were agreeing on the primary audience, investing in usability testing, avoiding “death by committee” for key decisions and centralizing content creation. As a company, SAI Digital prides itself on thorough audience research, iterative usability testing and long-term collaborative partnerships with our clients. It was great validation to hear that the work we do can go a long way toward avoiding those pitfalls.

Data, Accessibility and Security

Another hot topic during the conference was collecting, analyzing and reporting on email, website and social media traffic data. As the Digital Analytics Lead for Harvard University’s Public Affairs and Communications, Aaron Baker had plenty of insightful experiences to share. For many of our clients, the job of data capture and analysis falls by the wayside behind too many other responsibilities. Aaron’s advice on selecting the right key performance indicators (KPIs) to track and leveraging analytics and social media listening tools is a first step toward building more comprehensive insight.

The theme of accessibility was addressed not only in several thoughtful presentations, but also by attendees I spoke with in conversations throughout the conference. A growing list of higher education institutions are currently facing liability for inaccessible websites. Colleges are becoming more aware of accessibility guidelines and putting plans into place for evaluating and improving their websites, reflecting a commitment to meet the needs of all students. This is a topic that will continue to be in the foreground of web development in the near future. (We recently wrote a blog on this very topic. Check out  Website Accessibility Tips for College Admissions.)

It is telling that the session selected as best presentation for the four-day conference was by Paul Gilzow from University of Missouri about securing higher education websites against hackers and malware. With more colleges moving to open source CMS solutions, like WordPress, security is an ever increasing concern.

Content and Storytelling

Aside from attracting audiences and tracking data, the real heart of the matter at HighEdWeb 2016 was content. Whether it was developing a clear content strategy, producing fresh and authentic content, or writing findable content, it was clear that many institutions are working on ways to improve the content they deliver. 

It was so fitting that the conference ended with a Keynote by LeVar Burton. (THE LeVar Burton from Roots, Star Trek the Next Generation and Reading Rainbow.) Mr. Burton, who has dedicated the past 30+ years to literacy, talked about how storytelling is the foundation of education. Stories spark our imagination and it is our imagination that allows us to form ideas. When I thought about Mr. Burton’s message and how it related to higher education marketing, one quote he said really stood out to me. “A story is only as good as the storyteller’s ability to communicate that to a listener.” It reminding me of a recent experience where we developed what we and our client thought was a very compelling story about the University, only to find out during usability testing that prospective students didn’t really understand the message we were trying to convey. Not only do we need authentic and compelling stories to tell, but we have to continually learn how to tell them in ways that resonate with our audiences, whether that is through an interactive website or a 10-second Snapchat.

LeVar Burton

For our team at SAI Digital, the conference was a great experience. Not only did we get to meet fantastic people and hear the difficulties facing a wide range of colleges and universities, we left inspired to continue to develop innovative solutions for our higher education clients and their audiences.

Imagine a high school student who is blind or has a physical disability, who was planning a campus visit. You would expect the college or university to accommodate any challenge or limitation that student might face, and work to make sure they had the support they needed. There would be accessible parking spaces in the lots. Buildings would include wheelchair ramps and elevators. Tour guides would be quick to offer additional assistance to meet the individual’s unique needs.

Now imagine that same student’s experience with the school’s admissions website. If the website was designed using best practices for web accessibility, people who are blind or have low vision could use a screen reader to “view” the content and easily navigate across the site. People who are deaf or hard of hearing could read on-screen captions for videos. People with physical disabilities could use keyboard navigation or mouse alternatives to interact with the content.

First impressions are everything. Research indicates that today’s Gen Z prospective students make judgments about college websites in eight seconds or less. When prospective students begin looking at colleges, they start the evaluation process with the school’s website—the virtual tour is the new campus tour. For students and their parents, the first impression of a school is through its website.  And for students with disabilities, that first impression is going to be poor if the site is not accessible. Having a website that is not accessible to all prospective students means that some people will not be able to view all of the content. As a result, they will miss important information and find it difficult or impossible to navigate the site.

Online Accessibility Graphic

What is accessibility?

When people talk about website accessibility, they are likely referring to a set of standards and best practices that ensure that people with disabilities can use a website. You can learn about accessibility by reading about Section 508, which is the US federal guidelines requiring certain websites to meet a small set of requirements for accessibility, and WCAG or WCAG (Web Content Accessibility Guidelines), which is the widely accepted set of standards for website accessibility.

While accessibility is important for all websites, colleges and universities have even more compelling reasons to make sure their websites are accessible.

Why is accessibility so important for college admissions?

  • An accessible website will benefit your admissions department. Statistically speaking, you will have people visiting your site who will benefit from accessibility. As an example, the National Eye Institute estimates as many as 8 percent of men and 0.5 percent of women with Northern European ancestry have the common form of red-green color blindness. If your website follows color contrast guidelines, you will be more effectively reaching a large segment of prospective students and their parents.
  • Accessibility represents fundamental values of higher education. Higher education is defined by inclusivity, diversity and learning. It’s about expanding education and opportunities. That mission falls flat if college admissions websites put thousands of people at a disadvantage every year.
  • It’s good business. Every higher education institution—whether public or private—shares the goal of making sure every incoming class reaches its capacity with smart, talented students. With trends in applications showing a national dip, it’s more important than ever to attract students who will excel at your school. The fact that some students rely on website accessibility does not in any way preclude them from being successful in college.
  • You can stand out as a leader. Fewer people are applying to college, and competition is a challenge for everyone. There is only so much you can do to differentiate your institution from others. But while you may not be able to expand your campus or offer a new program, you can start to make your website accessible. This is one way you can differentiate yourself from your competitors.

Tips for Making College Admissions Websites Accessible

Accessibility Best Practices

Making your website accessible may seem like a daunting, time-consuming, expensive task. The good news is that changes don’t have to be made all at once. Instead of struggling to implement a site-wide overhaul, start with these easy wins.

Make your text size large

When it comes to font size, go big or go home. Forget 12px as the standard. Go for 16px for your base body copy. Reserve 12-14px for special cases or literal fine print. There are a lot of people who have minor visual impairment, including older users and people who forgot their glasses. Even people who have perfect vision will thank you if they are viewing your website on a screen with wonky resolution. Large text size is also a design trend, so you’ll be helping people view your content and you’ll look good at the same time.

Choose a color palette that meets contrast standards

Meeting color contrast standards is the best way to make sure people who are visually impaired or colorblind can view your website. Unfortunately, many designers are not in the habit of planning for color contrast when they are determining the brand colors and typographic styles for a website. If you check contrast before you finalize the basic color palette, you won’t have to worry about checking every single element on the site.

Use descriptive text for links

Avoid generic link text like “Click Here.” People using screen readers often “scan” the page by jumping from link to link, and they rely on link text to describe where that link will take them. For instance, say “View the events calendar” instead of “To view the events calendar, click here.” Not only is this an important accessibility feature, it is also a best practice for SEO and user experience.

Use consistent heading hierarchy

People who use screen readers also rely on headings to scan the page – just like sighted users. Make sure you use a logical heading structure to make the page easier to follow. Reserve the heading 1 tag <h1> for the page title. For the main content area, use the heading 2 tag <h2> through heading 4 tag <h4>. You can keep going, but most people won’t require additional levels. Make sure your typographic styles for headings make it clear—at a glance—what the hierarchy is.

Don’t rely on color alone

Color is a great way to communicate information, but it shouldn’t be the only way. This will be helpful for people who are colorblind or anyone dealing with a monitor that has poor color resolution. The most important place to apply this best practice is with interactive elements, such as button, links and form fields to indicate status or state changes. Instead of or in addition to color, you can use icons, typographic styles and language as a redundant way to convey information.

Strategies for Prioritizing Accessibility Efforts

Unfortunately, accessibility is often a great idea that never sees the light of day. Many people still don’t know what accessibility refers to, let alone how to plan for it in their websites. Even strong advocates may lack the time and resources to put their beliefs into practice. It’s often unrealistic for colleges and universities to do a complete accessibility overhaul on their existing sites all at once. Fortunately, that’s not necessary.

Here are a few strategies to start moving towards a more accessible website:

  • Start small. You don’t have to do everything. Concentrate on easy fixes. Continuously make your site more accessible over time. This is more manageable, and you will see results begin to gain momentum as you go.  
  • Take ownership. Whether you work on in the admissions office, on the IT team, or with Marketing—you can start taking responsibility for including accessibility as part of the discussion. Make sure people know about it, even if you can’t take action right away.
  • Join forces. You may not be alone at your institution. Find your advocates and allies. Reach out to other parties who might be interested in or benefit directly from making your site more accessible. Talk to the ADA compliance officer. See if there are student or faculty groups devoted to advocacy and equal opportunity.
  • Plan for it. Accessibility is rarely a line item on a budget or a milestone in a timeline. But it won’t just happen on its own. Even if you are not able to do much now, start planning for opportunities to improve by setting aside resources and including accessibility into the next website redesigns or upgrade.   

In Closing

If this is the first time you are thinking about your website’s accessibility, we hope we have illustrated how important it is to prioritize making your college website more accessible.

If you have been advocating making your college website more accessible, we hope this gives you some good ideas for how to proceed. Check back soon for more articles and resources about accessibility. 

 

 

Memphis, TN: home of the blues, BBQ and the HighEdWeb Conference 2016. We're packing our bags for the Bluff City and can't wait to experience a little bit of southern hospitality as we sponsor this innovative conference for the first time.

The four-day conference boasts a schedule filled with notable keynote speakers and actionable and inspiring workshops. The sessions are designed for a variety of web professionals—topics range from the technical to the analytical to the creative.

Sessions on our must-see list include: Hello from the Other Side: Painful Lessons Learned from a Website Redesign; One Size Fits None: Remaking a College Site for a Content Hungry Generation; Accounting for Website Security in Higher Education; and Application Development: Why UX Matters. Check out the full schedule on the conference website!

We’re excited to experience this event and believe that it offers significant value to Higher Ed digital communications professionals. Planning to attend? We would love to meet you and hear about your website goals and challenges, so be sure to stop by booth 13 and say hello! We’ll have plenty of giveaways and goodies, plus information about how a partnership with SAI Digital can help your web presence.

 

In recent years, website designs have become more complex and multimedia intensive. High resolution Retina-ready hero images, video, parallax scrolling, animations, social media widgets and a plethora of other tools have been incorporated to create engaging and immersive online experiences. The goals are certainly noble – to create unique and engaging websites for our clients that will help them achieve their online marketing objectives. Significant improvements in bandwidth - both wired and cellular - and device capabilities have further encouraged us to push the envelope with highly dynamic online experiences.

The evolution of technology and design patterns has resulted in our industry going a bit overboard, too often building slow, bloated web pages to achieve this interactivity.  While unheard of just several years ago, it’s now common for web pages to be several megabytes in size, an issue that has led to a negative impact on both our site visitor’s experience and our results (leads, conversions, sales, etc.). Slow website performance has been shown to impact both the abandonment rate of pages/sites and conversion rates. While studies differ as to how much, the consistent bottom line is that faster is better: faster load times correlate with more conversions and lower bounce rates.

It’s not just a user experience issue. Search engine optimization (SEO) is also an important consideration. As a reminder, Google has used website performance as a search ranking factor since 2010. Although it’s unclear how significant of a role performance plays in that algorithm today, any way we can optimize for Google’s algorithm matters.

Speed Matters

Achieving Results

Ultimately, our primary goal is to design and build websites that achieve marketing and business objectives, not just win awards (although that’s nice, too). I’m not suggesting that we step back and build sites that are flat or generic, but rather I’m advocating for striking the appropriate balance among performance, interactivity and visual flair. That’s not always easy. As our clients seek distinctive and engaging websites, our designers want to express their creative freedom and developers must execute on those design visions to create interactive, yet high performing websites. So the key question is: What can we do to effectively balance these sometimes competing goals?

First, what do we mean by a high performance website?

There are two key dimensions to a “high performance website”: true performance and perceived performance. When we say true performance, we’re referring to objective metrics based on the total size of the page, available bandwidth and code complexity, which then results in measuring how quickly the browser begins downloading and completes rendering the page. You can easily test true performance of your pages using available browser plugins and various online tools.

Perceived performance is a bit more subjective; it’s how quick a visitor thinks your page or site is; so the distinction here is appearance vs. reality. What we’re referring to by perceived performance is how quickly the visitor can see and interact with your content. So even if the browser is still loading code in the background or working on rendering components lower down the page below the fold, the visitor perceives that the page is fully loaded and the site is fast because he or she can immediately engage with it. Usability testing your site with target audiences is one of the most effective ways to test perceived performance.

So what’s really important – true or perceived performance?

Both are, but for different reasons. When it comes to Google’s analysis of a page’s or site’s speed, it’s all about real performance. The Google spider is identifying page size and download speed. So to maximize SEO for your site, you do need to pay attention to real performance. But when it comes to usability, it’s all about perceived performance. A site visitor only cares about what they see on the page and how they can interact with it. If there’s code or content that’s still downloading in the background or out of the visitor’s view, it doesn’t impact them; they’re not even aware of it.

Applying this knowledge to development

Applying this to your website development projects

Let’s shift gears from the theoretical to how we can use this information to build better, higher performing websites.

Establish a performance “budget” for the site

The best way to stay on track is to establish goals that everyone can agree on before design and development begin. Identify maximum or average page size values for your website as well as maximum download times on common wired/Wi-Fi and cellular connections. You may ask what those maximums should be, but there’s not a one-size-fits-all answer. It really depends on the industry and objective of the website. For example, a website for a museum will have different performance targets than a transactional ecommerce site.

Collaborate

One of the most effective means of ensuring that a website is both engaging and performing well is close collaboration between designers and developers. That has become easier in recent years with a shift to more agile development approaches. But the key here is for designers and developers to work together during the design process to ensure that the components and interactions being designed don’t have a detrimental effect on performance.

This project phase is really where you strike that balance between engaging design and site performance, addressing questions like “is that slider with complex animations really worth the performance impact, or can we achieve the user experience objective another way?”

Take advantage of perceived performance

We don’t want to hobble our designers’ creativity and we absolutely still want to push the envelope with exciting, original design concepts. So as we build web pages, we want to ensure that we prioritize both content and code. Using techniques like asynchronous loading, or ensuring that page elements above the fold fully load prior to elements further down the page, can help to ensure that site visitors can begin interacting with the page as quickly as possible. This is a bit of smoke and mirrors, but it certainly helps the user experience in unavoidably complex and code-heavy websites.   

PageSpeed Insights

The nitty gritty technical stuff

Getting back to true performance, which of course impacts perceived performance as well, you’ll want to make sure that you’re following general web development best practices. For instance –

  • Load code/content asynchronously and avoid render blocking components. This is a big one for perceived performance. Code your pages so the visitor doesn’t have to wait for all assets to load before being able to see and interact with the page.
  • Optimize/compress images to minimize page download size. This is more important now than ever as digital camera resolutions have increased and image sizes have gotten bigger. Optimize images to ensure size and resolution are no larger than needed for the particular application.
  • Leverage browser caching. Configure your site and web server to enable browser caching of image and code assets to speed up the experience for repeat visitors.
  • Make use of web server compression. This step reduces the size of the assets the site visitor’s browser needs to download.
  • Minify style sheets and JavaScript.  Stripping the white space out of JavaScript and CSS files help to make their download as small and efficient as possible.
  • Avoid content that requires plugins. It takes the browser additional time to load a plugin, and then more time to render that plugin’s content. These days, we can achieve pretty much everything we need by just using HTML5, CSS and JavaScript.

You can use a number of free online tools to performance test your site’s pages. A particularly useful one is Google’s PageSpeed Insights, which provides great information on factors impacting a web page’s performance and how to address specific performance issues.

Putting it all together

Circling back to our overall objective, we’re out to create outstanding user experiences for website visitors, across all devices, in order to help our clients achieve their digital marketing goals. Finding the appropriate balance between design and interactivity demands on one hand, and performance and usability on the other, is one key consideration to doing that. That doesn’t mean building boring websites, but rather making the right design and development trade-offs. Please drop me a note at mailto:mdabrowski@systemsalliance.com if you have questions or would like to discuss any of this further.

Calendar
Nov 2016
 12345
6789101112
13141516171819
20212223242526
27282930