Responsive Theming / Omega

Single shot at building a responsive site

Who is…• Savannah College of Art and Design for Graphic Design and

Computer Presentation• Started developing web pages around 1999 mostly front end• Been working with Drupal for 3 years• Just started coding in Drupal this march• I consider myself a Designer and Themer

Why Me!?

• Ever since Drupal Con March 2012 I have been learning and pushing responsive theming.

• Denver2012.drupal.org• There are a lot of presentations about how to

set up Omega but none describing the process to building out the site.

Sessions at DrupalCon To check out• Tues - Rethinking responsive building techniques with Drupal• Tues - HTML 4 S - While We're Waiting for the Revolution• Wed - UX design for every screen• Thurs - Keynote - Luke Wroblewski• Thurs - Creating Responsive and Mobile-First Drupal Themes• Thurs - A Responsive Project Process

• http://www.lukew.com/ff/entry.asp?1514• http://futurefriend.ly/

Reference Links…• http://dropbox.headscapedev.com/projects/wireframes/demo.htm

– Shows you grid formats• http://styletil.es/

– Design Process Templates for Responsive• http://www.bbc.co.uk/gel/

– Style Guide Ideas• http://responsinator.com/

– Device Testing online• http://responsify.it/

– Create your own Responsive Template• http://resizemybrowser.com/• http://whatsmy.browsersize.com/

What is Responsive

Drupal 7 – Responsive Themes

• Omega• Adaptivetheme• Zen 7.x-5.x• Fusion – not out of the box.

• Would love to discuss the difference between any of these.

Why I chose Omega

• Most of what I heard initially was about Omega

• Most of the talk at DrupalCon was about Omega

• It seemed very easy out of the box.• It just worked after installation• Easy to make a sub theme

Things to consider and run through

• Theme - Omega• Grid width, Columns & Gutters• Navigation – css-tricks.com• Percentages• Javascript (Custom) - css-tricks.com • @media – Breakpoints• Images

The Grid

Omega Grid

Navigation• I wanted the navigation to

respond for the Portrait view on tablets

• However because of the amount of navigation throughout the site I turned it into a select menu for the mobile sites.

Main Nav - cssul.menu li { background-color: #434343; list-style: none; margin: 0 0 0 -10px; padding: 0; text-align:center; width: 101.7%; }

.menu ul { border-top: #333333 solid 2px; }

.menu ul li { color:#ffffff; display: block; list-style: none; margin: 10px auto; overflow: hidden; padding: 0px; }

.menu li a { background: #434343; border-right: 1px solid #fff; color: #ffffff; display: block; Float: left; font: 400 13px/ Helvetica, Verdana,

Arial, sans-serif; padding: 10px; text-align: center; text-decoration: none; text-transform: uppercase; width: 12.5%; /*TRANSISTIONS*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease; } .menu li:last-child a {

border-right: 0; margin: auto; } .menu li:nth-child(8) a { border: none; }

.menu select { display:none; }

Nth child

This the css3 way to target specific elements within the unordered listMain nav:.menu li:nth-child(8) a { border: none; }

Sub nav:#region-menu#block-menu-menu-certificate-sub-menu li:nth-child(4) a {

width: 20%;}*Using Firebug to find the elements id and classes.

Tablet Portrait

.menu { width: 101%; } .menu li a { font: 400 11px/1.4 Helvetica, Verdana, Arial,

sans-serif; width: 25%; } .menu li:nth-child(5) a, .menu li:nth-child(6) a, .menu li:nth-child(7) a, .menu li:nth-child(8) a { border-bottom: none; }

.menu li:nth-child(4) a { border-right: none; } #region-user { width: 100%; } #region-menu #block-menu-menu-certificates-sub-menu li:nth-

child(4) a { width:25%; }

So for the portrait view I changed the 8 navigation items to 4/4.

Turn navigation into a Dropdown menu

@media max-width 761 > above.menu select { display:none; } .sub-menu select { display:none; }

@media max-width 320px

.menu select { background-color:#ffc000; display:inline-block; margin: 5px; padding: 0px; text-align:center; width:90%; } .menu ul { display:none; }

.menu li a { display:none; } .sub-menu select { background-color:#ffc000; margin: 5px; padding: 0px; text-align: center; width: 90%; } ul.sub-menu { background-color: #000000; border: 0; }

Template.phpfunction nasaepdn_preprocess_page(&$variables) { drupal_add_js(drupal_get_path('theme', 'nasaepdn') .'/js/dropdown.js', 'file'); drupal_add_css('http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css', array('group' => CSS_THEME, 'type' => 'external')); drupal_add_css(drupal_get_path('theme', 'nasaepdn') . '/css/ie8.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));

drupal_add_css(drupal_get_path('theme', 'nasaepdn') . '/css/ie9.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE 9', '!IE' => FALSE), 'preprocess' => FALSE));}

Custom js in .info libraries[nasaepdn_custom][name] = nasaepdn navigation dropdownlibraries[nasaepdn_custom][description] = Convert navigation to dropdown menu.libraries[nasaepdn_custom][js][0][file] = dropdown.jslibraries[nasaepdn_custom][js][0][options][weight] = 15

Give the sub-navigation a different class name

Dropdown.js (top)

$('#block-menu-menu-certificate-sub-menu ul.menu').removeClass('menu').addClass('sub-menu');$('#block-menu-menu-courses-sub-menu ul.menu').removeClass('menu').addClass('sub-menu');$('#block-menu-menu-resources-sub-menu ul.menu').removeClass('menu').addClass('sub-menu');

Javascript to split the menu class

Dropdown.js middle…

//So I needed to target the sub-menu class separately// JavaScript Document jQuery(document).ready(function($) { // DOM ready // All your code here $('#block-menu-menu-about-sub-menu ul.menu').removeClass('menu').addClass('sub-menu'); $('#block-menu-menu-certificate-sub-menu ul.menu').removeClass('menu').addClass('sub-menu'); $('#block-menu-menu-courses-sub-menu ul.menu').removeClass('menu').addClass('sub-menu'); // Create the MAIN NAVIGATION dropdown base $("<select />").appendTo(".menu"); // Create default option "Go to..." $("<option />", { "selected" : "selected", "value" : "", "text" : "Main Navigation", }).appendTo(".menu select"); // Populate dropdown with items $(".menu a").each(function() { var el = $(this); $("<option />", { "value" : el.attr("href"), "text" : el.text(), }).appendTo(".menu select"); }); // To make dropdown actually work // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/ $(".menu select").change(function() { window.location = $(this).find("option:selected").val(); });

JS subnav code (Same as main except tag)

Dropdown.js bottom

// Create the SUB NAVIGATION dropdown base $("<select />").appendTo(".sub-menu"); // Create default option "Go to..." $("<option />", { "selected" : "selected", "value" : "", "text" : "Sub Navigation", }).appendTo(".sub-menu select");

// Populate dropdown with items $(".sub-menu a").each(function() { var el = $(this); $("<option />", { "value" : el.attr("href"), "text" : el.text(), }).appendTo(".sub-menu select"); });

// To make dropdown actually work // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/ $(".sub-menu select").change(function() { window.location = $(this).find("option:selected").val(); }); $( "#accordion" ).accordion(); });

Breakpoints

• Breakpoints are basically where you want things to change for the different devices.

• I have chosen to use– 1220px– 1024px– 761px– 320px

Images

• I do not have a fool proof plan for images.• I am using percentage for the images on the site.• I currently only have one main image but will be changing that

into a rotating image soon.• Css-tricks has a great article with good indepth image

discussion.– http://css-tricks.com/which-responsive-images-solution-should-you-use/– Acquia webinar about Delivering the Right Mobile Experience. The group is working on a images module.– http://www.acquia.com/resources/acquia-tv/conference/delivering-right-mobile-experience-drupal-may-29-2012

http://www.vml.com/

http://drupal.org/project/resp_imghttp://drupal.org/project/adaptive_image

Happy Father’s Day

Questions: