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/

PINES International, “The Wheatgrass People” just launched a newly developed ASPDNSF site Beacon Technologies was involved with the design, development, SEO set-up and launch.

A couple of unique features of this site:

• Customized promotion add-on that allows the client to set “volume discounts” (buy $40, get 10% off; buy $50, get 20% off; etc.) and notifies the customer on the checkout page with how much more needs to be added to meet those levels (“Buy $10 more to get 20% off!”)

• Extensive use of “topic” pages to provide customers with static content about the company, site and products

• Site search indexes topic pages as well as products

• SEO Friendly

• Client can modify entire header area of site via topic page in Admin

Great work Beacon Team!

I have been in the information technology world since 1981 when I wrote my first programs as a student at Wake Forest, then later as an intern at the NC Dept of Agriculture and throughout my career with RJ Reynolds, AT&T, as a student at Kansas State and now with Beacon.  In 1998 when we started Beacon, there were a few web development companies out there, but now they are EVERYWHERE!  All of them claim to be the best.  I know, I know.  That’s just business.  I have talked with hundreds of business leaders with respect to web initiatives over the years.  To no one’s surprise, the four main factors that drive the decision to select a web development/consulting firm are (1) Price, (2) Experience/Capability, (3) Delivery Time, and (4) Relationship / Support.  I believe we are very good at what we do, but by no means are we perfect as there is always room for improvement.  But having been in this profession for over half my life, I thought it might be worthwhile to share some of my experience-based thoughts on what good web development entails.  Of course, this isn’t all inclusive, but a solid foundation.

Website Development Facts:

1. For business purposes, it is NOT so simple that “a caveman can do it”.
2. Every website is a custom website.  Cost increases with the level of customization and volume of content/products.
3. You get what you pay for.  Cutting corners, having your nephew build the site, trying to build it yourself when you have time usually produces poor results.  Take the time to do it right.  Prioritize all your requirements and desired features.  Establish a realistic budget and share it with your vendor.  Ask them to provide as much as they can with that budget without sacrificing quality.  Push lower priority requirements to a future release.
4. Every website has a “Blueprint” Phase and a “Construction” Phase (most expensive of the two).  A good blueprint keeps the construction costs down and prevents re-work, so take the time to do it right.  Breaking these two phases into separate projects (contracts) works best.
5. Web development, hosting and marketing depend on each other.  It is a BIG advantage to have a single vendor that is strong in all 3 areas with good customer support.  One number to call for any web-related issues.

 Website Types:

1. Marketing (Informational, lead-generation)
2. Storefront (Ecommerce, online revenue generation)
3. Activity-Based (Custom Applications, Blogs)
4. Mix of the above

 Website Development Differentiators:  Good firms will not only discuss your specific needs, but will also share current trends, brainstorm new ideas and proactively cover the following (at a minimum), while constantly providing ideas and consultation.  If your web development company is sitting there waiting for you to tell them what to do, find another firm.

1. Cross Browser Compatibility:  Will your website operate in ALL the most current popular browser versions?
2. Updates to the website:  I’ve NEVER seen a website that didn’t need updates from time to time.  How will updates be handled and priced?
3. Content Management:  There are many, many content management systems on the market.  Of course, they vary in price based on features and functionality.  One size doesn’t fit all.  No reason to put a monster engine in a VW bug, nor a 4-cylinder into a Corvette. 
4. Coding for search engine visibility (SEO):  It’s one thing to create content for a web page, but a whole different thing to make the site search engine friendly, using meta tags effectively, the right keyword density, SEO landing pages, internal linking and much more.  You can’t just build a website and expect the world to find it.  You have to know how to construct it so the search engines “like” it…and I’m not talking about a Facebook “Like”!
5. Professional/Creative Web Design:  The old saying is quite true… You never get a second chance to make a good first impression.  Your website represents your business.  People don’t read content as much anymore.  This is why using the right imagery with easy navigation is important.
6. Calls to Action:  Ask yourself, “What do I want people to do when they come to my website?”  Is there a strong call to action that facilitates this?  And how will it be tracked?
7. Analytics:  I frequently say, “you can’t manage what can’t measure”.  MAKE SURE you have some sort of analytics tool (preferably Google Analytics) to track visitors, conversions and much more.  Your website is another Sales Rep – make sure it is performing well.
8. Site Search:  Is a site search tool included and is it appropriate for your site?  It is vitally important.
9. Hosting & support:  If your vendor also hosts your website, can they also host your email and provide spam filtering?  Are redirects being used appropriately?  What happens if a page isn’t found?  Do they check for broken links regularly?
10. Local web marketing:  Will your vendor help with optimizing your listings in Google Local, Places, Maps…and other standard local venues?
11. Integration:  Does your website need to integrate with 3^rd party or back office software?  Accounting?  Shipping?  Order Management?  CRM?  Will experienced engineers be available to discuss critical requirements.

 Choosing a Website Development Partner:  When you select a website development firm, there is always somewhat of a leap of faith.  Like any profession, there are good firms and bad firms. Minimize this leap by considering the following:

1. How many years have they been in business?  Demonstrates financial stability, success and peace of mind that they have not only been providing these services, but will be around when you need them in the future.
2. Look at their portfolio.  There are so many firms out there that showcase relatively unknown clients.  There’s a reason for this – especially if they have been around for a long time.
3. Read their blog and Facebook page.  It will tell you a lot about their breadth and depth of skills, their people and their personality.
4. Do they outsource or do everything in house?  Nothing against outsourcing, but I’m a big believer in minimizing the number of costly middle-men.
5. Ask about who’s doing the work.  Does one person handle project management, creative design, development, testing, SEO and implementation?  I have yet to meet a person who is an expert in all of these areas.
6. Ask for example deliverables.  Can they provide examples of a project plan and any other deliverables that are created prior to development?  The website is NOT the only deliverable.  Houses aren’t built without a blueprint, neither should your website.
7. Ask about communication.  Will your primary point of contact be a Project Manager or a Developer?  Can you meet this person?
8. Ask about the creative design process.  How many design-and-review iterations do they provide with respect to the website design – so that you can see the creative design(s) and request modifications?
9. Ask about the CMS and eCommerce software options.  Are they locked into only one of each or do they have more breadth of experience and alternative options to meet your price and functional requirements?
10. Ask how they test the website before it is launched.  Do they have a formal “User Acceptance Testing” process – so you can check everything out before it gets launched?
11. Is the firm a good fit for your business culture?  Does the relationship “feel” good & honest like the firm cares about the success of your website?  Or do you feel like you are just part of an assembly line.
12. Ask about post-launch support.  Who to call?  Pricing?  Expected response time?  After hours?  Ticketing system to insure your request is logged and monitored to completion?
13. Do they really provide their own hosting services or do they use a 3^rd party?  Ask this 3-part question:  Where is the web server located that houses my website?  How often is server maintenance performed and who performs it?  I’ve seen a lot of finger pointing between hosting firms and development firms over the years.

 Website Development Budget:  For us, every project is quoted separately  There’s always exceptions, but here’s a “Rule of Thumb” table that I have put together based on several hundred projects we’ve performed over the years.  I hope this helps to some degree with your approach to web development firms.

*Small:  option to pay monthly
**X-Large: businesses w/ large product catalogs, universities, etc (thousands of pages) that require careful planning and coordination with internal decision-making groups. Many times these projects require integration with existing legacy systems and/or 3^rd party software.
***Duration is dependent on the availability of resources, number of resources working concurrently and the client’s availability & delivery of content.

I recently did some development for Winston-Salem State University‘s Google Search Appliance. Getting started was a bit tedious, requiring the analysis of 3600 lines of XSLT. This post aims to get you working where you need to quickly style and construct the page contents of the Google Mini.

After navigating to the Stylesheet Editor within the administration console of the Google mini, I recommend copying the contents over to a text editor such as Notepad++. The Google Mini will give you the line that errors occur on, however, there is no line count in the simple editor.

The Mini’s code has a few main stylesheets that we are going to focus on:

• Global variables
• Global styles
• my_page_header
• my_page_footer
• swr_search
• front_door
• advanced_search
• search_results

These can all be found by doing the following searches respectively (CTRL+F) in the document:

• Logo setup (can be customized)
  • Note: Continues through ‘Global Style variables (can be customized)’ section
• Result page components
  • Note: Continues down until line ~200 and XSL variables end.
• <xsl:template name=”my_page_header”>
• <xsl:template name=”my_page_footer”>
• <xsl:template name=”swr_search”>
• <xsl:template name=”front_door”>
• <xsl:template name=”advanced_search”>
• <xsl:template name=”search_results”>

The global styles and variables are worth a quick look, however most of the default settings are pretty suitable. Be sure not include semi-colons in the CSS values.

First, we want to look at swr_search, front_door, advanced_search, and search_results. In each of these templates, you want to add your content directly after:

	<xsl:call-template name="langHeadStart"/>
	   <title><xsl:value-of select="$swr_page_title"/></title>
	<xsl:call-template name="style"/>

You do not have to provide an opening or closing tag as the Mini appears to generate this with ” ” and ” in all four of these sections. Within your tag just below “landHeadEnd”, you should have the following:

    ...
       <xsl:call-template name="my_page_header"/>
       <xsl:call-template name="RESPECTIVE SECTION"/>
       <xsl:call-template name="my_page_footer"/>
    ...

Consider the following basic XHTML template:

    <html>
    <body>
       <div id="topnav"></div>
       <div id="wrap">
          <div id="leftnav"></div>
          <div id="content">
             <!-- LOCATION FOR SEARCH AREA CONTENT -->
          </div>
       </div>
       <div id="footer"></div>
    </body>
    </html>

Now visit the “my_page_header” and “my_page_footer” sections. The above XHTML would go into “my_page_header”:

    <div id="topnav"></div>
       <div id="wrap">
          <div id="leftnav"></div>
          <div id="content">

And the rest into “my_page_footer”:

       </div>
    </div>
    <div id="footer"></div>

The calling sections that we first visited will populate the content area with your template constructed around it. If you need to modify the global styles further, although its is not recommended in the comments, you can search for “Global Style (do not customize)” and make additional modifications to the classes and Ids used by the default stylesheet. Additionally, if you want to remove the use of global styles altogether do a search for “” and comment it out in the respective sections you want it to no longer apply. Although its a hassle, I recommend copying and pasting back and forth between the Google Mini and your editor every few minutes and submitting the changes to debug for errors. The GSA will only give you a single error at a time, so if you there are multiple errors it requires multiple submissions and edits until you get it to validate–Much better just to test it as you go.

Beacon Technologies just successfully launched another ASPDNSF site for Mattress King. This was a big team effort, with assistance from virtually everyone on the TSG and SW Development groups. For several people, this was their first experience with an ASPDNSF site and they picked it up in record time and with much success.

Here are some interesting features used on this site:

· Rotating home page images that the client can maintain in Admin site.

· Filtered product listings page (“Narrow Your Results” in left nav).

· “Tabbed” product detail page.

· Nicely formatted “Store Locations” page.

· Customer Video page.

I have to share this with you.  If you are reading the Beacon Blog you are likely a customer of ours, an employee, a friend, family member, or perhaps a future customer.  Regardless, you likely have some interest or association with web technology.

I want you to visit a website today.  This is the first ‘website’ (if you can call it a website) that I have seen in the past 10 years that simply blows me away from a creative perspective.  I have spent the past 10 years consulting and supporting Marketing Directors and I have never seen such a creative idea.  At first I was confused and skeptical.  But after 15 seconds or so I started to understand it and I am impressed.  The site is wildly creative.  It won the 2010 Webby Award for Professional Services category.  It is highly creative and fun and fascinating and it certainly created a buzz for this Agency.  Our industry is constantly evolving and it is great to see new and creative ideas.

Now you may be confused and think that I messed up this link but trust me, the link is working correctly.   Go visit the site today, BooneOakley at: www.booneoakley.com

Beacon has an exceptionally creative team of designers and we are constantly meeting and exceeding the demands and expectations of our clients!  Call us and lets strategize about your future website.

For more information about Beacon Technologies and our web services, please contact me at 336-232-5668.

Patrick

Patrick Flanagan, Business Development Manager

pflanagan@beacontec.com

336-232-5668

Having great products does not always ensure that they will sell on a websites.  Listed below are some best practices to  guide your visitors in the right direction.  Remember that your e-commerce site is not an online catalog, but rather a place for visitors to learn more about your company and to engage with your products  interactively.  In order for any company  to sell merchandise or a concept on the web, demonstrating credibility and earning trust are absolutely essential.  Visitors are most comfortable when they believe asite is secure and/or offers an excellent warranty; therefore, such information should be highly visible.Building trust from better known brands through testimonials and such are also effective measures and make visitors feel that much safer..   For most e-commerce websites, the three most important types of pages are the homepage, the category pages, and the product detail page.

Best Practices for the Homepage

• Remember: the primary purpose of your homepage is to provide a means for visitors to navigate themselves.
• Do not develop the entire site in flash.
• Do not provide too many choices for customers.
• Do not bog crowd the page with too many promotions that distract visitors, and  do not make the primary focus rely too heavily on one product’s promotion if the company carries several lines. This advice is to prevent visitors from becoming confused and/or distracted; consequently, they may neglect to view the full line of products and such. A good example would involve sales of clothing for the entire family, but having only one image of boys’ jeans listed on sale. Better conversions would occur if new new visitors could easily identify that the product line extends beyond boys’ denim; the visitor can find items for the entire family.

Best Practices for the Category Pages

• People tend to process images seven times faster than they do words, so use images to divide your categories or different product lines within your categories.
• Try not to place  too much content on these pages; save it for the product detail pages.

Best Practices for the Product Detail Pages

• Make sure there is a clear call to action.
• Provide enough detail for customers to feel comfortable about purchasing products on the spot.
• Use high quality images
• Take advantage of social pushes (the Facebook “like” buttons, a share button, etc) to move items infectiously by gaining exposure with large numbers of viewers.
• Though users are more comfortable using their scroll bars, 76% of all clicks are still above the fold; therefore, make sure to position major calls to action above the fold.

I recently enjoyed reading this article on “How to Design for Video” from the Human Factors International monthly newsletter. More and more of our clients are requesting a video presence on their web site and it looks like they are right on track!  Here are the author’s conclusions (which we at Beacon have experienced as well):

1) TV sites tend to place additional links close to the video image. This concentration of links requires less eye movement than used on news sites where articles are spread across the page. Therefore, consider how you can offer similar clusters of links that give your reader greater eye-scan “efficiency” than with newspaper homepages. Consider how you can concentrate links to allow “one-stop shopping” for the next viewing event.

2) Likewise, consider placing videos next to text articles that relate to the videos. Readers can rapidly digest short videos that support the text. For articles about people, readers can use the video to uncover the “personality” otherwise hidden by the textual presentation. This provides greater depth of coverage.

3) Insure that your high-level navigation gives access to your videos, if other means will not expose viewers to the video right away.

4) Be consistent in your placement of elements across your pages. The research found that site visitors tended to use the same scanning pattern across websites. Therefore, end-users expect to find certain things like advertisements, groups of links, articles, videos, and pictures within each region (B, C, D and E) of your pages. Fulfill those expectations.

5) In your newspaper site, reduce scanning variability (and thus added work for the viewer) by grouping links in the upper regions of the page in a consistent manner across pages. Basically, take a page from the playbook of video sites by clustering links near a picture or video above the fold.

6) Insure that the upper regions in both TV and newspaper homepages provide both page orientation and navigational cues. This cues your end-user and reduces wasted eye-scans used in looking for those cues.

7) Initial fixations occurred in the browser bar and in the site branding areas. To make information foraging more efficient, put other links and link groups directly below those areas.

Here’s Beacon’s recent video– we’ve had a very positive response!  Can you find me in three spots?  No, that’s definitely not me on the scooter, in case you were wondering!

-Annette

I’ve spent the last two weeks system testing a large ecommerce site that we are about to launch.  Testing is a vitally important phase of a project here at Beacon and something we don’t take at all lightly!  We usually build a minimum of two weeks into the time line for internal testing and two weeks for client testing, if the project plan can possibly accommodate it.

Don’t forget the following steps when doing your own site testing:

