We’re proud to announce the release of the Greensboro Housing Authority redesign!  As always, Beacon was right on-time with our deliverables, which is always our goal.  The client chose a soft launch date of December 1, 2011 because they wanted to show the new site to their Board of Directors at their annual meeting that day.

Their Web site was designed and constructed in-house several years ago, which meant that it was time for a completely new look.  The site also had content that was very out-of-date, so the client took it upon themselves to do a complete rewrite of the content, and restructure the site to be more intuitive.  Also, they wanted to get away from having to update the site by-hand using HTML, and wanted it in a content management system.  Finally, they wanted a new Web hosting partner.

Enter Beacon:

• We provided them with a brand-new graphical design;
• Developed it to display perfectly in multiple browsers;
• Implemented the new site into Cascade Server (content management system) to allow multiple users to update the content with an easy-to-use solution;
• Incorporated a new search feature;
• Imported approximately 60 pages of content, including 20 fact sheets about each of their properties;
• Transferred their Web site to a shared hosting package here at Beacon.

Several Beacon staff members made this project a success:

• Wendy:  Without much direction from the client, Wendy put together a design that they liked on the first try, which is phenomenal.
• Stephanie:  She was instrumental in getting the project off the ground, attending the initial meetings and providing meeting notes, the business requirements, and proposed site hierarchy.
• Zed:  He was thrown into the fire, as this was his first development project here.  He developed the front-end HTML/CSS/jQuery, and implemented the site into Cascade Server (which he picked up on very quickly), and entered most of the content.
• Tiffany:  Provided assistance and training to Zed.
• Justin:  Project Management and Cascade Server documentation & training.
• Beacon’s Technical Support Group (TSG):  And finally, no site hosting transfer is complete without the efforts of TSG, specifically Caleb and William, for setting up the hosting and troubleshooting some DNS issues over a weekend.

This is another high-quality design to add to our portfolio, and another non-profit site we can be proud of.   Thanks to everyone involved!

Before

After

Our website hasn’t been updated in 3 years.  Way too long, but updating our own website always takes a back seat to our client work – which thankfully has been plentiful during this period.  The last design was fantastic and I struggled with the idea of replacing it.  However, it was time.

When I consult with businesses about web technology and marketing, I always talk about the “leap of faith” that exists for a buyer when choosing a vendor.  No matter how you look at it, there’s an element of trust here.  Can the vendor really do what it says and deliver as expected (on time and within budget)?  I believe you narrow this “leap of faith” through credibility, which is something we wanted to emphasize with our new site.  Additionally, we wanted to practice what we preach with ties to social media, video, map features, case studies, dynamic phone tracking and web marketing tactics.  As with any website (and as a good marketing approach), it’s important for visitors to quickly understand how our services will help their business, rather than just see a listing of services.  Simply put, it’s about what they get, not what we do.

I’ve been in the IT business a long, long time.  Prior to starting Beacon in 1998, I was with AT&T for 15 years, the last few years of which, leading the development of its global corporate intranet (custom-integrated into Peoplesoft).  The growth in web technology businesses has been incredible since then, which certainly isn’t a surprise.  However, I’m surprised at how many web companies profess to be experts by using their websites to list all the things they “can” do without any strong credibility references.  Hey, I completely understand that any new business has to earn and build up credibility.  Been there.  Done that.  You just don’t start with it, so consequently, you must market the expertise of your staff because that’s all there is.  But at some point there has to be a shift.

I guess that’s why I’m so proud of this new website.  It represents 13 years of hard work that has led to growth, stability and credibility.   We removed the flash content and made the message very straight forward.  Web Development, Web Marketing & Web Hosting.  Automate, Grow & Connect your business.  The map on our new home page shows our reach across the United States.  It clearly accentuates our valued relationships with strong, well-known companies like Google, AspdotnetStorefront (ecommerce system with thousands of implementations), Hannon Hill (Cascade Server CMS, used by hundreds of Universities and businesses), Bridgeline Digital, Dell, LabTech and TW Telecom.  SEO friendliness has been improved through better page sculpting.  You will also see links to a few of our prominent clients in each area of our business.  Over the years, Beacon has also had the pleasure of serving as a subcontractor for Accenture, Lockheed Martin and KPMG Consulting.  Although these relationships certainly lend credibility, we elected not to highlight these because we no longer focus on federal government projects.

I particularly like how our web design team integrated social media into the new site.  Our blog is very active with regular, diverse posts from our staff.  Our video really shows the personality of our team.  And of course, we connect to the world through Facebook and Twitter as well.  On the lower tier pages, you will see some of our clients highlighted in each section and, if you mouseover any of their logos, you will get a few details of what we do for them.  We also included a section for links to pertinent content related to each section, which we initially connected to many of our blog posts.

