We love the big smoke, don’t get us wrong. The vibrancy of the city, the vast array of opportunities is both exciting and exhilarating. We have lots of London based clients that we enjoy working with. We even have an office there which acts as a more professional environment to meet our clients than the local Starbucks or Prét a Manger.

What we find really interesting (and frustrating sometimes!) is when we have a conversation with a potential client and they subtly mention they have a meeting with a London based agency. They seem to automatically assume that this agency can do a better job based on their location. Why does this have such an impact on the illusion of someones creativity or the ability to do the job well?

It’s correct to say that there are many fantastic agencies in London, probably more so than in any other city/town in the UK due to it’s size. The city scene is also boosted by some fantastic design colleges and universities that release inspiring graduate talent.

We just feel that London is not the only place to look. In cities and towns throughout the UK, you will find a growing base of graphic designers, web designers, illustrators and photographers that are really carving a name for themselves.

Look what’s down here

We know lots of people who have lived and worked in London and have experienced the hustle and bustle – ourselves included for a few years. We decided to move down to the South coast to get away from it all, live the lighter side of life whilst retaining our core design values.

Larger brands and corporations are starting to see the benefit of working with non-London based agencies due to their cost vs. creativity. Lots of agencies have been started up by ex-londoners seeking a better quality of life and work-life balance. You only have to look at websites like the Southwest Top 100 Creative Agencies (based on revenue) to realise the potential that the Southwest in particular has to compete with London.

Being a little biased, if you look at Bournemouth in particular, we have a fantastic range of digital and print agencies lining our golden beaches. Forget the traffic, millions of commuters, pollution and high living costs. Fresh air, beautiful scenery and lots of eager clients await.

Meetdraw

We went to Meetdraw 6 last night in Branksome Dene Chine and it demonstrated our above points perfectly – Bournemouth has a solid base of creative digital people. The event was created to pull together the creative talent of Dorset and its surrounding cities. It’s a great opportunity to meet new people and catch up regularly as well as compare stories, discuss projects and potentially gain some work.

Agencies, freelancers, students and anyone else interested in digital or print can come along and with food or drink sponsored by Dorset Design Forum, there’s no reason not to!

We would love to know what your thoughts are on London. Do you agree with us or think that it is unfair?  Answers in the comments below!

We have been lucky at Strawberrysoup. Since we started back in 2005, we have achieved consistent growth from two to twelve employees and feel that we now have the perfect balance. There is no doubt that we found it very daunting when we hired our first employee, but we were lucky – we started them part-time, they had another job running their own business and eventually they became full-time, so it was a smooth transition with minimal risk.

From there, growing to twelve seemed less terrifying. For sure, if we think about our monthly salary bill, it can get a little scary, but we have more than enough work to cover our costs at the moment, so there’s no real panic.

We never really had a growth plan either to be honest. There was no magical number that we were aiming on achieving in terms of team members, we were just seeing how we went and if the more people wanted us to work with them and we didn’t have time in our project planner, we hired.

Staying ‘small’ is the way forward

We feel that there is real benefit in remaining small. Officially, we are no longer small (up to 5 employees) anymore, but classed as a medium, however we are still small enough to change with the times and make effective decisions without the bureaucracy of larger corporations or agencies.
Since our first employee joined us, we have worked really hard to make Strawberrysoup a fun place to work. We wanted people to wake up on a Monday morning and want to come to work, to look forward to seeing each other and also socialising outside of work.  If people feel happy at work, it ultimately reflects on their work with a higher quality being produced with more creative results.

It becomes difficult for talent to shine amongst the hundreds of other employees. Some would argue that this is the responsibility of the heads of departments in larger agencies, but we know each of our employees as friends and understand their strengths and weaknesses, so projects and work can be apportioned appropriately.

Faster changes, better executed

In the current economic climate, things are changing. Customers want solutions to their problems faster than ever and for the best value. This coupled with the fact that our sector is one of the fastest advancing industries, with new technologies and ideas being generated all the time, we need to ensure that our business can keep up.

