HTML5, CSS3, jQuery, JSON, Responsive Design...

Adding to Domino Blog’s HTML Header

Michael Brown   July 15 2012 07:14:21 PM
Update - 18 July 2012
Since writing this article a few days ago, I discovered that my original Abusing the Description Tag method was both complicated and unnecessary.  It's much easier to simply add the necessary Viewport meta tag to the HTMLHead block tag, which is now shown as Method 2 below.  (I've left the original Method 2 there in strikethrough text.)


Responsive Design and Domino Blog

I'll soon be writing an article here about reconfiguring this blog for responsive design: basically, how to have the same web site that works equally well on desktops and mobile browsers by clever use of CSS.  The idea was partially inspired by Jake Howlett's CSS rewrite for Codestore.

As Jake points out, one of the first steps to take is to set the viewport meta tag inside your HTML Head tag.  This tells the browser not to display a full-size version of your site rather than one that's been resized so the entire thing fits in the current window, so making the text way too small to read on a mobile browser.  The two screen shots below show you the difference that this setting makes.  The first image is without the viewport meta tag set and the second is with the viewport meta tag set:

Mobile Safari without viewport setMobile Safari with viewport set

I know: the second version is hardly any more readable than the first, because the main content is now off the screen!  Don't worry, I'll fix that when I rewrite the CSS (see my next post).


Here's the HTML to set the viewport meta tag to display your site as shown in the second screen shot.  You need to add it to your HTML Head tag (replace the square brackets with angled ones):

[meta name="viewport" content="initial-scale=1.0,width=device-width" /]


But how to get this code into the Domino Blog template?  (By which, I mean the one that ships with Domino itself.)  The template offers no way that I could see to add arbitrary code to the HTML Head tag.  There are fields on the template's config doc that allow you set some meta tags (Author, Description etc) but Viewport isn't one of them.  You can, of course, modify the design of the template if you have Designer rights, but that may not always be practical if, for example your blog is hosted by an external provider, like mine.  In the end, I found a way to do it without modifying the template's design.  I'll show you how you might do it both ways.


Method 1 - Modifying the Template Design, an approach!

Here's how I would do it if I were modifying the template design.  (Note use of conditional tense here: I haven't actually tested this, but it should work!)

You need to edit the DXLiveContentEngine LotusScript library and find the genMetaData() function.  This is the function that generates the "meta" tags from whatever you've entered in the equivalent fields on your config doc.  If I was going the Designer route, I'd want to modify the config doc's form (form name = "CONFIG") to add a general "Extra HTML Header Info" field to it.  I'd then modify the genMetaData() function to pull that info off the config doc and shove that HTML into the header.  It would be up to the user to ensure that the HTML is correct, of course, and they can really stuff up the site if it's not!  So, I'd put an appropriate "here be dragons" warning on the new field's label.

A safer approach might be to add a checkbox field, called say SetViewPortToDeviceSize, to the CONFIG form.  This would have a single, checkable value of "Set Viewport to display size?".  You would then need to add a few lines to the genMetaData() function like so:
rText=rText+""+Chr(10)
if configdoc.SetViewPortToDeviceSize(0) <> "" then
rText = rText & | [meta name="viewport" content="initial-scale=1.0,width=device-width" /] |    
end if

genMetaData=rText
End Function

The new lines are shown in bold, and yet again, you need to replace the square brackets with angled ones.  Reminder: this is untested code but it should work.


Method 2 - Abusing the Description Tag

And here's how I actually
did it, without changing the template's design.  You need to open your blog's configuration doc (under Advanced settings) and find the Meta tag fields, as show below:
(image removed)

You need to enter something in the Meta Data Author field - like maybe your name! - and then paste the code below into the Meta Data Description field (again, replacing the square brackets with angled ones and also replacing the "Mike's blog!" text with whatever you want your actual
description to be):

Mike's blog!" name="description"][meta name="viewport" content="initial-scale=1.0,width=device-width" /][meta content="whatever


It's a bodge, of course.  It works by forcing early closure of the Description meta tag and then inserting the Viewport meta tag afterwards.  Finally, we close off the system-generated HTML with another bodge, which leaves us with an unwanted "Whatever" tag, but the browser will ignore this.




Method 2 - Add to $HTMLTop Document

Open Advanced->HTML Templates->Block Templates and edit the one called HTMLTop.  You need to edit it so that it looks something like this (again, replacing the square brackets with angled ones):

[!DOCTYPE html]
[head]
 [title][$DXTitle$][/title]
 [meta name="viewport" content="initial-scale=1.0,width=device-width" /]
[/head]


You then need to edit the relevant page templates (under Advanced->HTML Templates->Page Templates) and ensure that the code below is the second item in the code.  (The first item should be your doctype declaration.)

[$DXTemplateBlock Name="HTMLTop"$]


(Again, remember to replace the square brackets with angled ones.)  You should find that the HTMLTop item is already included the main Page Templates by default, but best to check, just in case it was removed at some point.  Page Templates to check are: Archive, Document, Home Page, Inline Comments Document and Search Results.  So, all of them, in fact!

Here's how the HTML header now looks in Firefox:

Viewport header HTML in Firefox

Sorted!

Now to rewrite the CSS so that the content is actually were you can read it on a mobile browser!  Watch this space...
Comments
No Comments Found

About