WYSIWYG editor

WYSIWYG stands for What You See Is What You Get, used to describe a user interface in which content displayed during editing appears very similar to the final output. A good example is MS Word.
Having this on your website, means you can edit the content yourself with the ease of editing a Word document. You don't need to depend on others to add or change text or images. You can keep your site up to date yourself. New and accurate content is what makes visitors come back.

New content will automatically insert itself in the menu structure, have a logical adress path (URL) and you can position it higher or lower in overview pages by giving it a weight value.

Now register and try to add a News Item to play around with it. Write some text, change the font
or add a picture. ONLY WORKS WITH A BROWSER OTHER THAN EXPLORER! You edit your website with Mozilla, Opera, Safari or Google Chrome. Apart from editing, your website will work fine also in Explorer.

Images

Many options for a stylish presentation of your images are available. Below a slideshow with no buttons (mouse over = pause, click = next). Keep it simple .


Here a magnifier to show product details. Move your mouse over the image.

[more slideshow examples]

For the normal presentation of images we rely on Lightbox2, an overlay browser (viewer) that opens when you click on a picture. It offers the following advantages:

• Your visitor doesn't leave the original page
• Quick load times
• Clean presentation with black semi-transparent background not depending on your theme
• A thumbnail on the original page leaves more space for other content.  The visitor can see a bigger image if desired
• Opening of the Lightbox will be applied on all images in your site by default. No need to do anything to accomplish this. Just add your images. You can choose between many standard thumbnail sizes, the original or customize it.
• Navigation to see also the other images from the same page in the same viewer by default. No need to do anything to accomplish this.

Click on the photos below:
         

Lightbox can also start as a slideshow or display videos (see next chapter).
         

Another example made with flash.

Virtual tour

Inside the diving center (click to open):


360° panoramas can be a nice way to show exactly how a place looks like. It's ideal for hotels or real estate agencies. After a short instruction you are even able to do this yourself with a normal digital camera. The photos you make can be stitched together to a panorama to be displayed on your site thanks to a Java applet panorama viewer.

The demo as shown above links to other views by means of the images as shown under the viewer. Also so called "hotspots" can be used in the actual panorama. These are areas (for example arrows)  that take you to a new panorama when you click on them in the same viewer window. We didn't use it in the demo, because it slows the load time of the Java application. We prefer the method shown above also because it already shows the visitor the other views in a global way.

Flash vs Javascript

Most of the animated effects on this site are realized with Javascript and not Flash. There are several reasons for that:

• Allthough Flash makes your site look more dynamic, it actually makes it a lot slower. The page load times for the same effect made through Javascript are much faster. Probably you noticed that most Flash applications in a website provide a progressbar that shows the state of loading to the impatient visitor. Javascript is faster because it runs from the computer of the user (client side) and not on the server side.
•  Javascript comes with your browser and is therefore more widely supported then Flash Player.
• With flash the content can’t be indexed, so it can’t be crawled and found by search engines.
• Most interesting Flash applications are not Open Source. Not even for non-commercial use and mostly the license is valid only for the site it appears on. That means that applying them in your website has an additional cost.

There are many other reasons that make Javascript favourable against Flash (another article).

Nevertheless if applied in the header banner, Flash can give your site that nice dynamic swing. The header is an elements that only loads once and appears on each next page very fast, without having to load again. The header space is also very valuable for the search engines, so this is only an option if you care less about your ranking on Google. We use Flash, but in an intelligent way. The meanest animations on the web are made with Flash (an example).

Navigation

The menu has to be simple. If visitors can successfully navigate through your site to find what they are looking for, they will stay.  A good rule of thumb is that a visitor should be able to get to every page on your site with two clicks from your home page. Now, this is not realistic for complex sites. An expanding navigation menu (dropdown), that visitors scroll over to reveal the submenu can help, but we try to avoid complex multi-level menus.

An example of a simple dropdown menu:

A search function is good for your site and bulit in standard by us (see the search field at the top left corner). The annoying "Page Not Found" message doesn't exist, because it will automatically perform a search. Try to go to the none exsisting page http://sharmweb.net/screen. If there is only one search result it takes you there directly.

In the sites we built, new pages will automatically be added to the menu structure. Look for example at the menu "Demos" here on the left. You can walk through the same articles also through the navigation at the bottom of each article (see page bottom).

Many thanks to:

Mail

With your website you get one or several email adresses (e.g. admin@..., info@..., noreply@... john@...,sales@...).

You can enter your mail online by going to mail.sitename.com. This provides the RoundCube webmail.
Besides RoundCube you get server access with many more configuration options:

