Drupal, a CMS

A content management system (CMS) is a computer application used to create, edit, manage, and publish content in a consistently organized fashion.^[1] We only create websites with a CMS because it's the only way to give YOU the possibility to edit and create content on your own site. Being able to update and maintain your own site, independent from the original webdeveloper.

As CMS we have choosen Drupal.  Go here to know why.

Newsletters

One of the most effective ways to make your customers return is to send them periodically a good old fashioned email. Integrated in your site you can publish and send newsletters to lists of subscribers. Both anonymous and authenticated users can subscribe to different mailing lists or you can add them yourself.

HTML email can be send. In fact, we provide you with a template that resembles your website lay-out. You will have a mail with an outraging modern and professional look. Again, the emails can be made with the ease of making a Word document (or even easier). Of course you can integrate images in your mails.

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 try to add a comment 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.

Carousel

Example of a carousel:
click to expand









A carousel is needed when your visitors want to go quickly through a big amount of images in a limited space. A good example is the presentation of a product line where you expect your customer to be interested just in one product.

Another example made in flash:
 This effect is well known from Apple iTunes (iPod, iPhone).

©copyright PhotoFlow Flash Gallery

Videos

Putting a video in a website is as easy as copy and paste an embedded code from YouTube or alike. Many times this is sufficient, but sometimes:

• we need more videos in one player to save screen space (a playlist)
• the content does not comply with YouTube's policy
• we don't want the content to be on a public domain
• simply don't want to depend on a third party
• we want to customize diplaying options to our needs

The viewer (Lightbox2) as described before, besides images can also be used for displaying video content. If a playlist integrated in the player is necessary we use JW media player or dashplayer if you want complete integration with your site (view counts, theming, dynamic playlists).

Video content must have a .FLV (flashvideo) or .SWF (shockwave flash) extention. If you want user be able to upload also other formats to be rendered (.AVI, .MPEG, .DivX), we us a server with an application called FFMPEG. This enables automatic conversion of the format. In most cases it's more convenient just instruct your users how to convert files themselves with free easy-to-use on- or offline software or by opening a YouTube account. YouTube offers one of the best conversions available (quality / size ratio). Just upload a video and then download  the converted version. Their converted files render the best, even in your own web applications.

P.S.: Lightbox2 can even display other webpages dynamically within the actual page, but we reccommend using the normal popup window for that.

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.

Themes

A theme is the graphical appearance of a website, used to customize the look and feel of it.

Fluid or fixed width.
Fluid width websites are the best way to accommodate all visitors screen resolutions. With fixed width websites, you have to make a choice. We can optimize for 800px width, the lowest common denominator, and give up the use of several hundred pixels of width for users with larger screens. Or, we can optimize for 1024px and just make your 800px visitors horizontal scroll. In our opinion anything wider than 1024px is too much for static width sites.

It's a common mistake to think that screen resolution only gets bigger. Netbooks with small screens 7"-10" become more and more popular. Many websites make a special version for viewing on a smartphone.

Important with a  fluid width layout:

• Works in all major browsers
• Shrinks to 780px
  This accomodates users with 800×600 resolution, with no horizontal scroll!
• Grows to 1260px
  This accomodates users with 1280×768 resolution and everything in between.
• This accommodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long. If the scan length of a line of text is longer than 10-12 words or shorter than 4-5 words, it can be very difficult to read. This means that readers with large or small browser windows will have trouble.
• Page content is centered for users with even higher resolutions.

Mixed Flexible and Fixed.
The best solution for most Web pages is a mix of flexible and fixed widths. This allows your text boxes to be a fixed width for easier reading, while the other divisions on the page can flex in size to accomodate larger and smaller browser widths.

To create mixed pages, use specific pixel numbers for your text divisions, and percentages or ems for the rest.

CSS.
Cascading Style Sheets (CSS) are used to describe the presentation of a website written in a markup language. CSS can be used by the browser to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS) (source: WikiPedia).

A demonstration of what can be accomplished visually through CSS-based design.

Custom fonts

Give a nice unique swing to your site by using a extra ordinary font for titles. This is still present as HTML-text and being indexed by the search engines. Besides that, you don't depend on the fonts installed on your visitor's computer. The font is installed on the server.

How to choose a theme.

• A websites look should reflect the type of visitors it is aiming for. It's clear a website for kids should be colorfull with many pictures.
• Many functionality features can already be build in standard themes, like dropdown menus or a header with flash or rotating banners. Other themes can often be modified to accomplisch this.
• One should always keep in mind that colors, fonts and layout can be easily altered with the css. We often hear: "I can't take this theme because it doesn't fit with our corporate colors". This is the easiest to change. With a colorpicker we can take the exact color code of logos or whatever.
• Screening your site with webstatistics like "Google analitics" or alikes over a certain timespan, shows us the actual screen resolution of your visitors. We can adjust your theme accordingly.
• A website (and theme) should be tested in all major browser and not only the latest version. Right now all our sites are tested in IE7+ and Mozilla 2+ for which we garantee a 100% compatibility. Besides that we test also in Opera 9, Google Chrome 0.2 and Safari 3 for which we won't permit major bugs. Normally if the first two work well, the last two do as well.

File upload & AJAX

Uploading of files should provide the popup window that people normally use when they handle files on their computer. Because it runs on their computer, it works fast and is familiar to them. It offers multiple file selection and preview of images.

Uploading of multiple files requires an upload queue, so the user can tell which files are completed, in progress or still to be done. A progress bar should be provided, especially for big files like video content.

AJAX is a tecnique used to refresh only part of a page, without reloading it. It highly enhances the user experience. You can use it for example to directly validate form field submissions without waiting to the user submits the entire form.

Try a combined file upload and AJAX demo.

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 several email adresses (e.g. admin@yoursite.com..., info@..., noreply@... john@...,sales@...).

You can enter your mail online by going to mail.sharmweb.net. 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, iPhone, Blackberry to receive the mail also on your own computer or phone
• 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 animated 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.
• administrative tools for language management. You can track translation of strings for navigation and have an overview of the tranlated and not yet translated content on your site.
• 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, Drupal, 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? In Drupal  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 Drupal 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 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.

The best thing you can do is deliver quality content. If visitors from different origine stay on your site quit a while, Google "thinks": "Oh look! People find that content interesting. Let's give it a higher ranking".
The next best thing is to deliver new updated content (e.g. the newsletters) regularly. If the content remains unaltered for a long time, Google "thinks" it's a dead site.

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 (in order of preference):
Woopra
Google Analytics
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.

Maps

Most of your visitors have used Google maps before. All the different interactive maps aside, that's why we use this familiar application on your website to show the exact location of your business.

An example:


View Larger Map

Other promotion (and special effects)

Being highly visible in the search engines and having many back links to your site might generate lots of visitors, but it is as important:

• they stay on the site a bit. This depends on the quality and accessibility of your content.
• they return. This depends on how actively you update your site with new content, how you inform them about it and what services your site offers. You can make them subscribe as a user to create comitment.

The quality of the content depends mainly on your own writing skills and if you have something interesting to tell. From the readers point of view, not your own.

The accessibility of the content depends on the language, if it's present and visible  on the front page and if you can reach it with one click from there.

How actively you update your site depends again  on yourself. To promote new content we can provide you with some tools:

• Newsletters. Sends html or plain text newsletters to the subscription list. Subscription and unsubscription are managed by the visitor himself through a block or a form, or by you. Header, footer and style are configurable for each newsletter independently and can be themed to look exactly like your site.
• Widgets. A piece of code that can be copied into other websites to produce a piece of content from the original site. The simplest example is an advertising banner, like this:
  <a href="http://deardivebuddy.com" target="_new"><img src="http://deardivebuddy.com/files/ddb468x60.gif" border=0 width=468 height=60 ></a>
  
  
  
  
  The code above generates the banner below it in any website that accepts HTML from the user. Forums, social networks or ranking sites. You can spread them yourself or suggest a link exchange with other webmasters.
  
  Another interesting use of a widget, is providing changing content, like a slideshow or the latest news. Good content might catch the eye of other webmasters that integrate your content in their site. The code you provide contains a link to your own site. An example:
  
  


• Maybe you noticed this  symbol at the bottom of some pages or in the adress bar of your browser. When you hover over it with mouse it says "syndicate content". What does this mean? Click this link for a textual explanation or this one for a funny but superb video explanation (recommended).
  
  All the sites we create have a RSS-feed built in for the front page. It can be extended to any other page you expect to update regularly.

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, pencils, baseball caps. This generates direct access to your site.

Offer services to make people return. Updated information about local events can be a good start. User interaction and feedback is fundamental. Always provide a "contact us" and optional a "guestbook".

To make visitors subscribe as a user you should offer interesting additional priveliges and services. They can have their own ad-free space (blog), have editing rights to create content (forum), discounts or a free email address. This creates a community feelling and comitment.

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):

Our standard

All of the websites we create come with a standard set of options. To name the most important ones:

• WYSIWYG-editor. Our philosophy is that you can edit and add pages to your website yourself with the ease of using Word.
• Clean URLs and autopath. When you create new content, an adress (URL) is automatically created in a search engine friendly way, based on the content title.
• Search.  All content on your site is automatically indexed, also new content and visitor comments. Visitors can use the search field. 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.
• Advanced user management. You can create user roles with different permissions. You can block individual user, even anonymous, based on their IP-adress.
• 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 to avoid spam. Of course we can take additional measures if necessary.
• Analytics. Every piece if content has a view counter and you can track much data on the visits to your website through the logfiles.
• Lightbox2. All images on your site, including the ones you add yourself later, open as a big version in a picture viewer.

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 alowingusers  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.

Coming up

We are working on demos of the following functionalities:

• Maps. To show your location and how to find it in an easy and consistent way.
• Webcams. To show your visitors a realtime view of the beach or the underwater scenary of your housereef. The service can include installation of the necessary hardware.
• Online shop. This consists not only of shopping cart management, but also setting up the different payment methods.
• Booking online. You can decide to (semi-) automate the booking process or give your customers the possibility to check the availabilty of your resources themselves. A diving center can use it for example to offer safari trips (show case coming up).