Panels variants can easily be used to create a mobile version of your website. If you’re already using Panels, you need one module: Mobile Tools (http://drupal.org/project/mobile_tools). It contains a plug-in for Panels, making it easy to create a specific variant for mobile.

First, create your normal page layout using Panels. Then, create a second variant and when you add content (or in the content settings), choose "Mobile" for your build mode.

It’s as easy as that!

It’s 2011, and the world is going mobile. People don't just use their desktop computer or laptop anymore to visit the sites you build. They're coming at you with smartphones, tablets, TV screens— and who knows what they’ll bring next year? With all this device-switching going on, one of the questions that site builders ask themselves is, how can we keep catering to all these different devices? The good news: There is a way. It’s called responsive webdesign.

In this article, we briefly lay out what responsive webdesign is, and, more importantly, how you can use it in your Drupal projects today.

What is responsive web design?

In his 2010 article on 'A List Apart', Ethan Marcotte coined the term "responsive webdesign," referring to responsive architecture. If architects can design rooms that change according to the number of people inside them, why can't web designers build web pages that adapt to the people who view them?

As you may have guessed from the name, responsive web design is all about, yes, responding to the site user's device specifics. Does the device have a wide or narrow screen? How is the user holding the device? What OS is powering the device? All these questions determine how the user experiences your website. With responsive webdesign, you can accommodate all these possible differences.

Using a combination of CSS3 media queries (which query the device's capabilities to determine the proper stylesheets to load), a flexible grid acting as the site’s foundation, and images that change according to the screen resolution, responsive webdesign allows you to work in a so called "device agnostic" way. It doesn’t matter whether the user has the latest tablet, or an early-adapter smartphone: if your design is responsive, it can adapt to the user. Think of it as a fluid (vs fixed) webdesign on heavy steroids.

This article is the second in a series. In Part 1, you learned how to plan a simple theme and identify page elements. If you don't have a copy of the first issue of Drupal Watchdog, you can read the article online at http://drupalwatchdog.com/1/1/psd-to-drupal-7-theme.

Every themer will approach the task of making themes a little differently. This is the technique I like to use. I think of it as minimum viable theming. It's the least amount of work one can possibly do to create a basic theme. When I'm punching out quick themes I like to use the NineSixty base theme. You can get a copy from http://drupal.org/project/ninesixty. This theme allows you to easily use a CSS grid framework for your layout. There are other great base themes out there; don't feel limited to using this one.

Creating Your Theme

Make a new folder (you must start with letters) on your server in the Drupal sub-directory sites/all/themes. Let's use thewire as an example of your theme name.

Add to this folder a text file named thewire.info. This file name must exactly match the name of your folder. It will act as the manager for your theme—loading up custom CSS files and creating regions for your page template file.

Copy the sample settings into your .info file:

The Mobile Web is all the rage these days. A website isn't cool unless it is “mobile friendly.” Companies are called upon to develop a “mobile strategy.” There is an app for that is the new tag-line, even though Drupal had it first. And the calls for Drupal to “be more mobile” and to have “mobile support out of the box” are increasingly loud.

But what does that mean? In practice, nothing. “Going mobile” is the new-age version of “your company needs to be on The Interwebs” from the ‘90s, and it has as much practical value. OK, mobile is well and good, but if we don't know what it means, how can we achieve it?

The problem is that “mobile” means a great many things, not all related. Traditionally, mobile meant support for devices with very small screens and very slow data connections and browsers that are slightly more powerful than Lynx (a popular text-only console browser from the early ‘90s). Of course, that simplistic view of the market was never really accurate to begin with.

Today's computing market is almost frighteningly heterogeneous. All of those attributes of “mobile” exist, but not together. The majority of smartphones in the wild today have data connections that exceed the bandwidth of low-end DSL landline connections, yet have terrible latency. Meanwhile, even large-screen laptops are frequently connected to over-burdened hotel or airport WiFi connections slower than the smartphone sitting next to them.

Smartphone screens can be found in sizes anywhere from 2.5" square to 4.3" rectangular. Above that is the tablet market, with screen sizes ranging from 5" to 10" butting up against smaller laptops like the MacBook Air. Over-laying those are netbooks, which have wide-but-thin screens of various sizes with keyboards of hit-or-miss quality. And all of those could be on super-fast Wireless-N networks that put the cable modems of only a few years ago to shame. And let us not forget the browser capabilities on the various mobile operating systems: Mac OS, Windows, Windows Mobile, webOS, iOS, Android, and market-leaders RIM and Symbian: All have different capabilities, even if they use the same underlying engine.

We're exited to announce that the third issue of Drupal Watchdog is now available! If you're currently at DrupalCon Denver, stop by our booth to fill out a quick survey and pick up free print copies of the Mobile Drupal Issue and The Design Issue!

Designing for Drupal
This issue of Watchdog focuses on the process of planning, creating, and theming Drupal websites. Jeffrey Dalton eloquently initiates the discussion in The Hybrid Designer, making a compelling case for the importance of being well-versed in the abilities and limitations of the underlying technologies that will be used to implement a website design. He argues for stepping away from the stilted separation of design and back-end development to optimize the website building process, avoiding budget bloat and helping ensure success.

Drupal’s theming layer controls the look and feel of a website, allowing the default presentation of content to be overridden and customized. Michael J. Ross presents a detailed feature comparison of 18 commonly-used Drupal 7 Starter Themes to consider working from when designing a website. In Thinking Inside the Box, Emma Jane Hogbin explores the aesthetics and usefulness of grid systems in her tutorial on building a theme on the 960gs CSS grid framework.

Morten DK’s article on DeDrupalizing the Login Form offers a useful example of Drupal 7’s new ability to modify forms within the theme layer. In Drupal 7, Meet 2012’s HTML, Morten examines HTML5 and how it can be leveraged in Drupal 7. Emma Jane Hogbin provides a themer’s introduction to essential PHP, answering the question What’s That PHP Doing In My Theme? And in Creating Specialized Layouts with Panelizer, Lynette Miles shows readers how to customize the display of specific website content; for example, altering the look and feel of individual articles, user profiles, or taxonomy vocabularies.

In web time (like dog years), I am ancient, having been developing for the web since 1993. I remember being blown away by the revolutionary capabilities of nested tables and spacer images. I’m not kidding! Before that, we had no layout techniques at all; the best we could achieve was slapping align="left" on an image and letting the text flow around it. (Okay, seriously. Stop giggling.) And the success of tables led to the biggest challenge I had ever faced as a web developer: throwing away all the tried and true layout techniques I’d learned and starting over with unproven, experimental, but-obviously-better layout methods using CSS. In 2001, it was hard and, while there was a big community of web developers sharing and figuring stuff out, none of us really knew what we were doing.

It’s ten years later and we are at a similar pivotal point in web development. Some of the key tenets of what we’ve learned about designing for desktop browsers are being overthrown by the explosive growth of mobile web devices and a layout technique simply called “Responsive Design.” While, on its surface, this is just a new layout method, it has far deeper implications. With unproven solutions before us, it is time to re-evaluate our understanding of our canvas, our users and our content.

In hindsight, our mistake is easy to spot; we had grown accustomed to the ever-increasing screen sizes from yesterday’s 800-by-600 CRTs to today’s 2560-by-1440 LCDs. And our website layouts have grown with them. While it was natural for us to follow this course, we were terribly, terribly wrong.

Mobile phones with Internet access have been steadily increasing in popularity. And few us seemed to notice that meant our average screen real estate was actually shrinking, not growing. Morgan Stanley now predicts that mobile web usage will surpass desktop usage by 20151. We need to change the way we build websites. And fast.

You have a record; it contains tracks. Consider the relationship between the tracks and between each individual track and the album as a whole: The tracks may also be by different recording artists.

Or ponder the relationship between financial donations to political parties from corporations and those from individuals—and add in the specific amounts of those donations. Muse upon the family relationship between the Marx Brothers—or the Bush twins.

Website building is full of relationships. Yet, despite several attempts, Drupal has not had a generic relationship solution. Node reference and user reference are useful modules but extremely limited. One of the biggest problems with them is the inherent notion of direction. And yet, often relations do not have a direction. Also, there are clearly only two nodes in a relation expressed by node reference. Storing the relationship between the Marx Brothers is not an easy task with such a limited tool.

Enter Relation (http://drupal.org/project/relation). Relation is not a field, but an entity in itself. It can store directed but also non-directed relations. It can store as many entities as you want, so storing all five Marx brothers is easy. And, relation is not just simply an entity but a fieldable entity (it's Drupal 7 and later only) so you can add a number field to the 'donation' relation and store how much was donated. The module provides an API and builds user facing components on top of the API. It integrates both with Views and Rules.

We covered examples in the opening paragraph, now let’s tackle the record album. There are various questions we might want the website to answer, such as: What is track three? What album does it belong to? What are the other tracks on the album?

We're proud to announce that the print edition of Drupal Watchdog Issue #2 is finally available for purchase from Amazon.com! We've incorporated all the fantastic feedback we received from the Beta release offered earlier this year. And for anyone that prefers digital formats, you can purchase a high-resolution digital copy from Zinio. (The print edition contains four bonus photo pages spread throughout the issue, with photos taken at the DrupalCon in Croydon, UK earlier this year.) Help Drupal Watchdog grow and purchase a copy of Drupal Watchdog Issue #2 today!

A Beta copy of Drupal Watchdog Issue #2 is now available as a free download from this website! Visit http://drupalwatchdog.com/1/2/beta-download-register to sign up for a free account and download the 64-page PDF. We're looking for feedback on this issue before we go to print in early September, so please spread the word and email feedback to jeremy@drupalwatchdog.com.

The final print edition will be available for order from Amazon.com. Current subscription holders can expect their copies to arrive by mid-to-late September. A high-resolution electronic edition will be available for purchase from Zinio.com around September 15th.

We're also seeking suggestions for topics and themes for the next issue. We're looking for authors, illustrators, advertisers, and people who want to be involved. Reach out to help make issue #3 amazing, to be available at the Denver DrupalCon in March of 2012.