mobile

warning: Creating default object from empty value in /home/tderycke/www/eldeto.com/modules/taxonomy/taxonomy.pages.inc on line 34.

AT&T Mobile Phones promotion site on Drupal

Last week I launched with Northpoint Solutions and VSHIFT another mobile drupal site. ATT&T Mobile Phones. A promotional website to consult the latest mobile phones and search stores on your mobile.

The site runs on Drupal 6 using Mobile Tools and WURFL.

ATT screen 1

Mobile Device Detection with Varnish

Thanks to fangel who wrote this week an interesting blog on using Varnish to detect mobile devices, we are a step closer to creating performant architectures that serve both mobile and desktop websites.

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

Proposed Mobile sessions for Drupalcon Chicago

One of the rewarding activities as maintainer of Mobile Tools is seeing how the adoption of the module is steadily growing. Since my first commit om march 22nd 2009, we have now a reported installation base of 2,630 installs and this number is steadily rising. This number can count as a good indicator how big the interest in mobile is getting...

With ericduran who stepped up as co-maintainer for the Drupal 7 branch we are preparing Mobile Tools for the future!

This upward mobile trend is also visible in the number of proposed sessions for Drupalcon Chicago (Check out my proposal).

I tried to assemble an overview of these session and categorize them in different topics:

Persist your session across your desktop and mobile site

This is a small tip for devs who decide to use separate domains for the desktop site and for the mobile site, and who want users to easily switch between both sites without loosing the session.

e.g.:

The trick is to let Drupal set your cookie for the base domain: drupal.org...

Doing this can simply done by changing the $cookie_domain variable in your settings.php file.

Create your own device detection algorithm in Drupal using Wurfl and Mobile Tools

While going through the Mobile Tools issue queue today, I noticed some questions on the device detection mechanism in Mobile Tools and how some desktop browsers are wrongly detected as mobile devices.

To be honest I don't use the Mobile Tools built in device detection mechanism myself.... The simple reason is that Mobile Tools has a set of rules that try to discover the nature of the accessing device by looking at the user agent string. Have a quick look at the code (line 496: function _mobile_tools_is_mobile_device()) to see how the device detection works.

You will understand that the effort in keeping up with new devices and browsers is not an easy task, and these rules become inaccurate or outdated. It is sufficient and recommended for testing and quick prototyping during mobile development... But I would not recommend using it for production sites!

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>

Rethinking the mobile web

This presentation is a very well crafted set of slides explaining some basic concepts of creating mobile websites, and more specific to make your desktop site adaptable.

It discusses lot of techniques that I use to make mobile websites performant... However some design choices we get from clients not always allow the very lightweight approach ( => example slide shows on mobile devices).

Mobile Web testing... What's in my toolkit

When you are developing mobile websites, it is very important to have a rich Toolset that helps you in evaluating your mobile creations. This is not only for yourself, but also to reassure the client that you have the development under completely under control.

Screensizes and browser capabilities can change the look and feel of your site drastically... So better prepare!