A few quick stats in the last month since the redesign…

Pageviews: +40.26%
Pages/Visit: +33.64%
Bounce Rate:  -50.51%
Average Time on Site:  +24.82

These stats are not skewed by anything since I haven’t written any blog posts, launched any sites, or had any other new links since the previous month.  These are based on average traffic.

BEFORE

AFTER

Some of the noticeable changes are

• 12 column grid based design
• Minimalistic look
• Enhanced navigation with subtle jQuery animation (with graceful degradation in IE7 and IE6)
• Current page indicator
• Info heavy footer (with contact and email newsletter signup forms)
• Removal of external links to recent projects
• Moved testimonials to About page sidebar
• Removed list of services and focused on the 2 core services we provide

We will constantly be evolving this site over the next year, running A/B tests, testing certain elements, to improve conversions where-ever necessary.  Check back for results of these A/B tests to see how colors, different wording, and images can affect the site.

Using the amazing project management platform, 5PM, I was able to pull all sorts of information necessary to create our project management status board pieces.  I love seeing when my people add a new progress note or if the “Other CWS Tasks” list gets cut in half.  I know stuff is being accomplished.

CWS Status Board Items

• Tasks assigned to me (via 5PM)
• Tasks assigned to others (via 5pm)
• Progress bars for tasks (via 5pm)
• Events in the next 7 days (via Google Calendar)
• Current time since we don’t have a clock (PHP)
• Current weather and tomorrow’s forecast (Yahoo Weather)
• RSS feeds for Digg, Lifehacker,  Smashing Mag, and Web Designer Depot (probably counter-productive)

Every container is automatically refreshed via AJAX so there is never a reason to manually refresh the page.  Every 30 minutes or so it will do an automatic full page refresh because Yahoo Weather doesn’t like the AJAX request for some reason but, again, no manual page refresh is required.

Why have a status board at all?

Think about how many windows or tabs you have open when you are working.  Think about the time it takes to navigate from 1 to the other and check what might be happening.  Imagine if you could always have a screenshot of the most important things going on regarding your company.  Rather than checking all your tabs, you just glance at your status board and see everyone all in 1 place.

Now if I can find a way to easily import Quickbooks data into this, this will be a super status board!  Any ideas on things to add?  How would you set up your status board?

The set up process took about 30 minutes to create the new buttons, pages, and inserting the necessary javascript code.  You install 1 piece of javascript in the original  and then another piece in the variations.  The 3 variations are below.

And now the results after letting it run for a few weeks.

As you can see the 2 variations have both outperformed the original at this time.  This simple test shows how useful this free service can be.  It will prove invaluable when testing call-to-action buttons, text, placement, forms, and just about anything else you can test.

This won’t be for everybody but for those that understand it, it can be another powerful weapon to greatly improve click-throughs and conversions.

I will probably let the test run a few more weeks to allow for 100 visitors on each variant to get a more accurate result.  Google recommends 100 visitors for each variant to reach an accurate conclusion.

Has anyone else had success with this tool or do they have any others to recommend?

3 years ago when starting the company I saw the need for this kind of product.  We had no good way of communicating with all the soccer alumni that went through my school.  We always thought it would be nice to have a way to communicate with all of them and provide job opportunities and a way to mentor the younger alumni or even current students.  alumLINK now makes this possible.

Head on over to http://myalumLINK.com and give it a test drive.  We are currently implementing this for teams, Greek organizations (fraternities/sororities), as well as athletic departments and even entire schools!

I also heard on a recent Boag World podcast that this would probably be adopted for the host’s company as well in their future developments.

Yes, em values as font sizes will scale the text larger when you set the browser’s text size larger but many modern browsers have replaced the shortcuts for this with page zooming instead.  Yes you run the risk of zooming in so much there is horizontal scrolling but I think if your text size is large enough overall you can eliminate this problem.

No need to go into further detail but you can read the full article and listen to the podcast using the links above in the page copy.

What are you other designers/developers going to do out there?  Stop using em values and revert back to pixel font sizes?  Or stay with the headaches of em valued font sizes?

One of our most recent clients, MVP Software Inc., wanted to make use of some scrolling and fading elements.  Now a year ago I would have used some simple flash elements.  I know now that this is just overkill.  Using jQuery and the InnerFade plugin we were able to successfully rotate the client testimonials (RANDOMLY)  in the header (see the header on any page) and rotate the images on all the module pages (see rotating images here).

Another example would be the simple reveal that is used here for our FAQs for one of our clients.  We cannot disclose who this is for but look at this simple function.

This simple function basically will reveal the div following immediately after the h3 that is clicked. Once revealed, clicking the h3 again will slide it up and hide it. This makes things very easy if you have the answer wrapped in a div following the h3 that is your question. Now you must make sure the initially hide those div’s in the css but this function would require a ton more code to do strictly in Javascript with using jQuery. This just makes things a lot easier to digest and to code. See the basic reveal in action. UPDATED: 11/2009 for proper graceful degradation.  If Javascript is disabled the answer will automatically display.

These are just some basic enhancements to websites that are not really necessary but do add a nice touch.  Do I think jQuery is necessary in every project? No.  But do I think jQuery can make your life a lot easier when adding simple behavior details to web projects? ABSOLUTELY.

1. Do your homework
   I was fortunate that I had someone to ask a handful of questions (the former GM at my pro soccer club) about starting a business before I took the plunge but that is not the case for all of you.   Learn about the appropriate paperwork to fill out in your state.  Figure out what kind of business entity you want (LLC, Corporation, Nonprofit).  Learn about registered trademarks and copyrights if they apply.  There are tons of books out there but I recommend contacting SCORE with a list of pre-made questions you have about starting a business to get your answers quickly.  SCORE is an amazing FREE service that is basically a bunch of retired business owners that offer their advice to people starting or growing small businesses.  They will usually meet with you if it is possible and do anything from market research to business plan to help from my experience.  Find your local SCORE office and take advantage of them.  They are volunteers so you know they are there to help you.
2. Set up an accounting system as soon as possible
   Unfortunately I was not introduced to Quickbooks until a few months into starting my company even after freelancing.  This made things difficult down the line but it has been a super useful tool.  Since using Quickbooks for the last 2+ years I have learned quite a bit about the software but even more about my business and managing the simple things.  It can be used for invoicing, tracking expenses, and handling a lot of other things.  They even offer a free version (Simple Start) that can track up to 20 clients (previously unlimited clients).  I have since upgraded to Pro and have already learned a ton more about my company as well as more control over what I am doing.  I still keep all invoices, purchase and payment receipts but using Quickbooks sure beats tracking things in a notebook which is what I did as a freelancer.
3. Save money on free (or very cheap) software
   Since I bootstrapped my business I only purchased the bare essentials of software.  I have been able to find some phenominal free alternatives to some standard software packages.
   • Mozilla Thunderbird – (Microsoft Outlook)
   • Open Office – (Microsoft Office alternative)
   • Quickbooks Simple Start – (Functions just fine for very small business needs)
   • Skype – (Has easily replaced an office line at a very low cost using SkypeIn)
   • Gimp – (Photoshop alternative)

4. Learn as much about the industry as you can
   I wish I could say that I read everything related to the business in the first couple years but I would be lieing.  I HAVE READ/LEARNED CONSTANTLY FROM THE DAY I CHOSE THIS INDUSTRY, NOT JUST THE FIRST YEAR OR TWO.  It’s the truth.  Every day I am either reading industry blogs, listening to podcasts, reading business or web related books, or  brushing up on the latest technologies (for instance venturing into Ruby on Rails and learning Javascript over the course of last year) and usually it’s all 3.  I always say that I have a huge thirst for knowledge and it’s true.  This will not only keep you informed but help a TON when pitching to potential clients.  I love teaching a potential client about something.  It could be anything from showing how the keywords they want to rank for are not in their page title all the way to explaining fluid vs fixed layouts and why there is a cost difference between them in development.
5. Be ready to work long hours but also manage your time
   For the first 4 or 5 months I had another job (professional soccer player) so I could only delegate so much time to my freelancing.  I did what I could to learn web standards and get up to speed with everything web design and biz related.  Once I retired and started CWS I had a lot of free time and not the biggest client load.  I could only continue to learn my trade and practice and refine my skills on my current as well as personal projects.  Once I started to pick up more and more clients I found myself having less and less time.  Pretty soon I found myself working up to 12 hours a day and maybe 2 or 3 of them were billable.  The others consisted of reading related blog posts/books, invoicing, billing, emailing current and potential clients, and setting up meetings.  For a while this worked out because I began to bill more and more hours but still was in front of  my machine almost all day.  Eventually it got to a point when I realized I was not managing my time well.  I have since implemented hours of work for the week related to business tasks.  This way I can plan my time much more efficiently.  I make sure to start my day at 10 so that when I get up around 8 I can take the first 2 hours to catch up on emails, plan meetings, and read any current web-related material.  I try to plan in 2 hour increments for at least 3 days in advance.
6. Network like crazy
   This is possibly where I had the most luck with everything.  Since while I was playing professionally I was always meeting a ton of people and working with a ton of kids.  Throughout my playing career I was able to meet a lot of great people who wanted to help me out.  I would honestly say that about 50% of our client base has been from some kind of soccer relationship.  Whether it was college alumni figuring out what I did or old teammates that needed some web help or they knew someone that knew someone that needed a website.  Again I say this being very lucky with all of my personal relationships but if you always make it point to network and meet people there are always people looking for services you can provide.  If you do a good job they will be the first person to refer to someone else.  If you do 5 great projects and get 1 referral each, you could have doubled your client base (and hopefully your revenue) without spending any money on marketing or advertising.

Hopefully this small list will give you some things to consider if you decide to venture into starting your own business.  I must say that is not the easiest thing in the world to do.  Be ready for long hours and little pay while you get established and put efficient systems into practice.  Also go out and read the 4 Hour Work Week  and see what you can learn about automating your business.  I wish I had read that book 3 years ago but it’s a tough road either way.  That being said it has been one of the most satisfying things I have ever experienced.

Web standards. Some of you may know exactly what they are and some may have no clue. I like to think of them as a sort of coding practice for any website project. Those of you in the industry have all heard of separation of structure, layout/presentation, and behavior. Most of the time this just means your structure is contained in your (x)html, layout/presentation in your CSS, and your behavior in your javascript.

I am going to list some of the benefits and hopefully anyone from a site owner to a developer can take something from this.

Makes maintenance a breeze

I have worked on too many sites with inline styles or even styles declared in each individual html file and the maintenance is almost NEVER easy. The Find and Replace tool is not perfect so the time it takes to make a site wide change is exponentially larger than if it would have been created with web standards in mind.  This gets especially painful when there is a mess of javascript as well. So to website owners, you could save a lot of money in web maintenance if your site is developed following web standards.

Search Engine Optimized

Because search engines spiders use content when determining where a site should fall in search engines (as well as a handful of other factors) it would make sense that the majority of your (x)html should be content. When you have all sorts of CSS (layout/presentation) and javascript(behavior) mixed into your code it makes it that much harder for search engine spiders to grab all of your good content. Another piece of web standards would the accurate use of (x)html tags. You would be surprised how many sites still do not use header (h1-h6), strong, and appropriate list tags (ul, ol, dl).

Faster Page Load Times

When you separate your code in separate files you can greatly increase page load times. For example just yesterday we recoded a single page that had javascript, html, and css all mashed together into 2 clean files. Our xhtml was cut from 167 lines down to 46 AND our css file was even a few lines smaller. Turns out the javascript was not even necessary thanks to css hovers. The load time decreased almost a full second through a cable modem page load (3.04 seconds to 2.1 seconds). This might not seem like a big difference but imagine someone trying to view this page on a DSL connection or worse still, a dial-up connection!

Sites Look Good Across Multiple Browsers

Now this is something I am seeing more and more and it’s not always the easiest to show someone. First of all ALWAYS bring a laptop to any client meeting that has multiple browsers functioning on it. You can always send screenshots but it is much easier to see it in action. What many people do not realize is that unless coded properly, web sites can look completely different on different browsers (IE, Firefox, Chrome, Safari, Opera, etc). Not only that but they can look completely different on the same browsers of different versions (IE6 and IE7 almost NEVER render pages the same with the same code the first time you test it). By coding with web standards you run the least amount of risk when looking at your site across different browsers and browser versions. I am saying that coding with web standards will give you the same results on every browser? Of course not but it is a step in the right direction and makes troubleshooting your code much easier when it’s laid out properly.

Hopefully you were able to get something out of this. If anyone has anything they’d like to add go ahead and comment away. Web standards are always evolving and have greatly helped CWS in its successes over the last 2 years.

ClickTale provides multiple options or anonymously recording random user sessions.  It basically records a video of the mouse moving around the screen and the interaction with forms and such.  This is priceless user testing for no cost.  Granted you do not get to see the user and their actual reactions and you cannot ask them questions but this is a phenominal tool for finding usability and design issues with your site.  You can see if your users are actually scrolling down your pages or if they are having trouble with your forms.  It even has some basic heat maps generated for you (by vertical mouse position).

