To deliver the best possible browsing experience this website uses three types of cookies:

  1. Cookies necessary to the running of the website.

(Your choice will be saved in a cookie)

Blog

Setting up a BlackBerry for use in mobile web design testing

Posted on by Di

My BlackBerry is the device that has caused me the most difficulty when setting up my little mobile testing suite. Here are a couple of the most annoying things that I’ve been able to do something about. Please note that I’ve tested these things on a BlackBerry Curve 8520, use on your device at your own risk.

Charge via USB

I’ve had problems with my BlackBerry not charging over USB, it seems that if a USB hub can’t identify what it’s supplying power to it knocks the power down to a minimum. The BlackBerry then refuses to trickle charge, giving the dreaded “The charging source connected to your BlackBerry device cannot charge your battery” error message. To fix this you can unlock the engineer screen and manually set the charge rate, you will need to generate a code to give you access. Fire up a web browser on your computer and load the E-Screen Keygen page. You will need to fill in the device pin, app version and uptime from your BlackBerry’s Help Me! screen.

To access the Help Me! screen, press the Alt + Shift + H keys.

Key combination to access Help Me! screen

You should then see something like this:

Information needed to unlock the Engineer screen

You will need the App Version (including the bit in brackets), PIN and Uptime. Input this information into the BB Escreen Keygen form and click Generate. This will give you a key, you need to type this key into the Help Me! screen. Nothing wil be displayed on the screen whilst you do this but assuming you typed everything correctly you should see the engineer screen. You can get into the engineer screen by using the Help Me! key combination.

You need to go to OS Engineering Screens > Battery > Battery Charging Screen.

Main engineering screen

OS Engineering Screens

Battery

Click on Charge Rate and select Force USB 500.

Battery Charging Screen

This will now allow the phone to charge via USB. The only drawback to changing this setting is that the little battery icon in the top left of the screen will no longer update, this is because the phone thinks it’s peramently charging. To check the battery level in future you will need to use the Help Me! key combination and look in Battery Monitoring Screen.

Battery Charging Screen

Keeping the backlight on

The maximum time the BlackBerry screen can be left on for is two minutes. This is fairly annoying when you’re trying to test a site and the device keeps switching off. Luckily there’s an app called BBLight that will allow you to keep the screen on if the device is charging. The only problem with using this app is one we’ve created for ourselves by changing the charging rate, you’ll need to remember to switch the phone off when you arent using it. Luckily, BlackBerry’s start up and shut down fairly quickly.

These two tweaks make testing on a BlackBerry a lot easier for me. Hopefully others will find them useful too.

Posted in Web Design / Dev | Tagged | Leave a comment

A Git client with editing for the iPad and iPhone

Posted on by Di

GitMongo

Having made the move from Subversion to Git I looked again for any apps that would let me work with my repos from an iPad. I found GitMongo on the AppStore. Whilst it is by no means a full featured Git client it certainly supports more than the various iPad Git reader apps currently available. It has the basics covered; clone, commit, a syntax highlighting text editor, etc, so I’m able to tinker with bits of code on the go.

I won’t repeat the instructions here but if you have a jailbroken iPad you can put a symbolic link to GitMongo’s Documents folder in Textastic’s if you want to use its preview or your custom themes and bundles.

Posted in Web Design / Dev | Tagged , , | Leave a comment

Mobile device testing, covering the basics

Posted on by Di

If you’re serious about building responsive sites then you need to start building up a device lab. Sure, you can go and visit one of the community-driven ones, there don’t seem to be many about though, so depending on your location this may not be terribly feasible.

It might seem like a waste of time and money gathering up some widely used devices but I’d bet that you wouldn’t bat an eyelid at testing your latest design on IE. These days IE is fairly predictable, but you can’t say the same about mobile browsers.

You should aim to cover as much ground with as few devices as possible. At the very least you need to cover iOS and Android. I’ll go out on a limb and guess that you’ll probably have a phone running on one of these platforms. If so, congratulations you’ve made a start.

iOS

I’ll start with iOS only because it’s much more straightforward than Android. Ideally you need something that runs the latest iOS (currently iOS 6). The 3GS will do this, you’ll miss out on new features but for web dev testing this shouldn’t matter. If you want something with a retina screen you’ll need to move up to an iPhone 4.

