The Beacon Technologies development team launched a beautiful redesign to the Texas A&M Foundation website today. Beacon did the previous Cascade integration using a design provided by another company. This time the Beacon team had the opportunity to create the design and you can see the wonderful result below! The client is very pleased, has been getting positive feedback and said they can’t wait to work with us again.

This site was another great team effort that involved a lovely educational design, complicated template development, CMS integration and home page Flash development. This redesign also included a cool Publications Archive and a RSS news feed page incorporating Google mini development, an upgrade to a legacy .NET calendar app, thorough testing and training and end-to-end project management.

A job well done!

Before

After

Sometime in the last couple of years, “clean” became the new “black” in terms of web site design… I cannot tell you how many times I’ve heard the exact same conversation at the beginning of redesign project…

“So, in terms of look and feel of the new site, please tell me what kind of graphical design you are looking for…”

“Well, I’m not sure, but I want it to be CLEAN.”

Don’t get me wrong, this is a perfectly legitimate request, but it requires some further explanation and thought on the client’s part.  To some, “clean” means uncluttered with lots of white/neutral space on the page.  I would qualify these Beacon-designed sites as meeting this criteria:

To others, it means having one dominant color on the page (not just white), lots of photography and minimal text.  This is very different from the designs above and could look something like this:

All eight of these designs came with the requirement that the site be “clean”, and as you can see, our accomplished design team satisfied that task in a variety of different ways– through color, texture, graphics, font and photography.  As a project manager, it is definitely my job to figure out what you are looking for in terms of design and I have lots of questions that I ask at a kick-off meeting to clarify this:

• What words do you feel best describe the website look you want?
• What kind of design/graphical presence are you looking for?
• What are some sites you like or dislike when considering their graphical design? What do you like best about these websites?  What do you like least about these websites?
• Do you have a “branding package” or other marketing standards that we need to be aware of?
• Are there official branding/identity standards associated with the company logo, official fonts, company color palette, etc. ?
• Do you have a brand or logo guideline?
• Does the company have distinct colors?
• Do you have a photography and/or graphical resources (database, CDs, etc.)?
• Would it be useful for us to get some current marketing material (i.e. printed brochures, e-newsletters, etc.)?

However, if you want to make the analysis phase of a redesign project LOTS easier, please think about coming with not only an idea in your head of what a “clean” design is, but some specific examples.  The sites don’t even have be your competitors or even relevant to your industry.  A couple of years ago, our client was inspired by the Obama campaign site and we took our cues from that!   Quick bullet points about each design– what you like and what you don’t– is even better.  Nothing makes me happier than a client that walks in the door with a big stack of website print-outs and a hand written list on notebook paper.  Doesn’t have to be fancy, doesn’t have to be organized, but that list helps us so much to crawl inside your head and figure out exactly what “CLEAN” means to you!

Thanks for helping me to help you!

I’ve been with Beacon for almost 11 years.  That makes me feel really old (or dedicated, one of the two).  Thus, it’s really hard for me to fathom that Microsoft Internet Explorer 6 has been with me almost my entire career.  IE6 was released on August 27, 2001.  That was a glorious day back then.  Think about how much IE6 revolutionized how we experience the Web, and how us coders could now start that revolution.  Who knew almost 9 years later, IE6 would be defying our death wishes.

Whenever I think about IE6 and how it should have been long gone from our minds years ago (like Netscape), I think about that scene from Monty Python and the Holy Grail.  You know, the scene where the “Dead Collector” encounters someone trying to put a man onto the dead cart.  Problem is, the man isn’t dead.  He pleads not to be cast off with the forgotten, but his carrier insists that he’s pretty much a goner.  Eventually after a lot of pleading, the man is hit over the head and wheeled away. (If you don’t know what I’m talking about, check out the video below.)

I can’t believe IE6 is still around. And whenever I try to admit that it has to be dead, someone calls and says, “This site doesn’t look right in IE6.”  In fact, according to the W3C Schools browser statistics, 7.9% of users are still on IE6 (April 2010).

Why haven’t those 7.9% users upgraded yet?  I have a few theories, one of which I came up with all on my own, the other I’m quoting from one of our university clients:

• Many home users don’t know how to upgrade, so they leave well enough alone and continue to use IE6.  I always wondered why we move along so quickly in dropping all other browsers (Netscape, for example).  My theory is that all other browsers do not come pre-installed with Windows,  so it takes know-how and desire to go out and download that browser.  Those users are more apt to keep up with browser versions.
• At many institutions (such as universities), desktop support personnel lock down machines so that people can’t install other software.  Even if this doesn’t include disabling Windows Update, this feature only downloads & installs critical patches…IE upgrades are considered optional.  Thus, the machine never gets upgraded to the next version of IE.

So what’s a Web Designer to do?  The way I see it, we have two options:

1. Drop IE6 support altogether.  Give IE6 users a message stating that this site will not work properly in IE6, and they should upgrade.  (Translation:  Join us in the 21st century.)
2. Live with it.  Continue to code for IE6, and enjoy the daily challenge.

The good news?  IE6′s market share has been dropping about 1% every month.  If this trend continues, by the end of 2010, IE6 will be gone!  We developers will get to do all of that fancy XHTML/DHTML/CSS 2.0/JavaScript programming without having to worry about IE6′s attitude.

IE6 isn’t dead yet.  But IE6, enjoy your time left:  “You’ll be stone dead in a moment.”

Will we have this same discussion in a few years for IE7?

Recently, I was asked by one of our project managers to take an online survey.  The subject:  evaluate a new client’s current site in terms of design and functionality, and then compare it to a few of their competitors.

The survey asked me to browse the site in question for approximately five minutes, and then come back to answer some questions about it.  I had never seen these sites before, so everything was new to me.  When I came back to the survey, the first question was:

With regard to the *insert name here* web site, what unique word would you use to describe this site (i.e. “friendly”, “professional”, etc.)?

That really got me thinking about a user’s first impression of a Web site.  We’ve all done it…typed in that Web site address, the site comes up, and…what?  What unique word pops into your head first?

• “Wow” (good)
• “Wow” (bad)
• “Professional”
• “Old”
• “1990s”
• “Cute”
• “Colorful”
• “Informative”
• “Busy”
• “Loud”
• “Ouch”

What’s your Web site’s unique “word”?  That’s probably an unfair question to ask you, since you’ve seen it, you helped design it, and, let’s be honest, you may not want to criticize your own work.  So ask a family member or friend.  Send out a survey to your customers (Survey Monkey is a great survey service, and it’s free).  Customers will usually be straightforward and honest (unless you’re offering them a percentage discount for every positive response).

First impressions of a Web site are more important than you might think.  Our Search Engine Marketing team monitors all sorts of statistics about Web site visitors.  One of those stats that I’m most interested in is called “bounce rate”, which is defined by Wikipedia as “…a term…(that) represents the percentage of initial visitors to a site who ‘bounce’ away to a different site, rather than continue on to other pages within the same site.”  If your homepage has a high bounce rate (meaning, more people leave immediately than those who stick around), it could be due to that “word”.

You’ve heard the phrase, “Don’t judge a book by its cover”.  You could apply that thought to a Web site, but everyone judges a site immediately.  A user brings up your site, says “Ouch”, then hits the “back” button to get to their search results, and picks the next site.  There are probably hundreds of Web sites out there that do what you do.

Does your site’s “word” make a user run away to those competitors?  You know what they say:  “You only get one chance to make a good first impression”.  The great thing about the Web is, if your site isn’t making a good first impression, a redesign can start a whole new string of first impressions.  A redesign can help you start from scratch and do things right.  This time, you can grab a user’s interest and get their business.

What is your Web site’s unique “word”?

The Creative Design aspect of website design is often thought of as making “pretty pictures”. Yet, there is so much about the design process that isn’t about making a website pretty. I’ve never had a client tell me they want an ugly site, so yes, it should be pretty. But it’s not that simple. There’s a lot to be considered when designing a website.

Besides being nice, clean, and “pretty”, a website needs to be functional. You might think that being functional means that a website isn’t “broken”, in other words there is some aspect of the site that does not do what it’s supposed to do. But that type of functional is not what I am talking about. Of course, it’s a bad thing if a website is broken, but what does it mean to truly be functional?

For me as a designer, it means that all aspects of the website should work, and they should work well. The colors of the site should play well together and not be overwhelming or jarring. The graphics should be eye-catching, but not distracting. The page layout should flow in a manner that allows the user to quickly find what they are seeking. Navigation should be intuitive, easy to use, and not require the user to play a guessing game. The process of finding information or products on a site should not be akin to going through a maze, where the user finds themselves doubling back to return to the beginning in order to choose another path.