So head over there and sign up for a free account.  They limit you to 100 pages recorded per week but it is a great service to go along with your analytics package of choice.  It’s as simple as inserting some javascript in your pages.

So many individuals and small businesses out there have taken the plunge into the online world.  In a perfect world once you launched your website your phone would start ringing off the hook with, “We found your company online and would love to do business with you!”.  However we do not live in a perfect world and this does not happen as often as we all would like.  So this post is to get some of you up to speed with some simple SEO tips that you can apply to your own sites to get a little more traffic, generate a few more leads, and ultimately a few more sales for you businesses.

1. Get listed as a business in the major search engines – Google Maps Local Business Center, Yahoo Local, MSN Local Listing Center
2. Write meaningful page titles – This is actually high under-utilized.  I see too many sites’ page titles that read “<insert company name here>” and that’s it.  This is the perfect place to take advantage of geographic and keyword targeting.  For example CWS wants to appeal to the entire Lehigh Valley for web design so our page title reads “Connected Web Solutions – Lehigh Valley Web Design – Establish your Web Presence”.  You can be as specific as you want as well.  Also think of the competition.  If one of your competitors is established and ranks well above you for specific search terms (just do a Google search for your desired terms and see who comes before you) try something a bit different.  Think of synonyms for searches if you have no chance of catching them:  footware instead of shoes, autos instead of cars, etc.  Pair this with Google Analytics and Google Webmaster Tools and you have a formula to start ranking higher in the SERPs (Search Engine Results Pages).
3. Use header tags properly – These are some of the most highly misused tags in (x)html.  Do NOT use header tags because you want larger text.  That should be done via CSS.  Use header tags for actual headers and titles.  Importance is placed on these header tags with <h1> being the most important to <h6> being the least.  I like to think that all of these are more important than the <p> tag as well.  That being said the order and frequency of these tags are taken into consideration as well.  It should work like a pyramid with 1 <h1>, 2 or 3 <h2>, 3-5 <h3> tags, and so on and so forth.  These are not exact numbers but this way you can order your importance quite easily.  Also remember to go in order!  Do NOT place <h2> tags before an <h1> tag!
4. Separate your code – I see too many websites with bloated code.  This is usually because of WYSIWYG editors but this can be remedied.  Keep your xhtml in 1 file, your CSS in another, and your Javascript in another.  This makes site wide changes a lot easier and is also a ton easier for the search engines to spider.  So remember xhtml for Structure/Content, css for Layout/Design, and Javascript for behavior.
5. Generate Links to Your Site – To increase your Google Page Rank (which will also increase your search engine replacement)  and traffic you must get other sites to link to you!  I do not mean jump on every link exchange you can find but use your previous relationships.  If you do a considerable amount of business with a company why not ask them for a link to your site in exchange for a link to theirs!  Primary example, we work with a realty firm and a housing developer.  They do work together so we asked both parties if they would mind linking to each other.  Neither had a problem and the mutual link ended up helping them both, not only in terms of getting more traffic but increasing Page Rank as well.  Or if you have an interesting news item or press release see if you can get a local paper to link to it.  This has happened with some of our soccer sites that are having tryouts or tournaments.
6. DO NOT BELIEVE COMPANIES THAT WILL GUARANTEE YOU A #1 GOOGLE RANKING! – Be careful not to be fooled with SPAM emails saying that companies will guarantee you a #1 Google ranking for keywords.  These are SCAMS!  What could end up happening is you paying a company a considerable amount of money to rank #1 for a search term that is way too long and irrelevant.

There are a handful of other things that you can do to improve your search engine placements but these are some basics that everyone should know about.  There are entire companies that are dedicated to strictly search engine optimization.

If you wish to learn more about the subject, check out Amazon and just type in SEO.  You will find tons and tons of books on the subject but be careful not to get one that is too old.  The field is changing constantly a book from a couple years ago will probably not have too much relevant information and might even have tips that will now HURT your rankings.  I recommend Search Engine Optimization – by Kristopher B. Jones and Building Findable Websites – by Aarron Walter.  Two great books with tons and tons of great tips.

If you would like an SEO evaluation of your site don’t hesitate to contact us!  While we do not solely focus on SEO we make it a large priority in the development stages as well as offer advice through the life of the site to keep it competitively ranked.