Responsive Content

Some web pages have sections with Responsive Content coding. This is because some content is not going to understood went viewed on the inappropriate device. For example, a piece of coding is not going to display well on a mobile phone.

Text seen only on a Desktop

Text seen only on a Phone

Text seen only on a Tablet

A page where I am trying this is my page on displaying HTML from an iOS bookmark. Here I had a scrollable <PRE> element that was showing the contents of a JavaScript function that I did not want to break the lines.

The function display_html_in_new_window()

<script>
function display_html_in_new_window(){
var a=window.open('about:blank').document;
a.write('<!DOCTYPE html><html><head><title>Source of '+location.href+'</title><meta name="viewport" content="width=device-width" /></head><body></html>'); 
a.close();
var b=a.body.appendChild(a.createElement('pre'));
b.style.overflow='auto'; 
b.style.whiteSpace='pre-wrap';
b.appendChild(a.createTextNode(document.documentElement.innerHTML));
}
</script>

Note that the function is not the same as the text used for the iOS bookmark.

Top

Hiding complete sections

In addition to adding shims to links to prevent users leaving without looking any further on the website the whole links section can be hidden for some mobile pages. If the visitor is using a mobile phone to do a quick look-up they are far more likely to leave if they find one and also get annoyed when they are prevented in doing so.

External links

In many cases where the page is best viewed on a desktop computer or laptop the external links, or the fact that I do have them, is more for my own reference. In the case of Wikipedia links and historical research my shim coding will allow the URL and/or the source to be displayed in a pop-up (as well as in the regular link).

I am trying this out on this page and maybe some others and may put it on my working templates. The Lovejoy, log splitter and tortoise stove pages are good candidates for this. Although, I have removed links on all renderings on the last two.

ALL links are hidden on Home page in "mobile" mode.

Responsive Content

Links