Author Archive

Windows Phone 7 – Pixel Density

A frequent issue I encounter designing mobile experiences for iPhone, Android, and WP7 is that font sizes on the latter device appear considerably smaller – often to the detriment of the design as a whole. Where clients are concerned, it often just “doesn’t look right”.

This is down to the fact that WP7 devices have a higher pixel density (PPI) than the iPhone and a good proportion of Android handsets. If font sizes are set in pixels*, they are going to be affected by this.

iPhone: 3.5″, 320 x 480 = 165 ppi
HTC Trophy: 3.8″, 480 × 800 = 246 ppi

To fix – although a better word would be compensate – this, we can serve an extra stylesheet for WP7 which multiplies our base text sizes by 1.5. This would be a great time to use a conditional statement to supply IE with our new rules. We could also take advantage of the functionality provided by CSS preprocessors (LESS, for example) to do the maths for us automatically.

* And the matter of which unit to set text in is a whole different argument altogether. This would be a good shout for setting text in ems and points, although I suspect that the using the former would see similar results.

How to configure a cron job on OSX

In the midst of trying to create a small Twitter-based website (stay tuned!), I realised it would be advantageous to have a cron job running on my local machine. This process would run every couple of minutes and pull my latest tweets into a database.
To achieve this, open your Terminal, and type crontab -e. If you’ve previously added jobs to your cron file, you will see them listed, otherwise this file will be blank. Hit i to begin editing the file. For my requirements, I wanted to run my file every two minutes: */2 * * * * /usr/bin/curl --silent --compressed http://localhost:8888/get-my-tweets.php Change that number to alter the interval at which the job is run, and feel free to ditch the very first asterisk if you’d prefer the job to run at x minutes past the hour, rather than every x minutes. To stop editing, save and exit the process, hit Esc, ZZ.

Films To Look Forward To In 2012

AKA Films I’m looking forward to in 2012:

  • Prometheus
  • The Dark Knight Rises
  • Skyfall
  • Django Unchained
  • The Great Gatsby

How CSS Padding Affects Form Elements

File this one under “Tips for a Rainy Day”.

As I was styling a pretty simple contact form, I began to wonder why my submit button was significantly shorter than the text inputs above it. All were set to width: 350px, and all had 5px of padding applied. I had also ensured that all borders and browser chrome had been wiped out.

A little peek at the ‘Metrics’ panel within the Webkit Inspector revealed that as I added padding to my button, the width was actually decreasing: something that is not true for text inputs.

So there you have it: an extra 10px width ensured that all form elements were of the same appearance. It’s just a shame that silly behaviours such as these are still prevalent within the field of web design!

Hello world!

Posted on: 2 Comments

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!