- Add header meta tags.
- Break down columns to single column.
- Set max-width of 100% for images and form inputs.
- Fitvids for fluid width video embeds.
- Responsive main menu and page tabs, preferably with Responsive Menus. More ideas here. For Drupal 6, use this and use CSS to make sure all nested links are displayed and indented.
- Responsive image maps.
- Respond.js for IE8 support of media queries. For D6, use HTML below in
<head>. - Minify HTML.
- Compress as much as possible with Advanced CSS/JS Aggregation.
Last active
December 2, 2015 16:03
-
-
Save joelstein/d77cc18f1f204010f559 to your computer and use it in GitHub Desktop.
Checklist for converting existing design to responsive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Prevent images from expanding beyond viewport on mobile */ | |
| @media (max-width: 767px) { | |
| img, media { | |
| max-width: 100%; | |
| height: auto !important; | |
| } | |
| } | |
| /* Form inputs */ | |
| input, select, textarea { | |
| max-width: 100%; | |
| } | |
| /* Hide Toolbar, Admin Menu, Contextual Links, and Textarea Grippies on mobile */ | |
| @media (max-width: 767px) { | |
| #toolbar, #admin-menu, html.js .contextual-links-wrapper, .resizable-textarea .grippie { | |
| display: none; | |
| } | |
| html body.toolbar, html body.admin-menu { | |
| padding-top: 0 !important; | |
| margin-top: 0 !important; | |
| } | |
| } | |
| /* Hide Block Edit links. */ | |
| @media (max-width: 767px) { | |
| .block-edit-link { | |
| display: none !important; | |
| } | |
| } | |
| /* Collapse Display Suite groups on mobile */ | |
| @media (max-width: 767px) { | |
| .ds-2col > .group-left, | |
| .ds-2col > .group-right { | |
| float: none; | |
| width: auto; | |
| margin-bottom: 1em; | |
| } | |
| } | |
| /* D6 calendar month */ | |
| @media (max-width: 767px) { | |
| .calendar-calendar .month-view table { | |
| position: relative; | |
| } | |
| .calendar-calendar .month-view tr td { | |
| width: 100%; | |
| float: left; | |
| text-align: left; | |
| border: none; | |
| border-bottom: 1px solid #ccc | |
| } | |
| .calendar-calendar .month-view thead tr, | |
| .calendar-calendar .month-view tr td.empty, | |
| .calendar-calendar .month-view tr td.has-no-events { | |
| display: none; | |
| } | |
| } | |
| /* Helper classes to target mobile */ | |
| .mobile-hide { | |
| display: none; | |
| } | |
| @media (min-width: 768px) { | |
| .mobile-only { | |
| display: none; | |
| } | |
| .mobile-hide { | |
| display: block; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <!-- Respond.js for IE8 support of media queries --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| </head> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(document).ready(function($) { | |
| // Clone menu on mobile. | |
| if ($(window).width() < 768) { | |
| $('#nice-menu-1').clone().insertAfter('#nice-menu-1').attr({id: 'responsive-nav-1', class: 'nav-collapse'}); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * D7 - Overrides template_preprocess_html(). | |
| */ | |
| function MYTHEME_preprocess_html(&$variables, $hook) { | |
| // Add mobile meta tags. | |
| drupal_add_html_head(array( | |
| '#tag' => 'meta', | |
| '#attributes' => array( | |
| 'name' => 'viewport', | |
| 'content' => 'width=device-width, initial-scale=1', | |
| ), | |
| ), 'steindom_viewport'); | |
| drupal_add_html_head(array( | |
| '#tag' => 'meta', | |
| '#attributes' => array( | |
| 'http-equiv' => 'X-UA-Compatible', | |
| 'content' => 'IE=edge', | |
| ), | |
| ), 'steindom_ie_edge'); | |
| } | |
| /** | |
| * D6 - Overrides template_preprocess_page(). | |
| */ | |
| function MYTHEME_preprocess_page(&$variables) { | |
| // Add mobile meta tags. | |
| $variables['head'] = drupal_set_html_head('<meta name="viewport" content="width=device-width, initial-scale=1" />'); | |
| $variables['head'] = drupal_set_html_head('<meta http-equiv="X-UA-Compatible" content="IE=edge" />'); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment