It is quite simple. Just add the following bit of code to the top of your PHP pages and you can decide what to do depending on their device:

if(strstr($_SERVER['HTTP_USER_AGENT'],’iPhone’) || strstr($_SERVER['HTTP_USER_AGENT'],’iPod’))
{
// process as IOS device
}
else if(stripos(strtolower($_SERVER['HTTP_USER_AGENT']), ‘android’) !== false) {
// process as Android
}

But, why might you want to do this? Well you might have developed an app for both iPhone (etc) and Android and want to use a QR code for distribution. However, you need to codes – one to link to the Marketplace download page and the other to link to the iTunes download page. But, with this code you get the QR to link to a page on your website, decide which page the visitor needs and redirect to the relevant page. You can then also count how often the code is used, track how often users of other devices arrive and so on.

Simple.

                          

Ignore those on Apple Macs – test for Safari and they are happy. But count up the iPhone, iPod Touch and iPad hits. On one site that I looked at recently mobile devices accounted for 20% of hits, and Apple devices the majority of these hits.

People are sitting on trains, in buses, waiting for children to finish their hobbies and so on and want something to do. A few presses of a screen and their iPhone is on the internet and they can be planning their lives.

That is why over the last year our website stats have gone from a tiny number of iPhone hits to a huge number. The technology is spreading, more people are aware of the advantages and the internet access is cheap. I even now of someone (who is a technical guy), who has cancelled his broadband connection in favour of mobile technology.

So what’s the big problem then with maybe 10% – 20% of our visitors arriving via IOS devices? Well, there is a huge problem, if you are using certain technologies.

For whatever reason, Steve Jobs and Apple refuse to implement Flash technology into IOS devices. If your website runs entirely in flash, or uses Flash navigation bars, then those people accessing it via their IOS device are not going to get the experience you want. In fact, at the extreme they won’t see the website at all.

At the very best, if you have used Flash for a banner that is key to your design then the pages aren’t going to look as impressive as they should do. And when someone sees that a bit of your website doesn’t work on their IOS device, are they going to switch to another device, continue anyway or maybe go elsewhere?

Personally, I would rather not take the chance. Potentially losing 20% of traffic just because I want a Flash animation is not worth it and I suspect as the technology gets cheaper more people will be using IOS devices to access websites.

So, what are our choices? Well we can scrap flash totally. Flash written websites are a bad idea anyway, so rewrite them and they will become search engine friendly.

But do you need to rewrite a website if it has flash banners or navigation? You could do, but the gains are probably not worth the effort. It would be more efficient to just provide a suitable non-flash alternative – links in basic HTML and a jpg or a gif banner to replace the Flash banner.

It is easy enough to do and if it means that you rescue up to 20% of your visitors, then why not?

                          

Writing With Tables
Laying out your website page with tables can be very easy and if you are displaying data, then sometimes it can be the only practical solution. But heavy amounts of formatting and tables soon take their toll on your code.

The problem is that if you want more than a simple layout then you start looking at nested tables – where you have a table inside a table inside a table… It gets extremely ugly in the end and if you want to make a change to the layout, trying to figure out which table needs to move can be all but impossible.

Cluttering Your Code
Using tables and formatting in your code means that the actual code becomes cluttered and heavy. Having to spell out the exact fonts and colours for every cell of a table produces a lot of coding, which you might regret when you come to update the style.

How CSS Changes All Of This
You can put your CSS into style sheets and hide them out of the way of your main code. They are there when you need them, but not when you are just updating the text. Using divs with ids you can set the attributes of entire parts of the page remotely. From where on the page it is positioned to the text style down to even the border of the images within that section.

Correctly written CSS moves all formatting to a central file, or set of files. This means that formatting that is applied to every page does not need to be constantly written on each new page, just refer to the section by id or class and call it in.

What Are The Advantages?
As I have already said, you move your formatting to one file, away from the text. This makes the text easier to update. But it also makes the formatting easier to update – for example, if you decide to change the colour of all of your links you just change it in the style sheet.

And because search engines can skip past reading the style sheet they get to the content of the page a lot quicker. This means that they can cache your content quicker, ignoring the formatting. This increases your content to code ratio, which can benefit you in search engine rankings.

It might take a little longer to get used to, especially working out what works across all browsers, but the end results give you a webpage that is a lot easier to maintain and one that should do better in search results.

                          

Well that is the question I faced. I knew adding another advert to one of my websites would make it too heavy in the advertising front. And the problem is that this week I am trying out 2 different adverts.

Which earns the most?
One is for free business cards and the other for free PPC Advertising. Which would generate the best revenue?

There are two ways of testing this. Put one advert up, leave it running and then swap it over. But, how do you know that the trial is equal before deciding which earned the best income? That way is no good.

Random display testing
So my preferred method is random displaying. This should work very well as many people do read multiple page on that blog, so could get to see both adverts! How do you code it?

Well very simply in PHP, using this code:

<?php
$addswitch = rand(1, 2);
if ($addswitch == 1) { ?>
[html for first advert]
<?php } else { ?>
[html for second advert]
<?php } ?>

The vital line of code!
Yes, very basic and might be better with a switch statement, but the important aspect is that rand(1,2) statement. That is asking for a random number between 1 and 2. If you wanted to test more adverts or to weight an advert, that could become rand(1,3) etc.

But using even weighting, over the course of a few thousand page hits all thing should be roughly equal. So in a week I’ll look at both systems and see what income they have made. If neither is doing well then I might just put back the Google Adsense block I had there!

                          

An ideal way of securing the admin would be by only allowing access to one IP address. But, if you are like me then you (or your customer who is using the admin) might be allocated a different IP address every time they access the internet.

But what I have noticed is that most, if not all, hacking attempts have come from outside of this country. So the theory is quite simple, even if the actual coding is a lot more complicated.

What we have to do is to grab a list of IP address ranges and the countries that they relate to. Then, we just open up the access to the admin to those ranges that apply to a certain country.

It is quite simple, the only difficulty is in loading that list (I’ve been trying, the IP list is huge!). If you are going on holiday and needing to use the admin, or you have users abroad, then you can just extend this list either temporarily or full time. For example, it would be quite simple for me to allow access to UK and Ukraine IP ranges for my customer’s website where the customer is based in the Ukraine.

But, what to do if the IP address does not match an allowed country? Well that is a little bit of a choice. You could say that access is not allowed, but then you have given any potential hackers that little bit of information. They know they have found your admin and that it is protected by country. You could just fail or redirect to the home page. That bit is really up to you!

                          

1) Make sure that passwords are not readable in your database.
Yes, it can make life more difficult when you need to reset your own password, but if a hacker manages to gain read access to your database (which can be quite easy, see step 5) then if passwords are on show they can access anything. Even if you just create an MD5 checksum of the password so that it is difficult to read, that is a step in the right direction.

2) Give your logons good user names.
In single user systems it is tempting to do without user names or use basic names such as ‘admin’. Don’t! If a hacker has to find out a username and a password they are much less likely to get through. Store them on separate tables in your database, or in a single user (or limited user) environment, why not store the username in the PHP / ASP? A username is a good protection against brute force attacks.

3) Check what you upload!
Does your admin allow you to upload files to your server? This is what a hacker wants – then they can upload their backdoors. If you are expecting to upload images check the file is an image (jpg, gif etc). If it is meant to be PDF validate that. Then, rename the file to hide it! For example picture.jpg might become 1.jpg.

4) Do not directly access uploaded images.
If a hacker can upload a file, then they need to find out where it is stored. But, if you instead use a picture resizing routine which has the uploads directory hard coded, then there is no clue as to what directory the files are stored in. If a hacker realises that the uploaded files are well hidden it might be enough to make them leave your site alone.

5) Validate all input string parameters.
To gain read access of the database a hacker can try to manipulate inputs. So, make sure the values are what you expected. For example, if you have mypage.php?id=1 and the id is a number, then fail the script immediately if the id is not numeric.

If you are passing a string, within the PHP / ASP check it for an exact match on expected results before using it within a MYSQL query. You can do this by running through the database values or a hardcoded list.

If you are running a search function then this is a lot more difficult to protect, but not impossible. Make sure you use the POST method and check the referring page is on your website. If possible, remove all non alpha-numeric characters or at the very least backslash out quotes. If you don’t then they will cause problems anyway in genuine searches.

6) Monitor failed logons.
And maybe even those queries detected in step 5. If the logon fails, send yourself an email. If there is a brute force attack you might find your email box suddenly filled up, so you might prefer to use a separate email address for this. If you want to be really clever monitor the failed logon attempts and lock your admin out for an hour after a few failed attempts.

                          

Once they decide to target your website one of the tricks they will attempt is to see if they can access your website. The aim is that hopefully you will have stored passwords on the database, then they will try to find the admin and logon to continue their work.

So, how can they access your database from the public screens? Actually, it is frighteningly easy, but almost as easy to stop it.

Take for example a page in which you pass an id. For example it ends mypage.php?id=1. You request the id and then use it in your MySQL as WHERE id = ‘$id’.

What they then attempt is to change the parameter. For example mypage.php?id=1′ AND ’1′ = ’1 becomes in your code WHERE id =’1′ AND ’1′ = ’1′. Oops! As you can see, that would actually work (try it on your webite).

Once they have discovered their way in, then some extremely complicated SQL comes into play to dump the contents of the database.

So, how do you stop it? Well in this example it is easy. If you are expecting an integer, then try a piece of code such as:
$id = $_REQUEST['id'];
if (!is_numeric($id)) {exit;}

This would stop interference in its tracks. It is more complicated when the field is non numeric. Here, if there are a limited number of values expected then we can build an array of expected values and then compare the value received to all of those in the array. By checking in PHP first, the syntax is different enough from SQL to be able to fail on one or the other.

If there are thousands of values, you could try substringing the received value to the first one or two characters (not enough for mischief to take place) and returning all valid values that start like that. Again, just use a simple PHP check to see if it is a match and fail if not.

The problem comes with searches, as there we do not know what to expect. It depends on how your search is working, but make sure you use a POST and $_POST to return the value so that parameters in the search bar don’t count. Maybe also make sure that the refering page is from your website and if you can, remove all non alpa numeric characters from the search string.

