Here’s a lesson on how NOT to design a responsive website.

Don’t wait until the end of the project to think about it. Thinking about how your site will look and behave on mobile devices should be the first step in planning and designing a site. It should continue to be forefront in your mind during every layout and feature decision, especially anything having to do with menus and navigation.

When I started the gench site, I knew I wanted it to be responsive, so I did my homework and based the genchstyle theme on Omega. This was a good move, but the last time in the project that I focused on responsiveness. As I built and styled the site, I told myself “I’ll tweak the design for mobile devices once I get the ‘basic’ site built.” BIG mistake!

I am being duly punished for my folly: I am now fixing thousands of lines of css, mostly eliminating non-percentage widths and in some cases margins; changing all the image styles to use the Adaptive Images module I just installed; and rethinking the entire freaking layout.

Most of the problems can be overcome with some hard work, but I’m afraid the layout issues may be insurmountable. It would have been far better had I avoided this problem altogether by employing a different layout for the site. And maybe I should redesign the entire site now, but I’m inclined to stick with the current design since the problems are “only” on smart phone-sized displays.

For the “basic” or web browser display, the main navigation is a horizontal top menu with the Studio and Label submenus as menu blocks in the second sidebar. I want the submenus to be positioned directly beneath the main nav on cell phone displays. Turns out putting navigation elements in different regions was a bad move. Drupal allows us to assign weights to blocks to change their relative order within a region, but not accross regions.

With a jQuery script, I can move the submenus to be above the content section for cell phone width displays…

/*Script for mobile phone menus*/
(function($) 
{Drupal.behaviors.myCustomBehavior = {attach: function(context) {
$('body').bind('responsivelayout', function(e, d) {
if($(this).hasClass("responsive-layout-mobile")) {
$("#page-title").before($(".block-menu-studio-menu"));
}});
}};
})(jQuery);

This works OK, but it’s far from ideal: when I resize my web browser to 320px wide, the submenu repositions as desired, but if I resize back to a normal width, the submenu stays stuck in the cell phone location. I figure most actual visitors will never notice this behavior and if they do, the layout gets fixed as soon as they navigate to another page. But it’s not great and I’m sure I’ve introduced a performance hit with my jQuery. I also have to reposition the News, Login and Cart links (and make the logo graphics adaptive).

It would have been far better to do it like the designers in the major league do it. Their layouts are totally fluid and relative positions of content remain the same across stylistic shifts. They made their lives easy: they don’t have to fight against the generated html the way I am. Their navigation is always the first element on the page, even though visually it is sometimes a horizontal expanding nav (mobile) and sometimes a vertical side nav (wider displays). Even though it’s obvious they designed with smart phones and tablets in mind, I can tell this site would look good on any device. It flows like a waterfall.

I better get back to work – so much to do now!