2013 responsive design and theming

transcript

UNC CAUSE 2013Responsive Design and

Theming

by: Diana WoodhouseStudent Affairs IT - UNC Chapel Hill

woodhous@email.unc.edu

Discussion

• Compare and contrast a custom responsive theme with a hybrid responsive solution based on a third party theme.

• Examine squishy versus fixed responsive design.

• Learn how to use media tags, CSS, jQuery and PHP for responsive theming in a Drupal and non-Drupal application.

Custom Design

http://riversagency.com/carolinaunionapproved

Home Page - DesignCarolina Union Website

http://carolinaunion.unc.edu

Desktop and Tablet View - SquishyProduction – Carolina Union Home Page

http://carolinaunion.unc.edu

Production – Carolina Union Home PageMobile View

Policies & Documents - DesignCarolina Union Website

http://carolinaunion.unc.edu/meetings-events/policies-documents

Desktop and Tablet - SquishyProduction - Carolina Union Policies & Documents Page

Production – Carolina Union Policies & Documents PageMobile View

http://carolinaunion.unc.edu/meetings-events/policies-documents

Our Work - DesignCarolina Union Website

http://carolinaunion.unc.edu/depts-services/marketing-design/our-work

Desktop and Tablet - SquishyProduction – Carolina Union Our Work Page

http://carolinaunion.unc.edu/depts-services/marketing-design/our-work

Mobile ViewProduction – Carolina Union Our Work Page

Some Design Considerations• Design for the more complex wide view, but with

mobile view in mind• Layout should support transition from left aligned

floats to stacked• Left to right elements should be able to change

from top to bottom in the same relative order with only some exceptions

• Elements that appear to move from header to footer or from left sidebar to below content are actually loaded in both places and can have performance implications

• There should be a maximum responsive width. Page should stop responding to keep the integrity of the design in the wide view.

Converting an Existing Design

http://studentaffairs.unc.edu

Student Affairs – Fixed Design

Interior PageHome Page

http://studentconduct.unc.edu

Student Conduct – Responsive Theme Based on Student Affairs Fixed Design

Desktop and Tablet View - Squishy

http://studentconduct.unc.edu

Student Conduct – Responsive Theme Based on Student Affairs Fixed Design

Mobile View

Challenges with Squishy Themes• Both the Carolina Union and Student Affairs

designs have home page features with different size rectangles. The different size boxes adapt at different rates, so the challenge is to pick the right box widths for the various pixel widths so they maintain the same heights.

• Design features such as wrapped corners don’t align perfectly at every pixel width, so only the max, tablet and mobile widths can be guaranteed a perfect alignment

• Multi-site themes such as the Student Affairs theme must adapt for various logos, variable main and secondary menu lengths, social icons, etc

Migrating to a Third Party Theme

http://studentaffairs.unc.edu (currently in dev site only)

Theme Migration from SA theme to Nevia – Home Page

Nevia Theme (from themeforest.net)

Student Affairs Theme

http://studentaffairs.unc.edu/students (currently in dev site only)

Nevia Theme

Student Affairs Theme

Theme Migration from SA theme to Nevia – Interior Page

http://studentaffairs.unc.edu (currently in dev site only)

Student Affairs Home - Nevia Theme

Fixed Responsive Design with common Squishy UNC Utility Bar

http://sait.unc.edu/resources/software-resources (currently in dev site only)

SAIT Interior - Nevia Theme

Fixed Responsive Design with common Squishy UNC Utility Bar

Common UNC Utility BarOriginal Fixed Bar

Responsive Bar

Re-use of Responsive UNC Utility Bar

Standalone UNC Barhttp://test.empire.ovcsa.unc.edu/uncbarSample UNC Bar in a custom PHP applicationhttp://chancellorsawards.unc.edu

Usage<link rel="stylesheet" href="/uncbar/unc-bar-adaptive.css" type="text/css"></link><?php include($docroot . ”/uncbar/unc-bar.php");?>

Hybriding theThird Party Theme• Identify common regions between the custom

theme and the third party theme• Add remaining regions to each theme to allow

switching between themes without losing region assignments for content

• Identify content that can only live in the custom theme and generate new content for third party theme

• Add jQuery to add styles needed for new icons• Add custom styles• Programmatically handle multi-site site layout

differences all in theme since sub-theming is not allowed

Development and Coding Practices

Common

Regions Common to Nevia and Student Affairs themes

; Nevia and Student Affairs Regions

regions[masthead_top] = Masthead Top - Commonregions[logo] = Logo - Commonregions[header] = Header - Neviaregions[social_icons] = Social Icons - SAregions[search] = Search - Commonregions[logo_secondary] = Logo Secondary - Commonregions[secondary_menu] = Secondary Menu - Commonregions[main_menu] = Main menu - Neviaregions[main_nav] = Main Menu - SA

regions[feature] = Feature - SAregions[feature_spacer] = Feature Spacer - SAregions[feature_left] = Feature Left - SAregions[feature_right] = Feature Right - SAregions[slider] = Slider - Nevia

regions[highlighted] = Highlighted - Commonregions[sidebar_first] = Left sidebar - Common

Regions[sidebar_second] = Right sidebar - Commonregions[content_top] = Content Top - SAregions[content] = Content - Commonregions[content_bottom] = Content Bottom - Commonregions[help] = Help - Commonregions[page_top] = Page Top - Commonregions[page_bottom] = Page Bottom - Commonregions[bottom_left] = Bottom Left - SAregions[bottom_center] = Bottom Center - SAregions[bottom_right] = Bottom Right - SAregions[home_admin_menus] = Home admin menus - Neviaregions[home_recent_work] = Home recent work - Neviaregions[home_recent_news] = Home recent news - Neviaregions[home_testimonial] = Home testimonial - Nevia

regions[footer] = Footer - Commonregions[footer_logo] = Footer Logo - Neviaregions[footer_first] = Footer first column - Commonregions[footer_second] = Footer second column - Commonregions[footer_third] = Footer third column - Commonregions[footer_fourth] = Footer fourth column - commonregions[footer_bottom] = Footer Bottom - SA

regions[breadcrumb] = Breadcrumb - Common Not Usedregions[alerts] = Alerts - SAregions[copyright] = Copyright - SAregions[bin] = Bin - SA

Sample PHP to Detect One or Two Logos in Header <?php if ($page['logo_secondary']): ?>

<?php if ($page['header'] || $page['search']): ?> <div class="five columns"> <div class="header-center"> <?php print render($page['header']); ?> <?php if ($page['search']): ?> <?php print render($page['search']); ?> <?php endif; ?> </div> </div> <?php endif; ?> <div class="five columns"> <div id="logo-secondary"> <?php print render($page['logo_secondary']); ?> </div> </div>

<?php if ($page['secondary_menu']): ?> <div id="secondary-menu" class="ten columns"> <div class="secondary-menu"> <?php print render($page['secondary_menu']); ?> </div> </div> <?php endif; ?>

</header> <!-- header

<?php else: // no secondary logo ?>

<?php if ($page['secondary_menu']): ?> <div id="secondary-menu" class="six columns"> <div class="secondary-menu"> <?php print render($page['secondary_menu']); ?> </div> </div> <?php endif; ?>

</header>

<?php endif; // if secondary logo ?>

Responsive Coding• <!DOCTYPE html> - for html5• iPhone requires <meta name="viewport"

content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

• Avoid fixed widths. Use percentages. For image, cache different size and use 100% width

• Floats always need widths• IE doesn’t support @media min-width and max-

Responsive Tools

• Chrome Inspect Element• Firefox and Safari Firebug• IE Developer Tools• jQuery Inspect Console• Other add-ons like Responsive,

Ruler• Modernizer (yep and nope pixel

widths must be accompanied by CSS)

• Adobe Edge Inspector http://html.adobe.com/edge/inspect/

Example Media Tags in CSS// iPhone for styles that work for portait and landscape@media screen and (max-width:500px) {

// iPhone portrait, Safari and Chrome@media screen and (max-width:460px) and (-webkit-min-device-pixel-ratio:0) {

// iPhone landscape, Safari and Chrome@media screen and (min-width: 461px) and (max-width:500px) and (-webkit-min-device-pixel-ratio:0) {

// media tags for style_union.css@media screen and (min-width: 501px) and (max-width: 600px) {@media screen and (min-width: 601px) and (max-width: 760px) {@media screen and (min-width: 761px) and (max-width: 960px) {@media screen and (min-width: 961px) and (max-width: 992px) {@media screen and (min-width: 993px) and (max-width: 1032px) {@media screen and (min-width: 1033px) and (max-width: 1087px) {@media screen and (min-width: 1088px) and (max-width: 1200px) {@media screen and (min-width: 1201px) and (max-width: 3000px) {

Example CSS for Safari and ChromeOnly IE is supported in Conditional Stylesheets so Safari and Chrome needs the media tag in the CSS file.

@media screen and (max-width:500px) and (-webkit-min-device-pixel-ratio:0) {

.secondary-menu { width: auto; font-size: 80%;}

.secondary-menu a { font-size: 80%;

color: #666666;text-transform: uppercase;text-decoration: none; font-weight: bold;height: 20px;

Sample Regular Expression in CSSUse regular expressions for style names that are dynamic, such as columnized containers created by jQuery

.main-nav-columns div[class^=listContainer] li {

background-color: #FFF;background-image: url(../images/bg-nav-

shadow.png); background-position: 0 13px;background-repeat: repeat-x;

Sample jQueryCarolina Union Front News

jQuery(function() { if(jQuery('.front-news').length > 0) {

jQuery('.front-news .view-content .views-row').each(function (index, domeEle) {var item = index + 1;

jQuery('.front-news .view-content .views-row-' + item + ' .views-field-field-image-news').after('<div class="news-teaser nteaser-' + item + '"></div>');

jQuery('.front-news .view-content .views-row-' + item + ' div.views-field-title').detach().appendTo('.nteaser-' + item);

jQuery('.front-news .view-content .views-row-' + item + ' div.views-field-body').detach().appendTo('.nteaser-' + item);

jQuery('.front-news .view-content .views-row-' + item + ' div.views-field-view-node').detach().appendTo('.nteaser-' + item);

jQuery('.front-news .view-content .views-row-' + item + ' .nteaser-' + item).after('<span class="wl-clear"></span>');

}); } // if .front-news

Sample jQueryConvert Old Icon CSS to Tags for

FontAwesomehttp://fortawesome.github.io/Font-Awesome/icons(function($) {

$(document).ready(function() {

$('.rssLink').addClass('rss'); $('li.print_html a').append('<span class="icon-print"> </span>'); $('li.print_html img').remove(); $('a.feed-icon').addClass('rss'); $('a.feed-icon img').replaceWith(" "); $('a.ical-icon').addClass('icon-calendar'); $('a.ical-icon img').replaceWith(" "); $('#header').append('<a class="search-icon" href="/search/node"></a>'); });

})(jQuery);

Override styles for icons as needed

span.icon-print { font-size: 16px; color: rgb(64, 64, 64); float: right; opacity: 0.5; transition: all 0.2s ease-in-out 0s;}

Development Methodologies• Developed a custom general purpose responsive base

theme sub-themed by the Student Affairs and Carolina Union themes

• Developed a clone site with common regions, modules, content types, views and blocks

• Use common meaningful naming conventions• Worked with professional designer• Worked with contractor for Drupal module expertise

with modules such as Adaptive Image support (AIS) and FlexSlider

• Developed skills for in-house theming for a scalable, lean and high performance solution

• Continuing to evolve (open to third party options)

Contact InformationDiana Woodhouse

woodhous@email.unc.edu

Barb Baranskibaranski@email.unc.edu

Visit http://sait.unc.edu/about-us/our-staff

2013 responsive design and theming

Education