Beacon Buddy

About Beacon Buddy

This author has not yet filled in any details.
So far Beacon Buddy has created 202 blog entries.
27 11, 2013

3 Signs of a Run Away Project

By | 2017-06-16T12:31:41+00:00 November 27th, 2013|Categories: Web Development|

Tyson Brands sits down to his desk, second cup of coffee in hand, and begins checking his emails, like he does every morning. He notices one email flagged as important. The subject line just reads “Update!” Tyson doesn’t need to read the email to know what it’s about. The client is asking for yet another update on their big project.

As Tyson stares at the email, he imagines the client reacting to the bad news he has to deliver. The truth is, the project is behind schedule again, and it looks like he’s going to miss another in a long line of failed deadlines. Tyson leans back in his chair and stares at the ceiling. He never neglected the project, and he spent a lot of time with the client fleshing out the requirements at the beginning. It should have been fairly straightforward, but here he was three months past the launch date and so far beyond the budget Tyson was sure his company wasn’t even making money at this point.

car losing tractionIf this scenario seems at all familiar, then you know what it’s like to be involved with a runaway project. Nobody wants to be a part of them. Things like “deadline” and “budget” lose all meaning. Like the name suggests, a runaway project has no end in sight. The challenge is to know when a project is on its way to being out of control and addressing it sooner rather than later. Easier said than done in many cases, but the best defense is a good offense. The first thing to do is to establish a list of criteria that can alert you to potential problems. Here are a few ways you can tell if you’ve got a runaway project on your hands:

Bad flow of information/vague requirements: knowledge does not flow linearly. Each new person you add to your project complicates the flow of information. As PM, you need to make sure everyone is on the same page and is lock-step with what the client wants. Most projects are too complex for you to be available to make all the decisions, and you need to rely on your team to make functional choices surrounding their particular expertise. If not everyone is on the same page, then you’ll spend more time going back and correcting decisions others have made. How can you tell if you have a bad flow of information? Ask each person working on it individually to describe the project in terms of what it’s trying to accomplish and how their actions are helping the project succeed. If you get wildly different answers, you may have a problem.

market segmentation as a moving targetChanging scope: assuming you have clear requirements, scope creep shouldn’t be a problem right? Wrong! Every project has to make some changes along the way. Sometimes there are valid reasons for doing so, such as having to adapt to a changing business environment. Other times, you may just be dealing with too many decision makers with unique visions of what the project should be. Document every single change that comes in along with the impact it will have on the budget and the deadline. The goal is to create a clear trail of decisions to explain any differences between the initial scope and the final product. If you see a steady accumulation of hours needed for these out of scope changes, you might have a runaway project on your hands.

Low client buy-in: nothing is more frustrating when you get the feeling that a project is a higher priority to you than it is to the client. Nevertheless, you’re still being held responsible for moving the project along even when you aren’t getting the feedback you need. Remember that your client most likely has a clear vision as to what they are expecting (even if they can’t describe it), and it will rarely be the same as yours. When you plan out your project, make sure you plan for iterative milestones and approval periods. Establish an expectation upfront of turnaround for feedback and approvals, and gently remind the client when their decisions will hold up the project.

Looking back on his project, Tyson realized that the client had changed the goals twice and had near 15 change requests. On top of that, there would be long gaps between when a deliverable was turned over and any response from the client. In fact, Tyson was usually the one that prodded the response. Tyson was more than certain he had a runaway project, now all he had to do was figure out how to fix it…


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


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.


8 10, 2013

Finding the Critical Path: 7 Simple Steps to Better Manage Project Timelines

By | 2017-06-16T12:31:58+00:00 October 8th, 2013|Categories: Web Development|Tags: |

For project managers, it’s sometimes hard to know exactly how a delay in one part of a project will affect the others. Even if a small delay won’t have any impact on the final deadline, where is the line in the sand and how do we know when we’ve crossed it? How late can one deliverable be before the whole project deadline is compromised?

I’ve recently discovered a simple method that answers all of those questions: CPM (Critical Path Method). It was originally developed by E.I. du Pont de Nemours & Co. Like the name suggests, this helpful planning tool makes clear what activities cannot be delayed and which ones can. It can be used internally to help shuffle resources should an emergency arise, and it can be used to manage client expectations given delays or scope creep. Here’s how it works:

1. Break Up the Project

Most managers do this already to create project milestones, but you want to make sure that the way the project is broken up makes sense and is useful. An activity is a task or group of tasks that are related to achieving a particular goal of the project. There’s no hard and fast rule to say what officially constitutes an activity, so use your best judgement and tweak if need be. For web projects, here’s how I define the typical activities:

Activity Description Duration
START Kick-off meeting
A Planning 24
B Wireframes 16
C Wireframe Approval 24
D Design 20
E Design Approval 24
F Content Development 48
G Back-End Development 60
H Front-End Development 40
I Content Import 8
J Testing 32
K Review 40
L Launch 4

2. Identify the Dependencies

The next step is to identify the immediate predecessors to each activity. What has to happen before a subsequent activity can take place?

Activity Description Duration Predecessor
START Kick-off meeting
A Planning 24 START
B Wireframes 16 A
C Wireframe Approval 24 B
D Design 20 C
E Design Approval 24 D
F Content Development 48 E
G Back-End Development 60 E
H Front-End Development 40 E
I Content Import 8 F, G, H
J Testing 32 G, H
K Review 40 I, J
L Launch 4 K

3. Draw a Chart

Next, I draw a flow chart that shows each activity. CPM-chart-step3 The symbols in each block are important to know.

  • ES stands for Early Start – the earliest an an activity can begin.
  • Dur stands for Duration – the length of time needed to complete an activity.
  • EF stands for Early Finish – the earliest an activity can finish. EF + Dur
  • LF stands for Late Finish – the latest an activity can finish.
  • LS stands for Late Start – the latest an activity can begin. LF – Dur

4. Fill in Duration

Replace the duration in each activity block with the initial estimate you gathered in the quoting process. You can use either weeks or hours, but make sure to keep the units consistent. I typically use business hours for my chart, which makes it easier for me to schedule projects over the holiday season when there are fewer business days.

5. Forward Pass

Now, we replace ES in Activity A with 0 since that is the earliest the first activity can start. To calculate EF for each block simply add ES and Duration. The EF of the activity becomes the ES for the activity immediately following it. So ES for Activity B is the same as EF for Activity A. When you run into a situation where there are multiple predecessor activities (like for Activities I, J, and K in our example), you use the largest EF value because that is the soonest that all predecessor activities will be completed. Now you work your way forward through the chart until you have the Early Finish for the final activity. This is the length of the project. In this case, it’s 244 working hours.

6. Backward Pass

So now we have a project duration, but we have quite a few activities that don’t have to start right away. So now let’s calculate LF and LS for each activity. Starting at the end, substitute LF for the final activity (L) with the EF. The project conclusion date should be both the earliest and latest the project can finish. Now we subtract Duration from LF to find LS. So LS for Activity L should be 244 – 4 = 240. When you run into a situation where there are multiple subsequent activities (like E, G, and H), the smallest Late Start value becomes the Late Finish for the previous activity because that is the latest that activity can start.

7. Critical Path

Now we identify the critical path. Simply compare the Early Finish and Late Finish of each activity. If they are the same, then that activity is on the critical path. If they are not, then there is slack time. Early Start is the soonest you can begin the Activity, and Late Start is the absolute latest you can begin it. Here is how our chart should look now with the critical path shown. CPM-chart-step7 So our critical path here involves activities A, B, C, D, E G, J, K, and L. From here, I can see that if there are any delays in Activity F (Content Development), I know that it won’t sacrifice the deadline. I can even see the Slack Time (LF – EF) is 36 working hours or 4.5 business days. So if a client says the content will be 4 days late, no problem. On the other hand, if it is 6 days late, the project will be delayed by that difference in time (1.5 days). Neat little tool huh?

23 09, 2013

Free Responsive Web Design (RWD), HTML5 and CSS3 Vector Logos in PSD, AI and PNG Formats

By | 2017-06-16T13:14:01+00:00 September 23rd, 2013|Categories: Web Development|Tags: , , , , , , , , , |

I was working on my personal website over the weekend and decided I wanted to use the HTML5 and CSS3 logos within my portfolio. When I went to do this I realized I had no visual way to display Responsive Web Design. I searched and couldn’t find any official RWD logos or a version that I felt would go along with the HTML5 and CSS3 logos like I wanted so I decided I was going to have to make it myself.


Here is the process of how I created the RWD logo:

  • Downloaded the vector versions of the HTML5 and CSS3 logos
  • Used Gotham Ultra to create the base for the ‘RWD’ in black
  • Tweaked the RWD slightly to match the ‘HTML and ‘CSS’
  • Used the shape and size of the ‘5’ and the ‘3’ as an outline to create the R
  • Used a color schemer online to choose a color that complimented the first two logos


I’m really excited with how it turned out so I would like to share it with everyone. Feel free to use it however you wish!! The RWD logo’s I did see were a lot of the time in a shade of dark gray so also feel free to change the color if black becomes the new RWD signature color.

This vector set includes:

  • HTML5 Logo
  • CSS3 Logo
  • Responsive Web Design (RWD) Logo




Download Links


Also if you have any ideas to improve the R within the RWD logo please comment below! I struggled with it following the same structure as the 5 and the 3 but still looking like an R.

*Please note this is in no way an official logo or design for Responsive Web Design. Given RWD is a practice or methodology of a combination of multiple things I’m not sure there will ever be an official logo created for it. I did this as a way to display RWD visually next to the HTML5 and CSS3 logos within my personal website.

11 09, 2013

How to Clear Input Field on Click JavaScript

By | 2016-11-18T14:23:22+00:00 September 11th, 2013|Categories: Web Development|Tags: , , , , , , , , , , |

As we all know, we are constantly learning new and better ways of doing things and today I learned an improved method for clearing a search box to make it more universal and easy to implement.

Let’s first take a look at what we were using:

We typically used this to replace our even older method that involved 2 other JavaScript files… yes this replaced 2 files!! We simply add it to our normal global scripts file (scripts.js), update the ID/Class for the sites search field and call it a day!

For the most part this has worked great… until today! I am currently working on a site that we are making responsive and in order to do that efficiently I am cleaning up as much extra as I can. We want to minimize everything we can to ensure that with this enhancement there are no effects on page load. So I go to add it as I normally would but to be sure I first searched the site for all instances of the ‘clearDefault’ class that the (even older) JavaScript was using. I mainly did this so I knew what to test once I put the new code in place but instead I was in for a pleasant surprise of multiple instances with multiple values to replace! So I had to take a step back and reevaluate our current solution to include other scenarios.

I did have a few variations but this is what I settled on:

The differences are as follows:

  • Will apply to all input and textarea fields vs. needing a ‘clearDefault’ class
    • Pros: less HTML for page, consistency throughout site
    • Cons: the unseen situation where you would not want this JavaScript to apply
  • Uses original value of field to default back to vs. having to manually set it in the JavaScript
    • Pros: less setup, can be used globally on all fields no matter what the value is
    • Cons: the unseen situation involving browser issues with ‘defaultValue’

Note: This does require jQuery on the page but for the most part all of our sites already have jQuery so we decided to use it where we could.


I am not saying this is the only or absolute best way to handle this but it is the solution that fit our needs.  If anyone has any suggestions on how this could be improved or done in a more efficient way please comment below!

9 08, 2013

Redesigning Without Frustrating Your Users

By | 2017-06-16T13:05:30+00:00 August 9th, 2013|Categories: Web Development, Creative Design|Tags: , , , |

Your users rely on your website to get things done. They are used to doing it a certain way. So when things change, people get frustrated. Nevertheless, change is necessary. So the job of your web design and development team is to try to make the changes go over as smoothly as possible.

Communicate with Your Users

Testing is a valuable tool to help you figure out where the problem areas of your website are. Gathering information by polling or asking your users to give their feedback can be incredibly valuable. But, keep in mind that sometimes what a user tells you about their experience with your site may not exactly match what really happens when they are actually on the site. There may be inconsistencies with a users intent and their action because of the contextual factors involved. Every time someone uses your site, the situation is different and therefore the results are different. Monitoring and using things like Google Analytics metrics will give you facts to compare to your collected empirical data.

Types of Change

Design changes are more immediately noticed, while workflow changes may take time to be detected by your users. Dissatisfaction with design changes may not be enough to keep them from using the site, but if the functionality of the site is compromised users may be discouraged. Therefore it is vital to ensure that any workflow changes will benefit the user in the end. Workflow changes can bring short term user dissatisfaction but valuable long term gain. Ultimately people are able to learn and adapt to the changes within a few days, and as long as the benefits last longer than this relearning period, their experience will ultimately be positive.

When is change necessary?

Change is always necessary when it solves a problem or serves a specific purpose. Ease of use, being the ultimate goal. Increased and varied functionality is only valuable when truly needed. You also need to consider the types of users you are designing for. There is no need to hold back for a small portion of your users, while inhibiting the experience of most of your users. Maintaining core consistencies with your old site, such as keeping things in the same general location and using familiar visual cues, will assist your user with making a smooth transition to your new design.

26 07, 2013

Embedding the New YouTube Subscribe Button on Your Website

By | 2016-11-18T12:09:57+00:00 July 26th, 2013|Categories: Social Media|Tags: , , |

This week YouTube released an embeddable subscribe button for your website. This neat little shortcut allows users to subscribe to your YouTube channel in just one click.

Follow along for a quick How-To on adding this button to your website. Visit the YouTube Developers Page to begin creating your button.

1. Choose your button style. Currently you can pick from three designs: default, full layout with avatar, and full layout dark.

YouTube Subscribe Options

2. Configure your button. Enter your Channel Name or ID and select your layout. To find your Channel ID, log in to your YouTube account and use this link.

YouTube Options

3. Snag the code and insert it onto your website. When done correctly you will end up with a slick looking one-click subscribe button like this!


BONUS Option: YouTube also outlines an alternative to using the above method. You can dynamically render your button when a link is clicked. See my example below:

Click here to render my button!

Display button here:

Do you think there’s a benefit to using the subscribe button versus a YouTube badge?

PS: Don’t laugh at my YouTube channel! I haven’t started using it yet. But follow me on G+!

6 06, 2013

How to Override the Max Width of Twitters Embeddable Timeline Widget

By | 2017-06-16T12:22:23+00:00 June 6th, 2013|Categories: Web Development|Tags: , , , , , , , , , , , , , |

According to twitters instructions the embeddable timeline widget has a maximum width of 520px. If you need your widget to be wider than 520px you will not be able to use the width attribute. If you need it wider you’ll need to override the max width using the following CSS (change width accordingly):

24 04, 2013

Update: Can Google Data Be Used To Predict Stock Values

By | 2017-03-07T10:51:38+00:00 April 24th, 2013|Categories: Google Analytics|

Here is an interesting update to my article that used Google data and behavioral search analysis to predict that Ford stock would surge.    The USA Today website just posted this article…   “Record profits in North America drove Ford Motor’s first-quarter pre-tax earnings of $2.1 billion , or 41 cents per share, on revenue of $33.9 billion.”

And here is the original article I wrote back in January that predicted Ford to show a large growth:

Although the stock value hasn’t grown significantly yet,  if Ford keeps posting numbers like these it’s sure to see strong growth over the next year.

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