One of the most powerful features of the internet is the power to connect and share from opposite poles of the earth; no longer does your geographic location affect who you talk to or what you read. Companies that were once specific to a certain location now have access to the whole online market; with 1.4 billion people currently connected it opens up whole new revenue streams.

The final product will simply tell you where it thinks you are and allows you to set a new default location.

However with this global access there becomes another problem, not all data is global; the weather in London is most likely different to the current weather in New York. What about shopping? Currencies often change between borders and tax makes things even more complex. There have been countless solutions to this problem; the most glaringly obvious is a splash page or a form asking for the users location.

There’s nothing wrong with these solutions but there’s also nothing special about them, just more distractions and obstacles between the user and their final destination. In this tutorial we’ll be building a simple function and demo which solves this problem and should be easily pluggable into any new or existing project.

Location Uses?

As previously mentioned there are several uses for location based sites; simply looking through the days history in your favourite browser will probably reveal several sites that have asked for your location before, whether it be for simple data collection or put to use to give you more relevant information; local news, weather, messages from people close by or maybe to warn you about bad traffic in your area.

How many times in the last month have you entered your address or country? Whenever you’ve bought anything online or registered to a new site you’ve doubtless had to put in a variety of location based answers.

So what is GeoIP?

GeoIP is the common name given to the technique of determining a visitors Geographical location based on their visiting IP. It requires a database which pairs IP blocks to a country and/or city, these are available from several places online however for this tutorial to work than you will have to use the IPinfoDB SQL, available and updated monthly at http://www.ipinfodb.com/ip_database.php we’ll be specifically using the country only version with only one table, this is for performance and simplicity reasons – once you have the tutorial working with the country only version, modifying the script to work with the other versions should be simple. So go ahead and create a blank MySQL database and import the SQL straight into it.

1. Set up project

Create a blank index.php somewhere on your PHP enabled server and write the following lines into it, replacing all the variables to whatever username, password and database name you have chosen to use.

<?php
mysql_connect('localhost', '%USERNAME%', '%PASSWORD%');
mysql_select_db('%DBNAME%');
?>

2. Building the detection script

The first actual fresh code we need to do write is the script which detects the users location – surprisingly this is actually quite simple and straightforward once you have a simple database to query. All the function is going to do is query the database for the closest result and then return the country name.

function detect_location($ip=false) {
 if(!$ip) $ip = $_SERVER['REMOTE_ADDR'];
 $parts = explode('.', $ip);
 $iph = (($parts[0]*256+$parts[1])*256+$parts[2])*256 + $parts[3];
 $result = mysql_query('SELECT country_name FROM `ip_group_country` where `ip_start` <= '.$iph.'order by ip_start desc limit 1');
 while ($row = mysql_fetch_assoc($result)) {
 return $row['country_name'];
 }
}
?>

So what does all of this do? Well let’s go through it bit by bit:

if(!$ip) $ip = $_SERVER['REMOTE_ADDR'];

This sets the first $ip to the visitors IP if the function receives no parameter

$parts = explode('.', $ip);
$iph = (($parts[0]*256+$parts[1])*256+$parts[2])*256 + $parts[3];

This bit is the most confusing bit, the first line splits the IP into it’s four sections, the second line put’s it into a format usable for the database.

After that the rest is a simple SQL query to get the first result which matches the IP closest and then returns the country name.

3. Displaying results to the user

This is where we actually start using our function and giving it a purpose, we’ll start simple and just display where we think the user is coming from, underneath the PHP block write the following below:

<?php
$country = detect_location();
?>
<h1>Are you from: <?=$country?></h1>

4. Is it wrong?

Now you can visit your file in a browser and see if it guesses your location is correct; it’s wrong? Well if you run the file locally then it will always be wrong because it detects your local IP (127.0.0.1 or ::1). So what can you do? Short of testing it by placing it on a public machine elsewhere we can modify our code to force an IP:

Change $country = detect_location(); to read $country = detect_location('74.125.45.100');.

Testing it again should return “United States” – this is because the IP is one of Googles US servers IP’s. From here on we could just carry on but from seeing that error it exposes a simple problem; as with most programming things it will not be 100% correct every time. So how can we fix this? Well in the unlikely event it is wrong we can give the user some way of changing it. Modify the current code to match that of below and afterwards it will be explained.

<?php
session_start();
mysql_connect(‘localhost’, ‘%USERNAME%’, ‘%PASSWORD%’);
mysql_select_db(‘%DBNAME%’);
function detect_location($ip=false) {
 if(!$ip) $ip = $_SERVER['REMOTE_ADDR'];
 $parts = explode('.', $ip);
 $iph = (($parts[0]*256+$parts[1])*256+$parts[2])*256 + $parts[3];
 $result = mysql_query('SELECT country_name FROM `ip_group_country` where `ip_start` <= '.$iph.'order by ip_start desc limit 1');
 while ($row = mysql_fetch_assoc($result)) {
 return $row['country_name'];
 }
}
if($_POST && $_POST[‘country’]) {
 $_SESSION[‘country’] = $_POST[‘country’];
}
$country = (isset($_SESSION[‘country’])) ? $_SESSION[‘country’] :
detect_location($_SERVER['REMOTE_ADDR']);
?>
<h1>Are you from: <?=$country?></h1>
<p>Change Region:
<form action="" method="post">
 <select name="country">
 <option value="United Kingdom">United Kingdom</option>
 <option value="France">France</option>
 </select>
 <input type="submit" value="Go" />
</p>

For now there is only the option to change your country to either the UK or France, but it should be easily changeable to list all countries – either by finding the select HTML from somewhere online or plugging it into a database table of all countries

4a – Making sense of it all

