13 11, 2018

Visual Storytelling: Designing an Effective Homepage

By | 2018-11-13T12:25:03+00:00 November 13th, 2018|Categories: Higher Education, Web Development, Creative Design|Tags: , , , |

Brands are big in our society. Wherever we go – out to dinner, to a concert, for a cup of coffee with a friend – we see branding. In addition to communicating (sometimes) complex ideas, branding is also used as an identifying element. It’s how we know that the store we’re walking in to is the place we mean to be.

The same is true online. We’ve discussed the idea of the website as the centerpiece of higher ed marketing strategy previously. If your website is your digital storefront, how do your visitors know that they’ve come to the right place after typing in your school website URL or clicking on a link?

Of course, the user’s expectation is that they’ve arrived at their intended destination. The homepage, then, first and foremost, needs to confirm that expectation. The easiest way to do that is to lean on your school’s branding.

The homepage is where the user journey starts on your website. For colleges and universities, this is where prospective students gain their first impressions of your school. As a digital doorway onto your campus, the homepage needs to display your institution in a visually striking way that resonates with your future students. It needs to scream your school brand… loudly.

Show Them, Don’t Tell Them

How do you create an authentic brand experience? Making use of compelling campus imagery is a vital first step. The goal is to relay your school’s narrative mainly through visual elements.

Letting your prospective students enter your world via stunning and interactive visuals allows them to become part of your story. They want to see themselves there, reflected in the student body. That’s why shots of students walking through a busy part of campus is such a fixture on higher ed websites.

Aspects that exemplify the personality of your school are also perfect muses for the page. Be it an iconic landscape, a specific department, or a philanthropic spirit, these hallmark additions draw users in and make a big first impression.

Imagery serves as a great alternative to extensive text. While packing your homepage with tons of written information may seem like a good idea, it can actually hurt the overall experience. The job of the homepage is to wow your prospective students, and then guide them to the next step in the recruitment process – campus visits, application, or a deeper dive into the academic offerings.

Make It Easy, And Tell Your Story

You know what prospective students are searching for… maybe even better than they do. So, help them out. Since the homepage is almost always designed for the prospective students, tailor the homepage experience for their needs. Structure the page to match the questions and interests of this audience group.

That doesn’t mean that your campus events are not important. They are. It just means that the homepage is probably not the ideal place to feature the events widget prominently.

The layout of the page should create an easy to follow narrative: This is who we are, this is why you want to be here, here is what you need to get started.

Keeping with the theme of easy, provide direction and navigational guidance for your visitors. Be sure to include CTAs like “Apply Now” or “Schedule A Tour” at appropriate panels throughout the page. Be cognizant of where your buttons are. Placement is key for visibility and engagement.

To ensure you are on target, use Google Analytics data to monitor your CTA engagement levels. You can always tweak the appearance or wording of your CTAs to optimize performance.

Don’t Forget That Your Audience Is Mobile

A lot has been written about adopting a mobile-first approach to website development, including our recent post on the topic. But, what’s the impact on homepage development for higher ed websites?

While online college applications typically get filled out on the bigger screens of desktops and laptops, your prospective students are just as likely to first check out your school website via their mobile devices. As such, the homepage needs to be optimized for the mobile experience.

That doesn’t mean that the homepage should be stripped of any complex functions. It just means that your foundational page elements need to scale easily and efficiently to smaller screen sizes.

Beacon Does Web Design

Feeling overwhelmed? Don’t know where to begin your homepage revamp efforts? No worries, Beacon is here to help. Request a complementary audit from our expert team today.

18 10, 2018

Content Strategy: Do You Have a Plan Ready?

By | 2018-10-18T07:54:35+00:00 October 18th, 2018|Categories: Higher Education, Web Development|Tags: , , |

Content sure seems to be hording all the buzz in 2018. Take a look at the lineup of any higher ed marketing conference and you’ll be sure to find at least one or two speakers or break-out sessions promising the latest low-down on content strategy.

