Archive for the ‘web design’ Category

Nov 29
2011

 

landing page with bullseyeImagine you’re a used car salesman.  I know, you’re disgusted and feel like taking a shower now, but humor me.   A customer who has been searching for a Toyota Camry comes to your car lot because he saw your flashing sign for just that – a great deal on a Toyota Camry.   You tell him, “Sure!” and point him in the direction of the entire car lot.  “Find it yourself!”  Do you think you’ll close that sale?

How about imagine he walks through the lot with your Toyota deal in his mind, but you have salesmen calling him over trying to sell him BMW’s, Honda’s, KIA’s, etc.  Not only is your customer now annoyed that you made him search for the deal himself, you’re team is bugging him with promotions he’s really not thinking about or interested in.

Let’s say after that, your now annoyed customer sees a car lot next door, and ALL they sell are low priced Camry’s.  Who’s going to get that sale?

This is how you should be thinking about your site and competitors.    In particular, basic web usability theory says the internet make things so easy and convenient for us, that it’s trained us to be…well…lazy.  If you don’t make things as easy as possible for your visitors, your competitor will, and there is no penalty or price for your visitor pressing the “back” button and then clicking on your competitor.

10 Tips for Building Effective Landing Pages

The beauty of the internet now is that you can create targeted custom landing pages focused on closing one product or service without any distractions.  Landing pages are focused, eliminating confusion, putting your prospects into a “track” that hopefully will result in a lead or close.

In this post, I’d like to talk list some best practices on how to do that right.

1 ) Simplicity = Clarity.  This is a key point that not only web design and other media is based on in general,  but most of the landing page best-practices are based on this.   There is definitely a balance that needs to happen – all important information needs to be included – however, it’s important that information is succinct and that also there is no other fluff on the page that will distract the visitor from closing.  Hubspot (a great authority on internet marketing) calls this the “blink-test” – meaning it should be clear on the page (any web subpage) what the page is about within the first 5 seconds (before you blink).  How do you do this?  With clear headings, images, calls-to-actions and reducing all other distractions.

2 ) Maintain the Scent.  In many cases, your paid ads/email ads will be targeted and a landing page will be best to serve them, since the landing page can be focused specifically on what your ad/mail is talking about.  Like our Camry analogy, there’s nothing more annoying than coming to a page that says “Free Kindle!” but then all it says (and in fact is yelling), “Here’s a bunch of information that has nothing to do with that.”

Maintain the scent from your ad to your landing page
3 ) Headline.  In many cases, this is the first thing a visitor will see.  Make sure it maintains the scent of your ad if it’s from paid traffic.    Also, make sure it conveys what the page is about, whether it’s the name of your product, why they should purchase it, a promo you are offering, etc.   Again, internet surfers like to think as little as possible, if they scan your headings and don’t find what they’re looking for, there’s no penalty for them bouncing.

4 ) Salespoints.  Sounds obvious, but too many times we’ve come to a page and they dance around the main reasons why we should buy their product or contact them.  Understand your prospects, what they are looking for, what possible hesitations may stop them from taking advantage of your product/services.  Outline that then make sure it’s all included in your landing page.  Only thing to keep in mind is when you put them there, you don’t want to write a novel as to why visitors should buy.   Minimal, succinct words and phrases that best convey your ideas.

5 ) Clear Calls-To-Action.  Another one that sounds obvious.  Your design should clearly distinguish it’s call(s)-to-action.  It’s image should contrast (a bright button on a muted surface) or the link should be bright and big.  If there is only one clear button, and that’s the only place they can go, it increases their chances of them going there.   Also, minimize your calls-to-action and keep them above-the-fold (meaning it shouldn’t be at the bottom of the page where visitors have to scroll down to find it).  If your conversion element or call-to-action is a form, make sure it’s nice and big, stands out, and is above the fold.

6 ) No Escapes.    I want them to look at the rest of my site!  I want them to see what other services I provide!  I want them to see my Facebook page!  By them leaving this page that nurtures the lead, you are significantly risking them losing the sale.  Remove all escape elements from the page – no navigation, no social networks, no other offers.  In the case where they may want more information on your company, you may provide one hidden escape to again minimize the chance of them getting distracted an you losing the lead (maybe link your logo to your homepage), but make sure to open this page in another tab/window so the original offer/landing page is not lost.  If you want them to see your certifications, high-profile clients you’ve served, etc – include that in the actual landing page design and layout.

urchin landing page with call to action

7 ) Reduce Distractions.  Aside from actual link “escapes”, design can get in the way too.  Too many images, background patterns, textures, rotating information, etc – can distract a visitor from your main “track”.  You may need to include some of these things, but minimize it.  Simple backgrounds, simple images, simple colors.   You can still be simple and be aesthetically chic.

8 ) Credibility Badges.  Any certifications, testimonials, client logos, authority certifications of your business will help legitimize you and could refute apprehension by your visitors to convert on your landing page.  The nice thing is now that your landing page is simple, it has space for this information.

9 ) Test! In design, it’s always important to understand – best practices are just that – “best practices”.  They are not written in stone and may not always apply, or a tweak to them may further optimize them.   It’s great to have hypotheses of how your visitors will act on the page based on their marketing personas and to also follow best practicesthis is a great starting point.  However, you wont truly know how your page will perform until it goes live, and you wont know if it’s doing the best it can do till you test different strategies, layouts, designs. You can have different landing pages under different campaigns to test, conduct user-testing, or you can try A/B testing services such as the Google Website Optimizer.

10 ) Thank You Page UPSELL!  This is something everyone neglects (even until recently, so did we!) .  You just closed a lead!  You can place a plain thank you message, or further your business by putting a promotion on the thank you page, upsell other products you have, or even better, add a social “share” link so that your happy lead can share this info with their friends.  Word-of-mouth sales close significantly greater than cold leads.

Feb 21
2011

Photoshop Tutorial: How to Make Reflections

“Reflections” are a cool, popular Web 2.0 trick that really makes your site look polished – literally. If you’re looking to have an online marketing presence, it’s important that your site looks as contemporary and as professional as possible – and subtle effects like this is what will achieve that image.

Last time you visited a car showroom, I’m sure you realized the floor buffed to a shine – to the point where you could see the cars’ reflections on the showroom floor. In fact, the cars probably were so clean, you could see yourself in them. “Reflections” indicate cleanliness, newness, professionalism and quality. Images, icons, and text on your favorite site designs (and even print/video designs) use this effect to have their brand give this feeling to their audience.

Reflections on the Apple website

If you’re just beginning Photoshop, creating this effect is really simple:

  1. Isolate the image you want to reflect in its own layer. In the example below, I have the “e-nor” logo image in its own layer.
    Reflections in Photoshop - Step 1
  2. Duplicate the layer by right-clicking on it and choosing that option. Rename the new layer to a meaningful name, such as “image reflection”.
    Reflections in Photoshop - Step 2
  3. Select the layer by choosing the “selection tool” and right-click on the image. Choose “Free Transform”.
    Reflections in Photoshop - Step 3
  4. Right-click again and choose “Flip vertical”.
    Reflections in Photoshop - Step 4
  5. Move the reflection just below the original image.
    Reflections in Photoshop - Step 5
  6. Add a layer mask to the reflection layer. Use the “gradient tool” to create a gradual fading mask. For the first gradient, reduce the opacity of the gradient tool to something in the middle, like 50%-75% so you get a light fade. Do that as many times till you get the right transparency.
    Reflections in Photoshop - Step 6
  7. To create a more realistic effect, increase the opacity of the gradient tool back to 100%, then create a layer mask gradient from the bottom of the image till about the middle of the image to fade out the bottom of the reflection.
    Reflections in Photoshop - Step 7

Note: you want to make sure the reflection very subtle and really transparent. An opaque reflection usually looks like a cut, unfinished image and comes out to be gaudy more than anything else.

Jul 29
2010

With the creation of smart phones and since your mobile device is conveniently available anywhere, mobile internet browsing has increased astronomically. As such, users have come to expect better experiences on their phone. Unfortunately, not all sites have a mobile version, which is a problem since there’s a good chance your site will look significantly smaller and possibly illegible on a mobile device.

This should raise a couple questions:

  1. Is your site compatible on all cellular phone platforms?
  2. Is the site being used on a cellular phone the same way it would be used on a desktop?

If you aren’t sure, don’t guess; check your analytics. Here’s a post on how to track mobile traffic.

Issues with Mobile Usability

The answer depends ultimately on the function of your site but of course regardless, browsing a website on your mobile is a much different experience than browsing on your desktop. That said here are some usability issues you may run into while browsing on your mobile:

  • Excessive Scrolling – Phones have been getting smaller and sleeker over the past couple years, which means screens are even smaller. While the width of a standard desktop screen is around 1052px, the standard width for a mobile site is 250px. Unfortunately because of the small screen restriction, viewing a site is very frustrating because of scrolling and/or zooming in. I’ve run into this problem so many times, when I search on my blackberry, I always have to zoom into the site to be able to read, which of course means I have to scroll from right to left to read the content properly.
  • Load Time – Non-mobile-friendly sites could take a long time to load.
  • Page Height – Along with having to zoom, the page could be longer than necessary, causing the user to have to scroll down.
  • Flash – If your site has flash, more than likely it will not be supported by all cell phone browsers.
  • Mobile Location – Another factor affecting mobile browsing is location of the user. While computers are generally stationary, cell phones are used everywhere (hence the world “mobile”). The contrast of the colors and font size on a site may not be legible while using a cell outdoors.

Mobile Design Tips

Here’s a list of guidelines for designing a more-user friendly mobile site:

  1. Screen Size – Design your mobile site to be 250pxE-Nor Mobile
  2. Limited content – Since the width is limited, height may be used to fill in space that is lost with width. However, it’s best to avoid having a long page of content. After all, this is a phone and is still quite small. Whether its touch screen or keys based, it’s much harder to scroll up or down than it is on a desktop.
  3. Clear action buttons – Again, since the screen is small, it’s best to make sure if you do have images to make them clear, and if that means using the whole width that’s okay. Same goes for buttons, if there is a clear action, it will be seen, so the bigger the better. I highly recommend buttons over links; specifically for touch screen users. When trying to click on a link, it’s always so hard to actually click on the correct link. The link will usually be buried within text and other links.
  4. Create a separate mobile environment – administering a site that is optimized for a desktop that is at the same time 100% mobile friendly is very difficult since both natures are completely different. That would mean you’re essentially limited to the parameters of mobile (for example, when choosing the width of images for your desktop site, you’ll be nagged by the limits of your mobile resolution). It’s best to have a separate environment specifically catered to mobile screens allowing you to have freedom in both designs.
  5. Real Estate – Mobile “real estate” is very limited; to maximize the use of space in your design, simplify your site to the very basic functions of your company. For example, if your desktop has three panes; a side menu, content, and news. The side menu may not be completely necessary, especially since the navigation on mobile and desktop is completely different.
  6. Meet the user’s needs quickly – If the South Africa World Cup is the hot topic, and you’re cnn.com, make sure that story is visible above the fold right away.
  7. Clear functions – Make things clear and easy for the user to find. If you want someone to click on a button, make it large and bright to emphasize the action. For example, on a mobile site it would be smart to have a back button rather than a link because it’ll be easier for the user to find the button than a link since a link could easily get hidden through the text.
  8. Ease of use – The user shouldn’t have to waste time scrolling up and down looking for something that should be easy to find. For example, in tip #5, I talked about “real estate.” With a limited width, you lose a lot of space for content, but what you lose in width you can make up in the height. This makes it much easier for the user to read rather than having to scroll from left to right.
  9. Browsing Links – Use only basic browsing links such as home and back, you don’t need to include the whole menu that is on your desktop site. Make sure to add the browsing links at the top and bottom of the page.
  10. Search – For some sites, it is very important to have search because the site is search based for example, Google or Target. Google is search based links, while Target is search based products. If your site is search based, including two search boxes may be really helpful. Some companies have sites that are entirely search based such as Google, their desktop and mobile site is just a search bar. As for Target and Amazon their home pages have a search bar at the top of the page with browsing links below, which is another way to go because you can browse products as well as search for them.
  11. Testing – Lastly, make sure to test the usability of the mobile site on different phone browsers. This, of course, would be a separate checklist from launching your desktop site. Keep in mind, phones can be used in any location, for example, the contrast of a screen in the sunlight, has to be legible.

Having a mobile friendly site, will make it much easier for your customer to navigate, making for a better user experience, in turn, increasing your conversion. If mobile phones make shopping more convenient, you want to make sure your site takes advantage of that trend and make it easy for users to shop for your product as well.

And now that you have a mobile site, few things to keep in mind:

  • Search engine optimization (SEO), here is a link from the Google Webmaster tool on how to Help Google Index Your Mobile Site. Mobile websites are often returned in Google mobile search results (and other search engines too) in preference to non-mobile websites.
  • And once your mobile site is ready for prime time, you might want to drive qualified traffic through paid search (aka Pay-Per-Click) on Mobile, here are some ideas from the Google AdWords blog.
  • Last but not least, you gotta measure! A separate mobile website is easier to track on all devices than an integrated website where the tracking code might not run on all devices. Try Google Analytics for Mobile.

We’re in the process of practicing what we preach, so keep an eye out for the E-Nor Mobile Site! :)

References

For more info on mobile usability check out the following references:

Dec 23
2009
Would you like to increase your sales or number of leads by 10%, 20%, or even more, without increasing your marketing spend? I’m sure most of us wouldn’t mind that extra bit of sales and revenue :) . Well, there is no better time to do it than now. Roll up your sleeves, summon your web designer and your web analyst and then marvel over data available from Google’s new tool: Browser Size, with data from Google Analytics, and then start rockin’ n rollin’.

Google Browser Size

Google has recently introduced a new tool called Browser Size to help web designers “ensure that important parts of a page’s user interface are visible” by a wide audience. You basically type your URL in the tool and it’ll then load your page and show what percentage of users see what sections of the page, without having to scroll i.e. giving us a visual view of what is seen “above the fold”. The idea is if more people have to scroll to find your “calls to action” they are less likely to click and convert. For example, Google applying this method on Google Earth download page layout had an impressive 10% increase in their download rates by moving the download button up by 100 pixels.

So what does the Browser Size look like? Here is how our home page appeared in the Google Browser Size:

Google Browser Size

As you can see, 90%+ of the web population can see our “Optimize Your site” Call-to-Action, the green button (surrounded by a red box for you to see it in this above snapshot, but the home page doesn’t have this ugly red box :) ). Kudos to our creative director and web designer (luckily we recently distributed Nordstrom’s gift certificates for the Holidays, otherwise they both would be asking for a bonus after reading this post:)).

Design Best Practices

Now that you have a visual view of your most important page elements, it’s time to put this useful information into action. We do know that design best practices for usability and conversion teach us that your important information should be immediately visible and easily accessible to users. An example of such an element is a conversion button, such as “Buy Now” for an ecommerce website.

Let’s say you have a “Buy Now” button at the bottom of the page, where only 20% of users can see it. And say your “add to cart” rate is 5% for all the visitors that come to this page – so for 1000 visitors, that’s 50 starting the purchasing process.

If we know that according to design best practices, a visible “Buy Now” button that catches your users’ eyes will entice users to buy, thus, “above the fold” is the way to go – that is, making sure this button is visible to as many users as possible (not requiring them to scroll down) could significantly increase your “add to cart” rate. That is, if 20% of your users seeing the “add to cart” button is leading to a 5% “add to cart” rate, imagine what 90% of your users immediately seeing the button may do. Even if that causes a 5% increase in “add to cart” (the new “add to cart” rate will now be 10%), you’re looking at doubling the number of visitors that start the purchasing process and you are likely to double your sales/revenue.

So with the help of this tool, if your page is being designed for 1280×720 and you realize 20% of your users can see that resolution while 90% can view 800×600 – though you don’t have to change your design to be tailored to fit the smaller size, at least the important elements should take this into account.

It’s worth mentioning that some folks have other views about the benefits of the “above the fold” concept, for example we really shouldn’t be cramming too much information up “above the fold” and we should keep in mind that “less is more”. Nonetheless, the Google Browser Size is still very useful.

Google Analytics offers additional data points & insights

The data in the Google Browser Size is collected based on visitors to Google.com. What you can also do is to use screen resolutions data from Google Analytics on your own site . Here is how to get the data in Google Analytics:

  • Click on the “Visitors” tab
  • Click on “Browser Capabilities”
  • Then click on “Screen Resolutions”

You’ll get a report on screen resolutions that visitors to your own site use. You can then optimize your site based on this information. Here is a look at the report for our site:

So it appears that from our own screen resolutions data, most of the visitors can more or less view the entire page (a very good thing!).

Now, if you had a site that had a different screen resolution distribution, like the one below, you’d want to review the current design/layout of your pages and tailor them to the different visitors’ pattern.

Google Analytics Screen Resolutions 800x600

Segmentation, Segmentation Segmentation

And as always, don’t just look at data in aggregates, use segmentation to your advantage and zoom in on the data segment that is most important to you. Here are some examples of how to slice your data before you start your analysis and fact finding:

  • If your targeted audience is only in US & Canada, then run the Screen Resolutions reports on an Advanced Segment for the US & Canada audience
  • You might want to also segment by buyers and non-buyers and monitor any interesting trends between these two distinct groups of visitors
  • If you have different page layouts on your site, for example, your blog, your home page and category pages, you’d want to run the above analysis on each unique layout and make sure the messaging/calls-to-action are where you want your visitors to see them

Testing with the Google Website Optimizer (GWO)

One last note. If you are used to running tests, whether A/B or Multivariate, then it’s probably a no-brainer to run an experiment before you make massive (or small) changes across your site. If you haven’t tried testing yet, then this is a perfect opportunity to take the data and analysis to your manager and convince them to support you with resources to begin testing and realize site and revenue improvements! You can use the powerful and free testing tool from Google, the Google Website Optimizer (GWO), or another testing tool of your choice, to confirm (or disprove) your hypothesis before your roll out the design and layout changes.

Hope you find this post helpful. Feedback, comments and questions are most welcome!

Related Posts

Jun 09
2009

Web 2.0, THE popular style and standard for contemporary web design, utilizes the use of clean, bright colors, and gradients. A key visual indicator of Web 2.0 design is the use of large, 3D buttons that grab the user’s attention. Buttons can be used to promote a sale, contact, and/or have a slogan such as “Lose Weight!”, while at the same time, tempt the user into clicking and going where you want them to go. You know you couldn’t resist pressing the red button when your mom told you not to!

The impact of having a button is far greater than just having a link on your site. For example, if your site said “Contact Us” at the bottom within the content, the viewer would most likely have to read through the content until they get to the “Contact Us” to even know its there since its buried in text. But a button that clearly states “Contact Us” is more likely to visually attract their attention.

In this post, I’m going to go through how to make web 2.0 buttons that “pop”, even if you’re not that Photoshop savvy.

I just learned how to create web 2.0 buttons a couple months ago. It usually takes me a couple hours to get the right effect and gradient exactly the way I want it to look. Luckily, I stumbled upon an awesome resource for gradients and styles that made making buttons much easier than I could’ve imagined. I was searching around various blogs trying to find a post that was interesting and useful and found this BIG TIME TIME SAVER!!!

After downloading these photoshop styles/button templates, all you really need to do is minor tweaks, and your button is ready to go.

Here’s how:

  1. First thing you have to do is download the zip file from dezinerfolio.com, who shared their styles on their blog.
  2. After you download the zip file on this page, upload it into your Photoshop,
  3. Open up a new Photoshop file and go to Window > Styles to bring “Styles” into your toolbox (shown below).


    Now that you have uploaded the style, you’re ready to create a web 2.0 button in little to no time!

  4. Open a New Layer on your file and find a style you like best.
  5. Once you’ve found a style you like, simply click on the style and the settings of that particular style will automatically be implemented onto the layer.
  6. As you can see in the images below, the image on the left shows the styles in the toolbox and the one on the right shows how the styles effects automatically updated into the layer.

  7. Next, choose a shape for your button; I like using the rounded rectangle tool for a button.
  8. After you’ve chosen a button shape, click and drag the mouse to make the rectangle as big as you want. As you can see in the image below the color of the style/gradient I chose fills in the rectangle.

  9. After you have the button, color, and style you want all that’s left is adding text and layer effects. Below I have an example of the button with text. I have put some layer effects on the text to make it pop out of the button.

  10. After you have stylized the button how you want it, you can trim the white space around the button.

  11. And there you have it, a button! That didn’t take long at all! :)

May 05
2009

A very basic but extremely vital part to web design is understanding your users’ logical thought process and flow. You want to take this into account as early as possible in your design phase so that you create a very familiar flow to the user.  Putting a link or information in the next logical place makes the process intuitive and thus, more likely will lead the user to convert.   The more familiar the flow, the less they have to figure out where to go which betters their chances of getting from their starting point to your ending point.  The your end-point could be them submitting your form or buying your product.

