Embed Size (px)
Citation preview
UNC CAUSE 2013Responsive Design and
Theming
by: Diana WoodhouseStudent Affairs IT - UNC Chapel Hill
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
http://riversagency.com/carolinaunionapproved
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
http://riversagency.com/carolinaunionapproved
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><!--[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");?>
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
Small
Wide
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']): ?>
<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 ?>
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
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
Barb [email protected]
Visit http://sait.unc.edu/about-us/our-staff
![Responsive Design Fundamentals [Read-Only] - … Design Fundame… · Responsive Design Fundamentals Carolyn Yon, PMI-ACP Development Manager ... Responsive Design • web design](https://img.pdfslide.us/doc/110x75/5b7c060b7f8b9adb4c8df8c4/responsive-design-fundamentals-read-only-design-fundame-responsive-design.jpg)
