New Jersey Website Design

In the early days of the Internet, website design was in its infancy and little attention was paid to style as everyone scrambled to embrace this new exciting medium. Back then, colors were flat, layouts were basic, and html was built using tables.  Website design has come a long way since then. Aesthetics and expectations have both transformed dramatically. Today, online users expect sophisticated graphics in a rich user experience. So why would anyone still use a design interface that looks like it came from a decade ago?

That question comes to mind when looking at the website for the law office of Lawrence Hersh in Rutherford, N.J. It brings to mind the words “basic” and “homemade”.  While this would be considered perfectly good ten years ago, by today’s standards its an antiquated flop, especially when trying to project a professional image.

Good information architecture is critical for a successful website, and hershlegal.coms’ is actually quite good. The content is laid out in a logical and intuitive manner and everything is easy to find. But a good foundation takes you only so far. Like it or not, packaging and style points matter. A website design needs to inspire and engage the user with a modern up to date vision for its client.

Could someone be dissuaded from hiring Mr. Hersh based on an out dated website design? Perhaps, it’s difficult to determine. But ask yourself, would you trust someone wearing a 70’s business suit?

Style Matters
Where hershlegal.com falls short is in its design approach. Using a simple flat monochromatic color pallet with unimaginative graphics won’t get it done today. Online consumers are accustomed to the “Web 2.0”style that was introduced to the Internet several years ago. It brought graphics to another level with depth and dimensionality. Web 2.0 makes objects appear to almost lift off the page in a two dimensional manner. Once this style became popular there was no going back to the days of plain pudding.

The top header graphic used throughout the hershlegal.com site has a courtroom picture on the left, the law office name and phone number in the center, and three plain squares on the right sitting on a flat blue color. A more dynamic treatment for the top header might be to incorporate gradient colors of differing shades of blue, dark to light. The photo could also fade into these colors, creating more depth and richness.

Unique Pages
Hershlegal.com uses a repetitive template structure, where every page has the same design and graphics, only the body copy is different.  This short sighted decision leaves the visitor wondering where they are. The homepage of your website should be bold and unique, comparative to secondary pages. It’s your first and best opportunity to grab and engage the users’ attention with impact graphics and strong calls to action.

Navigation
Navigation design can range from simple to intricate and complex. A simple menu such as the one used on hershlegal.com is perfectly fine, but one small improvement could be adding a changing hover state. Most people recognize the hovering hand symbol indicating this is clickable, but also incorporating a color change of either the text or background would add to the user experience.  The same goes for all text hyperlinks in the site. A hover state change triggers an immediate cue to the user and enriches the overall UX design.

Use of Proper Headers
The homepage headers on hershlegal.com are hyperlinks void of any styling. They appear as the old style default hyperlink blue color, and once a header is clicked on, the appearance changes to a familiar purple visited state. These are trademarks of websites built a decade ago.

Today’s web standards encourage the use of proper header tags, H1 through H6 in conjunction with cascading style sheets (CSS). Header tags vary the appearance of copy on a page, enabling stylization of color, font, and hover states. They are also a valuable cue to search engines pointing to which content is most important.

CSS and Web Standards
Many of the problematic body copy and readability issues on hershlegal.com could be addressed by following proper use of CSS. Cascading style sheets are the recommended way to control the design and stylization in a web document. The CSS document is kept entirely separate from the content, and offers a number of significant benefits including uniformity, faster load time, better browser compatibility and search engine optimization.

Even though hershlegal.com uses a separate css file, the site’s headers, body copy, hyperlinks and other content is inconsistent from page to page, indicating its not being utilized properly. Unfortunately the result is a homemade and unprofessional impression throughout the site.

Properly using CSS in hershlegal.com would not only improve consistency but allows better design flexibility and aesthetics throughout the site.

First & Lasting Impressions
The old adage “you only get one chance to make a first impression” is also true on the web. A professional law firm wanting to project a successful image needs an up-to-date website to reflect their level of accomplishment and inspire confidence in their ability.

When a successful business has a lackluster website, the disconnect is often surprising. Online users expect more today. They immediately recognize a robust modern website from a dated old style interface. I’m reminded of this looking at the website for “Making Chocolate” in Dumont, N.J. This small chocolate supply retailer has a website that is the poster child for a dated template style website.

A sign of age
The same way that wrinkles can giveaway your age, an immediate tip off as to the age of a website is the width of the site.

About a decade ago, the standard width used for designing a website was 770 pixels. This number accommodated most monitors used at the time (either 15 or 17 inches), and a browser resolution of 800 x 600.

Monitor sizes are larger today than ever before and browser resolutions have also escalated higher. The standard width for designing a website today has evolved to 985 pixels. The narrow width of 770 pixel used on makingchocolate.com recalls an Internet era that has long past.

Make sure they get it
The Making Chocolate website makes you scratch your head a bit. Their homepage fails to communicate what they do. Yes, their name implies what they do “Making Chocolate”, but the homepage imagery leaves you confused. The mast head has a photo of what looks like bags of popcorn, beside a photo of small indistinguishable products on a shelf. Nothing on the homepage other than the name says “Aha! They sell products to help you make chocolate!”

Studies have shown that online browsing habits are very impatient by nature. Short attention spans and hectic lifestyles lead us to quickly scan through pages rather than reading them end to end. Therefore a website needs to communicate its message in a split second. What does this company do? What is the site about? If these questions cannot be answered quickly, users will go elsewhere.

Grab them at hello
A website’s homepage is the best opportunity to grab the visitor, engage them and initiate a call to action. If a user is spending time trying to figure out what your site is about, you’ve failed miserably.

Many of the photos used on makingchocolate.com are difficult to decipher due to unprofessional photography or artistic treatment. A site such as this would greatly benefit from bold high quality photography, especially on the homepage.

Displaying the end product (chocolate) and the supplies needed to make chocolate, (icing, molds, packaging), will go a long way to deliver the main message. Even without understanding a single written word, the visuals should automatically communicate the content.

Avoid repetitive cookie cutter pages
Each page in a website should offer value and be unique. On the makingchocolate.com site, each page is unfortunately indistinguishable from another.  This cookie cutter, boilerplate approach is not only bland and boring, but can also confuse people as to where they are in the site.  A watered down, repetitive design is hardly motivational, engaging or bringing much value.

When you are on the “Supplies” page, the first thing you would expect to see are pictures of supplies. Fairly logical. What you see instead on the supplies page is the same photo of the storefront as on all the other pages, nothing else. Taking into consideration that Making Chocolate carries over 5,000 styles of candy molds, for some inexplicable reason, not one of the 5,000 is pictured on the supplies page.

Calls to Action
For any business looking to increase sales and grow their online presence well placed “calls to action” on your website is a must. Whether your site sells products online or not, a call to action is an element on the webpage that entices a visitor to take notice and make a decision based upon it. “Buy now” or “call now” are familiar calls to action, that initiate people to take action.

The Making Chocolate website is completely void of calls to action. On several pages a MapQuest driving directions submission form is available for users to enter their address. While this may be helpful, most people are not going to immediately hop in their car and drive to the store.

It may be more beneficial to use this small strategically located form for lead generation purposes rather than driving directions. The headline,“Ask us what you’re looking for”, or a boldly placed phone number with “Have questions? Call now”, can prompt action from the user and lead to new business.

Periodic Facelift
The bottom line is that all websites need to be updated periodically. No website can last a decade or even 5, 6 years and still look current. Styles, trends, and web standards change quickly in Internet years and your site simply must adapt.

When the Internet first became a mainstream part of popular culture, the average website had a very basic, bare bones appearance. Plain black text, blue hyperlinks and boxy layouts ruled the day. Not much consideration was given to appearance or design. The excitement was in the novelty of having your own website or accessing “the world wide web”, so little attention was paid to the aesthetics of this new toy.

Since those early days, online users are savvier and more experienced today. They expect modern sophisticated websites with engaging graphics as well as valuable information.

Having said that, it’s always surprising to encounter a website today that STILL uses the old “early days” look of the Internet. It makes you wonder where the owner of the site has been for the past decade? Have they looked at another website other than their own recently? Such is the case with Timberlane Kennels’s website – timberlanekennelsinc.com.

This 35 year old family run business located in New Egypt, N.J., offers boarding and grooming services for your pets. The first impression when visiting their website, is that someone here needs to be introduced to the new millennium and modernity.

Marrying style & substance
The Timberlane Kennels website resembles a template design you assigned to a family member to edit and complete as a side project. It represents a home-made amateur online presence, not a legitimate and successful thriving business.

Since the homepage is the first page people see, this is where you need to make a splash and really create a “wow” first impression. It’s your best opportunity to grab the visitor’s attention and draw them in. Timberlane’s faceless and unprofessional homepage hardly accomplishes this.

The site uses the same template layout for the homepage as on the secondary pages, so you never really know which page you’re on other than the header telling you so. When a homepage has the same appearance as all the other pages, it indicates very little thought went into the overview hierarchy of planning the site. It also signals a low budgeted, amateur approach.

Knowing your audience
It’s only logical that the design philosophy of your website should speak to your target audience. Countless number of people own dogs, so the wisest design approach might be one that appeals to a very broad audience.

Since most dog owners paying for dog grooming services are adults, not children, it simply doesn’t make sense to adopt a juvenile design aesthetic for a dog grooming website. Sugary and cute doesn’t communicate to your paying audience. Yes, dogs are cute, but overdosing on saccharin isn’t the solution.

Timberlanekennelsinc.com uses the same 3 design elements repeated on every page to set the style of the site. This includes a small size photo of a dog above the left side navigation, and a playful repeating paw print serving as a background throughout the site. A cartoon illustrated dog appears in the top right corner of every page with an animated wagging tail. Other than being cute, it really doesn’t serve any purpose and the animation actually distracts the reader from focusing on the content.

We’ve come a long way
The site’s navigation is comprised of text links encased in large pink gradient buttons that briefly flicker when hovering over. This may have seemed new and exciting in the year 2000, but website navigation has come a long way since then.

The body copy is treated in one of two ways, bolded or non-bolded black text. The website doesn’t take advantage of using standard web header tags H2 through H6. (The site does use “H1″ header tags.) Header or title tags vary the appearance of copy on a page, breaking the monotony and sameness of the text. Not only does this improve the visual appeal of the page but also provides better readability and distinguishes what is most importance to what is least important.

Studies have shown, the average Internet user scans through a page very quickly rather than reading everything on the page. Forearmed with this knowledge, it is even more important to separate the most relevant segments of your page from the least important.

Calls to action
Key for any website looking to generate revenue and new business is the need to use “calls to action”. A call to action is an element on the page that entices a visitor to take notice and make a decision based upon it. “Buy now” or “call now” are familiar calls to action, but the wording can say anything necessary to accomplish the goal of website conversion.

Conveying your message
A link on the website for “Boarding” brings you to a personality void page with endless copy that is hardly engaging and barely readable.  A long list of bulleted items is treated in the same style as the introductory copy creating a page of lost bland noise.

A better approach might be to differentiate the bulleted points with a checkmark image. This slight alteration helps vary the bulleted text from the body copy creating a clear division between elements on the page.

Surprisingly absent on the boarding page are photos of the boarding facility they are trying to promote. Leaving your prized family dog for boarding involves a certain level of trust, and none of that is conveyed here. All the loving care and attention in the world may be spent boarding dogs at Timberlane Kennels, but you would never know it from their website marketing approach.

Show me
The “Grooming” page has the same issues that the “Boarding” page suffers from, lack of a clear message. Four brief paragraphs describe Timberlane’s grooming services with one sad photo of a poodle awkwardly posed alone. The most persuasive argument for lovingly caring for dogs in the grooming process might be to actually show dogs being groomed! The grooming process involves humans handling dogs, and to show the two together would convey a human-animal connection, rather than showing a dog in isolation.

Again a clear call to action is completely absent here. Once you’ve described how exceptional your services are, the next intuitive step would be a call to action for contacting Timberlane Kennels, such as “Call now”, “Make your appointment today “, “Call 888…”, etc.

Testimonials
Testimonials can be a very persuasive tool for communicating trust and reliability. The timberlanekennelsinc.com website attempts to create this communication with statements made by the kennel owner, located just above each page header. What actually might be more persuasive are quotes made by happy and satisfied customers.

Instead of using the statement “Veterinarians not only recommend us, they board their pets with us!” it might be more persuasive to include a statement by one of their client veterinarians describing how extraordinary Timberlane’s service have been for them.

Testimonials enable satisfied clients to tell your story for you and share their opinion as one consumer to another. It’s an honest and natural expression of genuine information.

Links
Link building (the practice of getting other websites to link to yours and vice versa) is an important part of Search Engine Optimization (SEO) in promoting and ranking your website. The Timberlane “Links” page seems to accomplish this well, although the appearance is again, a dead giveaway of the low-level, homemade quality that permeates the site.

A “default” style table with padded cells and black outline border, holds logo images and text for each favorite link. The images are not consistent in scale from one to another and seemed a bit over sized for the page.

Hidden Value
An ironic aspect of the Timberlane Kennels website is that it actually ranks quite well in Google Places. If you were to search for the phrase “New Jersey dog grooming”, you’ll find Timberlane Kennels ranks fourth in Google Places. You may ask, why change the site all?

Why not take advantage of the high ranking and maximize those visitors with better website conversion to create more new business. How is that done? With professional design, good IA, strong calls to action, and a friendly user experience. Converting these leads is where the hidden value and opportunity lies. Not doing so would be the equivalent to leaving money on the table.

If you were to drive on a stretch of road in northern New Jersey called the Palisades Interstate Parkway and take the very first exit, Exit 1, you’d find yourself in the affluent town of Englewood Cliffs, NJ. Immediately upon exiting off the highway, you would be greeted by a sign that says “Welcome to the Trillion Dollar Mile”.

“Trillion Dollar Mile” refers to the numerous high profile companies headquartered in Englewood Cliffs. Global brands such as Unilever, Ferrari and CNBC call this suburban 3.4 sq mi. town their home base.

Unfortunately, the borough hall website that represents Englewood Cliffs online, englewoodcliffsnj.org does not accurately reflect this illustrious “Trillion Dollar Mile” title. Although this is not a Chamber of Commerce website and no one expects a municipality site to be “glam” or expensive in budget, one thing you should expect is a site based on web standards for usability. Englewoodcliffsnj.org fails miserably on this account.

Upon first glance, the website is not shockingly bad or strikingly unprofessional in appearance. Once you take a further look under the hood though, it’s a lemon.

The homepage has a beautiful photo of the town hall building, a modern three story structure with an American flag atop. This is the only connection to modernity the entire website has! In terms of usability the site is a crude attempt at what in the early days of the Internet, passed as a website.

Thou shall navigate
At the very top of the page is a horizontal top-tier navigation which uses a dropdown menu for the subordinate links. Below the navigation is an awkwardly placed marquee scrolling message. These scrolling messages were popular a decade ago when people were easily impressed with any type of movement on a website. Their popularity has waned, and for good reason. They’ve become outdated because people found them too distracting and difficult to read. Such is the case here. The text inside the marquee scrolls at such a speed that it makes it difficult to read. Ironically there is only a single sentence used in the marquee. One of the original purposes of marquees is that you could alternate a large amount of text in a small space. Having one message defeats the purpose of using a marquee.

A problematic issue created by the poor placement of the marquee (under the main navigation) is that when you hover over a menu item, the dropdown links begin below the marquee. The marquee creates a gap between the menu link and the dropdown menu creating a visual disconnect, breaking the natural flow of your eye downward (see below). Your eye doesn’t know where to focus, on the marquee or on the dropdown options. The result is a visual mess.

Usability First
Usability in a website is vitally important. It should be more important than design or even content. If users cannot get from point A to point B without major confusion and aggravation, they will leave, and leave quickly.

The primary cardinal sin for this website is the inability for visitors to easily maneuver from one page to another. This becomes an exercise in frustration and futility. When a link is clicked on from the homepage, the follow through page opens in a new browser window.
The page you arrive at is completely void of any navigational elements enabling you to return to the homepage or to click through to another page. The only call to action is a “close window” link at the bottom of the page.  (Usually “close window” prompts are reserved for smaller popup windows and not a full browser window.) Closing the newly opened browser and returning to the homepage is the only way to explore the rest of the site. This is simply archaic and unacceptable.

Vanilla Page Syndrome
Another issue with the secondary pages on this website, is that they lack any design, identity or correlation to the homepage. Most of the subpages use a gradient background with a centered white box and black text center aligned to display information. In other cases such as the history page, another format is used, even more plain and completely alien to everything else in the site. Frankly, your average dinner menu has more pizzazz and consistency than this.

Pages Needing Personality
The history page on englewoodcliffsnj.org is a prime example of bland pages crying out for design. If you’re going to devote an entire page to the history of a town, you must give it some personality beyond several paragraphs of justified text. Refining the style of the text and adding imagery would go a long way in communicating an identity more personal than just drab poorly formatted copy. With the majority of the public being Internet savvy today, they will expect this at a minimum.

The website needs an identity that tells a story. What makes Englewood Cliffs unique? What gives it a sense of community? What attracts the clientele that now call Englewood Cliffs home? Communities are made of people. The human touch and a sense of sophistication are sorely missing here.

Text Treatment & Formatting
If every webpage had a white background, black text, and blue hyperlinks, the Internet would be a monotonous black hole. Such is the template that guides the englewoodcliffsnj.org website.

