22 05, 2018

Functional/Audience Design

By | 2018-05-22T15:38:17+00:00 May 22nd, 2018|Categories: Higher Education, Web Development|Tags: , , , |

Audience is Front & Center in Higher Ed Web Design

What makes a higher education website effective? The answer can certainly be complicated. Universities, colleges and community colleges are large organizations, with numerous goals, many decision-makers and a diverse set of users.

Prioritizing among a multitude of sometimes competing needs can be tough. How do you decide what gets top billing? For your school, the answers lie within your specific mix of prospective students, current students, faculty and staff, and the larger community to which your campus belongs. The other part of the equation is research.

There are a lot of factors that go into building a great site. But, at the end of the day, it comes down to this: Understand the needs and user habits of your primary and secondary audiences, and shape their experiences on your site accordingly.

How do we do that?

User Experience Research

At Beacon, way before any technical development work starts, we dig in to help you understand your audience mix. In a previous post, we covered the specifics of focus groups and surveys. These methods are key in gaining actionable insights into your target audiences.

We’ve also talked about heatmaps, and how helpful they can be in identifying the portions of a webpage that receive the most attention and engagement.

The other tool in our tool-belt is session recording software. This is used to analyze user behavior patterns and areas of interest on your site. The results are helpful in spotting common user difficulties and identifying opportunities for improvement.

The results of that research is parsed and presented during the strategy phase. It’s then used to inform the decisions in the design and development phases of the website build.

Insights Drive Navigation

Our goal is to deliver a website that caters to all of your intended audiences, is responsive to all devices it can be accessed on (laptop, desktop, smartphone or tablet), and satisfies all ADA (Americans with Disabilities Act) requirements. In short, we design websites that are easy to use and navigate.

Understanding your audiences allows you to create intuitive navigation paths that lead users to the information they are seeking in the shortest amount of clicks.

With higher education websites, we recommend structuring your main navigation menu around the needs of your primary audience: your prospective students. The menu items should focus on the needs of this group, which are gleaned during the research phase. The header should also include an expandable menu with links to audience-specific resources and other frequently visited pages, as well as an easy to spot site search feature.

To make your website mobile-friendly, all menus should reduce down to an expandable hamburger menu (appears as an icon with three short lines). It’s also helpful to have a site search feature that expands to cover the length of the device screen.

Beacon Knows Higher Ed Web Design

If you’re not sure if your website’s current design is meeting the needs of your students, we’ll be happy to take a look. Request a complimentary website audit, and our team will provide you with an honest assessment of your site’s strengths and weaknesses. No strings attached. Feel free to give us a call, too, at (866) 708-1467.

26 07, 2017

SEO & Your Redesign: Don’t Be a Flintsone

By | 2017-07-31T12:52:45+00:00 July 26th, 2017|Categories: SEO|Tags: , |

If you’re reading this article on your desktop monitor, guess what. You’re a dinosaur, my friend. More than likely, there are far more people reading this article on hand held devices. Particularly those between the ages of 18 and 29*. But, since there are still holdouts like yourself, any website needs to account for this audience as well.

With that in mind, it’s time we talk about responsive website redesign. So, put those rocks down and follow me.  We’re going to cover a lot of ground in just a few words. We’ll look at some major SEO considerations with an added emphasis on mobile redesign factors.

Structured Schema Data & The Loyal Order of Water Buffaloes

A redesign is a great time to give your new website an organic visibility boost. By adding structured or schema markup, you can give search engines a little bit more help with interpreting your pages, thereby improving the quantity and quality of your traffic. Think of it as the secret handshake of Lodge brothers. You establish a familiarity on a higher level – it’s an engagement booster. And when better engagement metrics follow, so do better search rankings.

HTML tells the user’s browser how to display the information in the tag. Using a microdata format, schema markup tells the browser what the text within the tag means. There are markup types for different business categories, entertainment types, articles & review sites, products, and events. And those are just a few types of schema. You can see why schema markup is a great way to showcase your website content.

Yabba Dabba DON’T forget about page speed.

Page speed has always been important. With mobile devices, page speed is absolutely critical. Consider the numbers given earlier regarding mobile users. They’re young. Very Young. That means the average mobile user has an attention span similar to that of a common house fly.  Factor in questionable mobile connections and it doesn’t take a genius to figure it out. There is no such thing as too fast.

Make sure you address page speed. If you can’t get a straight answer from your design partner regarding site speed, use Google’s Mobile Friendly Test to find out for yourself. It will measure mobile friendliness and compare the load times of your site on mobile and desktop. Additionally, the tool will suggest improvements. Take this handy little report and give it to your design partner.

CSS, JavaScript & The Great Gazoo

In the Jurassic days of website design (last Thursday), it wasn’t unusual to use JavaScript to ensure that your design renders as intended. Page speed was not as great a factor in the Google search algorithm as it is today and page speeds didn’t have to account for mobile use.

However, side by side analysis suggests overuse of JavaScript and CSS can be a big mistake. Recent split tests indicate that if one were to strip the JavaScript from a page and use CSS to render it instead, performance would improve. In fact, if one were to split test the JavaScript pages versus the pages not reliant on JS, the latter sees roughly 5% more organic traffic.

Like the character in the cartoon, CSS and JavaScript mean well but they they’ll likely create more problems than they solve.

They don’t use Flash down at the quarry anymore.

There are some good things about Flash. It’s great for course animations and online presentations. Now, let’s list a few of its limitations.

  • It’s not supported on iPhone.
  • Or Anything, really.
  • Google has trouble crawling and indexing it. That means lousy search visibility.
  • It isn’t easily updated. If you have very, very deep pockets, this isn’t a problem.
  • It’s proprietary so Adobe can hold you hostage.

With the changing technologies, Flash simply should not be used any longer. Flash isn’t supported on mobile devices. If your redesign partner insists on using Flash in your new redesign, run for the hills.

Bold choice, Mr. Flintstone! You’ll go far in this company.

While all of the above must be considered in your redesign efforts, it all starts with your choice of a forward-thinking design and development partner. That’s where Beacon comes in. If you have any questions regarding SEO and your upcoming redesign project, I invite you to email me or call a member of our digital marketing team at 1.855.847.5440.

*According to the Pew Research Center

12 01, 2016

What’s New in Web Design for 2016?

By | 2018-09-14T15:49:47+00:00 January 12th, 2016|Categories: Web Development|Tags: , , |

As we plunge into 2016, many designers and developers are excited to see what innovative ideas will arise. It is up to us to deliver fresh and atypical ideas which provide a foundation for the progressive nature of our industry. Many are looking ahead and predicting different trends we may see in 2016. Some of the trends from 2015, will linger around for a little longer, while others will fade out. HTML5 and CSS3 have opened the door to many realms of possibility and continue to eliminate needs for Flash and jQuery plug-ins.

Below you will see trends I have found to emerge into mine and many designer’s lists of what to expect in 2016 and beyond.

1. Usability is King.

It is in our human nature to want things quick and as simple as possible. We are getting more mobilized with our web browsing and want information “on the go”. As designers focus more on simplistic and minimalistic styles of web design, developers are focusing on functionality to make designs and user interaction more fluid.

a. Flat Design – A trend here to stay

i. A couple years old now, Flat Design is a trend we see continuously getting applied to web designs. It’s bold and vibrant colors, easy to read Sans Serif fonts, big images, and minimalistic approach provide users with an easy to read style of simplistic design. The website http://riiotlabs.com/fr/accueil is a great example of flat design and also a good example of how animation is beginning to get incorporated into background images.

b. Material Design – User Interface Defined

i. Introduced in 2014, Material Design was started by Google as a foundation for User Interactive design for cross platform use. Similar to the minimalistic appeal to Flat Design, Material Design focuses on shadows and depth which allow the user a better visual perception. The use of these shadow effects creates a 3D environment for devices when displaying objects, animations, and responsive interactions. Android introduced this style into its theming for the new Android 5.0 and many App designers are beginning to follow suit. For more info on Material Design, visit:

https://www.google.com/design/spec/material-design/introduction.html.

2. Typography

a. Designers are beginning to turn more focus on their choice of fonts. Whether it is for better readability or for unique ways to artistically spell out the title of a company, Google fonts has opened the door to huge a huge library of font selection. Typography is one of the biggest playmakers in successful design, as designers find ways to find legible and creative ways to spell out their content beyond the normal styles. We will begin to see bigger and bolder typography throughout the year. http://www.getzeroapp.com/ gives an example of how designers are implementing big bold text into their websites.

3. Cinemographs – It’s Alive!!!

a. Cinemographs are images that show movement in a still photograph. Since the first one in 2011, these images have become increasingly popular. With the implementation of Apple’s Live Photos into iPhone 6 cameras; Cinemographs have sprung a higher awareness to society. Many marketing and advertising agencies see this trend and are incorporating these compelling images into their use in social media and web design.

To check out some awesome cinemographs, visit http://cinemagraphs.com/.

4. Storytelling – Once Upon a Time….

a. One way to portray content is through the unique style of storytelling when designing a web site. Storytelling can be very effective in marketing as long as it is done properly. The key is keeping the user engaged and making them want to explore the depths of the web site. Many designers use long-scrolling along with scrolling effects to tell a story as the user moves down the page. Others, like this great example by Nike, are great ways to really engage the user to make them feel like they have control on how it all plays out.

5. Responsive Design – The Mobile Age

a. Responsive Design has been a trend for a while now. People are finding themselves using mobile devices like smart phones and tablets for their internet browsing more than they use laptops and desktops. The introduction of the Apple Watch and new arising technology of virtual reality goggles and Google Glass will introduce a new demand for more user interface layouts and screen sizes that designers will have to accommodate. One example of these wearables is Wove – a flexible touch display watch. These many different wearables will unleash a demand for specific device styling to keep usability fluid.

6. Rich Animations

a. The use of animation is becoming very popular in multiple ways. Designers are incorporating small scale animations that require no user input into minimalistic, flat design. Loading animations are being created for users to enjoy themselves for a brief moment while content loads. Multiple kinds of user effects are being used to control animation like scrolling effects, galleries/slideshows, hover effects, and pop-up notifications.

b. Videos are becoming popular as full page background images. This is tricky for designers though, as video backgrounds can become disturbing when it comes to good readability.

http://www.because-recollection.com/rita-mitsouko is a sweet website that shows animated backgrounds and also produces great user interaction and is set up like a storyboard.

1 05, 2015

New WordPress Website Launch: Matthews Specialty Vehicles

By | 2017-08-08T08:39:00+00:00 May 1st, 2015|Categories: Beacon News|Tags: , , |

Beacon is pleased to announce the recent launch of a new WordPress site for Matthews Specialty Vehicles. The new site features new imagery and a responsive design that works well on tablet and mobile devices.

Here is the old site:

msv-homepage

And here is the new site:

msv-responsive

Visit the live site here.

If you are looking for a content management system to help you maintain your website, we have different solutions depending on the needs of your business. Contact us today to see how we can help.

20 10, 2014

Radio Buttons vs Checkboxes

By | 2018-09-14T15:11:15+00:00 October 20th, 2014|Categories: Web Development|Tags: , , |

Sometimes when designing forms there’s some confusion as to when to use radio buttons and when to use checkboxes, but actually the rules are quite simple.

Radio buttons are used for two or more choices that are mutually exclusive. This means that only one can be selected at a time. The term “radio button” comes from the physical buttons of older car radios. When one button was pressed the other buttons would pop out. This made it so that only one button could be pressed in at a time.

Checkboxes offer a binary choice such as on/off or true/false. They can be used alone or they can be used in a group to offer multiple selections.

A group of radio buttons can be a great alternative in some cases to having your user select their choice from a drop down menu because it makes all the options visible right there on the page so they are more easily accessible. This may be a preferable way to present options to users on mobile devices that are viewing your responsive website. They can then select their choice with just one tap instead of the several that are needed to use a drop down menu on a mobile phone. This may not always be the best option if you have a lot of choices because it can make the page look cluttered. Every situation is unique and you must consider the design of the content and also the needs of your users.

Radio buttons and checkboxes can both be restyled using CSS to have the appearance of buttons. This is an excellent option to enhance usability for touch devices.

buttons

Image courtesy of ViralPatel.net

7 01, 2014

A Calendar for Your Website

By | 2016-11-18T14:23:19+00:00 January 7th, 2014|Categories: Web Development|Tags: , , , |

