SEO & Your Redesign: Don’t Be a Flintsone

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

Logan Ray
With a B.S. Degree from the University of North Carolina at Greensboro, Logan Ray joins Beacon as a Digital Marketing Specialist. Outside the workplace, Logan’s interests include spending time with his wife and dog, board sports and outdoor adventuring.
By | 2017-07-31T12:52:45+00:00 July 26th, 2017|SEO|Comments Off on SEO & Your Redesign: Don’t Be a Flintsone

What’s New in Web Design for 2016?

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 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:

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. 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

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. is a sweet website that shows animated backgrounds and also produces great user interaction and is set up like a storyboard.

Alan Horwatt
With a B.S. Degree from Clemson University and a Masters Degree in web design and technology, Alan Horwatt joins Beacon as a UI Developer. Outside of the workplace, Alan enjoys tournament bass fishing, snowboarding and investigating new technologies.
By | 2017-08-08T08:39:15+00:00 January 12th, 2016|Web Development|Comments Off on What’s New in Web Design for 2016?

New WordPress Website Launch: Matthews Specialty Vehicles

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:


And here is the new site:


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.

Deb Paylor
With a B.S. from East Tennessee State University and a Masters Degree from Kansas State University, Deb Paylor joins Beacon with over 18 years of experience in the project management and IT space. In her spare time, Deb enjoys reading, crafting and cooking.
By | 2017-08-08T08:39:00+00:00 May 1st, 2015|Beacon News|Comments Off on New WordPress Website Launch: Matthews Specialty Vehicles

Radio Buttons vs Checkboxes

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.


Image courtesy of



By | 2016-11-22T10:08:15+00:00 October 20th, 2014|Web Development|Comments Off on Radio Buttons vs Checkboxes

A Calendar for Your Website

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!

By | 2016-11-18T14:23:19+00:00 January 7th, 2014|Web Development|Comments Off on A Calendar for Your Website

Holyoke Gas & Electric Redesign Launched!

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



Holyoke Gas & Electric Website “Before”


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 (, 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 (
  • Optional right column area—All internal pages can display an optional right column that includes widgets for content, images, videos or external links (
  • Internal animated banner images— Can be incorporated on any internal page on the site (
  • Department-specific design—One department at HGE required an alternate, but similar, design for marketing purposes and it can be seen here:
  • Google Map integration—Client can enter location details into Cascade to display an interactive Google map (
  • Custom “calculators”—These two pages are custom .NET forms that allow the visitor to calculate their own energy costs– and
  •  Spectate integration—Any internal page can display a Spectate-based online form as created and maintained by the client (
  • 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!



By | 2016-11-21T18:18:11+00:00 December 16th, 2013|Beacon News|Comments Off on Holyoke Gas & Electric Redesign Launched!

Is Flat Design For You?

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


Image credit to:

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.


By | 2016-11-18T14:23:20+00:00 November 25th, 2013|Web Development|Comments Off on Is Flat Design For You?

Progressive Enhancement

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.


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.


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!


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-08-11T16:23:44+00:00 October 4th, 2013|Web Development|2 Comments

Considering Drawer Style Site Navigation

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. 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.

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

Creating An Accordion List Without Javascript

Many sites implement accordions for everything from menus and navigation to product features to calendar event details. The fact is that accordion lists are among the most popular implementations of javascript and can be seen in some implementation on almost every web application and most advanced web sites. With the recent explosion of mobile devices accessing the web there has been a lot more value placed on responsive design. One facet of that has been developing sites without relying on javascript which has been the most common way of generating rich media experiences for users. Some things simply can’t be done without javascript, but other things can be accomplished with a bit of innovation. Accordion lists are just one of many things commonly done in javascript that can be done even in browsers either with scripts disabled or not supported at all.

A typical html snippet for a list might look like this:

A script would then operate on the items in order to provide them the desired behavior to expand and contract on click or hover. With a few simple modifications that same behavior can be accomplished without needing to rely on scripts being enabled on your customers browser (changes in red):

We’ve changed the h3 tags to labels and added for attributes pointing at the radio inputs that have been added next to the content that we want to toggle between displayed and hidden. The first two rules dictate which content is displayed based on the state of the radio button that precedes each content section. The third rule hides the actual input since it’s unlikely you want random input tags cramping your style (pun intended). The fourth rule simply provides feedback to your users on hover that the element is clickable. If you want to enable the expansion on hover the second rule can be changed to “#accordion li:hover div { display: block !important; }” and take special note of the !important attribute on that style. This is because the nature of styles will dictate that the first rule overwrite the second due to its specificity.

Obviously one of the drawbacks of this method is the lack of animation since animation was only possible with javascript prior to html5. The good news is that once this html/style accordion has been implemented you can also add scripts to you page to implement the accordion using script for those users that do have script enabled and render the styles we added for the scriptless version inert by simply removing the radio inputs from the DOM. Now your accordion can expand and contract both with and without script, though admittedly it will probably look better when scripts are enabled.

John Vine
John Vine been developing website and web applications since 2010. He grew up in Greensboro, NC and was very happy to be able to return here after graduating from Full Sail University with a bachelors in game development. John prefers the open feeling of his motorcycle which he rides right up until the cold of winter forces him back into his car. He is a Green Bay Packers fan and hopes to one day have season tickets.
By | 2016-11-18T14:23:23+00:00 February 7th, 2013|Web Development|2 Comments
Load More Posts