One basic way to give a website a look or identity is through text treatment and color. A standardized web practice is to incorporate HTML header tags , H1 to H6 tags. Using HTML header tags contributes to maximizing search engine optimization (SEO) and also allows a graduating structure for headers to vary in size and importance within a page. The H1 tag defines the most important heading. The H6 defines the least important heading. These not only allow size variations but color and style differences too. One header can be Times New Roman font style, while another can be Arial.

When these tools are implemented via cascading style sheets (CSS), it is not only good web practice, but also enables a designer to control formatting of text size, line height, kerning, font style, and surrounding negative white space.

CSS defines the look and formatting of an html web document and can be easily changed without having to open every page. With an external style sheet, you can change the look of an entire website by changing one file. Englewoodcliffsnj.org  is a sad example of what happens when CSS is not integrated into a design.

CSS & Web Best Practices
Best practices on the web are those methods of designing and building website pages that have proven to be most efficient while maximizing accessibility, speed and maintenance. These best practices can include standards for page formatting, navigation, optimizing search engines, browser compatibility and faster loading performance.

Incorporating these best practices is the easiest way to ensure optimal rendering of your website consistently in all browsers. Of course, each browser has its own minor quirks and differences, so testing  in all browsers is essential.

Table-less HTML
The englewoodcliffsnj.org website also lacks several other widely adopted web best practices such as building “table-less” html pages and avoiding the use of inline styles.

Using tables to create html pages has been phased out for several years and replaced with table-less design markup using CSS. This provides better accessibility and semantics, flexibility and speed.

One of the main goals of table-less CSS is to remove the design aspect from the HTML and place it in a separate location for the designers and others to have greater control and ease of maintenance.

Inline Styles vs. CSS
Inline styles do not separate content from design, they bloat the size of page code, and cause more maintenance headaches. External style sheets (CSS) should be used instead of inline styles. External style sheets give you all the benefits of best practices and are easy to use.

Lack of Consistency
Beyond the lack of style and navigation, there is a lack of consistency between pages on the website.  As you can see by the example below, the page size varies depending on the size of the content. Proper use of CSS can enable each page to be uniform and consistent, whether it contains 1 paragraph or 12 paragraphs in length. Inconsistency indicates amateur work. Achieving uniformity and consistency throughout your pages is another web standard, regardless of the amount of content.

Identity Crisis
For someone who has never visited Englewood Cliffs, NJ, stumbling upon the englewoodcliffsnj.org website may be their first and only impression.  That could be a frightening proposition. It certainly does not reflect the dynamic and prosperous nature of a growing municipality. More importantly for visitors who are actually trying to resource information it may be an excruciating exercise. Englewoodcliffsnj.org needs to enter the new millennium and adopt the web standards that most expect today, easy intuitive functionality and usability.

Anyone vaguely familiar with the vibrant economic downtown area of Englewood, NJ, knows that this is one the strongest business districts in Bergen County. Small local businesses co-exist with national retail chains creating a popular shopping and dining destination. Ironically, you would never know this by visiting the Englewood Chamber of Commerce website. Englewood-chamber.com makes you think Englewood is a one traffic light town with tumbleweeds.

The affluent surrounding neighborhoods in Bergen County have long made this a successful commercial hot spot. In addition, there is a performing arts center bergenPAC, right in the heart of the business district, which attracts world class entertainment year round.

These impressive facts make it difficult to understand how the current Englewood Chamber of Commerce could approve such a low budget, “home-made” and amateur looking website as www.englewood-chamber.com.

Where am I?
The site uses a template structure for every page which contains a narrow, plain blue border design with a green leafy header image. The homepage is sadly indistinguishable from the secondary pages. This generic looking design could be a used for almost anything, a personal blog, a nature preserve or medical practitioner. Its nondescript look tells you nothing about where you are.

The Chamber of Commerce homepage doesn’t embrace features you would expect to see with an evolving and dynamic community website. News, upcoming events, new members, business spotlights are all buried in plain text without consideration for modern design or organization. What is missing is a strong call to action for the latest “News” or upcoming “Events”. The current look is static and gives the impression the site is rarely updated. Any mention on the homepage of new members or news is so buried and inconspicuous you can easily miss it.

Not only are calls to action absent on the homepage but throughout the site. If you think of why someone might visit a Chamber of Commerce website, it may be to find a specific business, or possibly to inquire about joining as a member. Neither one of these important considerations is present in a call to action.

What makes us unique?
Why should someone join the Englewood Chamber of Commerce? What are the benefits of membership? All these are questions that cannot be answered by the current site. If the website offered a page explaining the benefits of joining along with testimonials from other members exalting the value in joining, this would make a compelling argument for readers contemplating membership.

