1. Responsive Theming / Omega
Single shot
at building a responsive site

2. 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

3. 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.

4. 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/

5. 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/

6. What is Responsive

8. 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.

9. 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

10. 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

11. The Grid

12. Omega Grid

13. 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.

14. Main Nav - css
ul.menu li { .menu li a { .menu li:nth-child(8) a { border: none; }
background-color: #434343; background: #434343;
list-style: none; border-right: 1px solid #fff;
margin: 0 0 0 -10px; color: #ffffff; display: block; .menu select { display:none; }
padding: 0; Float: left;
text-align:center; font: 400 13px/
width: 101.7%; Helvetica, Verdana, Arial, sans-serif;
} padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
.menu ul { border-top: #333333 solid 2px; } width: 12.5%;
.menu ul li { /*TRANSISTIONS*/
color:#ffffff; -webkit-transition: background 0.5s ease;
display: block; -moz-transition: background 0.5s ease;
list-style: none; -o-transition: background 0.5s ease;
margin: 10px auto; -ms-transition: background 0.5s ease;
overflow: hidden; transition: background 0.5s ease;
padding: 0px; }
} .menu li:last-child a {
border-right: 0; margin: auto; }

15. Nth child
This the css3 way to target specific elements within the unordered list
Main 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.

16. Tablet Portrait
So for the portrait view I changed the 8 navigation items to 4/4.
.menu { .menu li:nth-child(4) a {
width: 101%; border-right: none;
} }
.menu li a { #region-user {
font: 400 11px/1.4 width: 100%;
Helvetica, Verdana, Arial, sans-serif;
}
width: 25%;
#region-menu
}
.menu li:nth-child(5) a,
#block-menu-menu-certificates-sub-menu li:nth-
child(4) a {
.menu li:nth-child(6) a,
width:25%;
.menu li:nth-child(7) a,
}
.menu li:nth-child(8) a {
border-bottom: none;
}

17. Turn navigation into a Dropdown menu
@media max-width 761 > above
.menu select { display:none; }
.sub-menu select { display:none; } .menu li a {
display:none;
@media max-width 320px }
.sub-menu select {
.menu select { background-color:#ffc000;
background-color:#ffc000; margin: 5px;
display:inline-block; padding: 0px;
margin: 5px; text-align: center;
padding: 0px; width: 90%;
text-align:center; }
width:90%; ul.sub-menu {
} background-color: #000000;
.menu ul { border: 0;
display:none; }
}

18. Template.php
function 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));
}

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

20. 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');

21. 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(); });

22. 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();
});

23. Breakpoints
• Breakpoints are basically where you want things to
change for the different devices.
• I have chosen to use
– 1220px
– 1024px
– 761px
– 320px

24. 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_img
http://drupal.org/project/adaptive_image

25. Happy Father’s Day

26. Questions: