Simon Battersby

So, the mobile pages are now live! You can see the live site here. Please bear in mind this is a live site, please don’t enter customer data unless you actually want to buy something!

I’ve put together a summary of the changes made to the theme, plus the files here.

With a bit of help from some friends, I’ve now had the site tested on a couple of real mobile devices, with pretty positive feedback. The exception however was the button styling. The image below shows the button on the main (non-mobile) site, then the button on the mobile site, and finally the button as displayed on an iPod:

My first thought was that somehow, the image from the main site was being superimposed on the coloured background from the mobile site. But it wasn’t anywhere in the css. Very puzzling. I finally twigged that it isn’t the main site background image, it’s the default input button used by Mobile Safari unless explicitly removed. Applying this css got rid of it:

input{-webkit-appearance:none;}

Needless to say, this problem didn’t show up in any emulator I used….

Next step I think will be to launch this and invite comments from users. Should be interesting.

I should have said, if anyone’s reading this and would like to have a look at the test site, it’s currently available at:

m.testshop.simonbattersby.com

Note you won’t be able to checkout at the moment as it’s pointed at the Paypal sandbox. At the moment at least I’m more concerned with the usability of the site anyway. If you do view the site then any and all comments are welcome. If you see a problem, do let me know – it would be helpful to know the model of phone with which you viewed it. Thanks!

Nearly finished this stage now I think. I’ve now worked through all the pages (I think…) and updated them. This morning I realised that although the site works mostly OK without javascript, without it the zones (counties in the UK) are not populated, so it’s impossible to enter an address. Ugh. Resolving this needs the following adding to /catalog/controller/account/create.php, /catalog/controller/account/address.php, /controller/checkout/address.php and /controller/checkout/guest_step_1.php

$this->load->model('localisation/zone');
		
$this->data['zones'] = $this->model_localisation_zone->getZonesByCountryId($this->data['country_id']);

And the following editing in /catalog/view/theme/[your theme]/template/create.tpl, /catalog/view/theme/[your theme]/template/address.tpl, /catalog/view/theme/[your theme]/template/address.tpl and /catalog/view/theme/[your theme]/template/guest_step_2.tpl:

<select name="zone_id">
   <option value="FALSE"><?php echo $text_select; ?></option>
   <?php foreach ($zones as $zone) { ?>
     <?php if ($zone['zone_id'] == $zone_id) { ?>
     <option value="<?php echo $sone['zone_id']; ?>" selected="selected"><?php echo $zone['name']; ?></option>
     <?php } else { ?>
        <option value="<?php echo $zone['zone_id']; ?>"><?php echo $zone['name']; ?></option>
     <?php } ?>
   <?php } ?>          
</select>

(It would be nice if the code used functions a little more for repeated things like the address form.) This then allows selection of zone even with javascript disabled. There’s still a much more minor problem, which is that if the country is changed, with javascript disabled the zone list is not refreshed. This resolves itself when the form is submitted since the zones are then correctly populated by the posted data, but is less than perfect. We get very few orders from outside the UK anyway, so I’m going to park that one for now. The solution, I think, would be to add a button to let the user manually refresh the page, minus the validation, after changing the country.

Anyway, back to the mobile site specifics. I showed it to the client (to whom, coincidentally, I’m married…) yesterday, and she is happy so far. Hoorah! Next step is to test it with some tame users I think.

Concerns I have at the moment: not sure about scrolling the menu on the home page; I wonder whether clicking through from the category page to the product page is too difficult (although in fact most of our sales come direct from the category page not the product page); think the general text might be a bit small. We’ll see.