Another glaring omission from the site are pictures of Englewood businesses. A Chamber of Commerce website is a community made of people and businesses. Both are completely absent here. Isn’t the purpose of a Chamber of Commerce to promote business? Where are the featured businesses? Member stories? Promotional networking events?  The only mention of members is buried in small unattractive typeface that hardly jumps off the page.

Missed Opportunity
The business directory on englewood-chamber.com is a static list of business members arranged alphabetically in a single column. With approximately 78 members, this is an insufferably long list to scroll through. A better solution would be to enable visitors to click on an alphabet letter and quickly jump to that section as well have the ability to search by name or category. Being able to cut through a gaggle of information quickly and retrieve the information you need is what people expect today.

A natural extension of any Chamber of Commerce website should be the ability to advertise to its member and non-member businesses. Not offering this is a missed opportunity. It further promotes Chamber members, adds value to the website and creates a profitable vehicle for The Chamber.

Forgotten formatting
The formatting of content throughout englewood-chamber.com uses an outdated style of “default” looking Times New Roman text, center aligned with a total disregard for using HTML header tags (H1 to H6). In the new and experimental early days of the Internet, this is what most websites looked like.

Using HTML header tags in cascading style sheets (CSS) contributes to maximizing search engine optimization (SEO) and also allows a graduating structure for headers to vary in size and importance within a page. The H1 tag defines the most important heading. The H6 defines the least important heading. These not only allow size variations but color and style differences too. It enables the reader to easily distinguish between segments of a page and importance of information.

Cascading style sheets (CSS) define the look and formatting of an html web document and can be easily changed in one location without having to open every page. Using proper CSS not only conforms to widely adopted web standards, but also provides better accessibility and semantics, flexibility and speed for editing and maintaining a website.

Keeping your audience
Providing the url addresses to your member’s websites is a great way to promote their business and link build, but consistently throughout englewood-chamber.com, the outbound hyperlinks that lead to other websites open in the same browser window instead of a new window. This essentially means visitors are leaving your site, never to return except through the browser “Back” button…not the most efficient way to link to other sites. Connecting to an outside website in a new browser window has long been the accepted web standard.

Hardly enticing
What makes downtown Englewood unique and special is hardly answered on the “Visit Englewood” page with four paragraphs of text, an unformatted header and the word “Blank” oddly sitting at the bottom of the page. Missing are photos of people, storefronts, links, stories, and any personal connection to a vibrant, exciting community. This might as well be a resume cover letter! The page is completely void of color and life.

The copy on this page mentions nationally renowned retailers such as Nine West, Ann Taylor and The Children’s Place as members of downtown Englewood. Here again, is a missed opportunity to mutually promote the Chamber as well your most recognizable members. Creating outbound link building to these retailer websites would promote the Chamber in SEO searches. The use of logos by these consumer recognizable brands would also lend credibility to the site as well as a nice visual addition.

Disappointment abounds
Page after page on the website is disappointing and falls flat. The “Get Involved” link leads to a page identical to the “Visit Englewood” page. A bland canvas of white and black unformatted text.  With a name as inspiring as “Get Involved”, you would expect a motivational page of content, however what you find is a snooze fest.

The “News” page is the same, an endless long page of unformatted monotonous text with varying headers making it difficult to distinguish the beginning or ending entries. A hodgepodge of inconsistent colors permeates the copy creating more confusion and chaos.

A small glimmer of hope is the “Downtown” page which is the only page that uses a photo header different than the other pages. This header has a casual non-“stock looking” photo of people strolling the shops in downtown Englewood. Unfortunately, the excitement ends there. The content below the header is the same unformatted ugly text of varying colors without rhyme or reason.

Another inexplicable oddity is when the “Sitemap” link is clicked it leads to the Login page. An error message at the top says: “You must authenticate to view ‘home/sitemap” which indicates you need to be a member to view the sitemap. Why would there be a logical connection from the sitemap link to a login page? Somehow though, in this nonsensical website, it seems fitting.

Calendar blues
The Calendar page on the website is another source of confusion. Listed above the main header of “Upcoming Community Events” in plain text is the “Physical Medicine & Rehabilitation Center” (presumably one of its members), with their address, phone number and website. Since it’s not a banner, the real purpose of it being there is not quite clear.

The calendar page lists three events scheduled for September and October in static paragraph form. Since the year is not indicated after each date, you have no idea whether it refers to September and October of last year or this current calendar year.