If you want to test an older version of iOS then consider an original iPhone or first generation iPod Touch. As well as running iOS 3, an original iPhone runs like treacle, so it’ll be a good speed test for those JavaScripts.

Android

Android covers a wide gamut. If you want to test Chrome you will need a phone running Android 4 as a minimum. There are differences in how Android 2.1, 2.2 and 2.3 display pages so ideally testing all three would be something to aim for. Various Android phone manufacturers add their own tweaks, so gathering a variety of phones including a Samsung and an HTC (two of the most popular manufacturers) would be smart.

A cheaper way of running Android 4 is to buy a phone that isn’t officially upgradable to version 4, such as a Samsung Galaxy S. You can then install CyanogenMod 10 on it, which is Android 4 in every way but name. This will then allow you to run Chrome. You should also consider getting something to test Android 2.3, as it was the most popular of the older Android versions.

The Android SDK includes an emulator, using this you can supplement your actual devices with emulated ones. I use this to test Android 3 (Honeycomb) and 2.1 (Gingerbread). The only drawback with the SDK is you can’t access the Play Store and download aftermarket browsers.

BlackBerry

There are two distinct groups of BlackBerry from a web design standpoint; pre OS 5 and post OS 5. OS 6 and up uses a Webkit browser, which brings it more into line with other smartphones. Ideally you’d get one of each OS but I know this isn’t realistic so maybe aim for an OS 5 and 6 device each. The Blackberry Curve 8520 and 8900 both run OS 5, neither are touchscreen devices so you’d be covering an extra bit of variation, and the BlackBerry Curve 9300 and BlackBerry Curve 9360 run OS6 and 7 respectively.

BlackBerry also provide Windows only BlackBerry Smartphone Simulators so you can fill in the blanks much like with Android. These can be installed on Parallels if you’re run on OSX. To run the OS 5 simulator you need to install the BlackBerry email and MDS services simulator and JDK if you don’t already have it. Helpfully, BlackBerry don’t mention this.

Windows Phone

The last smartphone variant is Windows Phone. Version 7 included IE Mobile 7, which is actually a mix of the IE7 and 8 rendering engines. Windows Phone 7.5 updated the browser to IE Mobile 9, so it’s a lot more modern. Ideally then, you should consider getting a version 7 device, something like an HTC 7 Mozart, along with one that runs 7.5 or higher. The Nokia Lumia 610 comes preinstalled with Windows Phone 7.5, whilst the HTC Windows Phone 8S is a newer Windows Phone 8 device.

Microsoft supply a Windows Mobile 7 emulator. I found it incredibly slow to the point of being unusable, this might be because I attempted to run it on Parallels, your milage may vary. To run it you will first need to install Microsoft’s Webmatrix, once done simply follow Microsoft’s instructions to install the emulator.

Feature phones

Finally, you should consider testing on something that isn’t a smartphone. Try to find one that has wifi to minimise faffing with extra data plans. The Nokia N95 is a reasonable Series 60 phone, although it is quite high end. Probably a good rule of thumb for choosing a feature phone is; the crapper, the better. Finding a crappy feature phone with wifi is something of a challenge however.

This sounds expensive

It isn’t cheap, but you can reduce the cost a bit by keeping an eye on eBay. Look for phones that have some cosmetic wear or damage. As long as the phone’s wifi, screen, and ability to load software isn’t compromised it’s worthwhile to put in a bid. My Samsung Galaxy S has a buzzing microphone, my HTC Wildfire has a small crack on the corner of its screen, and my BlackBerry has a broken camera. None of these things affect their ability to load websites, and they were all cheaper because of these faults.

This blog post covers the most likely basics, a starting point. To gain more insight into what devices to test on you should look to your website’s existing webstats, and maybe the geographic location of your audience. Don’t just assume your audience are all using iPhone and Android devices.

Posted in Web Design / Dev | Tagged | Leave a comment

Using Subversion with Textastic on an iPad

Posted on by Di

This blog post assumes you have a jailbroken iPad and that you have installed OpenSSH and changed the root password. Also, it goes without saying that you must have Textastic.

First you need to go to Cydia, find and install the Subversion package (at the time of writing it’s version 1.4.6).

Since there are no GUI based Subversion clients you’ll be using the command line. To make that easier consider adding some aliases to your ~/.bashrc file. To load these aliases on every terminal login you then need to add source ~/.bashrc to your ~/.profile file.

