Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Alternate resources: 

Adding the Viewport Meta Tag to html.tpl.php

Video loading...

  • 0:01
    Getting Started with Responsive Web Design in Drupal
  • 0:03
    Adding the Viewport Meta Tag to html.tpl.php
  • 0:05
    with Amber Himes Matz
  • 0:09
    Although we've done some great work converting our fixed width layout
  • 0:13
    and text into relative units, our work
  • 0:16
    isn't going to pay off for our mobile users
  • 0:18
    until we add a viewport meta tag to the head of our HTML template.
  • 0:23
    We need to let our browser know that we want the viewport size
  • 0:27
    to be the viewport size of the device, not some other larger
  • 0:30
    resolution that will render our flexible scaling
  • 0:34
    implementation pretty much useless.
  • 0:36
    In this lesson, we'll give our fluid layout
  • 0:39
    a test drive in Chrome's Mobile Emulator.
  • 0:42
    Now with a firm grasp of the problem,
  • 0:44
    we'll work on solving it by first adding an HTML template
  • 0:48
    file to our responsive robots theme, and then by adding a viewport meta
  • 0:52
    tag to the head of our HTML template file.
  • 0:56
    With this critical element in place, our flexible layout can now shine.
  • 1:00
    And yep, new problems can readily be identified.
  • 1:03
    Stick with me.
  • 1:04
    Our groundwork is in place, and now we're ready to see our first payoff
  • 1:08
    with the addition of a viewport meta tag.
  • 1:13
    Now, we've already added some flexible and fluid elements
  • 1:16
    to our website, but this is only really going to impact still
  • 1:21
    the desktop viewing experience, or a widescreen viewing experience.
  • 1:26
    It's really not going to trickle down and positively affect
  • 1:30
    the mobile viewing experience yet.
  • 1:33
    And there's a few things that we need to add, remove, rearrange,
  • 1:37
    in order to make our design experience implementing
  • 1:41
    responsive design more successful.
  • 1:44
    So the first thing I want to do is inspect this page in Chrome.
  • 1:48
    So I'm going to Control, Click and select Inspect Element.
  • 1:54
    I'm going to press this Toggle Emulation
  • 1:57
    button, which is this little phone icon.
  • 2:01
    Then, in the very bottom pane, this lowest row
  • 2:04
    here, I'm going to drag this up so that I can see what's going on.
  • 2:08
    And I'm going to select an Apple iPhone 5.
  • 2:12
    And it shows me a resolution of 320 by 568.
  • 2:17
    So I'm going to click this middle button
  • 2:18
    to switch that around to landscape mode.
  • 2:21
    And as you can see, I have to pan around to actually
  • 2:27
    be able to view the contents of this page
  • 2:30
    Even though we added all of these percentages to our columns,
  • 2:35
    and you might expect that, well, this is only 568 pixels wide.
  • 2:41
    How come things aren't resizing appropriately?
  • 2:44
    We have everything in percentages, right?
  • 2:47
    Well, it's because we're missing this critical element
  • 2:50
    called a viewport meta tag.
  • 2:53
    A viewport tag is going to determine the actual size of the canvas
  • 2:58
    that we're looking at.
  • 2:59
    And right now, this canvas size is a lot bigger than 568 pixels.
  • 3:06
    It's really more like 980 pixels.
  • 3:10
    So since this device thinks that the page is actually 980 pixels wide,
  • 3:16
    it really is honoring all of the declarations
  • 3:19
    that we made, percentage-based-wise, but it's really not
  • 3:23
    squishing any of our content into the viewport.
  • 3:27
    And what we want ultimately is for our content
  • 3:31
    to be viewable and accessible without any horizontal scrolling
  • 3:36
    in any kind of device.
  • 3:38
    So the first thing that we want to do
  • 3:40
    is add this meta viewport tag to the head of our HTML pages.
  • 3:46
    And for that, we're going to need an HTML template file.
  • 3:51
    Let's head over to Finder.
  • 3:53
    And if I look in my theme, which is in Sites, All, Themes, Responsive
  • 3:59
    Robots, I've got a page TPL, a node article TPL, a node TPL, a block
  • 4:06
    TPL, but I don't have an HTML template file.
  • 4:11
    Why this is important is because if I take a look at my page template
  • 4:15
    file, I get dropped into the middle of the HTML file.
  • 4:20
    I don't have a starting HTML tag here,
  • 4:24
    and I don't have a head tag or any of that.
  • 4:26
    So what I need is the HTML template file,
  • 4:30
    so that I have access to that markup that appears
  • 4:34
    in the head section of the HTML document.
  • 4:37
    So we can find this, a default HTML template file,
  • 4:41
    in the Drupal core files.
  • 4:46
    So I'm headed back to the root of my Drupal install.
  • 4:49
    And if I navigate to Modules and then System--
  • 4:55
    you can see here that I've already expanded it,
  • 4:57
    but I'm just going to go into System-- here
  • 5:00
    is our HTML template file, html.tpl.php.
  • 5:05
    I'm going to copy this, and then I'm going to navigate back to my theme,
  • 5:09
    which is in Sites, All, Themes, Responsive Robots.
  • 5:16
    And I'm going to paste that item into there.
  • 5:20
    So now, we have a default HTML template file.
  • 5:24
    So I'm going to open that up in Sublime.
  • 5:28
    And here's our doc type, and here's our HTML, opening tag.
  • 5:32
    Here is our head tag.
  • 5:34
    And I'm just going to drop in this meta viewport tag
  • 5:38
    just below the title tag.
  • 5:41
    So what we have here is meta.name="viewport."
  • 5:45
    The content="initial-scale=1.0.
  • 5:51
    And this initial scale property, it's
  • 5:54
    going to set the zoom level of the page
  • 5:56
    to 1.0, which actually means 100%.
  • 6:00
    And this helps us make the viewing experience consistent,
  • 6:04
    regardless of which device you're looking at the page on.
  • 6:08
    Next, we have the width.
  • 6:10
    And we could set this to a static width of, for example, 320 pixels
  • 6:15
    wide.
  • 6:17
    But as you know, there are so many devices out there.
  • 6:20
    Why would we want to pick an arbitrary number,
  • 6:24
    just picking one maybe popular device,
  • 6:28
    and limiting ourselves to that device
  • 6:30
    and perhaps causing the viewing experience to be odd and not
  • 6:35
    consistent if people using our page were looking on it
  • 6:39
    on a device that was slightly different?
  • 6:42
    So what we're going to do is just put "device-width"
  • 6:47
    as our width value.
  • 6:49
    And this will let the browser detect the device width,
  • 6:54
    and we don't have to actually know the device width.
  • 6:57
    So I've drop that into my HTML template file.
  • 7:01
    I'm going to save this page.
  • 7:03
    And now, since I've added a new template file to the system,
  • 7:09
    I need to clear the Drupal cache.
  • 7:11
    So I'm in Terminal, and I'm in my site.
  • 7:15
    I'm going to use "drush," and type in "drush cc all."
  • 7:19
    Now, we've cleared our Drupal cache.
  • 7:20
    Our new template file should load.
  • 7:22
    I'm going to head back over to Chrome.
  • 7:25
    And I'm going to refresh the page by pressing
  • 7:28
    Command and R to refresh the page.
  • 7:32
    Now, we have a smaller device width.
  • 7:36
    We actually have the device width being set to this 568.
  • 7:41
    And we still have horizontal scrolling happening, because
  • 7:46
    of our giant image right here, which is breaking our page,
  • 7:50
    which is why we'll devote some time to making our images responsive.
  • 7:56
    Right now, we have a static huge width set in our image styles,
  • 8:00
    which is why this page is breaking.
  • 8:02
    But notice the content columns.
  • 8:05
    Now, these content columns are respecting the percentages
  • 8:09
    that we set up in our 960.css.
  • 8:12
    So instead of static pixel-based widths, we've got the percentages.
  • 8:16
    And it's doing a percent of this device width,
  • 8:19
    which, for this device, is 568 pixels.
  • 8:22
    So we've made some improvements here.
  • 8:24
    That's the impact of adding that meta viewport tag.
  • 8:29
    But we still have some odd things going on here.
  • 8:32
    Our title tag and our slogan, our logo and navigation,
  • 8:36
    they've all been taken out of the natural flow of the document,
  • 8:40
    using absolute and relative positioning.
  • 8:43
    So we want to put these elements back into the natural flow,
  • 8:46
    so that they will scoot around each other and honor each other's space.
  • 8:49
    Right now, there's no space honoring going on.
  • 8:52
    Everything is just overlapping and being quite rude about it.
  • 8:56
    So we want to rearrange some things.
  • 8:57
    And so in the next lesson, we'll look at putting the navigation back
  • 9:01
    into the natural flow, removing any absolute and relative positioning,
  • 9:06
    and any static height declaration, so that our heading
  • 9:10
    can be a little bit more responsive.
  • 9:13
    And we'll do that in the next lesson.

Adding the Viewport Meta Tag to html.tpl.php

Loading...

So far, we've adapted our layout to be flexible and fluid using relative units like percentages and ems, instead of absolute ones, like pixels. The problem is that smaller devices will often use resolutions much greater than the actual size of the screen size or viewport. So while our relative sizing is technically working, it's not going to be terribly useful or make our content more readable and accessible until we add an important tag to the head of our html template file: the viewport meta tag.

By adding the viewport meta tag to the head of our html template file, we're letting the browser know that we want the viewport size to be the size of the device, not some huge resolution more suitable for a 17" monitor, for example. This is a small but critical step in implementing a responsive design. Without it, our hard work of converting to relative units just isn't going to pay off.

In this lesson, you'll learn how to add a viewport meta tag to the head of all html pages using a special Drupal template file that we'll create. Then we'll step back and admire the results using our mobile emulation tools.

Downloads: 
Log in or sign up to download companion files.
Additional resources: