Drupal Web Design 

Delaware Web Design & Drupal eCommerce Websites

Does your website display on all mobile devices correctly?

Optimizing Drupal for Mobile Devices with CSS

Optimizing Drupal Websites for Mobile Devices, iPhones & iPads with CSS

 

Tutorial on optimizing Drupal websites for all mobile devices, iPhones and iPads with CSS and making themes Responsive. This includes all iPhones 4 through iPhone 6 Plus in both landscape and portrait views. It is best implemented on Drupal themes that are not 100% mobile device friendly and or, you have created custom themes, regions within your theme or, added custom blocks that to not quite display as you would like them to on all mobile devices and in both portrait and landscape modes.

 

This CSS tutorial is geared towards moderate to advanced Drupal themers and CSS editors. You should have a good knowledge of Drupal and a good vocabulary of CSS to take advantage of this tutorial.

*Note: These techniques can be used on other CMS's and static websites but, you will have to put the code that links your CSS file (<link media="only screen and... ) in between the <head> and </head> section of your pages.

Making themes Responsive using CSS by targeting each device specific screen size, and aspect ratios individually!

Enjoy and have fun!

In this tutorial we will be focusing on the following:

  1. Creating a mobile.css file.
  2. Linking the mobile.css file to your html.tpl.php file.
  3. Editing CSS off site and saving edits to your production site.

 

Creating a Mobile Devices Specific CSS File

 

  1. The first thing is to create an assets directory in you Drupal files folder. Simply create an empty folder named "assets" within your drupal sites files directory. Example: sites\YOURSITE.COM\files
  2. Create a new plain text .css file with a text editor like Notepad or, I prefer Notepad++ and name it: mobile.css
  3. Copy and paste the following into the mobile.css file:

/* iPhone 4 portrait */
@media screen and (device-aspect-ratio: 2/3) and (orientation : portrait) {
/* styles */
}

/* iPhone 4 landscape */
@media screen and (device-aspect-ratio: 3/2) and (orientation : landscape) {
/* styles */
}

/* iPhone 5 portrait */
@media screen and (device-aspect-ratio: 40/71) and (orientation : portrait) {
/* styles */
}

/* iPhone 5 landscape */
@media screen and (device-aspect-ratio: 71/40) and (orientation : landscape) {
/* styles */
}

/* iPhone 6 portrait */
@media screen and (device-aspect-ratio: 375/667) and (orientation : portrait) {
/* styles */
}

/* iPhone 6 landscape */
@media screen and (device-aspect-ratio: 667/375) and (orientation : landscape) {
/* styles */
}

/* iPhone 6 Plus portrait */
@media screen and (device-aspect-ratio: 9/16) and (orientation : portrait) {
/* styles */
}

/* iPhone 6 Plus landscape) */
@media screen and (device-aspect-ratio: 16/9) and (orientation : landscape) {
/* styles */
}

/* All - CSS to effect all devices 4-6 Plus in both portrait and landscape orientation */
/* styles */

 

Linking your mobile.css File to your Drupal Theme

 

  1. Open your themes html.tpl.php file in a plain text editor. You will most likely find it in: sites\all\themes\YOURTHEME\templates\html.tpl.php
  2. Add this group of CSS links to the head of you themes html.tpl.php file directly under: <?php print $styles; ?>
  3. Go to your site and flush all caches.

Note: Change "YOURTHEME" to your themes name and make any changes to the path as deemed necessary.

<link media="only screen and (device-aspect-ratio: 2/3)" href="/sites/MYSITE.com/files/assets/mobile.css" rel="stylesheet" type="text/css" />
<link media="only screen and (device-aspect-ratio: 3/2)" href="/sites/MYSITE.com/files/assets/mobile.css" rel="stylesheet" type="text/css" />
<link media="only screen and (device-aspect-ratio: 40/71)" href="/sites/MYSITE.com/files/assets/mobile.css" rel="stylesheet" type="text/css" />
<link media="only screen and (device-aspect-ratio: 71/40)" href="/sites/MYSITE.com/files/assets/mobile.css" rel="stylesheet" type="text/css" />
<link media="only screen and (device-aspect-ratio: 375/667)" href="/sites/MYSITE.com/files/assets/mobile.css" rel="stylesheet" type="text/css" />
<link media="only screen and (device-aspect-ratio: 667/375)" href="/sites/MYSITE.com/files/assets/mobile.css" rel="stylesheet" type="text/css" />
<link media="only screen and (device-aspect-ratio: 9/16)" href="/sites/MYSITE.com/files/assets/mobile.css" rel="stylesheet" type="text/css" />
<link media="only screen and (device-aspect-ratio: 16/9)" href="/sites/MYSITE.com/files/assets/mobile.css" rel="stylesheet" type="text/css" />

Note: Change "MYSITE.com" to your domain name and make any changes to the path as deemed necessary.

 

The Google chrole Code Inspector
The Google Chrome Code Inspector

 

Editing your CSS file with Google Chrome Inspector (Ctrl+ Shift+ I)

 

  1. Open your site with the Google Chrome browser and either right click over an area that you want to inspect and hit "Inspector" or, with key strokes Ctrl+ Shift+ I.
  2. Click the Toggle device mode icon on the upper left or, use key strokes (Ctrl + Shift + M).
  3. Refresh the browser (Ctrl + R).
  4. You can right click over any area that you want to inspect and hit "Inspector" of your site to see the CSS that rules it. It may take a little digging around to find exactly what you are looking for.
  5. You can make test adjustment by double clicking on the HTML code in the left panel or, single clicking on the CSS rule, property or, value in the right side panel.
  6. After making some satisfactory changes to your CSS, you can either copy the rules individually and apply them to your CSS files or, go into the sources area and select all, copy and past the whole thing into your CSS files.

 

Tip: I like to start with iPhone 4 in portrait mode, do a bunch of edits and then copy the whole mobile.css (and any edits to my other CSS files) file over to my test site and then flush the CSS and JavaScript cache then, refresh the page to make sure I have not missed anything. I usually have some more editing to do before moving on to iPhone in landscape mode and do it all over again.

Note: Tracing dow and correctly adjusting the elements in your pages can take a lot of time and you may need to Google search for solutions for your particular problems but, the final results will keep you from loosing the masses of mobile users. One site that I like for CSS tips and tricks is: CSS Tricks.

 

The Google Chrome CSS Source Window
The Google Chrome CSS Source Window

 

Saving your Test Edits and Applying them to your Live Site.

 

Once you are satisfied with all the editing of All mobile devices in the Chrome Inspector, from iPad to iPhone 4 through iPhone 6 plus in both, portrait and landscape modes, you can upload you assets folder and html.tpl.php file to their proper directories.

  1. The assets folder should be uploaded to your files directory. Example: sites\YOURSITE.COM\files
  2. the html.tpl.php file should be uploaded to... Example: sites\all\themes\YOURTHEME\templates\html.tpl.php
  3. Go to your live site and clear all caches and go into the Chrome Inspector mode to review your edits.

 

Note: Google recommends that you should always double check your edits on all the different mobile devices as you can to verify that your CSS rules are implemented correctly.

 

Call me anytime if you have any questions and...
Have fun! (302) 934-6994 | Email

Ralph Manis - Infinitee Drupal Web Design