At the very least, backslash whatever type of quote you are delimiting the string with in your search function. If you don’t and someone innocently uses the string, they will get a failure anyway. But by backslashing it (e.g. str_replace(“‘”, “\’”, $_POST[search]) you are preventing it from working to end the input string, which should hopefully again stop the hacking attempt.

It’s not nice when you see on your server logs that this has been happening, so the earlier you can put a stop to it the better. Protect your website now!

                          

There are no great secrets to making a website look professional, you just need to look at the result and make sure that you keep on track. Here are my favourite secret tips to follow!

Do not make it too personal! – Unless you are selling yourself as a person, for example a children’s entertainer, then do not put lots of personality into the website. Too often I hear from my sales team that a customer would like a bit of this in and a bit of that. Yes, they make the sites look very personalised, but too often these take away from the professional look.

Reduce the design team – One of the biggest causes of a web site going from a professional look to a amateur look is when too many people are involved in the design. If they all read and obeyed the rest of the tips, then this would not be a problem. But at every person’s review they each want to put their mark on a site and suddenly all manner of tweaks and extras are being added. Cramming all of these banners, dancing cows, splashes of colour and more onto the page that every single one of the committee have added soon destroys the look.

Watch the font size – The tiniest reduction of font sizes is sometimes all that is needed to take a site from looking home built to a professional looking website. Use relative font sizes (measured in em) rather than actual font sizes and if the visitor needs larger text they can click a button in their browser to increase it. But large font sizes that shout out to the visitor do not look professional. Sadly, quite often that means the default font size (especially in Arial font) does not look good.

Don’t get carried away with colours – It may be clever to add in lots of blocks of different colours, but it does not look great. Keep to a few simple looking colour blocks nicely positioned around the page.

Use professional images – Sorry, but snaps taken on the camera of your mobile phone might look good, but buying some images from a top quality stock photography directory (I use iStockPhoto) gives such an excellent finish to the website that it is well worth the small amount that you pay.

Don’t think movement is a good thing – Lots of movement is never good, not on a website. One or two small, smooth flash animations can add to the page, for example on the header, but placing lots of clever banners, snowflakes falling down the screen, light bulbs that glow and fade and so on will almost always look tacky.

In short, to make a website look professional try to not be too clever. Just because you have learnt how to add a scrolling image does not mean you have to. Use clever tricks only when absolutely needed and do not try to show off with tricks. Your website design will do the showing off for you.

                          

There are many views of best practices for page navigation in your website design. But there should be two main aims of getting your page navigation correct – allowing visitors to find their way quickly and easily around the website and allowing the search engines to find all relevant pages of your website.

If you only have a small site, half a dozen pages or so, then it is quite easy to display links to all of your pages on every page. But even then, there are mistakes that people can make so do read on!

Keep the main navigation constant
And the first of these is changing the navigation layout on every page. If the navigation structure changes on every page it can be very distracting to the visitors. For example, dropping the current page from the list of links can alter the layout of the links across the screen and if a visitor is working left to right through the links that can cause them to get lost.

Do not hide in text links
Links in text are also open to major problems. I have seen websites in which these links are in exactly the same font, text decoration and size as the rest of the text. This is a shame as visitors on the site will not realise that they can click a link for further information unless by some fluke they happen to drop the mouse over the hidden link.

Always have text links
I am not saying that all links must be text links, but if you are using flash, javascript or image links then at the footer of the page add text link equivalents to the pages that you are linking to. This makes sure that visitors using browsers that can not read these technologies, such as disabled and basic mobile browsers, still have the option for the links as do search engines.

Give a link back home
Quite often someone finding a page on your website will want to go to your home page before continuing through the site, or another visitor might be deep into the website and want to get to your home page. So make sure that this link is clear and easy to find.

Leave breadcrumbs
If you have a website of just a few pages then maybe not needed, but if visitors can click down through several levels of pages then telling them where they are is a must. The breadcrumbs would usually provide another link to the home page and the pages above the current page. For example, on an ecommerce website they might list home page, category page, sub category page and then display the current page name for confirmation.

You might have other ideas for navigation best practices in website design – if so then please do leave a comment.

                          

Frequently when I am building a website after the customer has looked at a few revisions, the topic of conversation drifts to the fonts that should be used on the website. This is the time that the fun really starts to begin! Usually the customer has been browsing around Word on their machine and playing with a few fonts there. So the question is put, “Can we have ultra curly school boy graffiti font for all of the headings and…”.

Stop right there! Go no further. The problem is that whilst this font might look stunning on your website, what will it look like when your customers visit your website? And here is the problem and it is preceded with a technical explanation.

When you open a website the style sheets dictate what fonts, or font families, should be used within the various areas of the webpage that you are opening. But all that this code does is to refer the browser to the list of font that you already have installed on your machine. So if you have installed ultra curly school boy graffiti on your machine then you will be able to see that font when you open the page. But, if this ultra fancy font is not installed on your machine, then the default will be used.

So to be safe, when planning what fonts to use on the various elements of the page it is safest to stick to just those fonts that are installed on the majority of machines and will appear roughly the same. Here we are looking at not only the different versions of Windows machines, but also Macs.

This means that the list of fonts that are compatible with the majority of users is very limited. There are plenty of sites that list most of them and allow you to see what they will appear as, but the choice is very limited.

Which is why we then get to a list of standard fonts that we see in use on sites time and time again. Arial, Times New Roman, Verdana, Garamond and so on.

Sadly, this list does mean that the fonts we get to play with are not that exciting, but if you want to be displaying the page as text, then that is the rule that we have to abide by. But, there are alternatives. For example, if you are designing banners, logos and other elements of the page then these can be created as images on your computer and this gives you the freedom to experience any font that you can find on the internet. The downside – well images are not accessible to search engines and accessible readers, so the content of the page cannot really depend on such techniques.

You could use graphics for headers and supply an alt attribute for search engines and those unable to read the graphics if you are desperate to use a fancy font. But, aside from this cheat, the best fonts to use when you are creating a website are those boring and frequently used fonts listed above.

                          

But, times move on and so do screens. I have been analysing traffic over 6 different websites of my own over a short period this month. These include technical, travel, sport and home interest sites, giving a spread of interests. The totals are:

Note: All ‘other’ sizes were larger than 1024 X 768.

So, what do I make of this? Well the old, reliable, 800 X 600 screen size is dieing off. Down in 13th place in my chart, with less than 1.5% of visitors to these sites using that resolution. The next smallest size I saw was 1024 X 768, most popular overall and in all but one of the sites, the most popular per site, averaging almost 1 in 4 visitors.

Bye, bye 800 X 600
I think that as the year progresses, we are going to see that stats falling for the 800 X 600 screen size. It is obviously no longer popular and as people move to laptops and netbooks with built in screens, those sizes are becoming more the norm.

1024 X 768 rolls onwards
But, the traditional 1024 X 768 still rules the waves! One site did see it in second place, just, and that was the sport site. And this does give a major clue as to where the bigger screen sizes are being rolled out.

The more business orientated sites are showing as many visitors using a 1024 X 768 screen as 1280 X 800 and 1280 X 1024 put together. But, the interest based sites see that gap gone, with almost parity across the three sites. This implies that business is being slow to update to the bigger screen that home users are enjoying. At home, you are likely to have a 1280 screen.

Affecting our design decisions
So, how does this information affect the way that we should be designing websites? Well, I think it is near enough safe to say that when we design a page, we no longer need to stick to 800 pixels wide. We can now safely fill the 1024 screen width and allow for a padding of up to almost 900 pixels on the width!

As for depth, almost 3.5% of visitors were using only 600 pixel deep screens. If something cannot scroll (popup windows etc) then I would think that this is enough visitors to make you stick to that size. But, then the rest can see 768 pixels, so if we design on a 1024 X 768 screen we see the majority.

The future is the exception
However, there is one major exception that I have intentionally overlooked in all of these. One slight little white lie in the table above. On one website, hidden in the top 20 screen resolutions, was a small screen size of a mobile device. So our desktop computers might be getting bigger screens, but what about our mobile computing!

Food for thought.

                          

But then two sites came along at the same time each with several different contact forms, some quite lengthy. It was obviously going to take a few hours to code them all up, so that became a few hours that could be better spent developing a quick and easy solution to roll out to any website almost instantly.

And that is what I achieved. Now, it takes seconds to do the form to email processing! I just copy in a standard send.php page, change the destination email and the job is done!

I’ve been sharing this with a few customers who maintain their own sites, so I thought why not share it further? So I am documenting it here for all to use.

It is not that clever and not that long. The only requirement, apart from needing some version of PHP, is that the form is submitted with the method=”POST”. Then it does everything else the same. Just give the fields names that are meaningful and this little script will do the rest.

Just cut and paste the code below into the top of a PHP thank you page, change the $site_email to your own email and it should work! Simple as that.