This is my .bashrc file:

# SVN
alias sci='svn ci -m'
alias sup='svn up'
alias ss='svn status'
alias sco='svn co'
alias sad='svn add'

So now you’ve got Subversion installed and a few finger-saving aliases setup. Next you need to find the Textastic Documents folder. The easiest way to do this is to use the Cydia iFile app.

Open iFile and go to settings and enable "Application Names". This will show you the app names rather than the unhelpful default folder names. iFile should start up listing the correct Applications folder, if it doesn’t you need to be looking in /var/mobile/Applications. Scroll down until you find the Textastic folder. Go into Textastic > Documents, you should find your existing Textastic files there. Across the top of the screen you should see a breadcumb trail that looks something like this: /var/mobile/Applications/AB12C345-67DE-8F9G-0H12-JK3456MN7890. Now you have two options…

Option one: If you just want to access the files checked out with SVN in Textastic then simply add an alias into your .bashrc file to allow a quick cd into Textastic’s Document folder. Something like this:

alias textsub='cd /var/mobile/Applications/AB12C345-67DE-8F9G-0H12-JK3456MN7890'

Option two: If you have installed the Cydia ios-lighttpd-php-mysql package then the better option is to setup a symbolic link in the Textastic Documents folder to the web server root—/var/www. To do this make a note of the breadcrumb trail in the top of the iFile screen. Then switch to your terminal app (Prompt, iSSH, MobileTerminal, etc) and cd to your Textastic Documents folder. Once there type the following:

ln -s /var/www www

Any file you check out with Subversion, whether directly into the Textastic Documents folder or into /var/www will now be visible in Textastic, but not yet editable. This is because apps are run as the mobile user and you will be checking out files as the root user. Any file or folder you checkout should have it’s owner swapped to mobile, like so:

chown -R mobile myCheckedOutFolder

The -R stands for recurrsive.

You could of course swap Subversion for Git as there is a package in Cydia.

Posted in Web Design / Dev | Tagged , , | Comments Off

Death of the high street?

Posted on by Di

One afternoon my mum and I were sat nattering over current events; “Looks like we might have snow”, “Shame about HMV”, etc.

Mum then proceeded to tell me all about my grandparents. They lived out in the country, the nearest small town was six miles away. Apparently they never visited shops. The grocer would drive around his route one day, collecting people’s shopping lists, and come around the following day with people’s orders. Same for the fishmonger, butcher and the milkman.

Maybe online shopping isn’t actually that revolutionary, merely a modern twist on how some people were buying and selling in times past. It’s the shopping centre that’s the oddity.

Posted in Real Life | Comments Off

Small does not have to mean cheap

Posted on by Di

I’ve read a number of comments in the past few days about a certain smaller, fruity tablet. A lot of them along the lines of “it’s aimed at people who can’t afford a real iPad”. I saw similar views expressed when I was researching swapping over to an 11 inch MacBook Air a couple of months ago.

These comments got me thinking; why is there a tendency to equate small with crap, cheap, or underpowered? How many times have you heard someone say “a cheap, small car” for example, like it’s some kind of throwaway object? I, and others like me, place a lot of value in size and weight considerations of the things we have to schlep around.

To all the manufacturers of electronic gizmos (and cars) I ask this; please stop thinking smaller has to mean cheaper.

Posted in Tech | Comments Off

TGIF #3

Posted on by Di

Convert a web page to an ePub

This is a really handy bookmarklet, it allows you to save a web page for reading on an ebook reader. Unless it’s a Kindle that is.

Backup your Google Mail

I route my email through Google’s email service, it means I can access it anywhere with a minimum of fuss. I do like to backup my email though so this script is unvaluable. It can do incrememtal backups via the command line so you can script it. It’s a lot less fuss than running a separate email client too.

Switch off iOS 6 ad-tracking

Just a heads up to this setting, seems it’s a bit buried. Can’t think why anyone would want that.

Posted in Tech | Tagged , , | Comments Off

TGIF #2

Posted on by Di

WhatsApp is broken, really broken

I use Whatsapp, mostly for chattering with mum about whatever live sports we’re both watching at the time. The useful feature of Whatsapp is that as a non-techie she doesn’t have to get to grips with logging into a service, it works much like the SMS she’s already used to. Seems like nothing that’s convenient is ever actually good for us.