From experience, this becomes increasingly difficult to do as a larger agency. Multiple levels of management and a convoluted thought process mean that decisions can take weeks with all stakeholders needing to be involved and happy. This has been explained to us as the same concept with boats and ships.

A cruise ship is massive. It carries hundreds of people across wide open seas. In order for it to change its course, it needs planning, space and lots of resources. Compare this to a smaller yacht. Changing its planned route is simple, can be done in a small space and with minimal impact. We would without doubt prefer to be a smaller yacht.

Growth plans for Strawberrysoup

At the moment, we are planning on remaining small and agile. For the level of work and our project commitments in the near future, our team is more than capable of delivering fantastic creative, sound technical and friendly account management.

Don’t get us wrong – we work with some fantastic larger agencies who are doing great work. They have larger teams of individuals that focus on their core areas and do a really great job. We take our hats off to them for remaining stable and being able to grow as large as they have, it’s just that at this stage of our business, growth is our secondary objective, with quality being number one.

I have to admit that I am struggling a little. With the proliferation of web applications and social networking, I am drowning in a sea of data.

I use web applications to try to streamline and centralise our business processes and information. This was working initially when we used a couple of apps, but now we use over 8 different applications and keeping up with them all is proving very difficult and arduous.

From a  social networking perspective, I use it as a way to keep up to date with friends, partners and market Strawberrysoup. The problem is, there is just too much information from too many sources; and not enough time.

The recent Bing search engine adverts have hit the nail on the head with ‘information overload’. My head is spinning and even if I was to keep up with just the social tools, there would be no time for me to actually get any work done.

At Strawberrysoup, I use the following applications and social tools on a daily basis:

Web applications:

• Basecamp – managing our projects and team
• Highrise – storing customer data and prospects
• Harvest – time tracking for each project
• Xero – our accounts
• Mint – realtime website statistics
• Google Analytics – more powerful website statistics
• WordPress – updating our blog
• Lighthouse – keeping track of website bugs

Every day there are updates that need to be added, edit or syncronised. It is unrealistic to think that I could find one application that does all of the above quickly and simply, but what is the other option?

Don’t get me wrong, I love the fact that web applications are online. The fact that no matter where I am in the world, I can login and keep up-to-date with my business and my team is fantastic. The problem seems to be that it is easy to be seduced by a beautiful user interface and think that an application is more useful than it really is. There must be a simpler way to manage your business data online – perhaps its just reduce the number of applications that we use and focus on the most important ones?

Social tools:

• Twitter – the king of micro blogging
• Flickr – networking with fellow photographers/friends
• Facebook – networking with friends
• LinkedIn – networking with collegues
• WordPress – commenting on blogs and keeping up to date with our industry
• Tumblr – another blog
• Delicious – our shared bookmarks
• Vimeo – uploading and sharing our videos
• Ember – sharing images and designs
• RSS – maybe not social, but keeping up with the industry
• Podcasting via Apple iTunes – uploading and sharing our MP3’s/podcasts

Again, the social tools above are just a small example of the ones we use regularly for Strawberrysoup. And this list is growing at an exponential rate.

The fact that many of the social tools above can link into each other with Twitter updates being shown on Facebook, Tumblr or Linked In, means that I am likely to see the same information multiple times but on different platforms, thus giving me even more data to digest.

Mashable published an interesting article about how to deal with social networking overload. This article mentions creating boundaries for each application and trying to communicate your plan so that different networks of people don’t overlap. That is all well and good, but I think that there is a certain level of social success that we strive to achieve.

We *love* being part of the web community, and the fact that we are traditionally early adopters and prolific users of such technologies. This can however create the feeling that we need to ‘keep up with the joneses’ and be successful at it. With Twitter, the more followers you have, the more successful you are perceived to be – but is this really the case?

We are also switched on 247 to our networks. As well as accessing the information in the office, we can now keep up on the train, in bed or even on the toilet. There is no getting away from it.

What is the solution? Who knows. I think that the more I use web applications and social technologies, the more I think of the importance of selecting carefully the tools that I use. I don’t think that we should worry about being registered and active on every possible network or use every possible web application to run our business, be selective and use them well.