But that’s not all. I believe that in order for a website to truly be functional, it has to enable the client to accomplish their goals, by way of enabling the user to accomplish theirs. So when we begin a new project, the most important questions we ask a client are:

Who is the intended audience for your website?

What is the purpose or goal of your website, in other words, what do you want the user to accomplish while visiting your website?

Once we know the intended audience and their goals, it allows us to customize the design to fit those needs. But we can go further than just knowing the intended audience and their goals.

If the client utilizes our Web Marketing services, I can go visit my friend Jeff Pickle, one of our Web Marketing experts. Jeff can gather up all sorts of cool information using Google Analytics. He can provide me with various reports containing actual user data from the client’s current website. I can use this data to see things such as what operating system the majority of their users have, what browsers they’re using, and their screen resolution, just to name a few.

I can take this information and use it to make some critical decisions during the design process. For example, I can decide how much screen real estate I have to work with based on user data. For a long time, we’ve been locked into a space of 1024 x 768 pixels, because this was the screen resolution size of the majority.  But the current data trend from various client websites shows that a large portion of users are now using screens with a resolution higher than 1024 x 768. Since screen resolution is moving up, that means the “fold” –the place where the page content is cut off at the bottom of the screen so the user has to scroll to see the rest– is moving down. I’ve been keeping my eye on this trend, because it seems to be picking up speed and changing quickly.

This fact is an important bit of information because so many clients are afraid that if their pages are too long, the user will not see all the content and so they want me to try to get everything above the fold, which isn’t usually possible unless 1) your site has very little content, or 2) the content you have is all crammed together so that it looks confusing or cluttered. The best way to deal with the fold is to make sure one thing is clearly visible to the user:

Look!  There’s more content down there!

This is accomplished by signaling to the user that there’s more content below. It’s like when reading the front page of a newspaper. You can see when a picture or an article is cut off and so you know you have to look below the fold or flip the paper over to see the rest of the article or picture. The equivalent to this on the web is scrolling. The problem is that on the web, the fold isn’t fixed for all users like it is on a newspaper, so in order to be able to pull off this signaling trick, it helps to know approximately where the fold sits for the majority of a website’s users.

As an interesting side-note, did you know that we computer users don’t read the bottom of the screen? We glance at the bottom and if we see something down there, we scroll –as if instinctively– in order to bring it more towards the middle of the screen. Pay more attention to your scrolling behavior, and I bet you’ll notice that you do it too!

Wait… but what about the pretty pictures?

As it turns out, pictures and graphics matter more than most folks might think. Beacon’s Web Marketing tools allow us to see what types of information on a site is popular and what types of information is not. For instance Nicole Tolbert, another of Beacon’s Web Marketing experts, discovered on one of our Web Marketing client’s website, that an overwhelming number of users clicked on a graphic containing a photograph coupled with copy, but the graphic didn’t take them anywhere because it wasn’t a link to more information. Obviously, the users were thinking if they clicked the image, it would link them to a page with more information, but that wasn’t the case. So in the process of creating a new design, we were able to take into account that their audience is drawn to graphics containing photographic imagery with text, so to capture their audience, we needed images with text that linked the user to more information.

So sometimes good web design IS about the pretty pictures!

If you’re a developer or have ever messed around with html and style sheets you will know that getting it to look the way you desire isn’t always the easiest job. What’s worse is when you finally get it perfect just to find things are much different in other browsers. Personally I use a variety of tools when developing and quite a few specifically for cross browser testing and ensuring an exact design to development match. These tools include:

General Browser Testing:

Spoon.net – http://spoon.net/browsers/

This website will allow you to run a variety of browsers as if they were installed on your computer. This is by far the best overall browser testing tool I have run across.

IE Tester – http://ietester.com

For general testing in Internet Explorer I often use IE Tester as a quick check to ensure all development is coming along as it should in Internet Explorer 6, 7 and 8. I also like the Dev Tools offered in this software that allows me to get a closer look at the code.

Specifically for Matching Design to Development:

Pixel Perfect – http://www.pixelperfectplugin.com/

This is one of my favorites, it is a Firefox add-on that allows you to overlay the design image on top of the developed HTML to match it up Pixel Perfect.

