2013 responsive design and theming
Upcoming SlideShare
Loading in...5
×
 

2013 responsive design and theming

on

  • 215 views

 

Statistics

Views

Total Views
215
Views on SlideShare
215
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

2013 responsive design and theming 2013 responsive design and theming Presentation Transcript

  • UNC CAUSE 2013 Responsive Design and Theming by: Diana Woodhouse Student 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
  • Home Page - Design Carolina Union Website http://riversagency.com/carolinaunionapproved
  • Desktop and Tablet View - Squishy Production – Carolina Union Home Page http://carolinaunion.unc.edu
  • Mobile View Production – Carolina Union Home Page http://carolinaunion.unc.edu
  • Policies & Documents - Design Carolina Union Website http://riversagency.com/carolinaunionapproved
  • Desktop and Tablet - Squishy Production - Carolina Union Policies & Documents Page http://carolinaunion.unc.edu/meetings-events/policies-documents
  • Mobile View Production – Carolina Union Policies & Documents Page http://carolinaunion.unc.edu/meetings-events/policies-documents
  • Our Work - Design Carolina Union Website http://riversagency.com/carolinaunionapproved
  • Desktop and Tablet - Squishy Production – Carolina Union Our Work Page http://carolinaunion.unc.edu/depts-services/marketing-design/our-work
  • Mobile View Production – Carolina Union Our Work Page http://carolinaunion.unc.edu/depts-services/marketing-design/our-work
  • 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
  • Student Affairs – Fixed Design http://studentaffairs.unc.edu Home Page Interior Page
  • 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 http://studentconduct.unc.edu
  • 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
  • Theme Migration from SA theme to Nevia – Home Page Student Affairs Theme Nevia Theme (from themeforest.net) http://studentaffairs.unc.edu (currently in dev site only)
  • Theme Migration from SA theme to Nevia – Interior Page Student Affairs Theme Nevia Theme http://studentaffairs.unc.edu/students (currently in dev site only)
  • Student Affairs Home - Nevia Theme http://studentaffairs.unc.edu (currently in dev site only) Fixed Responsive Design with common Squishy UNC Utility Bar
  • SAIT Interior - Nevia Theme http://sait.unc.edu/resources/software-resources (currently in dev site only) Fixed Responsive Design with common Squishy UNC Utility Bar
  • Common UNC Utility Bar Original Fixed Bar Responsive Bar
  • Re-use of Responsive UNC Utility Bar Standalone UNC Bar http://test.empire.ovcsa.unc.edu/uncbar Sample UNC Bar in a custom PHP application http://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 - Common regions[logo] = Logo - Common regions[header] = Header - Nevia regions[social_icons] = Social Icons - SA regions[search] = Search - Common regions[logo_secondary] = Logo Secondary - Common regions[secondary_menu] = Secondary Menu - Common regions[main_menu] = Main menu - Nevia regions[main_nav] = Main Menu - SA regions[feature] = Feature - SA regions[feature_spacer] = Feature Spacer - SA regions[feature_left] = Feature Left - SA regions[feature_right] = Feature Right - SA regions[slider] = Slider - Nevia regions[highlighted] = Highlighted - Common regions[sidebar_first] = Left sidebar - Common Regions[sidebar_second] = Right sidebar - Common regions[content_top] = Content Top - SA regions[content] = Content - Common regions[content_bottom] = Content Bottom - Common regions[help] = Help - Common regions[page_top] = Page Top - Common regions[page_bottom] = Page Bottom - Common regions[bottom_left] = Bottom Left - SA regions[bottom_center] = Bottom Center - SA regions[bottom_right] = Bottom Right - SA regions[home_admin_menus] = Home admin menus - Nevia regions[home_recent_work] = Home recent work - Nevia regions[home_recent_news] = Home recent news - Nevia regions[home_testimonial] = Home testimonial - Nevia regions[footer] = Footer - Common regions[footer_logo] = Footer Logo - Nevia regions[footer_first] = Footer first column - Common regions[footer_second] = Footer second column - Common regions[footer_third] = Footer third column - Common regions[footer_fourth] = Footer fourth column - common regions[footer_bottom] = Footer Bottom - SA regions[breadcrumb] = Breadcrumb - Common Not Used regions[alerts] = Alerts - SA regions[copyright] = Copyright - SA regions[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 (-webkitmin-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 Chrome Only 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 CSS Use 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 jQuery Carolina 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 jQuery Convert 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">&nbsp;</span>'); $('li.print_html img').remove(); $('a.feed-icon').addClass('rss'); $('a.feed-icon img').replaceWith("&nbsp;"); $('a.ical-icon').addClass('icon-calendar'); $('a.ical-icon img').replaceWith("&nbsp;"); $('#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 subthemed 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 Information Diana Woodhouse woodhous@email.unc.edu Barb Baranski baranski@email.unc.edu Visit http://sait.unc.edu/about-us/our-staff