ANOTHER REDESIGN??

I’ve decided a new design of my website is in order. The current way that my website works and adjusts for displays is hard to manage and not future proof. After a lot of reading about responsive design over the past few months, and putting it to the test recently, I’ve decided that it wouldn’t be right not to implement it.

Currently, my website uses PHP to detect whether a mobile device is accessing my website, such as an iPhone, and changes the to a new controller that includes the files for the mobile site. This gave me the ability to implement unique features for mobile devices, such as the swipe slideshow, but was difficult to manage as I needed to update a number of files to add new features and text.

For those that don’t know, a responsive design detects the screen size with CSS media queries and lets you write CSS specifically for these screen sizes. For example two paragraphs can be side by side when on a desktop screen, but can be placed on a single column for easier reading on a mobile screen.

This article by Web Designer Wall explains the Responsive Design idea much more, and gives more examples:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

So, my new design will be responsive. What else?

I’ve decided that now, instead of the current tabbed interface, I will display all sections on the page, with smaller sections being side by side and larger sections taking up the entire width of the browser. After some recent success with WordPress, I’ve decided to implement it fully into my website instead of on an external WordPress domain. On a personal level, I will also extend my custom CMS further to be able to change more data on my website without going back to code, and extend it further to be able to create, edit and delete sections for the homepage. The website will also finally implement HTML5 tags, such as article and header.

What I haven’t nailed yet is what colours to have. Initially I was going for a white and grey colour scheme, but have found myself going back to dark colours again. This is something I will continue to experiment with, and may even add the ability to change the colour scheme from the page itself.

My work so far can be found at http://josephshambrook.com/previews/anotherdesign

Any feedback would be hugely appreciated!

Identify iPhone/Android devices with PHP

As I want to start being open about the methods I take on my site with coding, I have decided to post a small blog on how to identify whether an iPhone, iPad, Android device or Honeycomb device is currently being used through a simple line of PHP.

The method I have uses the $_SERVER superglobal, and accesses the HTTP_USER_AGENT to view the browser type and OS that is viewing the site. With a strrpos, I then ask the superglobal whether a particular part of the string exists, such as ‘iPhone’. If it does, then the if statement is activated.

What would be a very good idea is to access your site on the browser of your choice with the following code added:

echo $_SERVER['HTTP_USER_AGENT'];

Now you can see for yourself the information that you’ll be accessing.

So now let’s put this into action. Let’s say I want to find if an iPhone is being used and just echo something if it is. The code would look like this:

if(strrpos($_SERVER['HTTP_USER_AGENT'], 'iPhone' ))
{
	echo 'Hi I\'m an iPhone!';
}

That simple line of code can work for anything that you enter into the string area where ‘iPhone’ is, so you can enter ‘Chrome’ and it will only activate for Google Chrome users. It might also be interesting to note that iPod Touch devices out there carry ‘iPhone’ in the string as well, so they would be included in this line of code too.

To get the code to work for Android users, you have to consider some aspects. First of all, if you were to type ‘Android’ in the string area, then you would access every single Android device, including the tablets. But what if you’re making a site where the user will automatically be directed to your alternative mobile site, which wouldn’t be suitable for tablets? Well, at the time of this writing, Honeycomb is the only version of Android that is exclusive for tablets, so in order to avoid Honeycomb tablets, incorporate this code:

if(strrpos($_SERVER['HTTP_USER_AGENT'], 'Android')
&& !strrpos($_SERVER['HTTP_USER_AGENT'], 'HONEYCOMB'))
{
	echo 'I\'m an Android device But NOT a Honeycomb tablet.';
}

That line of code detects whether the device is an Android, but then doesn’t include any devices using the Honeycomb OS. However, if you do want to include Honeycomb, just use the Android string, and that will include every single Android device out there.

Hopefully this blog has helped you and will set you on your way towards developing for mobile browsers. I don’t doubt there may be different or even better ways to do this, but this method is tried and tested on my website and works really well.