2013 responsive design and theming
TRANSCRIPT
![Page 1: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/1.jpg)
UNC CAUSE 2013Responsive Design and
Theming
by: Diana WoodhouseStudent Affairs IT - UNC Chapel Hill
![Page 2: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/2.jpg)
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.
![Page 3: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/3.jpg)
Custom Design
![Page 4: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/4.jpg)
http://riversagency.com/carolinaunionapproved
Home Page - DesignCarolina Union Website
![Page 5: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/5.jpg)
http://carolinaunion.unc.edu
Desktop and Tablet View - SquishyProduction – Carolina Union Home Page
![Page 6: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/6.jpg)
http://carolinaunion.unc.edu
Production – Carolina Union Home PageMobile View
![Page 7: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/7.jpg)
http://riversagency.com/carolinaunionapproved
Policies & Documents - DesignCarolina Union Website
![Page 8: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/8.jpg)
http://carolinaunion.unc.edu/meetings-events/policies-documents
Desktop and Tablet - SquishyProduction - Carolina Union Policies & Documents Page
![Page 9: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/9.jpg)
Production – Carolina Union Policies & Documents PageMobile View
http://carolinaunion.unc.edu/meetings-events/policies-documents
![Page 10: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/10.jpg)
http://riversagency.com/carolinaunionapproved
Our Work - DesignCarolina Union Website
![Page 11: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/11.jpg)
http://carolinaunion.unc.edu/depts-services/marketing-design/our-work
Desktop and Tablet - SquishyProduction – Carolina Union Our Work Page
![Page 12: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/12.jpg)
http://carolinaunion.unc.edu/depts-services/marketing-design/our-work
Mobile ViewProduction – Carolina Union Our Work Page
![Page 13: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/13.jpg)
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.
![Page 14: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/14.jpg)
Converting an Existing Design
![Page 15: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/15.jpg)
http://studentaffairs.unc.edu
Student Affairs – Fixed Design
Interior PageHome Page
![Page 16: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/16.jpg)
http://studentconduct.unc.edu
Student Conduct – Responsive Theme Based on Student Affairs Fixed Design
Desktop and Tablet View - Squishy
![Page 17: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/17.jpg)
http://studentconduct.unc.edu
Student Conduct – Responsive Theme Based on Student Affairs Fixed Design
Mobile View
![Page 18: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/18.jpg)
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
![Page 19: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/19.jpg)
Migrating to a Third Party Theme
![Page 20: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/20.jpg)
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
![Page 21: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/21.jpg)
http://studentaffairs.unc.edu/students (currently in dev site only)
Nevia Theme
Student Affairs Theme
Theme Migration from SA theme to Nevia – Interior Page
![Page 22: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/22.jpg)
http://studentaffairs.unc.edu (currently in dev site only)
Student Affairs Home - Nevia Theme
Fixed Responsive Design with common Squishy UNC Utility Bar
![Page 23: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/23.jpg)
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
![Page 24: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/24.jpg)
Common UNC Utility BarOriginal Fixed Bar
Responsive Bar
![Page 25: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/25.jpg)
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><!--[if lt IE 9]><link rel="stylesheet" href="/uncbar/ie-unc-bar-adaptive.css" type="text/css"></link><![endif]--><?php include($docroot . ”/uncbar/unc-bar.php");?>
![Page 26: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/26.jpg)
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
![Page 27: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/27.jpg)
Development and Coding Practices
![Page 28: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/28.jpg)
![Page 29: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/29.jpg)
Small
Wide
Common
![Page 30: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/30.jpg)
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
![Page 31: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/31.jpg)
Sample PHP to Detect One or Two Logos in Header <?php if ($page['logo_secondary']): ?>
<header id="header" class="two-logos"> <div class="six columns"> <?php if ($page['logo']): ?> <div id="logo-custom"> <?php print render($page['logo']); ?> </div> <?php endif; ?> </div>
<?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 ?>
<header id="header" class="one-logo”> <div class="ten columns"> <?php if ($page['logo']): ?> <div id="logo-custom"> <?php print render($page['logo']); ?> </div> <?php endif; ?> </div>
<div class="six columns"> <?php if ($page['header'] || $page['search']): ?> <?php print render($page['header']); ?> <?php if ($page['search']): ?> <?php print render($page['search']); ?> <?php endif; ?> <?php endif; ?> </div>
<?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 ?>
![Page 32: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/32.jpg)
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-
width
![Page 33: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/33.jpg)
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/
![Page 34: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/34.jpg)
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) {
![Page 35: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/35.jpg)
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;
}}
![Page 36: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/36.jpg)
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;
}
![Page 37: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/37.jpg)
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
});
![Page 38: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/38.jpg)
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;}
![Page 39: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/39.jpg)
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)
![Page 40: 2013 responsive design and theming](https://reader036.vdocument.in/reader036/viewer/2022070315/5555c8e0d8b42a711f8b4633/html5/thumbnails/40.jpg)
Contact InformationDiana Woodhouse
Barb [email protected]
Visit http://sait.unc.edu/about-us/our-staff