While missing this boat can make you question “Why isn’t my page converting?”, getting it right can change your page from an occasional “hit-or-miss” to a conversion machine.   In some cases, simply changing your design to make a button or link more intuitively available might end-up increasing your conversion rate by 100′s of percentage points.  That small design update just grew your business astronomically.

There are two main aspects when it comes to understanding logical user-flow:

  1. User-interface and page yayout – actual elements of the page that the customer will be interacting with.
  2. Site structure and navigation – how your pages are organized.

In this post, I’d like to go through the first item – UI and page layout.

User-Interface and Page Layout

As I said, it’s important to remember the way your user will interact with your page while designing your page layout.  Take into account your users’ natural reading pattern – which in the U.S.A is left to right, then top to bottom. Thus, the top-left-most content will be the first thing they see then and they’ll be moving in an “F” pattern down your page.

Here’s an example of a login form that does poorly at following user-flow:

Poorly designed Control Center login form.

Can you spot the issue here? ANSWER: The “Login” link is in a bad place (you see it at the top right).

  1. A user will go to the “Customer ID” field and enter their ID.
  2. Moving left to right, they will move on to enter their password.
  3. Resetting now like a type-writer (I don’t know if people still remember those), the user will move to the “Language” field below.
  4. Ok, now were ready to login. When I move down and to the left…where the heck did the “login” button go?

The placement of the login button is not in the next logical place, and not only breaks up the user flow, but is also hard to find (aside from the fact that it is not a clear clickable button).

Now this may not seem like a big deal here cause there’s not much going on in this form. But what happens when the form is longer down the page and they have to scroll back up to search for this login/submit link? Should we assume the user knows to do this?

No. You’ll be surprised the percentage of people clicking such a link decreases or increases based on simple logical placement of this button.  Remember, a as surfers, we do not want to think.  We do not want to search.  It is as easy for us to close the page, and move on to the next site in a blink of an eye.

Worse – let’s say this is a “Checkout Now” button and your site makes $10k a month in revenue on this product. If the placement of this button even affects conversion even  by 10%, that’s enough to make a difference.  Larger sites that make significant online revenue a month would be greatly impacted, where even a small percentage of decrease would hurt (or a small increase could pay-off big time).

In the case that you are a smaller/medium size online business, online conversion may be your businesses only means of survival, so a small design detail like this could even make or break your business.

Apr 08
2009

While here at E-Nor, we are heavy on analytics, data-crunching, and numbers, we do have a fun side :) – an understanding of aesthetics and usability through design. After all, let’s say your landing page bounce rate stinks. It could be the design that’s causing users to be frustrated and just “bounce”. How do we fix that? That’s where the Creative Department comes in! We make sure your site is as usable as possible, getting the visitor comfortable enough to ultimately convert.

Today, let’s talk about a great new usable design for multi-level drop down navigation menus. The “Uber-Menu”.

What the heck is an “Uber-Menu”? I recently attended a webinar given by Hagan Rivers, a UI navigation expert, and she brought up a great concept of “uber menus” which many sites are using today. Uber menus, as they relates to web sites, are basically drop-down or flyout menus that lay out certain levels of your site in one big box – most likely to layout your second and third levels.

a) Often, third level dropdowns or flyouts can be quite annoying (see above). The main problem is that our hands aren’t usually steady enough to go in that perfect “L” shape to perfectly hover over 1st, then 2nd, finally 3rd level drop down or flyout. Most of the time, you slip, and both menus disappear! Freaking annoying! Enough unsuccessful tries, and your user may end up frustrated enough to try your competitor’s menu.

b) Another usability standard to take into account is laying out links versus keeping them an extra move (click or hover) away. Studies show that links are more likely to be clicked if they are explicitly “laid out” as opposed to someone having to hover over their parent or having to click their parent link to get to another navigation page or tab containing the link. (See above).

Also, many sites have recognized the error of including a third level in your drop down menu – you run into the problem outlined in (a).  The usual solution is to cut out the third level completely from the menu. Which is kind of the same thing as saying, “This compass is a little hard to use, I’m just gonna chuck it in the river.”

Uber-menus seem to solve (a) and (b) outlined above, coming up with a nicer navigation layout.

We can see here, the level 1 parent being “Patio and Garden, level 2 and 3 are completely laid out – level 2 in bold and level 3 is indented in normal font, which allows the user to easily differentiate the two. You don’t have to worry about keeping a surgical hand on the path to the third level of the dropdown menu. On top of that, your user at first glance can see all goodies and pages your third level has to offer.  One thing to also notice that you can’t see in the picture is that by clicking on “Patio and Garden” the menu stays open.  A positive of that is moving off the menu wont cause it to vanish.

Interested in advanced web design and navigation techniques? Give us a shout!

Oct 01
2006

Normally for a project that is either being scoped as custom or requires integration, a website development company needs to invest some time into making sure the project and work required is well understood before proceeding to offer a formal quote. We have learned through our experience that bypassing this step is detrimental to the success of the project. We’re looking at this from the client’s perspective and from our own. It helps us to know exactly what we’re committing to and the client also will have a clearer picture of what we’re building so there are no surprises.

Other companies may provide a ballpark figure or estimate based on past integrations they have done but the risk factor in that type of an estimate is very large, and usually results in a strained client/vendor relationship because of additional charges that come up when assumptions are proven incorrect. We prefer to quote based on requirements, not assumptions, and we take the necessary steps to ensure that all possible requirements are documented clearly and understood – this method has proven to work each and every time.

Typically, there are a number of questions especially with the integration part being related to the eCommerce and how that will relate to one another especially with the information being dynamic and transactions dependent upon this information. Some samples of questions related to integration are:

  • What is the nature of the data?
  • In what format can the data be provided?
  • Ensure data maps directly to destination or platform?
  • Within the data set, which items are updated and why?
  • Is the data constant, or are there additions and deletions?
  • How should destination handle additions and deletions?
  • How should destination handle exceptions?
  • What monitoring or notification needs to be in place?

There are a number of other questions that we usually encounter when diving into this a little further. For us at the preliminary stage of scoping, the analysis may reveal that more things to consider or that the work is straightforward. One thing guaranteed is that there will definitely be a more accurate proposal.

For further information on scoping custom or integration projects, feel free to contact one of our internet consultants at www.E-Nor.com.

May 12
2006

Well you’ve finally come to the conclusion that you need a website. Great stuff! A website is an effective marketing tool for your business. Literally millions of people go online now to find what their looking for instead of flipping through the antiquated yellow pages. So where do you begin?

Enter Li’l Johnny, your nephew, aka the computer geek of the family. Li’l Johnny is an exceptionally bright kid, with a very rare talent in “doing computer stuff”, and this makes him the perfect candidate to take on the job of designing your website. The hours and hours he spent fiddling around in Adobe Photoshop zooming into images, resizing them, warping them, and applying all sorts of crazy, sometimes ill-contrived effects serves as the foundation of his knowledge. The skills he honed in scanning your family re-union photos, editing the group image of your family, cutting out old Aunt Beth and replacing her with a tree stump, have most certainly prepared him well.

The trick is to get Li’l Johnny inspired and in the right frame of mind by buying him something he wants… like those cool new Nike shoes, or tickets to a football game for him and his buddies. Once he appreciates you, he’ll be in the right frame of mind to produce the right design for you.

So with a great attitude and a renewed love for his favorite relative, Li’l Johnny will get hard at work and slap together a design that will totally blow you out of the water. Finally the day arrives – It’s everything you ever imagined, the perfect representation of your business…

Or is it?

Perhaps we should look at this from another angle. A professional website design takes into consideration several factors, none of which involve removing annoying relatives from family photos, as enticing as that might sound :)

Li’l Johnny, while sincere in his efforts, isn’t aware that a successful website design takes into account the following factors:

1) Goals and Objectives – Designing a site with loosely defined or no measurable goals is a waste of time. To achieve design success, take the time to identify specific goals and objectives, and ensure a mechanism is in place to test against those benchmarks. Investing in tracking or surveying software to qualitatively and quantitatively monitor the site.

2) Target Audience – This is the most important aspect of website design. A successful user experience will result in repeat visits, referrals, and a positive atmosphere on your site. Even one bad experience, and your customer is lost. Focus on who your target audience is. Identify their likes/dislikes, their background?