It’s not just higher ed. A number of content marketing conferences have sprung up over the last decade, as year after year is billed as THE year of content marketing.

For a long time, content had been relegated to an afterthought in the website building process, with graphic design and development driving project priorities. The current infatuation with content is the eco-system balancing itself to recognize an essential and under-valued component.

It makes sense. Websites are, after all, vehicles for delivering information. So, being able to present information strategically and skillfully is of great importance. Content is the whole reason people are going to your website in the first place.

Yes, there are now many advocates of the content-first approach. But, the truth is, neither content, nor graphic design, nor development should be thought of as “first.” The best approach to website building weighs each function equally – relying on the three processes to work together, in concert with each other. And, it’s important to consider and plan for the needs of all three at the outset of a web project.

That said, content is the only one of the three that plays a major role after a website is launched. A site with no new information loses relevance and becomes stale very quickly. It’s essential to have a plan in place for the development and publishing of new content. And, for this reason, a forward-looking content strategy is necessary for the long-term health of any site.

What goes into a comprehensive content strategy?

Research & Analysis

  • Content Audit – If you’re re-designing an existing site, you need to know what’s already there. A content audit will help you outline the current structure of the site, inventory the existing content and evaluate the quality. It’s also often helpful to do a top-level audit of your competitors’ websites, to gain a sense of industry standards.
  • Stakeholder Interviews – Ultimately, the website needs to satisfy the goals of the stakeholders. It’s imperative that their goals and priorities are clearly outlined. This group will also provide key institutional knowledge and strategic guidance.
  • Focus Groups and Surveys – It’s important to know how your current users think about the site, so you can optimize an even better user experience with the re-design.

Planning & Structure

  • Information Architecture – This document lays out the structure of your site in detail, accounting for the existence and location of every, single page.
  • Content Design – Whoever ends up writing the content for the new site will need to understand the purpose of each new page section and element, as well as where and how each page fits within the overall site structure. Each template should come with directions to help writers optimize the copy.
  • Functional Requirements – This document identifies every element on each page, and describes how it will work on the new site. Developers and designers refer to this document to guide their work.
  • Content Development/Governance Plan – Writing copy for a new website can be a lengthy process that involves numerous writers and editors. It’s important to have a clear understanding of the writing timeline (deadlines), as well as the role each person has.

Content Creation & Entry

  • Content Writing – Optimally, the content is being written as designs are finalized and the site’s templates are being developed. Progress should be tracked via the content development plan and follow the governance protocols.
  • Content Import & Integration – Once the templates are built and the copy written, content can begin to be ported in. Newly written content should already be optimized for the new site templates. However, if pages are being brought over from the old site, editing and additional integration efforts may be required.

Post-Launch Planning

  • On-going Content Development – New content is vital for your site to continue serving your users’ needs. As before, writing efforts should be scheduled via the content development plan and administered by the governance protocols already in place.
  • Content Owner Trainings – Many sites begin a slow decline after launch. Often, this is because the process of adding new content doesn’t follow best practices or intended use cases. Sometimes, new content owners are not familiar with the correct procedures or usage. A regular cadence of trainings can help to keep everyone on the same page and minimize content problems post-launch.
  • Content Maintenance Audits – One of the biggest problems with older websites is that they sprawl. You want content that user want, of course. But, at some point it becomes too much. An annual content audit can help manage that inevitable sprawl.
  • Archiving – Another solution for sprawl. You don’t have to permanently delete old content. Keeping outdated content on file, but off line, is a good way to prune your site without losing the hard work that went into developing that content. And, old can become new again. You can use the archived copy as inspiration and starting point for new content.

Beacon Knows Content Strategy

Need some help with content strategy for your higher ed website? We’d love to help. Give us a call, our content strategy team is here for you.

20 09, 2018

Testing for Accessibility

By | 2018-09-21T09:00:26+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.

Load More Posts