Adaptive Mobile Theme Upgrade

I recently completed an adaptive mobile upgrade to a Drupal content management system that I built for a local resort last year. Google Analytics had showed that at least 25% of site users were already mobile, and the company wanted to attract even more young people as clientele, while ensuring that people travelling could easily find information on the site.

The adaptive design uses only one website, so there is no additional work for the company's content manager. Through a simple query to the device used by a visitor to access the site, the webserver determines the width of the screen being used and switches between several CSS layouts. The CSS code is built so that the site looks good no matter what screen size is used!

In addition, when a mobile client is detected, the site suspends sending heavy graphics that are used to dress up the desktop version, and rearranges layout elements to put important content up top, so that finding information on a tiny phone is faster and easier.

One interesting feature of this site - which was carried through in the adaptive mobile theme - is that some theming elements vary depending upon which section of the site the visitor is viewing. For example, background images are different in the Event Calendar than they are on the Photo Gallery pages. To keep pages light and fast for mobile viewers, background colors are changed instead of using the background graphic

Add new comment