When planning for a calendar on your website, there are a number of factors to take into account.  Each of the bullets below contains examples of calendar projects with which Beacon Technologies has had direct involvement in analysis and design and/or development and integration.

  • Mobile-friendliness– Check your website analytics to determine the frequency in which your mobile visitors use the existing calendar or events listing on the site.  In most cases, it is one of the most frequently used areas of the site for mobile visitors, other than “Maps & Directions,” so you’ll need to take special care to make sure it is usable on multiple mobile devices and screen sizes.  Even if you can’t invest in a complete responsive design at this time, be sure to plan for the calendar to be usable on mobile devices. For example, Beacon customized Hannon Hill’s base calendar to be responsive and display events in the most appropriate layout for the screen size being used by the visitor for University of the Virgin Island’s calendar.
  • Room scheduling– Consider if your web-based calendar should also integrate closely with a room scheduling or other back-office system.  If so, it is much easier to plan for that integration at the outset of the project rather than afterwards.  Beacon assisted the University of Hartford, for example, with an integration with CollegeNet’s scheduling software as well as Framingham State University’s integration with Active Data Calendar.
  • Ability to submit events– Will your website visitors be able to submit their own events for display on the website calendar (perhaps after moderation and review)?  If so, be sure to evaluate whether the selected calendar software can accommodate such functionality.  As reference, the University of the Virgin Islands’ “Submit Event” form offers this functionality by automatically creating a Cascade asset/page for review and approval by an administrator, when the form is submitted by the public visitor.
  • Categories and filtering– Many website calendars, particularly for schools/colleges/universities and large companies that have many events per month, need to provide the end user with a way to display just the categories that they are interested in, as well to filter for a particular audience (students, faculty, customers, etc.).  The University of the Virgin Islands calendar allows the visitor to filter by category and audience, as well as to display a printable PDF format.
  • Calendar display/layout– Traditionally calendars are displayed in a month “grid” view like the one at the University of the Virgin Islands, but that’s not always the most appropriate layout for the number or types of events.  Smaller companies and schools with fewer events per month may prefer a “list” layout like Lees McRae College or Winston-Salem State, where more events can be listed on one screen without using the grid format.
  • Search-ability— Be sure to consider whether the calendar will be searchable via traditional search engines as you will most likely want the public to be able to search Google, Bing, etc. to find your events.  Search engine robots are often unable to scan dynamic or very long URLs, so calendars that use physical pages (like the Southeastern Baptist Theological Seminary’s calendar) versus database query strings are often more “search engine friendly”.

Do you have a particularly great website calendar to share?  Did you have any special challenges in creating a web-based calendar?  Please share your experiences below!

16 12, 2013

Holyoke Gas & Electric Redesign Launched!

By | 2016-11-21T18:18:11+00:00 December 16th, 2013|Categories: Beacon News|Tags: , , , , |

Beacon Technologies is very proud to announce the launch of the new Cascade site for Holyoke Gas & Electric at http://www.hged.com! This site is visually a dramatic improvement over the old.

BEFORE

homepage

Holyoke Gas & Electric Website “Before”

AFTER

Holyoke Home Page After

Holyoke Home Page “After”

