20 09, 2018

Testing for Accessibility

By | 2018-09-20T15:38:01+00:00 September 20th, 2018|Categories: Digital Marketing, Web Development|Tags: , , , |

Accessibility is a big deal in the world of internet marketing. After all, what good does a large investment in your most prominent digital marketing channel do if no one can see the information you want them to have or the products you want them to buy?

In today’s digital marketplace, it’s no longer good enough to cater your website just to your primary audience. All websites have to meet certain accessibility standards that guarantee that users across all walks of life, and with varying degrees of physical ability, are able to easily access and navigate your site’s web pages.

In a recent blog post, we discussed the importance of considering accessibility during the website design process. In this post, we’ll take the next step and discuss the best ways to test your design for accessibility concerns.

The Basics

The practice of accessibility testing helps website owners understand where their websites may be falling short on today’s accessibility standards and drive corrective action to optimize user experience. These are critical steps that should be completed prior to the launch of any re-designed site and continued throughout the site’s lifetime.

It is best to take a proactive approach to web accessibility testing, and the reasons why are compelling. A fully accessible website benefits users across the board, and is more likely to deliver the conversion rates and engagement you are seeking.

As with any business process, before you begin, define your goals and strategy for accessibility testing and remediation of found issues.

Site Scan Tools & Understanding Results

There are several tools that can help you tackle testing. At Beacon, some of the programs we employ for this purpose include SiteImprove, SortSite and Wave (WebAim).

Reports and analysis provided by these automated testing tools can help you identify any existing accessibility concerns, including quality of content, readability of text link quality and other user experience problems. The programs can also be engaged to help you track the progress of your accessibility fixes.

How to Tackle Accessibility

Accessibility testing is not a one-and-done process. SiteImprove, SortSite and Wave can help us with initial analysis and are great for catching many accessibility problems. However, they are not enough for a comprehensive approach to testing. Not all design elements are scannable. As such, automated tests should be supplemented with a healthy dose of regular, manual testing.

Best practices call for consistent testing throughout the development process. This helps to track progress made on discovered issues and known concerns. It can also help you discover new issues throughout development and after launch.

Be sure to test your site in various browsers, devices and screen sizes and positions. It’s also a good idea to perform regression testing, to make sure that your site works with older versions of software.

Because your site is likely to change over time, accessibility testing should be done on a consistent basis even after your site launches – preferably, every quarter. This helps to ensure that the fixes you implement continue to achieve the intended results. It also helps to hold new content/pages to established standards.

Beacon Knows Accessibility Testing & Remediation

Could your site benefit from an accessibility audit? Give Beacon a call at 866.807.2838. We’re here to help.

6 09, 2018

Your Game Plan for Device & Browser Testing

By | 2018-09-06T12:47:41+00:00 September 6th, 2018|Categories: Digital Marketing, Higher Education, Web Development|Tags: , , |

We expect a newly designed or re-designed website to look good, be easy to use and deliver the information visitors expect. Baked into all those expectations are the assumption of basic functionality – that all the elements load and display quickly and properly, navigation menus and links actually take you where intended, and content is presented in an easily-digestible manner.

Today, we get impatient when it takes more than a few seconds for a web page to load. In the early days of the internet, however, users did not expect such a robust web experience. In the 90’s, people routinely sat in their computer chairs and listened for the chimey, electronic sing-song of their modems dialing up a connection, and waited patiently as browser homepages slowly filled their screens, one element at a time.

We’ve come a long way. Innovation constantly pushes and refines the web experience, and developers continue to press forward with new, ingenious designs and applications. There are now countless different device with varying screen sizes and operating capacities, hundreds of thousands of mobile applications and a host of popular web browsers.

A website today needs to be able to function and interact with all of these different environments. How can you guarantee that it will be able to do so?

In order to meet the expectations of your website users, prior to launch, your site must pass a rigorous battery of tests.

Understanding the Extent of Testing

The most functional websites incorporate testing throughout the design process. Testing puts the focus back on users by identifying issues that they are likely to stumble upon in their interactions with your site.

It’s impossible to know what devices and browsers your site visitors will be using. And, you don’t want to rule out an entire segment of your audience by not optimizing their experience on your site. So, it makes sense to have a responsive web design that can accommodate a multitude of available devices and browsers. This makes it necessary to test your design in all of these various environments.

