Love Quiz: Fall In Love with Your Website Again

You have genuine feelings for your website, but you’re not entirely sure you’d call it love. Or, maybe your digital relationship has been less than fulfilling and you’re starting to wonder… is this a relationship worth saving?

Take this quiz to find out if it’s time to get more serious about a website redesign.

Question #1: How do you feel about your website’s friends?

If you’ve been “dating” your website for a long time, you’ve more than likely met the friends. If not, it’s time you do. Meet Google Analytics and Google Site Search. Believe it or not, they’re your best friends, too. Get to know them well as they can be the key to opening your significant other’s digital heart.

The “E” Word

That’s right. Engagement. Google Analytics can provide insights into the type of content that drives visitors and captivates users. Find out which pages are under-performing and adjust your new content strategy accordingly.

More importantly, ask yourself which pages are performing best. Exploit these subject areas in your new, updated content strategy. Some topics may need to be called out more. Knowing your website’s likes and dislikes can only make for a more healthy relationship.

Google Site Search

Google Site Search can tell you what users are searching for when they first meet your website. Are users satisfied with what they find? The results may be surprising. You may find new areas of opportunity that you’d never thought of. Are they searching for a product or online course that you don’t yet offer? Maybe it’s time to expand your catalog.

Get Your Friends’ Input, too.

A focus group is an ideal way to find out what your users need and want from this relationship. Identify your audience correctly and your focus group will be effective.

For example, in the case of a college or university, your focus group may be made up of a combination of students, prospective students and alumni. Keep the size at a manageable number (about 10-15). With the right moderator, you’ll find out what you need to know about your user’s habits and objectives so that you can design optimally for a more fulfilling relationship next go-round.

Question #2: Is your online presence responsive to your needs?

Responsive is the key word here. 86% of those between the ages of 18 and 29 have a smart phone. If this is your audience (that’s you, Higher Ed), this one’s a no-brainer. By contrast, 87% of those living in households making in excess of $75,000 a year have a smart phone (that’s your audience, online retailers). If your current website isn’t responsive, this is step one to a more healthy relationship.

Beauty is More Than Skin Deep (although that counts, too)

Often, websites fall behind as organizational branding requirements evolve. This is a chance to update a color theme, new logo, etc. And while looks are important, inner beauty is even more so. Make sure the voice of your website is consistent with your other collateral.

Incorporate images and video where appropriate. In short, it’s a great time to make sure that you and your website are speaking the same language – the language of (digital) love.

Question #3: Does your website’s content still give you butterflies?

We’ve all seen the data on declining attention spans. That’s very likely true for your audience, too. Creating a logical navigation and page structure ensures that your site is easily scanned – an essential element to today’s website design.

Start with an overview and make sure you’ve written relevant headings and used SEO friendly tags accordingly (H2s, H3s. etc.). Use bulleted or numbered lists where appropriate. Link to other relevant internal pages and make sure that link text is meaningful.

Breaking up (blocks of text) is hard to do. Not really. Nevertheless, it always seems to be overlooked. This one’s an easy fix. Don’t forget it.

Call Me

If you’re looking for a new website, that is. We at Beacon don’t claim to be “doctors of love” but we’ve been helping guide clients through their digital relationships for almost 20 years. Feel free to contact me with questions or call one of our team members at 1.855.467.5447.

 

Keana Lynch
Keana Lynch is the Director of UX Design & Development at Beacon where she has provided leadership and consultation for over 35 Higher Education projects. She specializes in the analysis, design, and implementation of websites. Keana is very passionate about design and development strategies focused on user experience, accessibility, multi-device interactions, and technical best practices. Outside of work Keana enjoys spending time with her three dogs, hiking, kayaking and volunteering with local animal rescue groups.
By | 2017-10-17T08:01:53+00:00 October 18th, 2017|Web Development|0 Comments

CSS Accordion IE10 Fix

You can create accordions for your site using CSS and the input button method. The only caveat is that if you need to make the accordion row titles clickable in IE10 you have to add the labels method. With these few simple steps below, you will have clickable accordion row titles that also works in IE10.

Download the CSS Accordion IE10 Fix. You can also find all the needed information at the original source below.

Example below. You can change the HTML Class, ID names and CSS styles, as needed. Please note that each accordion row will need a unique label ID, Name and For Tag.

HTML

CSS

 

Sources: Brad S. Knutson

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-09-29T13:47:05+00:00 September 26th, 2017|Web Development|Comments Off on CSS Accordion IE10 Fix

How to fix for Object-Fit Cover for IE

You may notice Object-Fit Cover doesn’t work well for IE or Edge in a responsive aspect. Microsoft is working on a fix for this, so this would help in the meantime.

There is a work around for this and you can find all the needed information at the below source.

Quick example code reference, below:

HTML <div class=”post image-container”> <a href=”blogpost.html”> <img src=”pic.jpg” class=”post__featured-image”> </a> </div>

CSS: .post__featured-image { width: 120px; height: 120px; object-fit: cover; }

jQuery: if ( ! Modernizr.objectfit ) { $(‘.post__image-container’).each(function () { var $container = $(this), imgUrl = $container.find(‘img’).prop(‘src’);

if (imgUrl) { $container .css(‘backgroundImage’, ‘url(‘ + imgUrl + ‘)’) .addClass(‘compat-object-fit’); } }); }

SCSS: .post { &__image-container { width: 120px; // the same width and height as for the <img> height: 120px;

&.compat-object-fit { background-size: cover; background-position: center center;

.post__featured-image { // hide image if object fit is not supported – opacity to 0 for the link area opacity: 0; } } }

&__featured-image { width: 120px; height: 120px; object-fit: cover; } }

 

Sources:medium

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-08-10T14:55:38+00:00 August 14th, 2017|Web Development|Comments Off on How to fix for Object-Fit Cover for IE

Mobile is Booming 2017 Report

As an update to a blog post written in 2011, we can now see just how accurate the report was.

Mobile has definitely made its mark with over 50% usage.

Mobile Stats 2017

Click here, to see the original post.

Source: Smart Insights

 

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-08-02T14:00:38+00:00 August 2nd, 2017|Web Development|Comments Off on Mobile is Booming 2017 Report

Responsive iFrames

How to setup responsive iframes

Sometimes your website needs iFrames inserted for things such as forms or third party plugins. What do you do when your site is responsive? Well, hopefully this can help you out with these tested examples.

There are different setup options you can take to make the iFrame responsive. Some may take more effort than others, but these options should take care of what you need.

Note: The iFrame content itself will need to be responsive and then we make the actual iFrame responsive. Most update to date and well-known sites that offer 3rd party products make their iFrame content responsive. It will depend on the company and something that should be considered to review if you need it to work for a responsive site.

First step before any of the below. Remove the width and height attributes from the iFrame code.

These are some examples of how to setup responsive iFrames for your website or things to check on to make them work.

The simple responsive iFrame using CSS (This method only covers the surrounding iFrame container width and not height.) iframe, object, embed { max-width: 100%; }

NPR Responsive iFrame Example: This setup requires the javascript file to be on the parent page and on the page being embedded through the iFrame child. This helps control the width and height of the iFrame to work for responsive layout.

http://npr.github.io/responsiveiframe/

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-07-25T13:21:34+00:00 July 25th, 2017|Web Development|Comments Off on Responsive iFrames

Google Custom Search 2017 Update

Google has provided an easy way to search your site, be it free or paid with custom search. The free version comes with Google ads that relate to your site, but not limited in other areas like other third-party search engines. If you have a tax-exempt business website according to Google’s guidelines, you have the option to turn off the ads.

You can customize the whole search experience and everything needed through the Google Custom Search engine site. It requires very minimal setup to your website with simple copy and paste code. With Google hosting the search engine, you don’t have to setup any background files or plugins on your own web server and maintain it.

It works well for search engine optimization and your website rankings, since it gives the ability to work with Google Analytics. You can see what people are searching for on your website to help improve or update it and get maximum results.

Check out the Google Custom Search.

NOTE: As of April 1st, 2017, Google discontinued the sales of Google Site Search, the paid version of Custom Search Engine. This product will be completely shut down by April 1st, 2018. This note does not affect Custom Search Engine.

Source: Google

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-07-25T15:57:06+00:00 July 20th, 2017|Web Development|Comments Off on Google Custom Search 2017 Update

How to add an AccuWeather Current Weather Widget to your Website

You can easily install a current weather widget by going to the link below and following the instructions. https://www.accuweather.com/en/free-weather-widgets/current

AccuWeather Widget

Source: AccuWeather

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-07-11T10:36:37+00:00 July 11th, 2017|Web Development|Comments Off on How to add an AccuWeather Current Weather Widget to your Website

Top 5 Accessibility Items to Review in a Website Redesign

Accessibility is a hot topic and an expansive one, too. I’ve been preparing for some upcoming speaking engagements with accessibility being the main focus. The first of these engagements is the eduWeb Digital Summit on August 6-10. This seems like a good time to share some thoughts regarding accessibility, WCAG guidelines and 508 compliance.

Additionally, I’d like to leave you with a list of 5 important accessibility items to review while in the midst of your next site redesign.

Accessibility Overview

Often, when administrators or oversight committees are asked to consider website accessibility while planning their institution’s website redesign, they think only in terms of addressing under-served users such as the elderly or visually disabled. Accessibility doesn’t simply address the needs of the disabled user. Adaptations and modifications made to address under-served users have broader implication, frequently enhancing the experience for all users. Designers and developers understand this and design with the idea that what is good for one is most often to the benefit of all.

Accessibility almost always enhances a website’s usability.

For example, incorporating design for those with diminished motor skills is always a good idea. It will enable all users to view your website without having to use a mouse. By doing so, you’ve also made it easier for any user to navigate the site and spend some time there. User engagement improves and, if you’re operating an online storefront, sales go up as well.

It goes without saying that any and all websites should factor accessibility into their design. To that end, WCAG recommendations and 508 standards have been established as guidelines to ensure a positive user experience for all. These guidelines have peripheral benefits, as they often overlap with best practices for mobile design and SEO. Still, there are many, many sites that remain inaccessible to a large number of users even today.

5 Accessibility Items to Review

With this in mind, I’ve comprised an abbreviated list of important accessibility items to consider when redesigning one’s website. Bear in mind that while I’ve listed 5 important accessibility items, this list is hardly complete and is meant only to provide a high level overview of what’s involved. Consider:

  1. Clear and Logical Design – This includes clear and intuitive navigation, contrast between text and backgrounds, proper use of color and more.
  2. CMS that Supports Accessibility – You’ve already considered functional requirements. Not all content management systems meet WCAG accessibility requirements. Know this from the start.
  3. Content Structure – Use headings and lists so as to clearly organize information. Use clear title attributes and page titles. Consider skip navigation for users of screen readers.
  4. Keyboard Accessible Functionality – Users with motor skill deficiency depend on keyboard accessibility to navigate your site. Other users benefit from added efficiency thanks to keyboard accessibility guidelines.
  5. Accessible Forms – Using JavaScript in forms often means that they are not accessible by keyboard alone. Testing your forms for keyboard accessibility is an imperative.

Once the items listed above have been fully considered and incorporated into the new design, the all-important testing phase begins.

Testing for Accessibility

Accessibility and usability are undeniably congruous. The benefits extend beyond just the user experience and into SEO and mobile performance. So take the time to test and test again. It’s time well invested. Fortunately, the WC3 provides a list of recommended web accessibility evaluation tools.

A Few Final Words

I look forward to seeing many of you at the upcoming eduWeb conference in August. I’ll discuss the topic of accessibility in more detail at that time. In the meantime, please comment below. Share your thoughts and experiences. We’ll pick up where we left off at the conference. See you then.

Keana Lynch
Keana Lynch is the Director of UX Design & Development at Beacon where she has provided leadership and consultation for over 35 Higher Education projects. She specializes in the analysis, design, and implementation of websites. Keana is very passionate about design and development strategies focused on user experience, accessibility, multi-device interactions, and technical best practices. Outside of work Keana enjoys spending time with her three dogs, hiking, kayaking and volunteering with local animal rescue groups.
By | 2017-07-17T07:14:26+00:00 June 30th, 2017|Higher Education, Web Development, Creative Design|Comments Off on Top 5 Accessibility Items to Review in a Website Redesign

CSS Equal Height Columns Without Javascript

Here are two CSS options for equal height columns, without using javascript.

1. Using CSS Table Properties

HTML

CSS

Source: W3schools

2. Using Margin and Padding Method

HTML

CSS

Source: Call Me Nick

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-06-20T09:31:16+00:00 June 20th, 2017|Web Development|Comments Off on CSS Equal Height Columns Without Javascript

How to Setup a Video Loop or Video Teaser for Desktop and Mobile Devices

If you need to have a video loop or video teaser on your web site, there is an easy solution. It’s done with the HTML5 video tag. In this case it would be a simple looping video with sound muted. This can help give the site some extra depth or visual appeal.

This method works well for mobile phones, since those tend to have more security and particular operating system functions. iOS as an example in version 10 has the ability to play video loops.

It comes down to a few attributes for the HTML5 video tag.

  1.  Autoplay – to start the video when the video and page loads
  2. Loop – this allows the video to continue playing. You can define the amount of times or it can be infinite.
  3. Muted – turning the video to mute out of box allows it to autoplay on iOS devices. In the latest iOS versions it will not auto play a video unless the video is muted. More information on iOS video standards.
  4. Preload – this helps load the video and give a better user experience of the initial load of the video and playback.
  5. Playsinline – allows the video to play in its original position and not go into fullscreen mode such as on iOS devices, disturbing the user experience of the website.

The poster attribute is a fallback if your video is still downloading. The title attribute is for 508 compliance to describe what the video loop/teaser is about.  It’s also best practice to include a message if your browser does not support videos. Such as the message: “Your browser does not support the video tag”.

Example of an HTML5 video tag setup to autoplay and loop:

Sources: w3schools, WebKit

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-06-16T12:46:44+00:00 May 23rd, 2017|Web Development|Comments Off on How to Setup a Video Loop or Video Teaser for Desktop and Mobile Devices
Load More Posts