Microsoft Expression Web 3 SuperPreview – http://expression.microsoft.com/en-us/dd819431.aspx

For internet explorer I use the trial version of Microsoft Expression Web 3 SuperPreview. It allows you to overlay the design image on top of the developed HTML like the Pixel Perfect Firefox add-on.

We are ready. We are ready for a great 2010. This will be the most exciting year ever for Beacon Technologies and a very successful year for our Clients!

Why will 2010 be so great? Our People.

I am a Business Development Manager here at Beacon. I have been selling Beacon’s quality solutions for over 10 years and I have always been proud of our work with our focus on:
• Website Design and Development
• Web Marketing Services with Google Analytics
• Cascade Server CMS Development
• Managed Hosting

This year will be great for many reasons but the most important reason is the people working here. Never before have we been so smart with our approach, strategy, solutions and most importantly our people. We have very carefully and selectively grown our Web Marketing Team and we can confidently put our team up against the best web marketing minds in the business. We have an exceptional team of very smart, energetic, innovative, team-focused, and personable marketing experts. Beacon’s clients are now receiving expertise from a large group of experts that work as an organized team with synergy and collaboration.

I am confident that we can provide you with a well organized, carefully considered, innovative strategy! Our goal is to deliver a strong ROI so you want to continue to invest in our support.

Our Web Marketing Services include:
• Business Consulting
• Organic Optimization
• PPC Pay-Per-Click Management: Adwords Qualified Company
• Google Analytics: One of a handful of GAACs in the U.S.
• Website Conversion Optimization: One of a select few GWOs
• Return on Investment Reporting and Analysis
• Social Media Marketing: We have creative and innovative expertise on staff to support your SMM efforts.

Call me to talk about your business.

Patrick, 336-232-5668

Patrick Flanagan

pflanagan@beacontechnologies.com
# 336-232-5668

1. Multimedia– http://www.sebts.edu/news-resources/multimedia.aspx
2. News feed (RSS)– http://www.nctechnology.org/
3. Homepage animation– http://www.enduraproducts.com/
4. Product gallery– http://acfurniture.com/products/gallery.asp
5. Color– http://www.trailways.com/
6. Photography– http://www.grandover.com/
7. Interactive maps– http://www.bassettfurniture.com/store-locations/locations.asp?state=all
8. Interactive seating charts– http://gsohoppers.com/gameday/seating-views.asp
9. Dynamic product swatches– http://www.printaballoon.com/p-17-basic.aspx
10. Multilayered calendaring– http://www.greensboroaa.com/calendar/events/CalendarView.aspx

 We did a quick theme we think you’ll enjoy inspired by a hot new trend in photography, light graffiti, check it out!

 Light Graffiti WordPress Theme

So, you want a new website but are not sure how to get started. As nicely stated in Dr. Seuss’ whimsical book Oh, the Places You’ll Go!, “Don’t get stuck in the waiting place.” Beacon Technologies is here to help. “Somehow you’ll escape all that waiting and staying. You’ll find the bright places where Boom Bands are playing.”  Well maybe not Boom Bands necessarily, but first-time site visitors for sure.

Beacon does so many things well. One of them is consulting with our clients to help them define a website that is meaningful for their business; whether you want to capture leads or use eCommerce to sell products. Utilizing many years of experience and learning from previous mistakes, our team has a knack for asking the right questions. First, you must determine what the primary goals and purpose for your website are. Ask yourself, who is the target audience?  Maybe you have multiple audiences with different needs. What message do you want to communicate to your visitors? What should your website say about your business? Is it the same message for each audience type? What do you want your visitors to do or learn when they come to your site? These questions might seem obvious at first, but I challenge you to browse the Web and note just how many sites were designed and written from the company’s point-of-view versus the audience’s. Answer these questions “And will you succeed? Yes! You will, indeed.”

What’s next? What do you want the new site to look like? Do you have a color palette in mind? Do you have any print material that can be used for continuity on the website? Do you want your site to be interactive or more static? Look at other sites you like and select your favorite elements from each. Beacon will find a way to mesh all your ideas into a customized, unique design. “Oh, the Places You’ll Go!”

This is just a starting point. Together we will succeed. Take Dr. Seuss’ advice and “get on your way!” Contact Beacon Technologies today.