Our website is a sales and marketing tool.  When prospective clients come to our website, I want them to know that we’ve been doing this for a long time, we are good at it, we don’t outsource, we have a good track record, we are a long-term web technology partner and we have many credible, recognizable clients that can attest to this. 

“Where were you in 1996? If you were in cyberspace, surfing the World Wide Web, chances are you were waiting a long time for pages to load, laughing at the first Internet meme and suffering through some god-awful graphics.

My, how times have changed!”

Read the full article on Mashable...

Infographic courtesy Online University

Beacon Technologies just completed a redesign of the Texas A&M Foundation Intranet. In addition to visual updates, the site received usability enhancements and organizational features.

Here are some project highlights:

• The site is secured using both .NET permissions and an authentication method (Central Authentication Service) used by the University and allows multiple levels of security—from “guests” to management level. GREAT JOB MIKE!
• Bulletin board system for FAQs and Q&As as well as “fun” applications like trading tickets and recipes
• Integration of Google calendar, including downloadable events and calendar filters (See below.)
• Internal blog to enhance internal communication
• Beautifully designed and informational employee profile pages (See below.)
• Bookmark utility that visitors can use to save pages
• A-Z index for alphabetical listing of site pages as well as traditional site map
• CMS form creator

The client is thrilled with the results and we’d like to give credit to everyone on the software development team that was involved in the project! This is the Foundation’s eighth project with Beacon.

BEFOREAFTER

I recently provided a client with a list of non-flash animation options (a.k.a. JavaScript plug-ins) for their new home page banner image area. My good friend Wendy Honeycutt came up with a great list that I thought I’d share:

• http://tympanus.net/codrops/category/tutorials/
• http://tympanus.net/Tutorials/HoverSlideEffect/
• http://tympanus.net/Tutorials/CompactNewsPreviewer/
• http://www.serie3.info/s3slider/demonstration.html
• http://galleria.aino.se/
• http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html
• http://css-tricks.com/examples/StartStopSlider/
• http://www.sohtanaka.com/web-design/examples/image-rotator/
• http://jqueryglobe.com/labs/slide_thumbs/

*Note: most JavaScript plug-in apps are customizable. Thus, the speed of image rotation, background colors, font styles, and transparencies can be adjusted.  Some really cool stuff out here!!

What are your favorite sites for JavaScript plug-ins?

Well sadly, this is my last blog post at Beacon.  It’s been a great 10 weeks.  I really have enjoyed my time here.  Looking back, I can’t think of anything negative to say about my experience.  I want to take the chance to kind of do a recap of my time here.

When I came in the first day, I will admit that I was pretty nervous.  I hadn’t really had a lot of exposure to the kind of work that Beacon does so well.  I knew what most of the terms were from talking to a friend of mine who has been doing similar work.  However, the WMS team here helped me learn the skills I needed.  Everyone took time to show me how to do certain tasks and helped me with understanding the clients I worked on as well as what needed to be done for each client.  As the weeks have gone by, I have grown more confident in doing SEO work, managing social media campaigns, and working with PPC campaigns.  I know that I still have a lot to learn in these areas, but Beacon has given me a strong foundation on which to build.

I know that people traditionally think of internships as being filled with a lot of grunt work.  Getting coffee, running errands, doing tasks that no one else wants to do themselves.  That is far from the case here at Beacon.  As you can tell if you have been following my blog posts thus far, I have been an equal member of the WMS team.  I have shared the same responsibilities as everyone else.  I’ve done the same tasks for my clients as they did for their clients.  Often times, interns don’t get to offer advice and feedback during meetings as it is intended that they learn by watching.  Again, this is not the case at Beacon.  The WMS team meets weekly to brainstorm ideas for clients as well as share interesting articles or other helpful information and tools.  The leading of the meetings rotates each week and regardless of the fact that I am an intern, I led the meeting twice during my time here.  I also contributed equally with the team as much as possible.  I will admit that I often did sit back and listen during meetings.  I know that I do not have nearly the amount of knowledge or experience in this field, and as such I wanted to try to learn as much as possible when everyone was together sharing ideas.

Looking back, I have gained a lot of valuable experience.  There are several tasks and projects that I was able to work on and contribute to during the 10 weeks.  I can honestly say that anyone who is looking for an internship should consider Beacon.  The atmosphere, company culture, and employees all lend themselves to a great work environment.

Thank you to everyone here!  It’s been a great experience and I have learned a lot from you all.

When working on a new web site design, I often have projects where a client is interested in having a nice background pattern or texture as a part of their design. I recently found a great tool that makes background images extremely easy:

http://bgpatterns.com/