It also incorporates the following fantastic functionally:

  • Responsive Design— The new site is a lovely, colorful responsive design, that looks great in the largest monitor and the smallest phone
  • Audience-based site maps—When a visitor clicks on one of the audience based icons in the site footer (like “Residential”), they are directed to an audience-based site map (http://www.hged.com/site-map/residential.aspx), displaying the pages that the client has tagged as relevant to that audience within the CMS.
  • Emergency Notifications—Two different messaging options to alert customers. One is for severe emergencies and pops up in an ajax window on every page of the site and the other is a banner message that doesn’t require visitor interaction but appears on every page of the site. There’s even a very cool animation effect for the emergency message when it is in effect.
  • Google Translate—Easy to access Google translate widget in the footer of every page of the site
  • Weather feed—Weather related info for the Holyoke area displayed from a 3rd party tool in the site footer. Note the effort devoted to make it match the site design perfectly!
  • Call to Action buttons—Editable buttons that display on the home and optionally on any interior page under the left navigation.
  • Contact Information—Editable contact information that can be displayed on any internal page under the left column navigation (http://www.hged.com/customers/start-stop-move/default.aspx)
  • Optional right column area—All internal pages can display an optional right column that includes widgets for content, images, videos or external links (http://hged.com/about/history/default.aspx)
  • Internal animated banner images— Can be incorporated on any internal page on the site (http://www.hged.com/telecom/default.aspx)
  • Department-specific design—One department at HGE required an alternate, but similar, design for marketing purposes and it can be seen here: http://www.hged.com/telecom/default.aspx
  • Google Map integration—Client can enter location details into Cascade to display an interactive Google map (http://www.hged.com/about/contact-us/delivery-instructions.aspx)
  • Custom “calculators”—These two pages are custom .NET forms that allow the visitor to calculate their own energy costs– http://www.hged.com/customers/save-energy-money/energy-efficiency/carbon-foorprint-calculator.aspx and http://www.hged.com/customers/services/gas-service/gas-conversion/default.aspx
  •  Spectate integration—Any internal page can display a Spectate-based online form as created and maintained by the client (http://www.hged.com/about/contact-us/default.aspx)
  • Web and social media tracking– The site makes extensive use of web and social media tracking tools so that the client can be well informed of all client interaction with the site.

The client is just thrilled with the beautiful site– “Everyone here at HG&E is so very excited about this project! The design is amazing, the CMS is great, I have had very positive feedback from all our employees!”  Congrats to the entire Beacon team for a job well done!

 

 

25 11, 2013

Is Flat Design For You?

By | 2016-11-18T14:23:20+00:00 November 25th, 2013|Categories: Web Development|Tags: , , , , , , , , , , , , , |

As technology and the familiarity with it grows, designers and developers are now more than ever trying to enhance the website design world. Inevitably, this leads to countless passing trends that come and go much like any design industry. Which leaves us begging the question, how do we know what is more than just a trend and does it fit our website needs?

Flat design has been a fairly controversial topic since the beginning. Industry leaders such as Microsoft, Apple, and Google have all jumped on board lending us to believe there may be something more to this. So how can flat design benefit your site?

Flat Design Is Responsive Friendly

writer-responsive-blog-theme

Image credit to: www.wpexplorer.com/writer-blog-wordpress-theme

More and more we are finding people are using smartphones as a replacement for their computers. In 2012, more tablets and smartphones were purchased than computers. Because of this, responsive websites have now become a necessity. With the simplistic nature of flat design sizing elements down to fit a mobile device or tablet becomes that much easier. By using a lot of white space and large buttons flat design becomes very flexible when considering responsive website.

 

Flat Design Is Content Friendly

The mystery of, “What is more important? Content? Or Design?” has been solved. The answer is neither. Both equally important. Design attracts your users, but your content keeps them on your site. So why would you not leverage your design to showcase your content? Flat design’s clean and minimal layouts provide an environment that allows your content to stand out. Content communicated in a simple and clear manner is more easily digested by the user.

 

 Flat Design is User Friendly

Although minimal, flat design has a high level of focus on aesthetics generally utilizing bright colors and large imagery. This coupled with the elimination of borders and shadows entices the user’s eye to flow across your site with ease. Flat design strips down to the most basic form of design that can be appreciated by anyone.

The goal for any website design is to carry the message of your business across to the user. Your design should always highlight the content and focus on the user’s experience. Here at Beacon, we are constantly researching design trends and movements to ensure that our client’s websites are ahead of their time and solidified as legitimate marketing tools.

 

4 10, 2013

Progressive Enhancement

By | 2017-08-11T16:23:44+00:00 October 4th, 2013|Categories: Web Development|Tags: , , , , , , , , , , , , |

I had the privilege of attending “An Event Apart” in Austin, TX this week and feel like I have come home with an abundance of knowledge about leading practices in web development. This conference is an educational session for those passionate about standards-based web design and this year focused heavily on best practices for our multi-device world. Many developers are facing the challenges of 1000s of screen sizes and the multitude of ways people can now access the websites we create. With new devices coming out daily plus fascinating new ways to enhance sites visually and interactively, we sometimes forget that many people are still using older slower browser and devices. That doesn’t mean we shouldn’t be designing our sites without all the bells and whistles, but we cannot forgot about the other users. At the conference, one topic in general really helped explain how we create amazing sites without leaving anyone out. Progressive enhancement!

What is Progressive Enhancement?

“Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.”

Basically, progressive enhancement allows everyone, no matter what their browser or internet connection may be, to access a web page and view the basic content and functionality. If you are running a more advanced browser or better bandwidth, you will get the enhanced version of the page.

Progressive Enhancement vs. Graceful Degradation

Both graceful degradation and progress enhancement focus on how a site works in all browsers and devices. The focus and how it affects the workflow is the key between these two methods.

graceful

For many years, web designers have been using the principle of graceful degradation to make sure users in older browsers can at least see the content on a site, even if it doesn’t look exactly like the design intended. It allows designers and developers to focus on building the website for the most advanced/capable browsers. Using this method leaves older browsers with poor, but passable experience.

progressive

Rather than focusing on browser technology and support, we can focus on the content and how the user will see this content no matter what they are on. The content of your site is the most important element, it’s what brings users to your site and should always be first priority.

So how does Progressive Enhancement work?

It’s best to think of progressive enhancement as different layers. We couldn’t build a home without a solid foundation, the same goes for our websites. Each layer builds on the previous to improve the interactivity on the website without losing a solid functional base.

Content first! Start with your content, marked up in rich, semantic HTML. Having well-thought-out HTML has the advantage of not needing presentation layers to make sense. This also means screen readers, search engine spiders and those on basic mobile browsers will be able to view your content without any distracting formatting issues.

Visual Enhancements (CSS) Once your base HTML and content is ready, you are ready for the visual enhancement layer, CSS.  The majority of desktop and mobile browsers support CSS, though not all support CSS3. The CSS should enhance the content and make the overall user experience better.

Interaction (JavaScript) The final layer of our web site is JavaScript and should be handled last. JavaScript can contribute so much to the usability and user experience of a website. It has revolutionized the way sites work and how we do things online. However, your website should always work without JS and there should be an HTML or server-side scripting alternative. While most web users have JS enabled, there are still some cases where JS is undesirable and not every mobile browser or screen reader has good support for it.

Once you understand progressive enhancement, the concept of it makes sense and is easy to do. We build for the very basic structure and then build out so that no matter what device or speed someone is viewing the site at, they will always be presented with what is important. The content!

 

22 04, 2013

Considering Drawer Style Site Navigation

By | 2016-05-27T10:13:29+00:00 April 22nd, 2013|Categories: Web Development, Creative Design|Tags: , , , , , |

Lately we have been utilizing a drawer style navigation in our designs to provide a better user experience in our websites. The request for quite a bit of content in the drop downs themselves (mega drop downs that span the full width of the site no matter which tab you have clicked) in some of our more complex higher-ed sites also creates the problem of covering up the content of the site and proving tricky when the site responds to mobile screen sizes. Putting the navigation in a sliding drawer is proving to be a unique solution that translates beautifully to mobile in responsive design.

If you look on Mashable, a popular news article site, the nav drawer does not shift the page down, but is a full width mega drop down menu. Compare to the University of Wyoming, a site recently developed by Beacon, which has a drawer based nav.

Mashable mega drop down navigation

University of Wyoming drawer based navigation

Whether or not this is the right nav for your site will probably be based upon a lot of factors like what type of content is in your drop downs and what type on content is on your homepage. If you have a lot of content in your navigation it may be worth while to put that navigation in a slider so that the homepage remains visible, even when the navigation is open. Also, you need to think about what your navigation does on mobile devices and tablets and how to best integrate this with your drop downs. Mashable.com serves up a different navigation for it’s tablet users, for example, simplifying the menu, so they put it in a side drawer. On the higher ed sites we develop here at Beacon, we need to provide a consistent navigation for users on every type of device, so we might use a similar drawer on both mobile and desktop, but just change the navigation to stack taller on smaller devices and open and close subsections. This also can allow us to integrate deeper navigational tiers in the main nav on mobile devices so we can keep the content area cleaner and simpler.

This solution can be elegant and it even translates very well to touch devices that do not have the ability to open menus on-hover. This keeps the experience more consistent through all the screen sizes by utilizing an on-click drawer.

Ultimately decisions like these need to be made on a case by case basis.

Load More Posts