iPhone

Building a mobile app API using Drupal, Node.js and MongoDB

In February 2012 our team at ConsumerSearch launched the ConsumerSearch Reviews iOS app. This handsome app helps you during your product purchase by providing extensive product reviews, comparisons, pricing information and online and local store product availability. Try it out during your next purchase -- you'll be surprised how much time you'll save in researching the best products.

Searching for products is possible by keyword search or barcode scanner. We are very proud of our first app that has already gone through several updates and has received positive user reviews.

cs-iphone-screen-1cs-iphone-screen-1
cs-iphone-screen-2

Relative font sizes on the iPhone: conversion to absolute sizes

Most designs we get for the mobile websites we create, are psd or illustrator files with width of 320pxs. This reflects the screen size of the iPhone and some other smart phones very well. Add to this the fact that most people are evaluating your mobile site on an iPhone, it is very tempting to use absolute font-sizes that match the sizes from your design.

However, this does not take into account the devices with small screen dimensions, but high resolutions ( = high dpi screens). An example is the Nokia ExpressMusic. Small font-sizes on iPhone tends to become almost unreadable on these high dpi devices.... The inverse can be true too... Big screen width lower solutions will display your font's too big (although this is never really an issue).

That's why there is the general suggestion to use relative font-sizes when developing mobile websites. The device translates relative font-sizes to absolute font-size, taking into account the DPI of the screen and thus optimizes the readability...

To help a themer with getting the right relative sizes, and to suggest developers which sizes they can use when creating mobile web designs with an "iPhone first" mindset, I experimentally made the following conversion table:

xx-small 6px
x-small 10px
small 13px
medium 16px
large 18px
x-large 23px
xx-large 32px

Powering mobile apps by Drupal

The interest in creating mobile apps or mobile websites with Drupal is increasing enormously. With the launch of the new Windows Phone today, the new Symbian^3 and the BlackBerry 6 family of devices, the already enormous popular Android and iPhone duo got some new brothers and sisters. It is clear that there will be an enormous need for mobile developers and platforms that can drive these developments.

To illustrate the interest of the Drupal community in Mobile, just have a ook at a recent blogpost by Dries where he polled the community about possible wishes and needs in order to make Drupal a better platform to drive mobile apps.

While a number of solutions are being created as we speak I just wanted to point to two specific efforts that, instead of creating Drupal code to better communicate with mobile apps, write libraries for mobile platforms to better communicate with Drupal:

  • Drupal iOS SDK is an iPhone library for Objective-C developers
  • Titanium API Group tries to collect snippets of code for the Titanium Framework that can power both Android and iPhone platforms. Hopefully some more formal Titanium libraries will emerge from this effort...

Styling form buttons on the iphone: -webkit-appearance

Techniques for styling "form buttons" are well known to themers, and certainly to themers who develop for smarthphones that understand some CSS3, things become very easy.

However, recently we ran into some issues with iPhones that show a glare if we theme our buttons...

<input type="submit" name="submit" value="submit" id="submit" />
 
<script type="text/css">
#submit {
  color: #fff;
  width: 135px;
  height: 30px;
  border: none;
  background: #E00 ;
  -webkit-border-radius: 5px;
}
</style>

Using Virtual Hosts on the Android Emulator

We know that it is a very good practice to use Virtual Hosts on your local machine to develop websites locally. Using paths like http://localhost/site1 are not only bad looking, it gives problems when you reference files, images, ... relative to your domain. It also helps you get better organised.

There are some steps to undertake in your systems hosts file and in your apache server in order to get these virtual hosts running. Just google or Bing for a tutorial.

Mobile usages for Drupal

Someone directed me to the following blog post, illustrating a cool use case for Drupal in a mobile context. Read it on http://realize.be/mobile-uploads-your-drupal-site
The blog shortly explains how you can use Drupal together with the Mailhandler and Mailsave modules to update your Drupal image galleries through a mobile phone (e.g. iPhone).