As you can tell the size of the code has suddenly doubled, so it’s probably time to inspect what is actually happening in each section to dispel all claims of magic. Each addition is documented below in enough detail for you to understand it’s purpose.

session_start();

This tells the PHP engine that our script will be using sessions so needs to give the visitor a session to use, or retrieve their current session off the filesystem.

if($_POST && $_POST[‘country’]) {
 $_SESSION[‘country’] = $_POST[‘country’];
}

This detects if a new country name has been submitted to the page via POST, if this occurs than the data is saved into a session – if this wasn’t done than the user would have to tell the site where they are for every page request which would be extremely bad usability.

$country = (isset($_SESSION[‘country’])) ? $_SESSION[‘country’] : detect_location($_SERVER['REMOTE_ADDR']);

To those that have not seen a ternary if statement in PHP this may seem like a daunting piece of code however once explained it’s actually very simple. In PHP as well as a lot of other C based languages you can write single line if/else statements using something called a ternary statement. The syntax is as follows:

(expression) ? true : false

So applying that to our code above gives the explanation; first it checks to see if $_SESSION['country'] is set, if it is than $country is set to contain the sessions value, if not than it is retrieved out of the database.

Under the old <h1> there’s a form in which the important things to note is that the action is set to blank so it submits to whatever URL you are on and that the method is set to post. Inside the form there is only a select box which is where the visitor can choose what country they are in.

5. Test, Play, Experiment

After typing all of that above, fire up the page in your favourite browser and test the new drop down out; then make sure it saves when you refresh the page. It works? Finally. Now that this all works you should hopefully have enough basic knowledge about GeoIP to build it into a new project and even change the script to do some even more amazing things.

At only 28 lines of code you can see how simple it is to build such useful functionality.

Online API’s

If you don’t have access to a SQL database or don’t want to host the database locally, IPinfoDB hosts a simply web API for submitting an IP and getting back it’s information in a variety of formats including JSON and XML. The downside of this is it means you are reliant on their servers being online 100% of the time and also that they keep the service available and free. The upside though is that all maintenance is done by them so you don’t have to update your IP tables every month or so. For documentation on this API documentation is available at: http://www.ipinfodb.com/ip_location_api.php The easiest way to use this is with the simple code below:

<?php
 session_start();
 if(!isset($_SESSION['country'])) {
 $file = file_get_contents('http://ipinfodb.com/ip_query.php?ip='.$_SERVER['REMOTE_ADDR'].'&format=json');
 $data = json_decode($file);
 $_SESSION['country'] = $data['CountryName'];
 }
 $country = $_SESSION['country'];
 echo 'You live in: '.$country;
?>

This also saves the users location in a session so that you don’t have to keep sending requests to the API’s server – this has a number of advantages; speeding up your page loads, lowering bandwidth usage and decreasing the chance of ever going over any fair usage policy.

HTML5 Geolocation API

One of the recent additions to the HTML5 specification is a new javascript API for retrieving geographical information about the visitor, this includes the ability to gain coordinates for the visitor but also to watch the visitors location for changes. Currently it is already supported in Firefox 3.5 as well as a similar available for the Google Gears API. Being able to retrieve more precise information from the visitor (especially on the client-side) could lead to some interesting uses and web applications. More information and documentation on it’s features can be found at: http://www.w3.org/TR/geolocation-API/

Although there aren’t a lot of public examples of this new HTML5 API, it’s only time before people start creating games played on smartphones which interact with each others position or some other imaginative use.

Sites Using GeoIP

The newly launched irregular choice store uses GeoIP to display localised stock lists and prices at http://shop.irregularchoice.com

GeoIP isn’t just restricted to PHP and conventional HTML;  an example of GeoIP in a flex app using python exists at: http://blog.pyamf.org/archives/geoip-example

Resources

If your using Lighttpd then you can use mod_geoip to handle all the logic for you enabling you to focus on what you do with a visitors location. You can find a tutorial at: http://www.cyberciti.biz/tips/linux-lighttpd-install-mod_geoip-tutorial.html

Social Bookmarks

Create subtle CSS changes to your site based on time and date

Oasis Overland uses time sensitive stylesheets

In todays modern web design environment it takes more and more to attract visitors visually, and even more to make them keep coming back. Of course this mostly depends on content as there has to be a purpose to the visit, however small subtle details to the site can make any visitor become excited.

In this tutorial, you will create a site that changes it’s background based on the time a person visits the site, afterwards you should have the knowledge to adapt the script to be based on any other data you want to use.

All server-side examples in this tutorial will be based on PHP, so make sure you have a working test environment with PHP5 enabled. If you are using any other server-side scripting tool it is likely there will be a guide to accomplish a similar effect online; however reading through this guide you will likely recognise similar syntax and functions allowing you to convert it to the language you’re using.

Opening the Folders

Included in this download is a folder called dynamic_css which contains all of the base files needed to complete this project. Move the folder into your testing servers root directory. Open the folder in your preferred IDE and then view index.php in a browser. If you’ve got PHP enabled and everything was copied successfully then you should see a basic white page with a header, navigation on the left and lorem ipsum on the right; it’s now time to start the dynamic styles.

PHP Sunsets and Sunrises

Using PHP to retrieve and make decisions based on time has it’s advantages and disadvantages. The largest disadvantage is the fact that PHP can’t access the users computer time and can only get the time of the server, the advantage however is that PHP has a large set of functions that make dealing with time that little less painfull. If you open up index.php, before the start <html> tag type the following PHP. Afterwards I will explain the key parts of the script.