Some of the things testing should cover include:

  • Functionality across all popular browsers – Firefox, Chrome, Internet Explorer, Safari, etc.
  • A check of consistent function across multiple browser versions
  • Operations with various security settings
  • User interface rendering on various mobile screens, including screen rotation
  • Compatibility with mobile device services like location finding and dialing
  • Operations when mobile device is both in-network and out-of-network

It’s also helpful to put your site through a web load performance evaluation to know how the design responds under a heavy user load.

How to Tackle Testing

Best practices call for testing to begin while the re-design is still in the development phase. You want to catch any major glitches as early as possible. The cost of applying fixes is much higher in the later stages of the development process.

At Beacon, we plan early testing around identified functional requirements. During the strategy and design phases, various elements are selected for inclusion in the new site. Part of that process is a functional requirement assessment, which produces a description of how each element is supposed to work. When a group of elements is completed in the development phase, each element is tested for adherence to its functional requirements.

A significant amount of testing is also performed throughout the HTML and Cascade development phases, with a comprehensive assessment taking place before the site is ready for launch. These efforts are centered around various use cases and can be compared with data gathered through heat maps and session recordings to see how user experience has been improved from the older version of the website.

Beacon Knows Testing

Want to know if your website is reaching all of your intended audiences? Request a free website audit from our team of web experts, and see how you stack up.

23 08, 2018

Designing for Accessibility

By | 2018-08-27T09:31:21+00:00 August 23rd, 2018|Categories: Higher Education, Web Development|Tags: , , |

It’s easy to forget how revolutionary internet technology is. Today, applying mobile devices in our everyday lives is almost second nature. But, just 20 years ago, you still had to call someone’s house phone to make plans.

Think about that. If you were a kid in the 90’s and you wanted to talk to your friends, you likely first had to pass a phone conversation with one of your friend’s parents. There were hoops. And we had to jump through them.

Not so today. (Enter generic grumbling about those darn millennial)

What makes the internet so powerful is that literally anyone can share and access information on demand (and talk to your friends whenever you want). The democratization of information levels the playing field and acts as a catalyst for all sorts of creative collaborations.

Accessibility is the central tenet of the world wide web. It’s what allows for the maximum exposure to 7+ billion pairs of eyes. If you’ve read anything about net neutrality in the news lately (and, perhaps, wondered what’s the big deal) – that’s what the conversation is about: equal access to all information (not allowing for preferential treatment of online content).

Accessibility has also become a legal requirement. Which means that if you’re building or redesigning a website, there are several things you need to do in order to ensure that everyone — including people with diverse abilities — can reasonably access the information you present. This includes thinking about the readability of your text (contrast, color, font, etc.) and how users navigate your site.

Readability: Color Contrast & Fonts

Your website text needs to be easy to read, even for people with impaired vision. There are several suggestions for how to accomplish this goal. The best practices outlined in the W3C Web Content Accessibility Guidelines 2.0 state the following:

  • Contrast ratio (visibility of text against a background) must be 4.5:1
  • Contrast ratio of large text must be 3:1
  • Color should not be the sole visual cue for relaying information, eliciting an action or marking a visual element (removing the underline from a hyperlink, for example, would make it more difficult for visually impaired users to distinguish between regular text and the link)
  • Your site should allow users to regulate their size of the text (up to 200 percent of the original size)

It’s also important to take into account the use of screen readers by low-vision users. People with impaired vision rely on screen readers to describe the contents of a given webpage. This means that every element that loads on a particular page is included in the page description. Keep this in mind during the design phase. Too many page elements will likely frustrate this particular audience.

Accessible Navigation

Navigation is another important concept where accessibility issue can creep up. One of the best things you can do is enable your site with keyboard navigation, or hotkeys. This not only helps users with accessibility; you’ll also greatly satisfy the so-called power users who love to keep their fingers on the keyboard (and off the mouse or touchpad).

Here are a few more suggestions to ensure maximum accessibility:

  • Proper headings — correct usage of H1, H2, H3 is important for assistive aids to organize on-page content
  • Menus — main navigational menus should be accessible via the keyboard, and easily available for screen readers
  • Meaningful link text — screen readers can provide a list of hyperlinks listed on a given page. When providing a hyperlink, it’s helpful to include descriptive text of where the link is leading. “Click here” does not communicate much about what the user can expect.

Beacon Knows Accessibility

If you want to know if your site meets accessibility guidelines, give us a call at 866.801.9563. Our team will be happy to run an audit and talk to you about accessibility optimization.

20 08, 2018

How to Close a Toggle Menu with an Outside Click

By | 2018-08-20T12:17:00+00:00 August 20th, 2018|Categories: Web Development|Tags: , , , , |

Adding a toggle menu is nice and straight forward with your preference of CSS or jQuery, but when you want to be able to click outside of the menu and close you will need to add a little more jQuery functionality.

This option adds a few extra lines of jQuery, but overall very simple way to close the menu when clicking outside the menu button area or the expanded menu, itself.

Please note, in this example we use specific areas instead of on “document” click. It can cause issues in certain browsers, depending on the options setup for the toggle menu. The example assumes you already have the toggle menu in place.

jQuery Example:

9 08, 2018

Design Is More Than Meets the Eye

By | 2018-08-09T15:20:34+00:00 August 9th, 2018|Categories: Higher Education, Web Development, Creative Design|Tags: , , |

Undertaking a web re-design can provide the liberating feeling of starting anew, from scratch. But, most of the time, that’s not really the case. Pretty much all of the websites undergoing a re-design still have a base of existing users.

So, while you do want to focus your re-design around fresh, modern and relevant elements, you should make sure that your new website still accommodates your loyal followers.

You can do so by analyzing your Google Analytics data and taking note of the browsers and devices your current users utilize. We’ve parsed GA mobile and audience analysis in an earlier post. These data points can have a significant influence on your design. After all, what good is a shiny, new, website, when it doesn’t display or load correctly on the devices your primary audience use most.

Designing for Mobile

In today’s mobile-heavy society, designing a website using a mobile-first approach is a must. With search engines placing particular emphasis on mobile-friendly capabilities, it’d be foolish to ignore how your website looks through a mobile screen.

That said, while everyone typically buys into the mobile-first approach, as the design/development process stretches out, sometimes the focus shifts to other priorities. Most often, the design approach morphs from mobile-first to mobile-constrained.

What’s the difference?

Instead of the mobile experience driving design, mobile elements (like smaller screen sizes) guide the initial design parameters and then take a back seat to content concerns deemed more important. This is what web design insiders call progressive enhancement — or, a focus on core content first, and adding richer elements that enhance the user experience second.

This isn’t necessarily a bad thing. As long as key elements are geared toward the mobile experience, like responsive templates and main navigation built for smaller screen sizes, you should be in good shape. Just make sure the website works for all the devices your audiences use (yes, even the old ones).

Designing for Browsers

The kind of browsers your website audiences utilize can also impact your re-design. Not everyone automatically updates their preferred browser when new versions come out, no matter how many times the IT guy recommends it. The impact of old browsers can be felt in a couple of ways.

First, older browsers simply won’t be able to support some of the newer design elements  — or, won’t be able to handle them well. If you know that a large portion of your users relies on an outdated version of a browser, that can limit your design choices and nix that really cool feature that you wanted to include.

One tool that developers use in cases like this is caniuse.com. This site allows users to see what versions of browsers support a particular feature through a simple search.

The other concern with outdated browsers is security. Browser updates are often issued in order to patch up vulnerabilities in the underlying code. If users don’t update their browsers they don’t just leave themselves exposed, they spread the risk to the entire ecosystem.

One way to protect your site is to remind user to update their outdated browser via an “old browser alert.” A pop-message can be set to trigger anytime a user with a vulnerability logs onto to the site, and encourage them to update.

Lately, coders have even made an effort to encourage users to update their browsers in order to protect not just themselves, but everyone else, too.

Beacon Knows Web Re-design

If you’re observing declining traffic or cratering conversion metrics on your website, it may be time to consider an overhaul. Request a website audit by our knowledgeable digital marketing team and see how you’re doing.

2 08, 2018

Beacon is Going to edUi 2018

By | 2018-08-02T10:23:15+00:00 August 2nd, 2018|Categories: Beacon News, Higher Education, Web Development|

Beacon is going to edUi 2018 in Charlottesville, VA. If you’re a web professional who works with colleges, universities, libraries or museums, you should, too. In fact, we’ll help you get there.

Register here and receive $100 off the registration fee. Or just apply the code “Beacon” on the regular registration form to access the discount.

The conference always features a great line-up of speakers and workshops, and this year is no different. Check out the blog posts from this year’s presenters, and this guest blog post from our CEO and President Mark Dirks.