• Test in multiple browsers– It is not good enough to view the site in the browser that you, or your developers, most prefer.  You MUST view the site as your customers will see it, and unfortunately different browsers (and versions of browsers!!) can produce massively different results.  Based on current browser statistics, Beacon currently system tests the entire site in Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Firefox 2, Firefox 3, Opera and Safari.  Though Beacon tests the site with actual installs of each browser on separate computers, you can also consider using a browser emulator like Spoon.net, though be aware that the simulations aren’t always “perfect”.  For even more info on cross-browser compliance testing, please see my co-worker’s blog on the subject.
• Test the site without Flash enabled– If your site uses Flash animation at all, you need to test how it will function without that plug-in enabled.  All Flash players should display a static image and warning to download Flash if it is disabled or an older version.
• Test the site without JavaScript enabled– If JavaScript is required for your site to function correctly (make sure search engine bots will still be able to crawl it!), at least inform the visitor with a message if the browser detects that it is disabled. 
• Test the print view of the site– It is always helpful to the visitor that wants to print a page of your site, if you provide them with a “print-friendly” view that doesn’t waste a lot of ink and paper on navigation, background images, etc. that they won’t need in a printed copy.
• Make sure the logo in the site-wide header links to the home page– This has become an industry standard but is sometimes forgotten
• Check for accessibility (minimally alt tags on all images) and 508 compliance, if required– Not all sites require these standards, but don’t abandon visitors that use non-traditional methods of browsing the web (like screen-readers)!  Use http://www.w3.org/WAI/ and http://www.section508.gov/ as guides.
• Check to see if the order of tab entry in forms makes sense– Not all customers will use their mouse to click through a form.  Make sure that if they choose to use the “tab” key to navigate from field to field, that the order makes sense.
• Make sure all external links and PDF files open in a new browser window– Don’t you hate it when you finally find the info you need on a site in a PDF and when you are done reading it and close, the site disappears?  Prevent this by always opening links to other sites and internal PDF files in a new browser window so that your site stays open in the background.

With these tips and, most importantly, devoting time and effort to testing, I hope that you will have a very successful site launch!

-Annette

We sometimes become so lost in colors, buttons, navigations, keywords, and KPI’s that we forget for whom we are building optimized landing pages.  Let’s return to the basics of Website Making 101.  For starters, the websites we make and optimize are not for us; they are for our customers.  They serve as the tools the end users utilize to learn and engage with our clients and ourselves, so they need to meet their needs and appear in a way they like. When entering a website, visitors want to feel comfortable; therefore, we need to provide them information in a clear and easy way that will make them happy and confident enough to spread the word.

All landing pages, which for the record are any pages someone lands on—organic, paid, or whatever, should have the following:

1)      A call to action or focus of the page

2)      Information for the user

3)      Images to draw their eyes

4)      Contact information for support; you must be available with nothing to hide.

When you have a larger website, it can often be an overwhelming challenge; nevertheless, you should always be testing.   To make sense of the chaos, I recommend you do the following:

1)      Data mine for pages to focus on that are non-converting, high-traffic pages. Research their current conversion performance metrics as a benchmark.  You need to know your base conversion rate before you try to improve it.  This way the numbers speak for themselves.

2)      Learn about how current visitors react to these pages.  We eat, sleep, and breathe Crazy Egg to see where they are clicking to know what they deem important to them and better evaluate the real estate of the pages.  If you or your clients don’t mind some constructive criticism, I also recommend utilizing a survey on your website to understand what its visitors are thinking.  Also, if you are thinking about rolling out a brand new site, it is very important to be invasive with your visitors to gain a clear understanding of what they are looking for so your changes will be for the better.  If you don’t want to bother them during the user- experience session, you should consider doing a follow-up survey to all email captures you receive.

3)      Test out new options in an attempt to improve the KPI’s you have chosen.  Old school GWO is still awesome and free.  If you need a quicker fix and are not so great with code, I have used both Unbounce and Optimizely, which are great, except for the fees they charge!

4)      Roll out the optimized changes and begin again.  Once you optimize a page, it doesn’t end there.  Take some time away from it, but remember to return to it again for revision.  Making improvements should be a continual process.

5)      Last on the list, the step that everyone usually forgets to complete is the results report —good or bad—to your clients or bosses.  If a test turned sour, it is not a problem; it is an opportunity from which to learn.  Communication is key for steady improvements to take place.