When you are trusting your entire company operations to a single website, it becomes the largest priority to keep it operating smoothly, efficiently and without any problems. Although there are not many companies that entire revenue stream is generated online, most modern companies will use their website to generate leads.

Making sure everything is running as it should be can be a daunting task; when there are over a thousand pages to test. However as the internet has grown and sites become larger and more important online so have the tools used to automate testing become more thorough and usable.

Tests in the programming world are separated into several areas, the main categories being:

Unit Testing
A system that tests each individual unit of the code separately to make sure it’s output is correct;    

Functional Testing
Functional testing allows the sites operations to be tested as if used by a customer; the system is “spoofed” into acting as it would when accessed by a real person and the output is tested against a set of rules it should follow.

Cross Browser Testing
Cross browser testing is the act of testing the sites design and layout in each browser to make sure it is visually similar to how it should be.

Unit Testing

When building large complex sites, it would be complex and costly to start from scratch with every project and build the groundwork from scratch; programmers have long learn’t that “re-inventing the wheel” is a pointless task which only increases the cost, amount of bugs and time needed to build a site. Instead, most programmers have a set of core tools and libraries which they use on every site; these are normally quite generic pieces of code that aid a developer in getting a site built quickly and smoothly.

Due to the way these units are used, it is the biggest priority that these units work exactly as they are supposed to; if a unit is found to have a bug in too late it can be on hundreds of sites that all would need upgrading manually. To stop this happening we use a “Unit Testing Framework” which allows us to write a set of expected outputs for a set of strict inputs, these are all manually worked out away from the program, e.g. in a library to work out VAT on products we would write a set of inputs (1 item at £5, 2 at £3, etc) and then manually work out the expected output and see if they match.

Although this may seem like a large amount of time to invest in such a small and simple module there is a huge amount of advantages; the main one being is if you change any of the code in the module you can simply re-run the test and make sure you haven’t broken anything. This can turn 1 hour of manual testing into a simple button click which an instantly tell is something has been broken.

A recent development in the “Agile Programming” area is Test Driven Development (TDD) this is nearly a complete reversal of the way code is written. In TDD a large number of tests are written that cover the whole purpose of the library and how it should perform; which code is then written against until it passes all tests.

Functional Testing

Although each unit has been tested individually and proven to have no bugs it is not surprising to find that integrating hundreds of these small units into a single site can sometimes have unexpected consequences. Functional testing can be used to help locate these problems and solve them correctly.

When the site is built (whether as a prototype or set live) a developer will go through the entire site manually testing each section of the site (search, re-ordering, contact forms, etc) and while this is happening, a tool (e.g. Selenium) will record all the actions that were taken to reach this point. This allows for the developer to re-run all these tests automatically in seconds whenever a new change has been made to the site; instantly allowing the developer to know if any parts of the site have been broken indirectly.

These tests can also be run on a regular schedule in the background to make sure nothing has been broken due to a time based error or change made by site owners; once a problem is found a developer is notified and the error can be fixed before anyone has noticed or any orders failed.

Cross Browser Testing

As the internet has evolved from a purely academic tool for research to a global point of communication for businesses and social reasons; the tools used to read and publish on the internet have changed. There are now more than 8 major browsers used to browse the web; each of these have different ways of handling text and layouts on web pages. Even though this can be seen as a small problem, it can sometimes have consequences larger than any programming bug; if the checkout button is invisible or hidden under an image in a browser such as Internet Explorer 6, then as many as up to 40% of the visitors will never be able to use the site.

Out of all the different types of testing that can be run on a website this is still the most manual; normally requiring someone to test each of the browsers on most pages manually. Luckily a websites’ layout and design will normally stay the same once set live and so only required to be tested once. However for websites that do change content frequently or theme the site (colours, banners, etc) for special occasions, there are a small set of tools that are now being used to help the automation of this testing.

Both Adobe Browser labs and Litmus Testing allow for a single URL to be submitted to the server which then fetches a screen-shot of the site in every major browser allowing them to be compared next to each other to find any problems.

Continuous Integration

When developing a site it is a major advantage to be able to know the instant something goes wrong before the problem is made any worse or data loss occurs. To solve this problem Continuous Integration can be used; it’s name is quite generic and can be applied to a variety of things however at Strawberrysoup, we use it to automatically run all tests required as we are writing code. This means that the second we need it tested, we already have the results and know where the problem is and when it was caused; allowing smooth development of highly complex websites.

Links

• Wikipedia’s Entry on Unit Testing – http://en.wikipedia.org/wiki/Unit_testing
• Selenium Website Link – http://seleniumhq.org/
• Links to Litmus website – http://litmusapp.com/

Social Bookmarks

We love the design community and the people, agencies and places that everyone works. With this in mind, we launched WhereWeDesign in January 2010 – a new community whereby creative people can share where they work.

The response to date has been fantastic. We have had submissions from graphic designers, architects, web designers, musicians, interior designers and various other creative people who wanted to share their spaces as inspiration to others. There has been lots of activity on social networking websites like Facebook and Twitter.

At the peak of its traffic to date, the website attracted 10,000 visits in one day following a featured on @smashingmag whereby the server crashed due to the levels of traffic that the website received! We are also really proud of the response the website has received from the blogging community, with many personal blogs featuring the website and recommending users to submit their workspaces.

Some of our personal favourites include Parliament, Bark Design and APFEL. Thanks so much for everyone’s support so far, and keep submitting your design workspaces!!

Social Bookmarks

We love working with brands we admire, and we are pleased to announce that The AA has chosen Strawberrysoup to help them design a series of email campaigns for their various divisions.

This exciting project involves both our design and technical team, who are responsible for designing new and innovative ways of displaying information and special offers via emails which are sent direct to The AA’s customers. The emails will be sent to hundred of thousands of subscribers, so ensuring they are easy to read, navigate and that calls-to-action are obvious is very important to the overall campaign success.

Social Bookmarks

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

Denise Kelly, as a Nutritional Therapist provides personal, professional and unique advice on how anyone can improve the quality of their health. She can help deal with chronic or acute diseases, help with boosting the immune system, increase energy levels, enthusiasm and vibrancy for life.

As this was a completely new business venture, Denise Kelly needed full branding together with a vibrant but simple website.

The entire Denise Kelly (or DK) brand comprises of 2 other brands, K4 Fit Kidz and The Fridge Detective. Although all 3 brands are within the health and fitness sector, each offers something different.

Although the website part of this project was relatively small, it was the branding and ‘voice’ that proved to be the biggest challenge. As this was a new business a huge amount of consultation between Strawberrysoup and Denise Kelly occurred. Understanding the direction of the business was key to developing a great looking website.

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

Culinary Travels of a Kitchen Godess is a popular food blog written by dedicated foodie Georgina Ingham.

We were approached and asked to redesign her blog as it needed to be updated visually. The blog was using off-the-shelf Wordpress themes, and it was time to give the site a unique feel of its own.

The blog is incredibly popular, and receives thousands of visits a week from users who love the way that Georgina writes about food, cooks and creates recipes. From a design perspective the blog had to capture Georgina’s natural flair for food and entice users into revisiting again and again. It also had to publicise her Twitter, Facebook and RSS feeds.

Since launch a few days ago, the feedback to date has been very positive and Georgina is very proud of her new blog. We wish her continued success in 2010!

Social Bookmarks

Being a graphic and web design agency, we love design. Dennis and McGregor is a new business that we decided to start, selling “design-led products for living” online.

The concept behind the website was simple – we wanted a well designed and usable eCommerce website to sell design-led products. We also wanted a platform that we could use to showcase our eCommerce platform – to show potential customers what it can do.

We had many discussions within the team about the functionality that the website should offer both us and our end users. We use various other web-based applications, and the main requirement was to link to these as well as add value through new functionality.

As a result, the new Dennis and McGregor website links automatically to eBay, Amazon, XERO and 37Signal’s Highrise – which helps maintain the accounts and fulfilment process. From an end user perspective, we wanted to give users a range of value add services, including wish-lists, reviews and the ability to follow our blog/news – which we aim to keep up to date weekly.

We are really proud of this new website. Not only from a design perspective, but from comments that we have had from customers to date. They find the website simple to navigate, easy to purchase and enjoy the fact that we love the products as much as they do!

Social Bookmarks