I love the homescreen on Android. I’m constantly updating it, changing what icons and widgets I have on which screen and experimenting with different launchers (although I’ve not been tempted away from the default so far as I’m on an unmodified version of Android 2.3.4).

The other day I came to add martindownton.eu as a shortcut (for when I get around to playing with CSS media queries) and was presented with my favicon, which I was expecting, but placed inside a rosette, which I wasn’t.

Thinking about this it is quite an elegant solution to an awkward problem as generally a favicon can be as small as 16 x 16 px. Stretching this up to 72 x 72 px, or 4.5 times the size, would look terrible.

So how do you get a larger icon?

How to get a larger icon

To get a larger icon there is a tag that can be added to the head of your site. I cringed a bit when I saw the syntax as the link tag needed requires a rel attribute with a value of “apple-touch-icon”. Looking further into this there is no standard for bookmark icons and Apples solution was already in place when Android came to the table so it made sense for them to implement this technique.

Here is the syntax for adding the icon:

As you can see there are three different link tags here. These are to cover iOS as the icon size changed between iOS3 and iOS4 and there is also a larger icon size for the iPad. You will of course have to resize your icon three times to match each of these specifications, the three sizes being 57px, 72px and 114px squared.

So looking at the screenshot, I initially created the bookmark without these tags added which produced the icon on the left, and now with the tags in place we get a full icon as desired. I’m not sure what result you get on iOS as I have no means of testing it. Tweet me if you know!

#postaweek2011 9/52

So I’ve had my Android phone for nearly a month now and it’s actually changed the way I do a lot of things. I use my computer and laptop so little now it’s unbelievable and I’m just amazed at what I can do with my phone.

1. BBC iPlayer
2. ConnectBot
3. Dropbox
4. Endomondo
5. F1.com Live Timing
6. KeePass
7. RemoteDroid
8. Skifta
9. SMS Backup
10. Twitter

BBC iPlayer

I was watching the news with breakfast the other day and Bill Turdbill was doing my head in, so I opened the iPlayer app and watched Russel Howard’s Good News instead. It’s more of a boredom filler than a new way of watching TV but being able to stream BBC channels to your phone could be very convenient, especially if I were missing the F1!

Android Market Link

ConnectBot

A simple SSH client, made extremely useful by the ‘screen -x yoursessionname‘ command; I can set a script running on a shared screen session and receive any messages or errors on my phone! Of course a touchscreen doesn’t really lend itself to typing terminal commands but it would do in emergencies.

Android Market Link

Dropbox

My biggest reserve about this was bandwidth usage but the app simply presents your Dropbox’s folder structure and allows you to download files as you need them. This app helps bridge the gap to a netbook for me as anything I feel necessary to keep synced across computers is available on my phone.

Android Market Link

Endomondo

I love this app! It is by far the best workout tracking app in terms of its fundamental purpose and its extras such as social integration, music scroblling (which appears on your mapped route) and the awesome pep talk feature which transcodes written messages to your friends who are currently on a workout.

Android Market Link

F1 live timing app

Come race weekend I used to set up my laptop with the live timings on screen and have the second race feed on my computer. I’ve cut out the laptop and substituted it with the official F1 app on my phone, which gives a lot more information than the web based Java feed. I quite often check the split times only to have Mr Brundle or Mr Coulthard repeat them a few seconds later, and watching qualifying is very exciting as you can see drivers “go purple” as they set their fastest laptimes. Obviously this is only for F1 fans but if you are it’s a must have app for race day!

Android Market Link

KeePass

Just before I got my phone I went through and changed all of my passwords to make them safer. Or in other words more difficult to type on a smartphone! With KeePass you simply get to a login screen, open the app, find the entry for the website you want and it will give you two notifications, one with the username and one with the password. You then just switch back to the app or webpage in question and paste them both in. Simple. And to make it even better I store my password database in my Dropbox so it’s always up to date!

Android Market Link

RemoteDroid

This one’s pretty cool. You install a Java app on your computer (Windows, OSX, Linux, anythingthatrunsjava) and you can use your phone as a mouse and keyboard! It’s fantastic if your PC is hooked up to your television as you can use it as a remote control. An honorable mention goes to TeamViewer which will let you see the computer you’re controlling but we use it at work so for that reason alone it doesn’t make the list!

Android Market Link

Skifta

This is almost as cool as RemoteDroid. Would be cooler if it didn’t have a few issues (it’s currently in Beta) but here’s the gist of it. You choose your media source, which can be your phone, your PC or any DLNA device such as a NAS drive, you choose your play destination, which can be your phone, PC or any other DLNA device and then you browse for media and enjoy! It’s most effective/stable when you’re not streaming over WiFi so for my purposes, which is controlling my PC from outside, it works perfectly.

Android Market Link

SMS Backup

This is a nice little “install and forget about it” app. Basically, when you send a txt msg it places it in your gmail account with a label of your choosing so you can look through your txts, both sent and received, on your computer.

Android Market Link

Twitter

I’m just using the built in Twitter app but it does what it says on the tin. The one mild annoyance that may see me switch to TweetDeck is that the notification sounds conflict with the built in music app.

Android Market Link

Also worth mentioning are some of the built in apps. The navigation is brilliant, although it does use your 3G connection for maps so you may want to go for something like Co-Pilot if you’re going abroad. My only complaint with the built in music app is that it doesn’t support FLAC but I’m not a total audiophile so 320 MP3s are fine by me. It also works great with the Last FM app for scrobbling. The messaging and calling apps are fine, although not exactly innovative, and the GMail app is great because you can have multiple accounts so I can check my @martindownton.eu mail on it too!

I’ve left out the Kindle app because… well I’m not really sure why, but I personally have no problem with reading books on my phone, despite having reservations before trying it.

The only app I would love that isn’t on Android is Microsoft’s Photosynth. The odd thing is that it isn’t on WP7, it’s on iOS! I haven’t come across a good photo stitching app for Android yet so if anyone knows of one, share you secret!

I think I’ve rambled on enough now. Android is great!

#postaweek2011 8/52

Should I Start Using Magento?

Just a quick post summarising a few thoughts that I have had and read from around the internet on approaching Magento for the first time. There are basically a few questions that you need to ask before diving in at the deep end:

1. Have you got the time to invest in learning Magento?
2. Will you be using Magento on more than one project?
3. Do your client’s requirements warrant the use of a full e-commerce platform?
4. (bonus point) Do you have Linux hosting? Because it runs like a fat chav on a hot day on Windows.

Point one is basically saying that, looking at it from a commercial point of view, you are going to make a loss on your first project because of the time you will need to invest in getting to know the system. Skinning a basic theme, or even making changes to an existing template, will take a lot longer than you think it will or should do, and any custom backend development will require getting you head around the over-complex MVC structure, although Alan Storm‘s brilliant tutorials will help massively with this.

Point two is making the point that it may only be worthwhile investing the time in learning Magento if you are going to be using it on multiple projects. If your employer is unsure about allowing you the time to research and learn the platform then it may help to consider the long term gains; if you look at Magento compared to another platform such as WordPress, from experience a basic, barebones Magento site can be developed for around four times the price of a basic, barebones WordPress site. An e-commerce platform is worth a lot more to a client than a simple information site as it will be generating them a tangible income, and any extra features can be justified with projected ROI.

Point three is basically encouraging you to consider other options and make your decision based on circumstance. If your client has a website and wants to start selling a few items then Magento is going to be overkill. Also the same argument of investment of time can be made from the client’s perspective as it is quite a difficult system for them to master and there are a lot of features that they simply won’t use. I know that other developers have had a lot of success with WP E-Commerce which is built on top of a very stable platform and provides a nice, lightweight option.

Point four, did you really expect anything else?!

I love Magento and if you are considering getting to know it I would strongly encourage you do so. I’m 8 months down the line and still learn so much on every project I do with it. I’m still yet to do any large scale backend development but am trying out a few small extensions in my spare time. I was lucky enough to move to a company that were already using Magento, but know from experience that it’s difficult to get the first project in it off the line (my first efforts in skinning Magento were undone by the decision to switch to a Joomla based shopping cart because no-one could get their heads around the MVC structure quickly enough).

If you are starting out then the Designer’s Guide has a comprehensive/fundamental guide to templating, there is a simple/beginner’s, step by step, multi-part guide to creating a theme from scratch on Smashing Magazine but I can’t find it because their navigation and search suck balls, Inchoo are a fantastic bunch of Magento developers from beautiful, sunny Croatia with a lot of useful development tips and the previously mentioned Alan Storm is very good for more advanced stuff.

#postaweek2011 7/52

Good news everyone!

Microsoft’s web browser Internet Explorer 9 was released in the early hours of this morning, to much excitement … no that’s not the word … anyway, it’s been released and there’s nothing we can do about it. In many ways it is a good thing as the browser standards are far better than its predecessor IE8, and the version before that, and especially the version before that, however it would be naive of anyone not to expect any problems with a new release of Internet Explorer. I was horrified when viewing TwentyTen in the Beta of IE9 as it didn’t render correctly – yes the default theme of the most widely used website platform on the web – however this was fixed by the beta stage.

It’s Not Only You who is Annoyed

We can complain about IE until the cows come home, but there are two things that can make the whole transition a lot easier:

1. Pre-empt your clients’ complaints
   A sensible thing to do is to warn your clients of the possible rendering issues with a new browser release, as it is better they hear it from you with your justifications for paying for any changes rather than them come to you with a problem that they blame you for, however unjustified that is.
2. Use a quick fix
   Like everything in web development/life there is a right way and a quick way of doing things. If you’re very bored/short of work/insane then you could spend a good half a day per client fixing any rendering issues by making markup changes, however if the site in question renders in IE8 (or 7 I suppose) there is a quick fix that will force Internet Explorer into version 8′s rendering engine:

<meta http-equiv="X-UA-Compatible" content="IE=8">

Place this meta-tag in your site’s head and Hey Presto your site will render as if IE 9 had never been released!

I’m not aware of any such fix for Firefox but I’ve been using the Beta of the soon to be released Firefox 4 for several months and haven’t noticed any rendering issues, or seen them reported by any other developers. A good general policy with browsers is to specify in your terms and conditions what browsers the website you are producing will work in, as assumptions will be made by the client that it will work in any browser, be it one that hasn’t been released or one that just won’t die.

#postaweek2011 6/52

OK, so I haven’t kept to my commitment of blogging once a week in the year of 2011. There are still many weeks left for me to make it up to 52 posts this year, but with it being the 15th of March today and me having only posted 5 times I don’t think it’s going to be as straight forward as there being a post published every seven days. I have lots I want to talk about but getting round to it, as we all know, is easier said than done. There’s a post to follow after this one (I won’t be tagging this with #postaweek) and I’ll hopefully publish another one by the end of the week.

Not worried about the security problem with Magento 1.5.0.0? Go to your-magento-store.tld/get.php/app/etc/local.xml

You’ll soon change your mind.

#postaweek2011 5/52

Nowadays, if you have a blog, company website or e-commerce store it is more than likely that you have a Twitter account to go along with it. Having a twitter account associated with your website is great as it means you can share little pieces of information too short to warrant a full news story or blog post and it keeps your brand at the front of people’s mind, especially if they check their Twitter account as often as I do! A great way to get other people spreading your message is to provide visitors of your site a way of passing on your message. There are two main ways of doing this (Twitter has a habit of offering more than one way of doing things), both of which use query strings.

Query Strings

When you access a file on a webserver through your browser you can also pass it extra information using GET and POST information. If you see a URL with a question mark (?) in it, the part after this is called the query string and it will consist of either one or several name/value pairs. The name and value are separated by an equals (=) symbol and each pair are seperated by an ampersand (&). So for example,” ?username=octavious&password=aSecr3t” would pass a username and password to the page (although for obvious reasons sensitive information is never passed in this way).

One thing to note is that anything content put into a URL should be URL encoded.

Status=

The simplest way to get a user to tell people about your site through twitter is to use “?status=brand X is the business”. This will put “brand X is the business” into the user’s tweet box ready for them to edit and pass on to their followers. I use this on my contact page and in my menu.

Share Box

Twitter also provides a share box which offers some more advanced features.The link to this is http://twitter.com/share and you can provide it with three values, “text”, “url” and “via”. Text will be a message usually describing the content. If you were auto-generating this link on every page you would most likely put the title of the post here. URL is a link back to your website or article. It’s really good to use this as a link as it will be shortened using Twitter’s T.CO shortening service. And finally via is where you would put your twitter account in order to indicate that the content has been published by you.

Here’s an example of a share link:

http://twitter.com/share?url=http://martindownton.eu&via=martindownton&text=My%20new%20website!

#postaweek2011 4/52

Absolute URLs

It’s a common problem, made more difficult if you choose to develop locally. But, whether we like it or not, WordPress depends on abolute URLs to generate links to different pages around your site, to resources such as Javascript and CSS and to media files included in pages. This is fine if you’re working in one location, but this is rarely the case.

Development environments differ between developers and agencies, but will usually consist of some or all of the following:

1. Local Development Environment
2. Test Environment
3. Staging Environment
4. Live Website

Personally I develop locally, set up a staging area to test the website on the live hosting – using a SymLink to temporarily redirect the user to a holding page or copy of the old website – and then redirect the symlink to the live website. At work we develop straight to a test/staging environment then copy this over to new folder once finished. We also have several sites setup with SVN deployment.

Making Life a Little Easier

The best way around this problem that I have found in other platforms is the Zend Framework’s XML configuration files. They allow you to define a “Production” environment then extend this environment with other settings configurations. One website I have worked on included the production or live environment, a test site environment, a local environment, a development environment set up by a freelancer who had worked on the site and, unfortunately, a developer’s home environment.

A similar setup can be achieved in WordPress by defining configuration variables based on the web address the site is being accessed by. Here is an example of how you might achieve this, making use of PHP’s “$_SERVER['SERVER_NAME']” variable:

$siteFolder = 'martindownton';
if ( $_SERVER['SERVER_NAME'] == 'localhost' ) {
	define('WP_SITEURL', 'http://' . $_SERVER['SERVER_NAME'] . '/' . $siteFolder);
	define('WP_HOME', 'http://' . $_SERVER['SERVER_NAME'] . '/' . $siteFolder);
	define('DB_NAME', 'testdatabase');
	define('DB_USER', 'testusername');
	define('DB_PASSWORD', 'testpassword');
	define('DB_HOST', '12.34.56.78');
} else {
	define('WP_SITEURL', 'http://' . $_SERVER['SERVER_NAME'] . '');
	define('WP_HOME', 'http://' . $_SERVER['SERVER_NAME'] . '');
	define('DB_NAME', 'livedatabase');
	define('DB_USER', 'liveusername');
	define('DB_PASSWORD', 'livepassword');
	define('DB_HOST', 'localhost');
}

This code will add the site folder onto the host, allowing me to work on “http://localhost/martindownton/” but will not add this once the site goes live. It also changes the database credentials, allowing me to work on two different databases.

If you want to work on the same database there is a great plugin called “Search & Replace” that can be used to replace any URLs generated in your database.

An Alternative?

As with all things technical, there are more than ways of achieving the same outcome. Another solution I have used in the past is to take advantage of the “Hosts” file, a file within Windows which redirects URLs to a different IP address. You can set up “martindownton.eu” to point to 127.0.0.1 so that any URLs generated are the same on your test site as on your live site. This has an obvious drawback in that you will have to keep changing it to view each environment, but perhaps it is slightly easier to implement than the previous option.

#postaweek2011 3/52

I am very (very) pleased to announce that I have finally launched my personal website. There’s a big ToDo list left to finish, and I’ve gotten rid of a few of my favourite features (why am I launching this now again?) but I’ve been working on this site on and off for a long time and wanted to get something more than a pre-made WordPress skin online.

The other reason I have launched this site is beacause I am taking part in WordPress’s #postaweek2011 project and would rather any content I write benefit my own domain rather than my .wordpress.com site.

So, hope you like the site, any feedback both negative or positive is welcome.

Martin

I wrote a post on OpenSearch.xml, a way of making your websites search functionality available to people via the quick search box in their browser. It’s available here:

http://martindownton.wordpress.com/2011/01/15/opensearch-xml/

#postaweek2011 2/52