I am really interested to know if anyone else feels this way about information overload and if they fancy sharing their tips/advice, feel free!

We love Twitter at Strawberrysoup. It’s a great way of socialising, keeping up to date with friends, learning about new things and generally keeping in touch. We use it from both a personal and a business perspective, however we try to keep the two very separate.

We are not professional Twitter marketeers with thousands of followers, and we don’t claim to be, we just enjoy having the ability to share our knowledge, news and interesting snippets with the Twitterverse.

Success isn’t solely dependent on what you tweet,  but we have found that the nature of those 140 characters can seriously effect your follower quality and general interaction from your audience. Remember that it’s not all about the number of followers, but the quality of your followers.

Keep it interesting

It is really important for us that our personality can be found in our tweets. We think of our followers like an extended friend-base that are genuinely interested in who we are and what we do, so they like to interact with us via Twitter.

We don’t share information like “getting out of bed” or “drinking a cup of coffee” as neither of these add any real value to our audience. Nor do we subscribe to services like FourSquare that continue to share our locations throughout the day – who really cares?

We have found that many of our followers are web designers along the South Coast (but there are exceptions!) so we prefer to share interesting articles that we find on blogs, tutorials and find out what our followers are up to.

Bragging

Everyone gets good news every now and then. We are no exception, so its nice to share when you win an interesting pitch or new project. We do think however that if 99% of your tweets are about awards you are nominated for, new jobs that you have available, how amazing you are, how many global clients you have – it tends to alienate people and they will soon get bored.

Apply the same rules as if you were interacting face-to-face. You wouldn’t brag about how successful or great you are to your friends or a group of people you have just met – it’s no different on Twitter.

Getting the balance right

We follow about 200 people right now. This number is likely to increase due to the amount of people using the service from around the world. Of these 200 people, we probably only know about 10% of our fellow Tweeters, so why do we follow them?

The majority offer some form of value or entertainment. Some are very well connected in the web industry, so can offer us insight to events that we couldn’t make. Others like to share interesting articles or links that we might find useful. There are others that take us away from our daily routine with jokes or humorous content.

Whatever the reason, we follow them as they get the balance right. They don’t promote themselves as amazing in every way. They may well mention a new project that they are working on or what they are up to, but they get the right balance – this is the key.

Networking Rules

Networking as you will have heard is an important aspect of modern business. It is also one clouded in skepticism and name badges. Use Twitter as a networking tool. Interact with people that you would like to get to know without awkward silences or those mandatory “the weather has been good recently” conversations.

One of our highest profile clients were gained via Twitter. We had caught the eye of some followers that worked at a large web design agency and were asked if we wanted to work on the project with them. This was both a fantastic opportunity to work on another high profile client, but also to get to know the agency better and work on other projects.

Conclusion

Twitter is no doubt a useful marketing tool. Remember that it’s not all about you, you and you. It is important to give your followers a reason to follow you and be interested in what you have to say. Try to stick to a set of informal rules that you can set yourself and remember – don’t brag too much!

In this second part to our Managing Projects Online article, we are going to cover sticking to a process and methodology.

Using an Online Project Management Process

To ensure the project runs smoothly from start to finish, project managers should follow a core methodology. There are many proven project methodologies to use (such as MPMM or PRINCE2) which can be used for developing a website or online system, however if you have a good understanding of the scope of the project – you can develop your own methodology to fit.

To get you started, we have outlined a simplified version of our project management process:

Stage 1 – Requirements Gathering

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 project stakeholders.

Having the most experienced members of the project team involved during this stage gives you the time and knowledge to be able to discuss and advise on any new functionality and technology that would potentially make the overall solution more effective and future-proofed.

Stage 2 – Specification

Once both the client and supplier are happy with the requirements discussed above, these are transferred into core documents which are agreed and signed off. These documents are then used throughout the entire project to ensure the project remains focused within scope.

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 and resources are supplied at the necessary time.

Stage 3 – Design

The next phase focuses on the website/system design. An initial design meeting can be held to review the previously agreed core documents. This meeting gives clients the opportunity to highlight any design preferences if required. It also gives you the chance to question the customer on a number of design related questions. The design is developed and tweaked over time until it is agreed and signed off.

Stage 4 – Development

The next phase is when the development of the project begins. This is the largest part of the project in terms of time and normally consumes over 60% of the project timeframe. The project manager must keep the customer updated at all times throughout this process.

Stage 5 – Testing

After the development is completed, the system should be tested fully. A lot of companies fall down at this stage of a web project. They do say that the last 10% of any project is the most important. All browser testing, bugs and amendments are identified during this phase and are prioritised for fixing.

Stage 6 – Launch & Review

Once the system is completed a pre-launch meeting should be held with the client to discuss the launch plan. Final sign off is then provided and the website is launched. Monthly review meetings can then be held for an agreed period after the launch date to ensure the system is running as it should be.

There are many more things to thing about when managing an online project of this kind however providing you have a structured methodology in place – the project is more likely to be delivered on time, within budget.

Online Project Management – Top Tips

In summary then, in order to manage a web project effectively – below are our top 8 tips to ensure the project is delivered successfully: -

1. Keep your knowledge of technologies current – As the project manager, read online tutorials and sign up to latest RSS feeds in each core sector that you work in. Use the experts in each field around you to stay informed so that you feel confident when making important decisions.
2. Manage your relationships with key members of the project – A project manager needs to be respected by colleagues in order to get the job executed successfully. Operate a firm but fair management style that demands respect but encourages input. Nobody in this industry knows it all.
3. Good honest communication – You’ll be surprised how happy clients will be if you communicate with them at every step of the way. Even if something goes wrong or a deadline is going to be missed –  The client is always going to be happier knowing earlier rather than later. Sometimes these hiccups can not be predicted and with good consistent and honest communication, you may even be surprised at their reaction when you tell them the bad news.
4. One client voice – If you are working with a client with multiple stakeholders, it can become very difficult to get sign off at key points in the project. These sign off stages can end up taking up a lot of company time therefore ensure there is only one official voice from the client. This will help manage clients by funneling their input through one key member.
5. Sign off stages  - Ensure the project has key sign off stages for design, build and testing as seen above in the PM process template. These stages help to reduce project scope creep and also protect both the supplier and customer when it comes to the final testing and review of the project.
6. Be consultative –  The client has chosen your company to implement a task that they can not do themselves. Guide the client, assist them and recommend better ways of doing things. The more you impress now the more likely it’d be that you do another project together in the future.
7. Use online PM tools - Managing both your colleagues and clients can be very difficult especially if the client has multiple stake holders with decision making powers. Use online management tools to funnel all communications and actions. If the client and your colleagues use one central system to create to-do lists, send emails and manage milestones – you are already one step ahead.
8. Follow an agreed project methodology –  To help you deliver the online system effectively – always follow an agreed methodology to ensure no stages of the project are missed. Sometimes web projects can be difficult to measure and track. Having a clearer defined methodology can help to give clients tangible goals to work towards.

We hope that you have found the two articles in our managing projects online series useful and we would love to know if you have any hints, tips or advice to share too!

Managing online web projects is no easy task. Having to oversee and manage a wide range of tasks and differing working styles can prove difficult and an online project manager must have the ability to understand, adapt and administer all these different elements.

Considering that one “simple” web based project could involve branding, website design, usability testing, system development, project testing, online marketing and ongoing support – it is clear to see that even the smallest of projects requires a diverse and clear understanding and varying skill sets.

When working on a number of different project elements as mentioned above, a project manager must also have the communication and interpersonal skills to be able to work with colleagues with alternative working ethics and styles.

Project managing online projects covers a wide range of subject areas

You may say this is the case for a project manager in any industry, and you wouldn’t be wrong. However within the web industry, the difference in working styles between a project manager, a web developer and branding/design expert could not be further apart.

Good project managers will be concise, organised and will know what is required each day. Developers are similar in their organisational logic, however may do things in no particular order to suit the project or milestones. This is not because they are being difficult, but is simply because it is how code must be written in order for it to be written correctly. And then you have designers who can seem slow to start, but will have flashes of inspiration without warning which can effect the direction of a project within an instant.

All this can be very difficult to manage on small web projects let alone large scale online systems which is the direction most companies are heading towards.

As web projects become larger and more technical, technologies and techniques are having to become more advanced to suit client requirements. With the continuing evolution of such technologies as Canvas, WebGL/OpenGL and  HTML5 Manifests, a project managers role becomes even more challenging as their knowledge of these technologies must stay up to date in order to make more informed decisions for their clients.

A working knowledge of all aspects of a web project is an absolute essential when it comes to a web based project. A project manager does not need to be able to design a logo or develop a website – but they must have the background understanding to bring everything together in an effective and beneficial way.

Using Online Project Management Tools

One of the most difficult tasks required of a project manager is the organising, management and documenting of a project from start to finish. Online project management tools such as Basecamp, EasyProjects and LiquidPlanner, help project managers to keep track of team to do lists, create and assign project milestones to key members of the project team and create internal messages which can all be stored for auditing purposes at any stage of the project.

Basecamp is a great example of easy to use project management software

Using these tools allows all project communication to go through one central online facility which can not only be accessed by any authorised stakeholder anywhere in the world, but also ensures both the client and the whole development team remains up to date at all times with any project developments.

This is a very valuable asset when developing large online systems that can change focus at any given time. As part of our quality management policy at Strawberrysoup we take project management very seriously. We make good use of the web-based project management tool Basecamp especially when internal and client project teams are located around the UK or abroad.

Managing Online Projects Part 2 – Sticking to a Process, will be published next week!

The aim of this article is to help explain one of the greatly over-looked aspects of any companies web presence; their server.

Big companies spend massive amounts of their IT budget on their network infrastructure, with the modern day business now heavily relying on IT to perform their day-to-day roles. They play a key part to the success of the business and without them they would simply not operate. This helps to create large teams of dedicated professionals whose sole responsibility is maintaining them.

From a smaller company perspective, they simply don’t have the money or time to spend on this and it is very often over looked about how important they are. After all you only really see the end result – the website.

Things to think about

What is often not realised is that when you get that shiny new website or collection of email addresses, with it’s bells and whistles, a good amount of time and investment has gone into it’s hosting/hardware requirements. Some of the things that will have been taken into account include;

• the target audience
• volumes of traffic
• geographical location
• SEO
• platform requirements
• coding language
• it’s end role within company (Emails, Websites, Intranet and/or Asset management)

Planning the server requirements needs to take into account what the server is going to be used for initially. Future company developments also need to be considered as with all good planning, things change. Any website should adapt and grow with a company, being able to accomodate the company requirements as required but clearly so should the server/platform providing it.

These considerations should be taken into consideration with every new direction the website takes. The same question needs to be asked “Will these changes affect my server requirements and if so how?” because any new architecture changes need to be implemented first. After all, what use is an amazing new piece of software, if on launch day the server cannot cope and it results in no one being able to see or use it?

Available options

Although actual configurations are a little out of the scope of this article and can differ greatly from company to company depending on there usage here is a potential guide as to how a server could scale to incorporate a growing company.

Shared Hosting: This is ideal for small websites, it’s cheap and can handle brochure-style websites to small CMS systems. An initial package for companies starting out allowing for very little customisation and a lot of restrictions with potential security issues.

Virtual Dedicated: This moves away from the shared hosting but not going to fully dedicated. It gives the appearance of dedicated with moderate control over server configurations but is ultimately one server split up into ring fenced areas with server resources shared. This server type is useful for higher traffic websites.

Fully Dedicated: This can be either managed or co-located giving you the fullest control over your server with the option of physically owning the hardware. This is the most expensive and depending on the host can require the most amount of work and knowledge from yourself to maintain, however has the greatest scope for expansion.

Following on from the fully dedicated option, the server can be scaled out to fit your needs thus becoming the stepping stone with expansion upgrades like increased RAM, multiple core processors, an abundance of hard drives and finally multiple servers.

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

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.

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.