Below the three paragraphs is a traditional calendar displayed for the month of March. The calendar highlights today’s date, but is empty of content otherwise. It also doesn’t enable you to go forward to the next month. There is no correlation between the calendar display and the three paragraphs above it, leaving you even more confused. A better solution would be to engage a dynamic jQuery calendar that can list individual events in each date.

Login confusion
The Login page has a header, two fields (username and password), and nothing else. Normally when you arrive at a login screen there is a brief introductory sentence welcoming the appropriate targeted audience to which the login is intended for. This also gives a clue to the visitors that do not have login status that this is an exclusive area.

Essential on any login page is a link for members who have forgotten their password to click, enter their email address and retrieve their information. In many cases an additional link will be provided for members who also have forgotten their username as well. Neither is present here. These miscues indicate a lack of web standards and professionalism which raises eyebrows as to the level of competency of the developer.

Tie up loose ends
The footer on the site has a number of links that lead to empty pages. Having more than one or two pages on your website without content is surely an unprofessional decision. Even the all important”About Us” page on englewood-chamber.com page is blank. This is truly befitting a website with an identity crisis!

If a new page is being built on a website, it usually isn’t made live unless completed and ready to go.  That is the most common way to introduce new content to a site. If you are going to make an “under construction” page live before adding content, at least use a professional appearance and language. Several of the uncompleted pages on englewood-chamber.com are either completely blank or contain one word on the page -“blank” –hardly professional or confidence-inspiring.

At least give people an indication of what is coming. “Coming soon”, “please check back soon” are all appropriate language to tell visitors this page is not a mistake or has been forgotten.

Value Of ROI
If very little effort or money was spent on the Englewood Chamber of Commerce website, then you could argue the investment was so minor, what matter the return? Regardless of the price, the return on investment (ROI) should always far exceed expectations, and the expectations should never be this low to start.

When consumers are used to a certain standard, anything less seems unacceptable. If major retailers like Starbucks and Victoria’s Secret are willing to invest in a community like downtown Englewood, then the town should be willing and able to support that level of commerce with a dynamic and modern Chamber of Commerce website. The website in its current state brings little value and grossly under performs.

When a website provides the essential information you’re looking for, it can usually be deemed a successful website. If you were to analyze any website with scrutiny, you can always find room for improvement. But when a website has the potential to be so much more, you then realize how lacking it is. Does it inspire and motivate you towards a call to action? Does the website bring added value?

Grissini Ristorante is an upscale Italian restaurant in Englewood Cliffs, NJ, with a sophisticated look and clientele. On any given Saturday night the wait for a table is considerable due to the popularity of the cuisine and stylish interior.

Grissini’s website, grissinirestaurant.com is a perfectly good, functional, purpose-serving website. However, like anything, it could stand great improvement upon further review.

Your first impression of the site when arriving on the homepage is one of professionalism and appropriateness. The colors are warm and food related. The layout is uncluttered and simple, and the Grissini logo is featured top and center. All the typical information you would expect to find is conveniently present. The hours of operation, the address, phone number and a photo of the restaurant. What more could you want?

For one thing, in today’s competitive market people expect more, and delivering it shouldn’t be brain surgery. How can you take a perfectly good website and turn it into a great website?

More is better
Let’s begin with something that might seem insignificant; the size–specifically the width. About a decade ago, standard practice for creating a website was to specify a pixel width of 770. Originally, this number was determined by the average width of most monitors in use and their resolution setting–somewhere between 15 and 17 inches generally set to 800 x 600 resolution. As monitor screen sizes grew and resolutions improved, more real estate became available to use for content and design. As a result, the 770px standard width was expanded to 985px. Thus, any website still using the 770px width now appears dated.

The copyright date on the website is also a cue as to how long its been since the site was originally created or updated. The copyright date on this site is 2006, which explains why a smaller width is being used. If five years ago was the last time your website was revised, you might be looking “so yesterday” as well as missing out on advancements in web development, such as interactive applications and social media.

We eat with our eyes
A wider width means having more room available, so images can be larger, content can be expanded, and more prominent calls to action can be integrated. The imagery currently on the Grissini homepage seems weak and crowded around a clunky arrangement of text and headers. At a time when so much of the food and hospitality business today is about entertainment and a feast for the eyes, Grissini’s visual sampling seems skimpy at best. Perhaps a JavaScript banner of different food images and a photo of the restaurant interior would be more engaging and capture the mood when first arriving.

Another underutilized area of this site is the “Photos” page which has approximately two dozen photos of the interior of the restaurant and food. Usability comes into question here because each thumbnail photo opens into a new browser window. This was the practice used at the beginning of the Internet decades ago. A more efficient interface would be to use a thumbnail gallery side by side with the enlarged image that changes each time a thumbnail is clicked.