With this tool, you can choose a background texture, image pattern, foreground color, and background color. You can adjust the opacity of the image pattern, scale the image pattern to change the amount of spacing between the pattern repeat, and rotate the pattern.

You can preview the background image and continue to tweak it. Once you have the look you want, just click the download button, and you will get repeatable .png.

It’s so easy! I <3 this tool!

I attended a Webinar hosted by Vortx recently and had a chance to learn a few things that can affect conversions of shoppers.

1. 75% of shoppers use the search box to find products. They pointed out that the top 10 e-tailers all have the same style search box: a long narrow search box prominently displayed in the header.

2. You have 7 seconds to impact a shopper with the product detail, after that they will typically go to another product.

3. There are 3 main pieces of information shopper want to see quickly:

• Product Image
• Product Description
• Pricing/ Add to Cart

These items need to be clearly defined and prominent. Add to Cart button should be above the fold and use a color scheme to draw the eye to it.

4. The use of tabs is fading, major e-tailers are no longer using them to convey information.

An HTML email is just a basic web page but even if you are able to code complex websites, coding an HTML email is not an easy task and can be extremely frustrating. I have put together a list of things to keep in consideration when designing your email.

Keep it simple

You have to remember this is just an email. Do not try to embed an entire website into an email. Keeping it simple and staying focused on the message will make your email more appealing to the recipients and it will load smoother across all providers.

99% of CSS won’t work

Most browser based email services will strip out all CSS in your HTML that could potentially override the CSS on the rest of their pages. So that means no external styles sheets or embedded style sheets. Use very basic inline CSS (ex. <p style=”background-color:# 000; color:#FFF”>) and be prepared for even that not to work in all web mail services.  Also most web mail services ignore background images. So it is best to only use background colors.  The safest way to add styling is to use plain-old HTML attributes. (ex. <body bgcolor=”#FFF”>). Below is a list of inline styles that you can use and the email service providers they are compatible with.

Code Old School

When building your email template you have to code old school. Jump back to 1999. Remember all those tables, tr’s and td’s? Well get ready because when building an HTML email that is exactly what you will be doing. The code should be simple and hand coded rather than in a WYSIWYG editor. This ensures the code is clean and only includes supported elements. Use table layouts. No nesting or merging cells because layouts with positioning don’t work.  Use basic HTML attributes and font tags.  Test your code often in different mail services to see that everything is working consistently.

Think small!

This is only an email so keep it small and simple.  An email template should always be no larger than 650px wide. Most people view messages in their preview panes, which are narrow and small.

Images should be limited

Only use the images that you have to. Images are fine as long as there is also text within the email. All images should use absolute paths and be hosted on your server. This makes it possible for the images to load quicker and not be attachments in the email. Having to many images will cause your email to be marked as spam and never make it to the recipient’s inbox. Some email programs turn off images by default. So if your email is one giant image, the recipient will have to check a box to turn on images before they even see your email. Many won’t take the time to do this so make sure your emails are designed to still get the same message across in text if the images are never turned on. You can also provide a link at the top of your email to the HTML page on your site of the email. This will allow the recipient to view the full email if it is not displayed properly in their mail service.

Webmail services are tricky

Email services that are browser based (Gmail, Yahoo!Mail, Hotmail, etc.) are tricky. They will strip out all your DOCTYPE, BODY and HEAD tags. Anything you normally code inside those tags will be gone so plan for that when building your template.  There are many other inconsistencies that you will discover while testing in theses browser based services. See chart above as a css reference. If you can, try and code using html only.

Plain Text Format

It may seem obsolete but many people still prefer to view emails in plain text format instead of HTML emails or there email is unable to open HTML emails. Spam filters will also penalize you for not including a plain-text version of your email.  So always make sure you take the time to create a plain text format of your email.

Don’t forget to Test!!!

Just like after any other development process, TEST! Start out by setting up as many webmail test addresses you can (Gmail, Yahoo!Mail, Hotmail etc.) and install several desktop email programs (Outlook, Apple Mail etc.) for testing. Make sure you thoroughly test the email in as many sources as possible. Most likely the email will look slightly different in each one and there may be some issues you will have to fix. The key is to design with clean simple code so you have few testing errors.

What will the future hold for web design? Smartphones and tablet sells have hit an all-time high which means mobile web is beginning to grow at a fast rate. Social networking sites like Twitter and Facebook have become a great way to not only connect with friends and family but to connect with companies and consumers. And with new development tools like CSS3 and HTML5 on the horizon we may be looking at a whole new way the web is designed. So what is 2011 going to bring for web design?

Mashable.com released an article at the beginning of the year with four Predictions for Web Design in 2011.

To read the full article: http://mashable.com/2010/12/30/web-design-predictions/