OSX and it’s hidden Time Machine backups

Wondering where your drive space is disappearing to? This is a particularly annoying feature if you’ve got an SSD, these backups can suck up huge amounts of space.

Don’t upgrade to iPhone IOS6 if you want to keep your maps

The minute Apple announced they were building their own mapping appication for iDevices I knew it wasn’t gonna be pretty. Apple don’t do cloudy services particularly well. There’s some great examples of Apple Maps cockups here. All pointing and sniggering aside this is a massive fail on behalf of their paying customers. Build a new map service but make it available in addition to Google Maps, this is just embarrassing.

An Apple spokesperson uttered:

“Maps is a cloud-based solution and the more people use it, the better it will get.”

Hmm, ok. A map service needs to be reliable to be any good. I’ll update a point on Open Street Map, because it’s an open, community driven resource usable by all. Apple is the richest company on the planet, they can afford to pony up some cash to pay their way, I pay them enough for their products, I’m not gonna subsidise their mapping efforts, especially when it’s hidden from every device that doesns’t start with the letter i.

Posted in Tech | Tagged , , , , | Comments Off

TGIF #1

Posted on by Di

I’ve realised that throughout the week I see lots of little bits of (possibly) useful information. There’s usually not enough to ham up into a blog post and tweeting means they’ll get lost in the maelstrom. I’ve decided to write a short, weekly post covering these titbits. This is the first one so it’s pretty short as I only decided to start this today.

Design Is A Job

Having recently jumped into the startlingly cold sea that is working for myself I’ve been hoovering up books about freelancing. I’m halfway through this one, it’s really quite good. It had me hooked when I read this in the introduction:

“… I am tired of you sitting by and hoping the work sells itself.
So I wrote you a book. It has a spine and by the time you’re done reading so will you.

Enabling Mountain Lion’s keyboard shortcuts

As my clean install of Mountain Lion had the CTRL+number shortcuts switched off by default I’m going to assume this is therefore the same for everyone. Here’s a guide to switching them back on. Unfortunately this doesn’t help to reduce the productivity-killing long-winded animation that you see every single time you switch.

eBook readers that aren’t Kindles

On the same day that Amazon introduced their new Kindles another, smaller company did the same. Kobo are now selling a rather pocketable five inch screen device, with Sony having discontinuing their mini reader this is good news. I love my old Sony 350, it barely weighs anything so it gets toted along almost everywhere I go (guess what I’m reading Design Is A Job on?)

If you’re interested in Amazon’s new Paperwhite and you live in the UK then tough, it’s US only. Enter Kobo’s Glo, a front-lit device with pretty much the same specs as the Kindle, with an added advantage that you’re not stuck in Amazon’s walled garden. Both devices are listed on the WHSmith website as available from October 1st.

Posted in Tech | Tagged , , | Comments Off

Use the Nitro JavaScript engine in apps other than Safari on your jailbroken iPhone

Posted on by Di

Whilst there are loads of alternative browsers available for iPhones/iPads they all suffer one drawback; no access to Apple’s Nitro JavaScript engine. A couple of days ago I found an app called Nitrous in the Cydia store that allows any app using UIWebView (basically anything that will display a web page) to use Nitro. I’ve run some tests, you can see the results below:

Safari

============================================
RESULTS (means and 95% confidence intervals)
--------------------------------------------
Total:                 2244.1ms +/- 0.5%
--------------------------------------------

Atomic Web, without and with Nitrous enabled

TEST                   COMPARISON            FROM                 TO
=============================================================================
** TOTAL **:           3.72x as fast     9360.2ms +/- 0.4%   2515.6ms +/- 1.7%
=============================================================================

 
Nitrous gives a significant speed boost to Atomic Web. Here’s a final comparison between Nitrous enabled Atomic Web and Safari:

Safari and Atomic Web with Nitrous

TEST                   COMPARISON            FROM                 TO
=============================================================================
** TOTAL **:           1.121x as fast    2515.6ms +/- 1.7%   2244.1ms +/- 0.5%
=============================================================================

 
Whilst Nitrous doesn’t quite boost the speed up to Safari’s level it is a significant increase. Of course, it would be better if Apple stopped trying to cripple their platform and allow app developers to use the Nitro engine. In the meantime I’ll be keeping Nitrous running on both my iPhone and iPad.

Posted in Tech | Comments Off