<?php
 $time = date('G');
 $sunrise = date_sunrise(time(), SUNFUNCS_RET_DOUBLE);
 $sunset = date_sunset(time(), SUNFUNCS_RET_DOUBLE) + 1;
 if($time >= $sunrise && $time < $sunrise + 2) $style = 'sunrise';
 elseif($time >= $sunrise + 2 && $time < $sunset) $style = 'day';
 elseif($time >= $sunset && $time < $sunset + 2) $style = 'sunset';
 else $style = 'night';
?>

Lines 2 – 4 set three variables; $time is set to the current hour, $sunrise is set to the sunrise time for today and $sunset is set to one hour later than the sunset time (from my experience, official sunset times start an hour or two before what most people would call sunset starts).

Lines 5 – 8 runs a set of standard if statement to determine which style to show; sunrise, day, sunset or night, this is then set to the variable $style. This can now be used whenever a reference to the time of day is needed, as you will be shown below.

Dynamic CSS Techniques; One, Two and Three

There are three main ways of achieving dynamic CSS – which one you use depends on several factors; the amount of styles that change per data, amount of style sheets that get loaded into the page and the amount of customisation you have on your server.

Setting a body id/class

The most popular method of using dynamic CSS is to set the body id or class of the page depending on the styles needed. The advantages of this is that no server changes need to be made, you can use the same id/class across style sheets with no extra code and it’s easy to quickly prototype and debug. The disadvantage of this is that you can only use pre-defined constants, because of this you can’t have random colour pallates using this method.

Including style sheets

The second most popular method is to include extra style sheets depending on which styles you need, this can be beneficial when a lot of styles change depending on what is needed; this stops the stylesheet having to include styles for all other posible states of the site together. The disadvantages is that you have to create a stylesheet per state, this can be a large hassle if you are going to have a lot of different styles, it also inherits the flaw of not being able to access the data in the style sheet.

PHP in the style sheet

This approach can be done in several ways, when used successfully and appropiately this can create the largest amount of freedom with data being able to be directly accessed in the style sheet meaning there is no limit to the amount of states possible. The disadvantages is that if you want your style sheets to still have the .css file extension you need to customise the server, this also means you lose the portability of the style sheet. The other option is to use .php as the CSS extension. Another disadvantage is that you are limited to having all the rules in one file without having to duplicate and re-process the PHP.

Setting a body ID

In our example there are only a few things changing per state and there are only 4 states, based on the advantages and disadvantages outlined above, setting a body id is probably the best way of achieving the effect.

Change the <body> tag to be the following:

<body id="<?=$style?>">

Then open base.css and add the following to the end of the file.

/********** TIME SENSITIVE CSS **********/

#sunset {
background: url('../images/sunset.jpg') repeat-x #BE7001;
}

#sunrise {
background: url('../images/sunrise.jpg') repeat-x #EFC501;
}

#day {
background: url('../images/day.jpg') repeat-x #0A6FBF;
}

#night {
background: url('../images/night.jpg') repeat-x #00123A;
}

Open your page in a browser now and admire the scenery depending on what time of day it is.

Including style sheets

Including style sheets is another simple yet effect method, the practice involves having a separate style sheet for each state. To adapt the current site to use this method create 4 style sheets called, sunset.css, sunrise.css, day.css and night.css. Place the appropriate code for each state in it’s file, then remove the id on the body tag and instead place the below code in the <head> tag.

<link rel="stylesheet" href="css/<?=$style?>.css" type="text/css" media="screen" charset="utf-8" />

PHP in the style sheet

Out of the three methods outlined this one is by far the most flexible and powerful however also requires the most work so if a stage doesn’t work for you go back and repeat again; if it still isn’t working as it should then a quick search online will normally end up in a solution to the same problem someone else had.

Setting .css to be run as php

This is a matter of personal opinion however, I feel that having a .css extension helps define what an external asset is doing; this stage isn’t required so if you don’t mind having css with the .php ending or your server doesn’t allow you to make the following changes then skip this step.

Create a .htaccess file in the root of your site, place the following line in it:

AddHandler application/x-httpd-php .css

This sets PHP to handle all files with a .css extension, allowing you to place php in a .css file as if it were exactly the same as a .php file. If it fails to do anything at first, restart apache and see if that solves the problem.

Setting the Content-Type and Using the PHP

The most important thing to do when using dynamic CSS is to stop PHP setting the content-type header as text/html, you need your css files to be sent to the browser with the content-type text/css. To do this place the following line at the top of base.css (or base.php if you didn’t complete the previous step).

<?php header('Content-Type: text/css'); ?>

To get the background to change now place this just below the line you just wrote at the top (you can remove all the PHP from the index.php):

<?php
 $time = date('G');
 $sunrise = date_sunrise(time(), SUNFUNCS_RET_DOUBLE);
 $sunset = date_sunset(time(), SUNFUNCS_RET_DOUBLE) + 1;
 if($time >= $sunrise && $time < $sunrise + 2) $style = 'url(../images/sunrise_bg.jpeg) repeat-x orange';
 elseif($time >= $sunrise + 2 && $time < $sunset) $style = 'url(../images/day_bg.jpeg) repeat-x blue';
 elseif($time >= $sunset && $time < $sunset + 2) $style = 'url(../images/sunset_bg.jpeg) repeat-x black';
 else $style = 'url(../images/night_bg.jpeg) repeat-x black';
?>
body {
 background: <?=$style?>;
}

Opening the page in a browser should now show you a background simulating the great outdoors.

The equivalent in javascript

PHP isn’t the only way to add dynamic elements in your sites, javascript has been the raw base to site dynamics for years. Of the three methods above the first two will work fine in javascript with adaptations. Javascript has a few disadvantages; there’s a delay between page load and the new styles, javascript is also notorious for browser differences and it of course requires javascript

Javascript doesn’t have the same resources as PHP and so can’t provide sunrise and sunset times so in the examples below the state will be statically set to ‘day’.

Setting a body id

var state = 'day';
document.getElementsByTagName('body')[0].id = state;

A general breakdown of the code above is that it assigns the variable state a value of ‘day’, the second line then starts by selecting the document, finds all the elements with the tag name body (should always be just one) and then gives the first ( 0 nth element) the id of state.

Including extra style sheets

var state = 'day';
var cssFile = 'css/' + state + '.css';
var link = document.createElement('link');
link.setAttribute('href', cssFile);
document.getElementsByTagName('head')[0].appendChild(link);

Enjoy and Explore

Based on the three PHP methods demoed here there are a llimitless amount of different ways you can make your CSS dynamic, if you need some ideas though just see the taking it further boxout for more info.

Taking it Further

Dynamic CSS isn’t restricted to simple time and date manipulations. Any data that your server or the clients browser can access can be used. Whether it’s pre-determined states such as seasons or  based on data hosted elsewhere, a few extra ideas are below.

1) Location – Retrieving the visitors location is a tricky thing although there are several popular libraries and snippets readily available to make things easier. Mozilla is also pioneering the methods in which a server and site can detect a users location. Having the background change to compliment your location could be an easy way to make your site more localised.

2) Weather – Having your sites background change depending on the weather could add function as well as design to a site, visitors to a local harbour could quickly determine the current weather or water height before even getting to the page.
RSS Feeds – Easily accessible and retrievable RSS feeds now span the spectrum of content on the web, colour palettes, political data, surveys and pretty much anything you could want is probably already in RSS format.

3) Local site data - If your site has dynamic content why not compliment it with some dynamic styles. If you have a blog then you could have the background represent the category which was last blogged about.

Social Bookmarks

No-one can disagree that the huge popularity of stock photography has shaped the way apperance of many websites on todays modern Internet. Who can resist those ethnically diverse teams, smiling at the camera around a laptop in a modern office? How about those beautiful outdoor shots of rolling hills and bright blue sky? They are classic stock photography.

But should we think carefully about the use stock photos on our websites? Are we missing an opportunity and creating monotonous and predictable websites?

What is Stock Photography

Stock photography has gained a lot of momentum over the past 4 years. It is the term associated with professionally taken photographs that you can buy the rights to use on your website or printed material. There is a wide range of stock photography websites available online with two of the popular options being Getty and iStockPhoto.

Getty specialise in top quality and higher-end photography. They supply many of the news networks with photography for their stories. Their prices range from between £150 – £600 per image, depending on the sector and size chosen.

iStockPhoto (which is now owned by Getty) is one of the most popular galleries available and is community rather than corporate based. End users can submit their own photos for inclusion and these are then reviewed by iStockPhoto. Successful photos are available to purchase by end users and the photographer receives a commission. Costs are based on a credit system, with images based around between £1 and £15, depending on their size.

Why should I use Stock Photography?

One of the main reasons is budget. Choosing stock photography is almost always cheaper than commissioning a professional photographer to snap your employees, products or services. This does however depend on the number of photos that you are purchasing and the quality required.

Variation and range is another good reason. There are millions of stock photos available to purchase. The benefit of this is that you are more than likely to find a photo to suit your business and website.

Why shouldn’t I use Stock Photography?

We feel that one of the main problems with stock photography is repetition. Popular stock photos can be seen all over the Internet. When you buy a stock photo, you do not have the rights to use this exclusively, so you will no doubt find other websites, and possibly competitors using the same photos as you.

This undoubtably results in your website looking rather generic and convoluted. It is difficult to showcase your personality through generic photos that have been snapped from all around the world.  Sticking with the ethnically diverse team photo as above – why not show a nice photo of the actual people behind your business, rather than a staged and predictable photo like this?

Depending on the subject of your website, stock photography may not suit. If your website is very specialised or technical, you may not find any photos that suit. If this is the case, commissioning a photographer may be the only option.

Conclusion

For Strawberrysoup, using stock photography is always going to be a bit of a sticky subject. It is ultimately client dependent – are they based in a very specialised field, how many photos do they require and do they have the budget to hire a professional photographer?

For our new website, we are not going to be using stock photos. We feel that we have a brilliant team and a unique ethos – using stock photos would not do us justice. We want to showcase our team and our personality from a design and photographic perspective, rather than looking generic and like many other web design agencies out there.

Social Bookmarks

We have been having a few debates recently at Strawberrysoup which mainly focus around cross browser interoperability and if the websites we create should support the archaic Microsoft Internet Explorer 6.

As every web developer and designer knows, the main problem that we face every day when developing websites is how they look over the many different browsers – Internet Explorer, Firefox, Chrome, Safari, Camino, Flock, Opera – the list goes on.

At Strawberrysoup, we build each website by testing in Firefox 3 (our favourite due to it’s standards compliance) and then tweak the site for the remaining browsers. As always, Internet Explorer 6 is the problem child, and can typically add 5% onto a budget due to the time taken to debug and fix.

We find that the difficultly arises when a designer creates a beautiful, usable and technologically advanced website for a client. It gets signed off and  when the developers try and fit/translate this design for a browser that is 10 years old – it just doesn’t happen.

One of the problems that we face when trying to justify this problem is the statistics. IE6 still has a market share of about 11% now (according to http://www.w3schools.com/browsers/browsers_stats.asp)  – but the good news is that this share of the market is reducing each month (it was 18% in January 2009). Microsoft’s forced IE7 and IE8 update has further reduced this share, but so has the increased exposure of Firefox (47%) and the more and more people using Google’s Chrome (8.5%) and Apple’s Safari (4%).

We work with a wide range of clients, some small businesses but increasingly we are working with larger companies and local councils. Local councils especially seem to use older browsers and they are unfortunately stuck with the cost of company wide system or browser update restricting their end users having the latest versions of software (even if the actual browser upgrade would be free.)

A good analogy would be the same as ordering Sky HD, being excited about the stunning picture quality and then realising that your 14” portable TV doesn’t support most of the features so you end up with the basic cut down version – its disappointing to say the least.

There is no doubt that other web design agencies in a similar predicament. We have heard that some have opted at the original spec stage, to mention that the site will have all of the bells and whistles on for Firefox, IE7, Safari and that IE6 will be supported, but only to a limited extent as even Microsoft has ended support for their legacy browser. They also mention other browsers such as Camino or Flock will be supported at an additional charge.

It seems that many agencies/freelancers are stuck in this dilemma for the near future – should we continue to support IE6 as much as possible (with CSS hacks and alike) or should we offer clients a cut down version of the originally signed off design? I suppose the answer to this question depends on budget, timeframes and the target market.

For more information on the browser dilemma, why not visit http://www.savethedevelopers.org or http://www.bringdownie6.com.

Social Bookmarks

If your business focuses around selling products to consumers, you will no doubt be looking forward to the festive period. Even during these tough economic times, consumers love nothing more than braving the cold and splashing their cash on their loved ones.

Over the past few years, eCommerce has jumped in leaps and bounds and now more and more of us are shopping online in the comfort of our own homes. But how can we ensure we are making the most out of our online business?

This article aims to describe the tools and techniques that you can use on the run up to Christmas to bolster your sales and take advantage of increased spending.

Create a Blog

A blog is a great (and free) way of describing, reviewing and publicising the products that you stock. Use each post as a showcase for your favourite products. By creating a blog and consistently adding new content, this content will be distributed around the blogging networks.

You can download Wordpress for free and install it within 5 minutes if you know what you are doing. There are also thousands of different themes available to choose from to make sure your blog suits your branding and looks unique.

If you don’t know how to install a blog, you can always use Wordpress.org and signup for free. They will host your blog, but they are designed for non-commercial use, so be careful as they could get removed without warning if they become overly commercial.

As your blog gains momentum in the number of posts and subscribers that it has, you will find that you start gaining some great search engine rankings for individual products. An product/lifestyle blog that has been created for this purpose can be found on Dennis & McGregor. Within each blog post, you can create a simple button to direct users to your product page if you wish.

Signup to Google Base

Google loves creating free services and their Base service is no exception. All you need to do is get your web developer to create an XML file (a simple text based file) containing your product information such as title, condition and price. The XML file can be uploaded to Google Base or automatically retrieved every day by Google from your website.

Once you have this file up and running, register with Google Base and within a couple of hours your products will be displayed on Googles “shopping” tab for everyone to see!

This tool is a great way of increasing traffic/sales on your website for specific products and comes with a suite of reports to use.

Setup an eBay store

eBay is a great way of selling your new products online. As well as the well-known auction style listings, you can setup your very own eBay store for £15 per month plus listing/sale fees.

The process is really simple and a product can be added by either using the list functionality on the website, or by using software created by external vendors such as iSale (for Mac) or Blackthorne (for Windows). eBay will give you a wide range of product options to select, the ability to host your images, add a description and choose a price.

Payment can be made in various forms too including cheque, cash on delivery or BACS. The most popular option is PayPal – a free to signup service that charges you a percentage fee each time you receive money.

Another benefit of using eBay to promote and sell your products is that eBay gets some great search engine rankings. You will regularly see your eBay listings popping up in the search engine results when searching for your products in Google, Yahoo or BING.

Register with Etsy

Etsy is a fantastic way of selling products that you make. This obviously won’t be relevant to every retail business, but if you make your own posters, jewellery, clothing or home products, Etsy will be perfect.

Etsy basically works by you uploading your handmade products to the website, choosing a relevant category and adding your product information. End users can then search, browse and view your products online.

It costs just 20 cents to list an item on Etsy for 4 months plus a 3.5% transaction fee when a sale is made, so its a great way to increase your online sales.

Use Google Adwords

This is a great tool to use in short bursts over Christmas. As well as your natural search engine rankings that you have obtained through your website, blog and eBay store, Google Adwords can be used to promote even more.

Adwords is ultimately a method of displaying adverts at the top and right of the Google search results. Users then see these adverts, click on them and are directed straight to a product, category or information about your business.

The service is fully customisable and can work on any scale of budget as the adverts stop showing when your daily budget runs out. As a guideline, your daily budget can start at £5.00 per day to receive a good level of traffic, but this really depends on your market.

To find out more about Google Adwords, there are some great articles and tutorials available online such as Adwords Learning Centre.

Advertise on BuySellAds

BuySellAds is a reasonably new service which lets you display visual adverts on well known websites and blogs. The beauty of the service is that if you know that your potential customers frequent a particular blog or website regularly, you can advert on it!

Budgets are determined by the number of impressions that each website gets, with the higher visitor counts costing more money. You can easily advertise your products or services on websites/blogs that receive thousands of impressions (visits) for relatively little money.

The whole service is fully trackable and you have access to reporting showing you how many people saw your adverts, clicked through to your website and what the effective cost per click was.

From a billing perspective, the traditional model for BuySellAds has been to pay monthly, although they have just launched a pay-per-click model now too.

Summary

As you have read, there are many opportunities to increase your online sales over Christmas. The key to success is preparation as some of the options available take a few months to gain momentum (such as blogging to gain search engine rankings).

Related Links

• Wordpress – http://www.wordpress.org or http://www.wordpress.com
• Google Base – http://www.google.com/base
• eBay Stores – http://stores.shop.ebay.co.uk
• Etsy – http://www.etsy.com
• Google Adwords – http://adwords.google.co.uk
• BuySellAds – http://www.buysellads.com

Social Bookmarks

Do you have a thorough web design process? We have found that in order to be successful in the world of web design, a well thought out project process is essential. Not only does it help to clarify when certain team members are needed on a project, but it helps to demonstrate to clients that we are organised and interested in quality management.

We try to make project management as easy as possible by using Basecamp by 37Signals. This tool is great when teams are located around the UK or abroad. It gives each stakeholder access to the project, whereby they can review, contribute and upload their comments for all stakeholders to view and respond.

We follow a core project process to ensure all of the websites that we design and develop are the best possible quality. You can download a PDF view of our web design process here.

Our methodology is as follows:

Requirements Gathering

1. Contract awarded & terms of business signed and returned
2. Initial meeting to discuss project, requirements and aims
3. User profiling (if required)

To gain a full understanding of the project before any documentation and design is started, a number of detailed requirements gathering meetings are arranged with key stakeholders. From Strawberrysoup’s perspective, this consists of the project manager, the project lead developer, and the lead designer.

Having the most experienced members of the team involved during requirements gathering, gives us the chance to discuss and advise our client on any new functionality and technology that would potentially make the overall solution more effective and future-proofed.

If required, user profiling takes place during the requirements gathering phase. This is aimed at identifying key target audiences and their core reasons for visiting the website.

Specification

1. Project schedule created and team members allocated
2. User profiles agreed (if required)
3. Site mapping created and signed off
4. Functional requirements written and signed off

Once both the customer and Strawberrysoup are happy with the requirements discussed above, these are then transferred into two core documents – the sitemap and functional requirements. The sitemap is used to display the site hierarchy, layout and page linkages. The functional requirements document outlines everything that the website is going to functionally do – from user signup forms to full CMS controls. These two documents are used throughout the entire project to ensure the project remains focused and on track.

A project schedule is agreed and generated from the deadline launch date backwards to ensure all aspects of the project can be achieved within the given timeframes. Milestone deadlines are put in placed and each stakeholder informed where appropriate by the project manager to ensure all materials are supplied at the right time.

Design

1. Homepage designed
2. Lower level pages designed
3. Overall website design signed off

The next phase focuses on the website design. An initial design meeting is held to review the functional requirements, sitemap and user profiles if appropriate. This meeting gives our clients the opportunity to highlight any design preferences if appropriate. It also gives us the chance to question the customer on a number of design related questions and give them our design questionnaire to complete if necessary.

The design is developed and tweaked over time until it is agreed and signed off. Once the initial concept is agreed, we then design a number of lower level pages to ensure that the design of the entire site remains consistent as users navigate their way around.

Development

1. Development team meeting to discuss overall project
2. Staging environment setup
3. Website development
4. Upload to staging environment for client review

The next phase is when the actual development of the website begins. This is the largest part of the project in terms of time and normally consumes over 60% of the project timeframe. Regular liason between Strawberrysoup and our clients is required to ensure they are kept up to date with progress. The client may be given access to the staging environment to test elements if appropriate.

Any concerns regarding the build of the website can be discussed with either the project manager or lead developer to ensure the customer has more than one route to the development team.

Testing

1. Functionality and stress testing
2. Browser interoperability
3. Usability testing

After the development is completed, the website is tested fully. Depending on the project budget, this may include testing by the core project team and client, or the site may be released for beta testing by a wider audience. Testing is one of the most important phases of our web design process. It is typical for testing to last weeks or months, depending on the size of the project.

All bugs and amendments are identified during this phase and prioritised for fixing.

Launch & Review

1. Prelaunch meeting
2. Testing and review
3. Launch
4. Support and maintenance

Once the website is tested fully, a prelaunch meeting is held with the client to discuss the launch plan. Final sign-off is then provided and the website is launched. Strawberrysoup remain available for any amendments that are required post launch through our support agreements or adhoc tweaks.

Social Bookmarks

You already know about the importance of having a well structured, usable and professionally designed website so there is no point in preaching to the converted about this – but what about the content?

We have found that from a client and agency perspective, content is regularly thought about during the final phases of the process. The sitemap has been created, wireframes are signed off and the design looks beautiful. Now the development has been finalised, tested and handed over to the client – who is looking after the content? Lets just knock up something quickly….

Evolution of Content

Strawberrysoup was very different 5 years ago. There was just two of us and we were working out of a shed in a garden. The content of our website was therefore describing a completely different business and targeting different potential clients.

Neither of us were particularly good at English during school, so writing content always seemed like a long and arduous task, especially when faced with the task of writing lots of very similar pages such as portfolio items. On the same principles, we are reasonably technical, so when describing our services, the content contained a lot of jargon which meant that our potential customers struggled to understand certain aspects of it – so improvements could certainly be made!

What is Copywriting?

From our experience, a copywriter is ultimately someone that amends or rewrites content so that it makes more sense and is easier to read. Very similar to a UX analyst or usability technician, a copywriter makes content usable from a readers perspective.

We found the process quite simple and any good copywriter worth their weight will be flexible in how they work. They should initially ask questions aimed at understanding your business and its objectives. Following this, they will work with you to highlight a tone of voice that should be used throughout the content, such as informal, professional or approachable – Strawberrysoup was all three.

We work with a Bristol based copywriting agency called Writers and they have made the whole process very simple for us. They have spent the last month or so revamping the Strawberrysoup website content (still to be added to our website!) and we are really pleased with the results.

An Example from Strawberrysoup

After our content was reviewed, our copywriters identified that rather than explaining something in a clear and concise paragraph, we waffled and used over-complicated words to bulk out our content. It’s not always about shortening the content, but restructuring it so it makes more sense and is easier to read. An example of this is on our About Us page:

Strawberrysoup was launched on the 1st of June 2005 by two university friends (Neil and Keith) who had always dreamt of running their own design agency. They chose to specifically target small and medium sized businesses who were looking for a reliable and professional web design agency that they could work with, at a price that they could afford.

Now four years have passed, and we have evolved into an 8 strong team, working with a wide range of clients from small SME’s to large multinational blue chip organisations.

We still stick to our core principles of being 100% approachable, friendly and professional in everything we do. We also care about how running our business effects the environment.

Here is the new content which is much more logical:

A bit about us

We’ve expanded our team from just two in 2005 to eight today, and developed a healthy client list and portfolio along the way. We started by helping local businesses, and we still do. But we now work with large blue-chip multinationals, too, and plenty of other businesses and organisations in between.

With our combined expertise, we can allocate the right people to any job, large or small. You can find out a bit more about the team here, or get in touch to discuss a project.

Why choose Strawberrysoup?

Every website should be inviting, easy to use and enjoyable. And as well as being visually impressive and in tune with your business, it should give visitors the information they’re looking for as quickly and as effortlessly as possible. Get it wrong, and they’ll go straight to one of your competitors instead.

So as well as being excellent creative designers, we’re also here to think like your audience and offer strategic marketing expertise.

And to complete the picture, you’ll find us an approachable, helpful team who do what they love and love what they do.

Keep the Search Engines Happy

Whilst having beautifully worded and concise content is essential to end users, we must remember that having fully search engine optimised content is just as important.

There is always going to be a fine line between content that is too heavily orientated to promoting keywords and content that reads like a professional novel, and your copywriter should be able to give recommendations on this too.

Remember that well optimised content will direct users from the search engines to your website, but what is the use if they cannot read the content or understand what is being described once they get there?

Summary

We would always recommend asking someone like a copywriter to review your content.

And don’t panic – it doesn’t need to be a professional agency. Ask someone who can cast a fresh view over the information. You can ask a friend or member of your family to help out – you will be surprised at how the content will improve after some outside help.

Social Bookmarks

In order to accept payments online, your eCommerce website needs to be linked to a secure payment gateway or payment service provider (PSP).

Show Me The Money!

A secure payment gateway is used to capture an end user’s card details and then send the information to a central banking system whereby the details are checked and confirmed or denied (depending on status of account). All of the details are sent electronically and encrypted (using secure socket layering or SSL) to ensure that it is secure. Most payment gateways and PSP’s send the data using a minimum of 128-bit encryption which has become the industry standard.

After the customer orders a product/service and their card is authorised, the money is collected from the customers debit/credit card and held at the merchant for a few days. After this period, the money is automatically sent directly to your nominated bank account in a ’settlement’. This means that you will receive bulk payments which relate to more than customer at a time which can get a little confusing, but you will get the hang of it!

Most UK banks offer payment gateways, but some PSP’s require your business to have an Internet merchant account setup (similar to a merchant account for a PDQ machine) with your bank. A couple of examples of these are RBS WorldPay and SagePay or if you do not have a merchant account, you can use other payment gateway’s like PayPal Standard. An important note is to ensure that your website is PCI compliant when accepting online payments.

Keeping Track of Costs

Payment service providers generally charge commission or a standard charge per transaction. As an example, SagePay (previously known as PROTX) offer a service where you pay £20 per month and can get setup online without any more transaction charges at their end (providing you stick below their transaction levels). At the banks end, if you choose to setup an Internet Merchant account your bank is likely to charge you a setup fee,  a recurring monthly fee and/or commission for each transaction for the privilege – so it pays dividends to do your research before commiting to anything.

If you want to try and cut down on costs as much as possible, you can skip the Internet merchant account with it’s initial setup fee and head straight for PayPal Payments Pro. This service will let you to receive payments online with a monthly fee of £20 plus a transactional charge of between 1.9% and 3.4% depending on your sales volumes.

With most PSP’s like SagePay or PayPal, you can choose if you would prefer to use their payment pages and SSL certificates (which follows their branding)  or use your own SSL certificates and take payment on your website. Both are still highly secure, but offer different levels of integration. For Strawberrysoup’s larger traffic eCommerce websites, we always recommend using self-hosted SSL as it looks more professional and can help increase conversion rates as you stay on the same website.

Summary

This article only covers the basics but rest assured, no matter how big or small your business or eCommerce website is, there is a payment service provider that will suit your requirements. The chosen solution should be based on setup costs, fees, value add services like fraud monitoring and make sure you future proof your website. The chosen solution should be able to cope in 2 years time as switching is a long an arduous task – and not recommended.

If you would like to know more about accepting payments online through an eCommerce website, feel free to email us at hello@strawberrysoup.co.uk or call 01243 373444. On a slightly seperate note, if you are looking for some great debit/credit card logos – check out the web design blog who have a beautiful (and free!) collection that you can use.

Social Bookmarks

With the world economy suffering on a global scale and current predictions for the near future less than rosy, how can UK businesses survive the recession/credit crunch and come out of the other side in a better position than when they started?

Differentiation

You have no doubt heard about Innocent Drinks. Their marketing, PR and success have prompted many people to decide to start their own business. The number of potential clients that we meet explaining that they want to be ‘the next Innocent’ or that their branding should be ‘just like Innocent’ is staggering.

Innocent have succeeded due to the fact that they did things differently and it worked brilliantly. Their marketing department has done a fantastic job of creating a dedicated tribe of followers. Sooner or later there is going to be a new Innocent that everyone wants to be like – and now is the perfect time to start.

Differentiation can take many forms. Perhaps its the branding, product or service you offer, the way you deliver it, how you interact with your clients or your pricing strategy. It is very important to bear in mind that your differentiation must be commercially viable and strike a cord in your customers minds. Get people thinking “why didn’t we do things like that before?” or “what a great way of doing things”.

Rebranding

If your business’ image is beginning to look tired and out of date, a rebrand may be the perfect answer to create interest and motivate your team.

By creating a new logo, product name, packaging or even business name, your business can be perceived in a whole new way.

A professional graphic design agency should be used to ensure the best results are obtained. They can also be used to generate new ideas and help to formulate a brand manual advising how to use your logo and design with your product or service.

Marketing & PR

It may not seem like the best time to be spending money on marketing or PR, but focused campaigns will ensure that your target market know about your business when the recession ends.

Marketing doesn’t need massive budgets and online marketing is a cost effective and tangible way of building a brand due to the fact that you can measure your campaign success.

Using popular social networking tools like Twitter, Facebook or Linked In to interact with your market and increase your followers is simple. All it takes is a unique idea to grab attention  and the medium to distribute the message and the rest will follow. Measuring success is also simple through the use of web stats, follower numbers or your number of fans.

Pricing

Depending on your market, reducing your prices during a recession may not be the way to go. Trying to increase sales by lowering prices will result in you ultimately lowering the value of your product or service. It may also lead to disgruntled clients who have previously paid higher prices for your products or service.

If you do decide to lower your prices, what will you do when the recession ends? You may find it difficult to justify a price increase or to add further value, thus alienating potential customers and your market.

I have read about some businesses who have actively increased their prices during this recession. Their theory behind this rise is to lower their number of clients that they have (and therefore the resource to manage them) but gain more revenue. This can be a risky strategy however again depends on your market and brand.

Existing Customers

It is always easier to sell to existing happy customers than it is to spend a lot of time and effort trying to gain new ones.
They will no doubt be feeling the squeeze just as much as you are, however they may be more susceptible to paying for a new product or service as they have a relationship with you and know your business already.

Existing customers are also a great resource to trial new ideas, products and services and we have found that they are more than happy to give you constructive feedback on pricing or a product for you. You could offer an incentive to provide feedback such as a future discount or redeemable voucher if needed.

Summary

It goes without saying that a recession is always a nervous time for business. An uncertain future can lead to poor decision-making. It is important to take a step back, review and act on ways to capitalise from this situation and the points discussed above are only a few of the ways that you can help your business.

Social Bookmarks

We all know that technology is a rapidly advancing industry and web design is no exception. It is no longer acceptable to follow the rest of the pack. It is almost expected that web design agencies are innovative in terms of both the technologies that they use and how they use them, whilst focusing on underlying business principles such as time and money.

With the advent of the Internet and the .com boom, traditional graphic design agencies have chosen to offer web design services as an additional revenue stream. The problem is with the speed that the web design industry is advancing, these agencies are finding it increasingly difficult to keep up to date with the best practices, technologies and terminology to use. As a result, their key services can suffer and become diluted.

In order to concentrate on their core competences, graphic design agencies may find it necessary to look externally for a web design agency. The plus side to this is that the web design market is a saturated, however reliable web design agencies with both technical and business expertise are few and far between.

This blog post aims to help graphic design agencies by giving advice about how a relationship with a web design agency could work.

Transparency

We have worked with a wide range of graphic design and marketing agencies who have asked to pretend to work for them. This is fine during that initial phases of the project, however down the line it becomes increasingly difficult to manage. Clients calling the web designers directly will be surprised when the phone is answered under a different company name, or when they receive an email accidentally sent from the wrong email account – it’s always best to remain honest.

Some clients actually look at the relationship favourably as you have partnered with a dedicated web design team. Providing you manage the project successfully and have a good relationship with your client, there is no reason why they would go direct to the web design agency in the future.

Pitching for Work

Don’t be afraid to pitch together. There is nothing worse than a prospective client being answered with a blank face during a Q/A session, so bring along your web design partner as your technical arm.

They should add value to the pitch and act as consultants when discussing the technical aspects of the new website. They should also ask questions to ensure their understanding of the requirements is 100% during the proposal process.

Markup & Business is Business

Your chosen web design partner must understand that whilst they are doing the leg-work in terms of the development of a website, as a business, you must also make your markup.

The percentage of the markup really depends on a range of factors, however we find it is always useful to be open and honest to your partner agency about how much you wish to make on average. We have found that markups can vary between 15% – 35% depending on the project type and scale.

Advice and Support

A professional web design agency will be more than willing to help you with any questions you have about design and how this links with the development. If you are unsure of how something will work online, don’t be afraid to just ask. In the initial stages of the relationship, it may be a steep learning curve to understand each others processes and management styles, but you will also no doubt learn something new on both sides of the fence.

Project Management

We have found in our past experience that the agency that receives the initial enquiry and is charging the markup will generally manage the project. This however does depend on your experience/background as you may feel more comfortable to give this responsibility to your partner agency.

You should bear in mind that if the project management is outsourced, your markup percentage will be reduced as more work is being done externally. This clearly has to be balanced by the stress of project management versus the difference in your markup.

Further Support and Information

If you are looking for a reliable and trustworthy web design partner for your design agency, why not get in touch with us? We have lots of experience with partner relationships and can help to answer any questions you have – just give us a call on 01243 373444 or email partners@strawberrysoup.co.uk

Social Bookmarks