3) Web Standards – Ensure that the site is designed to meet the latest level of web standards. Even the smallest mistake can result in alienating a huge percentage of your customer base, because the site won’t function in their browser, or their monitor resolution. To achieve the greatest level of flexibility, make sure the code is streamlined, and effectively employing Cascading StyleSheets that separate content from presentation. Keep an eye out for Usability and Accessibility standards.

4) Usability – Your site may look nice and be technically sound, but is it usable? Information should be easily accessible by a broad base of users, each of their own level of expertise and background. Users should be able to navigate the site with minimum clicks and find the information they are looking for easily.

5) Keywords – Have you done any research on what your target audience is searching for online? Did you make sure that these keywords are prominent on the site and in your content? Did you know that most site visitors, don’t actually read the content…they skim through it. Keeping that in mind, keywords should be placed strategically throughout the site, to achieve maximum visibility. This is a major aspect of implementing an effective Search Engine Optimization (SEO) program.

6) Marketing - do you have a solid plan in place to market your website once it’s complete? Even with the nicest design, a website is useless unless your customers visit it. How effective would it be to have a beautiful store, without any customers in it? Same principal…

7) Maintenance – A site is only as good as its content, and content should change on a regular basis. How should that happen? Should you hire a web design company each time updates are needed? That doesn’t sound very appealing. Instead, invest in an infrastructure allowing the you to easily update content/information regularly.

Let’s let Li’l Johnny focus on his grades in school, or perhaps he can do a website for your family. Leave your business to the professionals.

Apr 13
2006

If you are a frequent user of the web, you’ve surely browsed a site styled by Cascading Styles Sheets. CSS has made a huge difference in the world of web design. They offer you the ability to change the entire look and feel of a site without having to edit countless sub pages. In the next few paragraphs we will see why CSS is practical and how it is being used to revolutionize web design as well as taking a look at an example of CSS in action.

Anybody who has written html code is familiar with the html [font] tag knows that it is used to make changes to the letter styling, size and color (to name a few). It is a vital tag for the novice webpage designer. However, it can pose some problems in making updates and design changes.

Consider the following example: A site with 3 pages where each page has 3 paragraphs. The first paragraph is written in a 10pt. red font while the second one is written in a 20pt. green font and the third is written in 12pt. black, bolded, and italicized font. We now have a problem! Aside from having an eyesore of a site, if we decide to change the current style we have, we need to edit 3 different pages, each with 3 different font tags. Now imagine this for an entire website! You can see that this will be a very tedious task. This is where CSS comes to the rescue. Had the styles on this site been managed using CSS, you would only need to edit a few lines on your style sheet and the changes would apply (or cascade) throughout the site.

The use of CSS is not limited to the editing of fonts. Far from it. You can change the style of your entire site using CSS. Margins, background colors, image properties and custom bullets are just a few of the style elements that can be modified using CSS. This allows for a consistent look and feel across the site without the hassle of editing every single page. Furthermore, CSS can be used to adjust the placement of objects on a site. As CSS becomes more widely used as a standard, tables will become a thing of the past. This allows for much more freedom in design and makes changing the position of elements of a page much simpler than dealing with tables.

We will now look at an example of CSS in action. Here we have a copy of the New York Times home page on April 6, 2006. As you look at this you may ask, What is the CSS doing on this page? It looks like a regular page to me. In fact you’re right, the end result will be the same weather you use style sheets or not, however it is the process of getting to that result that differs vastly.

Let’s take a look at the same page without CSS.  You can disable CSS inside of your web browser.  You may find yourself wondering if you’re looking at the same page, but if you scroll down you will see that the content is the same. This massive change was brought about by removing the link to our style sheets (three lines) from the header. This shows us the power of CSS as well as how simple it is to include or remove from our code. Had this page been created without using CSS it would have taken a hour at least to replicate the same thing we did by removing a few lines.

You may find yourself asking, Well what does this mean for me as the proprietor of a website? I don’t manage it, what do I care? It comes down to this: a site like this will be much easier to modify if the bulk of the design changes can be done by editing one or two style sheets as opposed to every single page on the site. This in turns means less hours spent modifying it, which in turn means you pay less for the same work.

Still not convinced? Consider this: CSS is revolutionizing the way we make web pages. It will soon become the standard. Designing a site purely controlled by CSS requires planning but will pay off in the long run. It will take us into the next generation of websites.

For more information contact E-Nor today!