Hands on a Blackberry: Making an HTML5 site work in old Blackberry (hint: remove HTML5 elements)

Summary

The Blackberry has been reacting very differently, and badly, to the mobile theme compared to iPhone and Android.

What i've learned from having the BlackBerry for a couple days is that it is not able to apply CSS to HTML5 elements such as hgroup, article, and footer.

In the blackberry branch i've swapped these elements for divs, and the improvement has been great.

Before learning this the approach i took to making the image float correctly was to remove all wrapping elements so that it was just an image tag. This works but it occurs to me now that replacing figure with div might be all that is needed here.

Background

Once i figured out how to work it and went to our site, loading 51kb, changed to 57kb just before the screen went black.. so the device gets bored before the site loads, but it's there.

skip to main content for mobile
I'll have to disagree with Mike Gifford in this case: http://openconcept.ca/blog/erinb/some-best-practices-mobilizing-drupal-site
we have a short menu and the link is just ugly showing up for blackberry

Oh, CSS, you are so screwy. You need absolute positioning redefined with !important in order to add at top to a tag with an absolute important elsewhere...

Todd is able to get the float to work applied to a pure img just there. So why not go for the same in our output? Drupal: it's on.

The image tag is of course wrapped in ever tag you can imagine:

section > figure > div.field-image > div#file-1290.file-image > div.content > img

We moved figure out of section in ds-1col-fig-html5--node-person-mobile-teaser.tpl.php, and then removed figure and section wrappers from the template altogether.

We had already set Display Suite to use 'minimal' for output in an unsuccessful attempt to remove excess baggage, now with the power of templates to back us up let's enforce that minimal.

drupal media module show image with no wrapping divs
http://drupal.stackexchange.com/questions/15208/div-around-img-tag-in-drupal-7

Capability of field type preprocess/templating was added in http://drupal.org/node/784792 but trying random things such as field--file_image.tpl.php, field--file.tpl.php, and field--image.tpl.php have no effect...

Gah, display suite was throwing an extra twist in there!

Courtesy of a kpr($vars['theme_hook_suggestions']); in function issymobile_preprocess_field(&$vars):
0 (String, 22 characters ) theme_ds_field_minimal | (Callback) theme_ds_field_minimal();
1 (String, 14 characters ) field__minimal
2 (String, 27 characters ) field__minimal__field_image
3 (String, 22 characters ) field__minimal__person
4 (String, 35 characters ) field__minimal__field_image__person

The entirety of templates/field/field--minimal--field_image.tpl.php:

<?php
 foreach ($items as $delta => $item) :
?>

<?php
 print render($item);
?>

<?php
 endforeach;
?>

Now to do the same to the file template.

templates/file--image.tpl.php

<?php
  // Print any content left over.
  print render($content);
?>

Ultimately this made floating the image work in the BlackBerry.

Background:
http://api.drupal.org/api/drupal/modules--field--theme--field.tpl.php/7
http://api.drupal.org/api/drupal/modules--field--field.module/function/template_preprocess_field/7

Applying styles to a normal div element instead of hgroup was the other major breakthrough.

Replacing footer element with div made a big difference, replacing header with div made none