×
Namespaces

Variants
Actions

Interview with a cross-browser web site developer

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: tasala (12 Mar 2010)
Last edited: hamishwillee (20 Aug 2013)

Andrea Trasatti is a developer and the former Director of Technology Strategy at mTLD, the creators of mobiForge and the dotMobi domain. Nokia Developer had a chat with Andrea about his recent experiences using the Nokia Mobile Web Templates.

Contents

How did you use the Nokia Mobile Web Templates?

I recently developed a new mobile theme for Drupal. The intent was to design a nice theme that could be plugged in with existing Drupal mobile plug-ins. I started using the excellent Mobile Plugin, but later adapted the theme to work with other plug-ins such as Mobile Theme and Mobile Tools. Most of the theme is actually based on the Nokia Mobile Web Templates. I used some buttons, the link bar, and the text container boxes. I also used and slightly adapted the headers and footers. I would say that about 70 per cent of my final theme was based on the templates. I used a little bit of the low-end template and a lot of the high-end template.

Mwb2.JPG

Screenshots of the WordPress Mobile Pack, which also uses the Nokia Mobile Web Templates.

Was it easy to use the templates?

Using the templates was fairly easy. Of course a basic knowledge of XHTML and CSS is required, but besides that it was mostly copy and paste. The great thing about the templates is that as a developer I can handle markup and styles fairly well, but I lack the creativity needed to design something attractive. The templates gave me the base to build on, and then I added a little bit of my personal taste and creativity, choosing the pieces that I wanted to put together. The main hurdle that I encountered was to adapt the CSS to the existing markup. Drupal, like many CMS's, provides a style defining how the HTML should be written so that designers can adapt their themes. In order to make the theme extensible and reusable, I decided to do the legwork of adapting the CSS instead of the HTML. This should enable existing Drupal theme designers to just pick up my theme and adapt it further.

Did you have to extend, customize, or hack the templates in any way? If so, can you explain why, and what you did?

I wanted to make sure that the CSS and JavaScript™ were optimised for speed and efficiency, so I removed all the parts that I did not use. Not a complicated work, but it took me some time (a few hours in total) to go through it and find the functions that I needed. Also, since my theme has a minimum of device detection to recognise high-end devices from low-end, I had to add my own code for that. A more detailed explanation of how designers can recognise the different classes of devices would have been of help. My code is now open source so anyone can benefit from that and reuse the recognition part.

What do you feel are the main benefits of the templates?

Since I'm more of a developer than a designer, I highly appreciated the opportunity to pick and mix the pieces that I needed and then add some touches here and there to glue them together. Overall, it has been great for me that I have been able to focus on the development of the code and then just use the existing tiles provided by the templates.

Would you recommend changes to the templates?

As mentioned earlier, it would be nice to have a more in-depth explanation of which devices are best suited for each class. I think it's already very good that three classes were defined, but how to fit which device in which class is left to the student. I noticed some parts, like the heading, which I assumed would be the same for all, to be slightly different. There were also some minor HTML differences that are probably perfectly fine in a page, but when picking and mixing, like I did, created some minor issues. I think that the benefits the templates provide far outweigh the downsides.

Did you incorporate device detection into the templates/project? If so, can you explain briefly what you did?

I assumed the theme would be installed with an existing plug-in for mobile device recognition. All I implemented in my scripts was a way to detect high-end devices and in the future also mid-end devices. Briefly, what I do is check a couple of specific strings in the User-Agent and, if found, load a separate CSS file in a directory I called ‘high-end’, otherwise fall back to ‘low-end’. The same applies for JavaScript, and I have the placeholders to define as many classes as I wish.

Did you have to make many changes to support other non-Nokia devices?

I experienced minor issues with iPhone and Android when I adapted the links bar to span only a portion of the screen instead of 100 per cent. Besides that, everything worked out of the box with the devices I tested.

How did you test the templates? Did they perform as expected on your test devices? Would you recommend any changes to the templates (or documentation) that would assist in testing?

I developed everything testing on Firefox with the User-Agent switcher, and Safari 4 using either an iPhone User-Agent or a Nokia one that I entered manually, mostly to test the device recognition. Once I felt the theme was solid enough, I tested with a number of real devices, from my drawer or borrowed from friends. I tested on a few Nokia, Blackberry, and Sony Ericsson devices. I also tested on an old LG to make sure the low-end themes would work on really basic devices. I also used Nokia's Remote Device Access to some extent. That let me test on a number of Nokia devices very easily.

Would you use the templates again?

Besides the Drupal theme, we also implemented the templates in the WordPress Mobile Pack. Pretty much the same approach was applied and worked nicely. I will definitely use the templates again, not only because they made my work very easy, but also because they worked well on many devices out of the box, and that made the cross-browser testing much easier. Having a solid base to build on is a great advantage.

Mwb1.JPG

Resources

This page was last modified on 20 August 2013, at 09:11.
57 page views in the last 30 days.