Another option is to use a separate window to flip from one large photo to the next, instead of constantly retreating to the previous page to access a thumbnail. Users are impatient. They hate having to click excessively, especially for something that needn’t be that way.

Emphasizing calls to action
Incorporating a strong call to action on any website is crucial to getting true value and return on investment. When you help your visitor connect with your service or product you not only attract new customers, but also motivate repeat customer business. Two instances on the Grissini homepage cry out for a stronger call to action. One is the “Reservations” link which links to an OpenTable.com page for the restaurant.  The other is for “Gift Cards” which appears in the lower left corner of the site, in such small fine print, it warrants credit card terms and conditions status.

Toot your own horn
Another striking weakness of the Grissini website is the inability to sufficiently promote many well-documented press accolades from prominent industry leaders.  A small blurry graphic eludes to their impressive Zagat rating with the moniker “An East Coast Spago”. However, this title gets lost in a sea of blandness without life or excitement. High praise should certainly be trumpeted not only on the homepage but throughout the site as powerful and persuasive tools.

A page on the site called “Press Room” features videos acknowledging impressive recognition of the restaurant from well known media outlets such as local new channels and magazine spotlights. These honorable mentions could be highlighted throughout the site and even the homepage, rather than just buried on a single page.

Navigation
Having a user-friendly navigation is key to usability and how visitors interact with your website. Grissini has a simple to use menu, but it could be better utilized as a horizontal navigation rather than a vertical one. This would allow a more logical traffic flow for the dropdown menus.

When a dropdown menu is used on a sidebar vertical navigation, the elements dropping down are going to inevitably cover the links beneath it. A horizontal navigation layout allows the dropdown to appear without covering any other links.

Social Media
The use of linking to social media on a website has become the norm today. Whether you own a small mom and pop local website or spearhead a large multi-national global brand, social media has become essential and is here to stay. Restaurants are by nature an extremely social environment, and all can benefit from an association with Facebook, LinkedIn, Twitter, Flicker, etc.

Positive feedback from restaurant patrons is a valuable driving force for social media. These interactive sites can provide organically generated positive comments from satisfied customers who will further reinforce the credibility, good will and growth of your brand.

Web practices and standards
The Grissini website uses an outdated form of building html pages known as tables. This practice has been phased out for several years and replaced with table-less design markup using Cascading Style Sheets (CSS). This provides better accessibility and semantics, flexibility and speed.

The site also lacks several other widely adopted web standards such as header tags (h1, h2, etc.) and proper page title tags. Using HTML headings and sub-headings such as H1 tags contribute to maximizing your search engine optimization (SEO). These header tags help search engine rankings via natural algorithms (unpaid or organic). Not using these basic, free practices results in lost opportunity.

Proper page title tags can also contribute to search engine ranking. Instead of simply using the name of the restaurant in every page title, it would be advantageous to use keywords and phrases that people might actually search for.  “Italian restaurant in Englewood, NJ” or “Italian cuisine in northern New Jersey” are more relevant keywords than just a company name or the page name (“About Us”).

Finishing off on the right foot
A proper website footer should contain at a minimum basic navigation, copyright information, legal notice and a privacy policy. Other items you may also see in footers today are testimonials, links to social media, tweets, calls to action or a brief contact submission form.

Today more than ever, the footer of a website is becoming an increasingly important and substantial element. Footers are becoming larger and serving multi-purposes.

The grissinirestaurant.com footer is a one sentence line of copyright information and two outbound hyperlinks. One of the hyperlinks leads to the creator of the website and the other to a New Jersey restaurant network directory website called njrestaurants.com.

Unfortunately though, the text treatment for these two links renders them illegible. If you are only going to use a single hyperlink class throughout an entire website you need to make sure it works on all backgrounds. The default hyperlink color used here is a dark hunter green color, and if placed on a light colored background, it’s effective. But when used on a dark background (like the footer) there is simply not enough contrast to be legible.  Dark text on a dark background doesn’t work.

An oversight like this can appear unprofessional. The solution is simple; create an additional hyperlink class to be used instead of the default one.

Home Improvement
To gain a competitive edge over others in your space, you need to periodically re-evaluate your marketing efforts, and that includes your website. It must provide up-to-date compelling content or visitors will browse elsewhere. If you can take an “average” looking website and turn it into a robust exciting vehicle to take customers to another level, why not do that?