I had been a proper use for the two themes for the desktop and mobile on this site, I decided to use the theme that Responsive Design is possible.

Previously, the host names for desktop and mobile are different, and access from mobile terminal is redirected to a URl for the mobile. It is stopped now.

The following is a summary of the work, it was surprisingly easy.

1. Selection of themes for Responsive Design

This site is built with Drupal. I was using the (sub) theme of Zen 3.x so far. 3.X version does not support Responsive design, but 5.X supports it. I decided to use Zen 5.X by upgrading the same theme. It seems to be good to use the same theme. However, during the transition, I had to use other theme because 3.x and 5.x can not coexist.

http://drupal.org/project/zen [9]

2. Advance preparation

I rewrote the templates files and various CSS files in advance before the actual migration. I did the almost same thing to Zen 5.X default templates, CSS, and other files as what I did to Zen3.X files. Once created Zen 5.x sub-theme in the working folder as the new sub-theme of Zen 5.x. Then I put each peace of Zen 3.X modifications to .info, templates, CSS files, and others.

3. Migration theme

While operation in a different theme, I replcaed the Zen 3.x sub-theme with 5.X sub-theme. After Zen 5.x was installed, set the theme to the newly created Zen 5.x sub-theme as the default WEB theme.

4. Adjusting the appearance

Without critical error, new theme works smoothly. With displaying on different size of screen, or on mobile devices, I continue to adjust the CSS to look good on any screen.

I addition, in order to show / hide the block depending on the size of the screen, I wrote small JQuery scripts. It's a first time to write javascript, but it was easy to write simple script just determining the screen size and do hide().

URL for mobile is no longer needed, I stopped the setting of redirect to the mobile URL when it is accessed from a mobile device, then add a setting of redirect to the desktop URL when it is accessed by old mobile URL.

The purpose of the work is to make it easier to manage in a single theme and host name URL to access, so WEB design is the same as before. It is not a full-fledged Responsive design, it looks almost unchanged. Advantages of Responsive design is not fully utilized now.

I need a re-design from scratch if I want to make trendy design such as small blocks move dynamically.

On Drupal, there is a module to get and display products info by using Amazon API. This site uses Amazon module [13] when describe Amazon products such as CDs, Books.

About Amazon module, this is a detail document. [14]

Using Amazon module, You can write a page like 'Using Drupal' [15]. This site uses Fivestar [16] module with Amazon module for rating of products.

Install

First, install each module. Fivestar module needs Voting API [17] module.

All components of Amazon module are enabled. Fivestar and Voting API of Fivestar module are enabled.

Settings such as Amazon API, etc.

Next seettings of Amazon API, etc. Go to 'Site Configuration' -> 'Amazon API', set Locale, API Key and Associate ID, etc. For Fivestar, 'Site Configuration' -> 'Fivestar', set Widget Display. I use Default. There are hearts, flames, etc. add to stars. You can set widget display by content types.

Add new content type

Add new content type for Amazon product review, named Amazon Node for example. Add two fields to new content type. One is for Amazon product ID (ASIN), Another is field for rating. Field type is Amazon Item and Fivestar Rating, respectively.

Next, settings of fields. For Amazon Item, check 'required', and 1 for 'number of values'. For Fivestar Rating, check 'required', 5 for 'number of stars', voting target is 'none'.

On display fields tab, I set label 'Hidden', Teaser and Full Node 'small image and basic info', but you can change as you like. For rating, Label is 'inline' and Teaser and Full Node are 'as stars'.

Create Amazon Node

Finally, create Amazon Node content. Amazon Item <div> block and Rating <div> block are inserted before text. A position is able to change using CSS. Edit screen is here.

When you want to display 'inline' (not at head of text), you can use Amazon filter. If you write macro in a text, Amazon product info is inserted at that position of text. You need Amazon filter enabled on your input format.

I used SwitchTheme module to switch theme for mobile terminals up to now. But I looked for another module, because Browscap, which is co-working with SwitchTheme to detect mobile terminals, doesn't work well recently.

I found Mobile Tools [20]module. Now I use this module to switch theme when accessed from mobile terminals such as Android.

The document concerning Mobile Tools is here.

Make your site mobile with Mobile Tools [21]

After install as the same way of other modules, basically it works soon well.

Mobile Tools settings

･Notification/ Redirection settings

[22]

Select a switching method to the theme for mobile from two methods. One is redirecting to URL for mobile, and another is switching themes with same URL.
Here, because I want to use the same URL, Mobile URL and Desktop URL are made the same.

Mobile Tools block message options are settings of blocks to display desktop theme screen and mobile theme screen separately. Here, on the desktop theme screen, display a link to mobile theme, and on a mobile theme screen, display a link to desktop theme.

･Theme Switching screen

[23]

The method of changing the theme is specified. Here, set to "Switch theme for a mobile device". And set a default theme name and theme names for each device group (iPhone, iPod, iPad, Android, ...). I use nokia_mobile for all type of mobile device.

Block settings

Mobile Tools module generates Mobile Tools message block. I set this block at a footer region. On mobile theme, a link of "to PC View" to switch desktop theme appears at the footer, and on desktop theme, a link of "to Mobile View" appears at the footer.

Tweak mobile theme

I adjusted "nokia_mobile" theme a little with checking by my android phone. I also add Google AdSense ad for mobile.

I use Android phone and feel Mobile theme is unnecessary for my nexus one. But I made this site has function to switch theme for mobile using UA of a browser.
I used MobileTheme module [26] but recently I changed to SwitchTheme [27] for that.

The user can switch an effective theme. It provides block menu for the theme switch. On this site, I put a link to switch for Mobile and for PC at the bottom of a page. Theme for PC has a switch link to mobile theme and a theme for mobile has a switch link to PC theme.

Installing just like a usual module, and setting the user authority enable even an anonymous user to use the switch function.

Next, display the link to switch to the another theme respectively of the theme for PC and the theme for Mobile. When SwichTheme is made effective, the theme can be switched by adding '?theme=' to URL. To use this function, I put the following functions in template.php.

function nyanchew_preprocess_page(&$vars, $hook) {
$vars['footer_message'] = l('Change to Mobile theme', $_GET['q'], array('query' => 'theme=mobile')$
}

The switch link to a mobile theme is displayed in footer with the string 'Change to Mobile theme'.

In addition, SwitchTheme can specify the theme by synchronizing with the Browsecap module. Seeing UA of a browser, a browser named DoCoMo, KDDI, and NetFront displays it by the theme for Mobile.