Adaptive/Responsive UA Drupal 7 Theme Using Omega

Date: 
Wednesday, August 8, 2012

Rebecca Macaulay, Web site Developer/Graphic Artist for the Student Affairs Systems Group (SASG), gave a talk demonstrating how to create an Adaptive/Responsive UA Drupal 7 Theme Using Omega as the base theme.

I believe it is correct to say that her themes will be made available after being vetted by External Relations. More on this in the Sept. 12 meeting.

Omega: http://drupal.org/project/omega
Omega Tools: http://drupal.org/project/omega_tools

From the Question/Answer period:

Q. What are the main challenges when moving to a responsive theme?

A. The design process is very different. In Drupal, blocks are a particular problem - low-bandwidth mobile users are still loading every block. Calling a block only when it is needed is a technical challenge.


Q. Process perspective: do you start with a large screen first and then cut down, or start small and then build up to the large screen?

A. Start small first, then build up.


Q. If mobile first, then why is the large size in the global style sheet?

A. Actually small *is* in the global style sheet first.


Q. How much more time do you need to add to your design process when including mobile-first?

A. After the learning curve, things are actually faster because you're not stuck on a pixel-perfect design. A lot of problems go away.


Q. Could you talk about Omega Tools? [Note: this is a helper module with extra functions and customizations. "Generate Subthemes with Drush, automatic placeholder blocks for region testing, Import & Export theme settings."]

A. Best approach is to include the Features module as well. Then all classes and positioning can be saved as a package.


Q. How do you handle images?

A. Programmers often don't think of this. The Catch-22 is that you want small images for mobile users, but some devices have the "retina display" in which small images can look bad. css: load a large image but have the max width only as wide as its containing elements:
max-width: 100%;
height: auto;


Q. What about modules for adaptive images?

Adaptive Image Styles module (http://drupal.org/project/ais) - you need to edit your .htaccess and settings.php files. The Image module that comes with Drupal 7 puts height and width directly into the image tag which is very annoying. Rebecca wrote a preprocess function that strips these out.