• change your password
• forward your mail to any other address (e.g. to a collegue when you're temporary unavailable)
• autoreply (e.g. to say when you will be back when you are on holiday and that your mail has been forwarded to a colleage)
• configure automatically your local application like Outlook to receive the mail also on your own computer
• BoxTrapper and filtering

Multi language

We tend to think english is more universal than it really is. To stick with scuba diving, the word "buoyancy" in english, is "assetto" in italian, "flottabilité" in french, "auftrieb" in german and "drijfvermogen" in dutch. So, some words are completely different even in languages of the same origin. If you aim on an international public, you should offer different language versions of your complete site.

When you ask us to set up the multi-language functionality for your site, we offer:

• automatic recognition of the browser language of your visitor. They will automatically be redirected to the right language version of your site.
• a menu block with flags to change to any other language offered. If certain content is not available in the requested language, it degrades to another language but all the rest, like the menu options, remain in the desired language.
• support of non-latin characters, like arabic, russian, greek or whatever you want. Even for the complete administrative part that you use.

We recommend to:

• translate all content to another language.
• use proper translations. Machine translations are just to make the job of translating easier, but don't confront your visitors with it.
• don't put up a language if you can't respect the rules above. Help to keep the web clean with proper content.

Search Engine Optimization (SEO)

Search engines can recommend your site to the right people (searchers) by understanding what your site is about. They read your website with a crawler, also known as a web spider, web robot. That means that it's up to us to communicate clearly with the search engines to tell them what can be found on your site, what kind of visitor you're looking for, and how important your site is in the grand scheme of things. This is SEO at it's most basic level.

The content management system we use is search engine friendly. We set it up with clean URLs. The page addresses integrate automatically the content title in the path. This is called an alias. So, after your site is up for some time, it will appear by itself in Google (think in terms of several month). But sometimes we want to speed things up and have the highest possible ranking for certain keywords.

When we do a SEO, we go through a checklist:

• Do the titles from the pages reflect the content? The page title is the content title, but we can change that.
• An alias provides a nice clean URL for a path on a site. However the CMS does not remove the old path (eg node/1234). The problem is that you now have two URLs representing the same content. This is dangerous territory for duplicate pages which can get you sandboxed by the search engines! So we enable a global redirect for all the old URLs.
• Create one or more search engine accounts and authenticate your site.
•  Add meta tags for page. Giving more attention to the important keywords. Add relevant titles also to all images.
• Create and submit a XML sitemap. This helps search engines keep their search results up to date.
• If appropriate, submit to Google Local.

A big deal depends aslo on how many times your site is mentioned on other sites (referrers). This can be established by subscribing to forums and social networks that treat about the subject of your site. You should participate actively on the web and link to your own pages as much as possible. A forum about "scuba diving"? Simply subscribe and add a tread in the forums "How to make circular bubbles".  Open with the sentence "Want to see circular bubbles? Go to http://deardivebuddy.com/education/circular-bubbles-how-make-them-safely ."

You might not be interested in a worldwide public, but only in your local area. In this case printed promotion is a good additional option. Business cards, announcements in local media, pens, baseball caps. This generates direct access.

In the beginning direct and referring links take up the majority of the traffic. This will sooner or later been taken over by search engine traffic. It takes at least several month of patience before Google gives your site a minimum of importance.

Web analytics

To verify the effectiveness of Search Engine Optimization and other actions to attract, maintain or commit visitors, we need statistics about the visits to your site we can analyze.

Much software for on-site web analytics is  available. There are two main technological approaches for collecting data. The first method, logfile analysis, reads the logfiles in which the web server records all its transactions. The second method, page tagging, uses JavaScript on each page to notify a third-party server when a page is rendered by a web browser. Both collect data that can be processed to produce web traffic reports (source: WikiPedia). We use both methods for collecting and analyzing web traffic data for your site because each has its strengths and weaknesses and neither is superior to the other.

Logfile analysis is already deeply integrated in Drupal, the CMS (content management system) we use. Each seperate content has a view counter and you can track visitors and referrers. These are standard built in in your site.

Third-party solutions we additionally use are:
Google Analytics
Woopra
Clicky

We can use any other. It's easy to add a tracking code to the pages of your website. Remember that it adds also page load time, so normally you just go with one.

RSS-feeds

Study found that only 12% of all users are aware of RSS, and just 4% had knowingly used the technology for reading feeds from blogs, news sources and other regularly updated content sources on the web. If you're unfamiliar with RSS, click this link for a textual explanation or this one for a funny but superb video explanation (recommended).

Because webmasters are more aware of what RSS-feeds can offer, it is more used to have fresh changing content automatically on your site from all the interesting sources you find on the web. Different forms of presentation are possible. To keep a fast performance of your site, the feeds are cached on your server and refreshed after a certain period.

Besides the little widgets visible on this page, you can also have a more serious RSS-aggregator to integrate feeds in the theme of your site. Here you can even delete single items inside a feed (some you want, others not).

Some examples of RSS-feed tickers (mouse over = pause):

Security & Antispam

Disable right-click, copy and paste, special toolbars and/or add watermarks.
Sometimes you want to prevent download of content of your site, especially text and images. Of course you can never prevent the more able visitors to make a screencapture with offline software, but you can make it a little bit harder. On this page we disabled right-click (try on the image below), copy and paste of text (try to select some text here) and the IE image toolbar. We can automatically add watermarks to your images or let them appear only in "low-resolution" (good on the screen, but bad for printing).
Deny direct access to (image) files.
Anyone that  is able to reproduce the source code of your site, can see the URLs (web adresses) of the images. We can block direct access to these files through site wide hot link protection, allowing only the server (your site) to invoke these images. Direct access through the visitors browser will redirect to your homepage.

Anti-spam.
When submitting comments by anonymous visitors, they are confronted with a simple math challenge to check if they are human. Links in comments by anonymous visitors are not allowed by default to avoid spam .Try to leave a comment to test. Of course we can take additional measures if necessary. If you don't want to bother your visitors with a challenge, we can use the service provided by mollom.com.

Advanced user management.
Regitered users besides having a password, are assigned a user role. You can create user roles with specific permissions for alowing users  viewing, creating, editing or deleting their own content or else . You can block individual user, even anonymous, based on their IP-adress. You can also protect certain pages or sections of your site with a general password (not user related), use one-time logins, pay-per-click, time based membership or whatever access restriction you can think of.