We hope to see you there. Come and say hello October 8 – 10.

17 07, 2018

Google Analytics: Understanding Your Audience

By | 2018-07-18T07:20:49+00:00 July 17th, 2018|Categories: Google Analytics, Higher Education, Web Development|Tags: , , , |

What Does the Data Tell You About Engagement?

The competition for students in higher education is fierce. With so many excellent options for undergraduate and graduate studies, colleges and universities spend a considerable amount of time and resources recruiting prospective students.

These efforts include email campaigns, mailers, deployment of recruiters to high school campuses, and many other marketing programs. But, one of the most effective tools in your recruiting arsenal is your website.

A higher education website has to be geared to many audiences and be able to accomplish a multitude of tasks — keep the campus informed about news and events, allow students to register and schedule classes, provide accurate parking information for visitor, and much much more. However, serving as a primary marketing vehicle for prospective students is one of the higher ed website’s main goals.

But, how do you know if your website is doing the intended job? Or, if it’s doing it well? How can you make sure that your visitors are engaging with your site and taking the actions you want them to take? Your website is not a grocery store. You can’t just follow someone around and see what they’re putting in their shopping cart.

Luckily, the digital nature of the internet allows you to track all sorts of interactions users engage in with your higher ed website. With a properly configured Google Analytics (GA) account, you can learn a lot about your target audiences — from how long they stayed on your site and how many pages they visited, to the geographic area from which they logged on and the device they used.

GA Device Analysis

One of the cooler things that GA can tell you is how many of your visitors use a desktop computer, a smartphone or a table device to access your website. Why is this important?

Not too long ago, device usage data was used to justify an investment in a responsive website design. A responsive design allows for a dynamic display of information based on the type of device you’re using to access the site and the size of your device’s screen. If you’re accessing the website from a smartphone, the elements of the webpage shift to accommodate mobile-friendly viewing. Logging on to the site from your desktop is often a richer user experience, due primarily to the advantage of a bigger screen.

Today, however, a responsive design is almost a must for a higher ed website — or, any website, really. With mobile devices set to overtake desktop devices as the preferred browsing tool sometime in the near future, many developers are recommending a responsive design as a default.

So, if justification for mobile-friendly sites is no longer necessary, what else is device tracking used for? Well, there’s a treasure trove of insights that can be discovered by tracking certain metrics along with device data.

You can compare the bounce rate, pages per session, and average session duration data between desktop and mobile users to see if there’s a significant difference. If your bounce rate for mobile users is higher (as in the pictured example), it can be an indication that your site is not geared toward mobile users enough. That should lead you to audit the mobile experience on your site and make improvements to any discovered shortcomings.

GA Audience Analysis

What else can GA data tell you about your audiences? Setting up some custom tracking can help you segment your audiences, track their various click paths and evaluate conversion metrics.

There are certain pages on a higher education website that attract a specific audience. For example, the Admissions page is a good bet to be primarily used by prospective students and their parents. The Career Services page, on the other hand, is most likely to be accessed by current students. Enabling tracking on these landing pages allows you to track the different audiences and learn about their usage habit and interests.

You can also zero in on any problem pages from which a significant amount of users end up leaving the site. Fixing these pages could go a long way to improving the experience for all your users.

There are also some simpler factors that can help you better target your marketing efforts. The Demographics, Geo and Behavior tabs in your GA account allow you to track age and gender, geographic location, and repeat visits of your website users. This data provides a rich foundation for decision-making in several areas, including in what part of the country to spend your marketing dollars.

Beacon Knows Google Analytics

Want to know more about how your Google Analytics account can drive a more fine-tuned marketing program? Give our experts a call at 855.695.2408, we’d be glad to talk to your team.

28 06, 2018

How to Add a Simple Visual Loading Technique

By | 2018-06-28T08:40:11+00:00 June 28th, 2018|Categories: Web Development|Tags: , , , , |

Adding a simple loader message to a content heavy page adds for a better user experience. So for instance, if you have a large data table or directory listing that doesn’t load nicely. This can be updated to a simple loading message until the content has finished loading.

Also, adding in a little spinner or indicator is a nice touch to show the page is processing information.

Step 1: Create your loading CSS styles and HTML structure.

Step 2: Add the jQuery and update to your classes, as needed.

Step 3: Add the noscript tag with appropriate styles to show content for viewers browsers that have Javascript disabled.

Example:

CSS:

.loading-content { visibility: hidden; }

jQuery:

jQuery(window).load(function () {

jQuery(‘.loading-content’).css(‘visibility’,’visible’);

jQuery(‘.loading’).css(‘display’,’none’);

})

HTML:

<div class=”loading”><strong>Loading Information </strong> <img src=”/images/icons/loader.gif” alt=”Loading”/></div>

<div class=”content-area loading-content”> Content that will be loaded. </div>

<noscript>

<style>

.loading-content { visibility: visible; }

.loading { display: none; }

</style>

</noscript>

21 06, 2018

CMS: Proprietary or Not?

By | 2018-06-25T08:57:11+00:00 June 21st, 2018|Categories: Cascade CMS, Higher Education, Web Development|Tags: , , , |

What’s Best for Higher Ed CMS?

If you’re considering upgrading your school’s website, selecting the wrong CMS can have lasting ramifications. And, with so many options out there, it’s easy to find yourself overwhelmed.

Google “proprietary vs open source CMS,” and you’ll receive over 50 hits to your search query. Some even come with catchy headlines, like: “Battle Royale: Open-Source vs. Closed-Source CMS” and “The Battle of Open Source vs. Proprietary Systems.” Clearly, the debate regarding the best type of content management system is still ongoing… and, apparently, fight-level intense.

There are a lot of content management systems out there, that’s for sure. So, how do you choose the one that best fits your higher learning institution? Understanding the difference between the two main CMS types is a good start.

Let’s start with the definitions. Open source systems, like WordPress and Drupal, are built with source code that’s freely shared with everyone. This means that anyone can apply that source code in any manner they want. The advantages of open source applications is that they can be improved by literally anyone. If there’s a problem, a solution can be crowdsourced from the user community — often quicker than an in-house team with limited man hours.

Proprietary software, on the other hand, is kept secret by the developers. The applications are maintained and updated in-house by dedicated personnel. The advantage with proprietary CMS is that it is often designed for a specific market. There are CMSs out there tailored for the transportation, travel, hospitality, and yes, higher education sectors. Also, whereas open source CMS leaves customization to the end user, proprietary CMS can be set up on the front end for the unique needs of an individual client.

Let’s explore each type further.

Proprietary vs Open-Source: Let the debate rage

If you value portability, ongoing improvement/optimization, and adaptation, odds are good that you’ll be satisfied with a popular open-source platform like WordPress or Drupal.

If your website is built in WordPress or a similar CMS, it’s fairly easy to move into another CMS when and if you so choose. You may also feel secure in knowing that a large developer base is constantly working on improving the features and functionality of the platform. Such improvements are implemented through code updates, requiring very little effort from you and your staff.

However, there are also drawbacks. The code updates can create some technical issues with third-party plug-ins or websites running on older versions of the software. Because the code is available to everyone, it can be an easier target for exploitation and cyber attacks. And, chances are good that your site will require at least some customization, which carries added cost and the potential need for personnel skilled in HTML.

Closed-source programs offer some advantages over their open-source counterparts, chief among them is ease of use.

With proprietary software, there’s never a need for you or your staff to make changes in the code, because the CMS is already fully customized to your site’s unique needs. Any additional development is handled by the vendor. The software also allows for a robust user permission setup, allowing you to easily delegate tasks to appropriate team members.

Additionally, closed-source code has a reputation for being more secure. This makes sense, since potential bad actors don’t have the luxury of parsing the source code for vulnerabilities.

The only drawback with proprietary CMS is portability. While some programs make it fairly easy to transfer website content to another platform, there’s typically no such flexibility for the graphic and structural elements of the site.

The Ruling

So, what type of CMS makes the most sense for higher education? Because it’s better suited for specialized and customized content, we, at Beacon, view proprietary CMS as the better option. Cascade and OmniUpdate, in particular, are two platforms that we work with routinely.

OmniUpdate is specifically dedicated to the higher ed sector. It’s OU Campus platform was designed with features and modules intended for use by universities and colleges.

Cascade is another trusted and reliable CMS application. One of the cooler attributes of this platform is the ability to create flexible templates, which we focused on in an earlier post.

No HTML experience is necessary to work with either one of these content management systems.

Beacon Knows Websites

Want to see how your higher ed website stacks up? Request a free audit by our knowledgeable team and see how you’re doing.

Load More Posts