Home Uniquely NZ Travel Howto Pauline Small Firms Search
Next Generation Site Layout
Media Queries replaces Responsive Reload

First Examples of the new approach in use for a Travel page.

This is a working development and test page as well as being documentation and has future templates for pages in the following examples.

Map Yokohama, Japan Aomori, Japan Sapporo, Japan Kodiak, Alaska Anchorage Juneau Vancouver Skagway Icy Strait Point Sitka Ketchikan Victoria
Map



Before you leave

I would be very pleased if visitors could spare a little time to give us some feedback - it is the only way we know who has visited the site, if it is useful and how we should develop it's content and the techniques used. I would be delighted if you could send comments or just let me know you have visited by sending a quick Message.

Introduction

The existence of widespread use of tables blocks of pictures and menus has dominated the responsive mechanisms for our site. The existing site uses tables to lay out our blocks of pictures and menus and the number of columns responds to the width of the site. If the width varies over a set boundaries corresponding to a need to increase or decrease the number of columns the page is reloaded. This works reasonably well or fixed orientation devices as the widths of the window is not commonly changed and many browsers maintain the page position if the correct reloading technique is used. It fares less well on devices where the orientation is commonly changed especially using some browsers where the page returns to the top or entry point which is disturbing especially if the orientation change was a temporary mistake.

To summarise: The current responsive behavior depends total on an event driven mechanism which monitors and detects significant changes in width or orientation and automatically reloads pages regardless of their actual content. Parts of the content of every page are written on-the-fly during loading or reloading providing the responsive behavior. The majority of the layout is determined by tables which are written or modified on-the-fly including headers, footers and picture blocks.

There is now a viable alternative as most browsers in use support a mechanism called Media Queries which allows different .css styles to be used depending on 'Queries' as to the Screen Width, Orientation and many other device attributes. I did not use it as the initial support was far from universal when I set up the existing event driven responsive design but time has passed and all reasonably modern browsers support Media Queries certainly in the basic form I require. It was first introduced in CSS2 standard and fully implemented in CSS3. It looks as if it is fine on all generations of iPhones and iPads as suggested values are available at stephen.io/mediaqueries for all devices. Android devices have automatic updating to the latest values of browsers where recent versions of Opera, Chrome and Firefox have full support and most other browsers from the device manufacturers are bases on the same rendering engines. Internet Explorer seems to have support from version 9 which rules out Windows XP based systems (no longer supported but still in use) however if the 'base' CSS (before any media queries take effect) my site will be usable on most Windows XP machines with a horizontal screen resolution of greater than 800. The original HTML limits the width used to 960 for use on half width of a 1920 x 1080 full HD screen and the picture blocks are good down to 768 wide before any existing response cuts in.

So we now need to change picture blocks from a tabular layout to have 'free flowing' images in a frame which varies in size at various breakpoints set using Media Queries. The existing breakpoints are set at 550 and 720 for two, three and four columns with an additional change in Icon width at 358. The new Media Queries breakpoints are currentlyy at 380, 560 and 760 .

So the mechanism I have set in place for picture blocks is first an outer 'frame' as a CSS styled div <div class="picFrame"> containing a set of further divs ( <div class="pic"> ) which are styled to be inline-blocks so they flow like text and thus provide an inner 'frame' in which the small clickable images (refered to here as Icons) are centred horizontally and vertically. The images themselves are written on-the-fly when the page is loaded by a <script> so can not be changed but are styled so the size is set by their class ( class="vIconWidth" or class="hIconWidth") so they can be changed responsively to shrink them on very small screens. of 360 pixels or under. In practice, this needed a lot of thought and fine tuning.

The only difficulty was in the vertical centering for arbitrary image sizes which sounds simple but needs one of a number of possible tricks. See how-to-vertically-center-text-with-css or how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div and how-and-why-to-use-display-table-cell-css for a discussion of techniques

So what does the resulting HTML Block of Pictures and associated CSS look like? The following is for part of the simple test above:

<div class="picFrame">
    <div class=pic><script>vpic('nz08/img_2969', 'Kiwi Blue parachutists', 'center')</script></div>
    <div class=pic><script>hpic('nz08/img_2837', 'Two Fokker triplanes', 'center')</script></div>
    <div class=pic><script>hpic('nz08/img_3026', 'F-111 burning fuel', 'center')</script></div>
    <div class=pic><script>hpic('nz08/img_2804', 'Replica Pfalz DIII', 'gallery2')</script></div>
    <div class=pic> <script>hpic('nz08/img_2803', 'Nieuport II', 'gallery2' )</script></div>
</div>

Here the 'clickable' images are still written on-the-fly by JavaScript functions when the page is loaded and are either 160 x 120 or 120 x 160 - scripts for portrait start with v and for landscape with h.

The matching base CSS (before any changes by Media Queries) is:

div.picFrame {
    max-width:780px;
    text-align:center; margin:auto;
    border-top: solid 10px rgba(255,000,255,0.0);
    border-bottom: solid 10px rgba(255,000,255,0.0);
    border-left: solid 10px rgba(255,000,255,0.0);
    border-right: solid 10px rgba(255,000,255,0.0 );
    background-color:white;
}

div.pic {
    display: inline-block;
    border: solid 1px black;
    position:relative;
    height: 170px;
    width: 180px;
    background-color: white;
}

/* Needs width and heights to be set explicitely or as max-width and max-height for following trick to work so both classes have to be added to image somewhere */

img.pic {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

img.hIconWidth {
    width: 160px;
    height:120px;
}

img.vIconWidth {
    width: 120px;
    height:160px;
}

Adding a Dropdown Menu to the Navigation Bar

The next area which I wanted to investigate was to change to using a dropdown Menu on the top toolbar for small screens rather switching to an extra layer row of buttons. I already had code for a pushup menu and some of the code was in place to clear the menus when a timer elapsed or the page was clicked. There are a number of places where drop down code is explained but I wanted to make it similar to the push up menu and include the nice little triangular 'marker' so it was best to add another modified copy of my existing HTML and CSS.

The HTML Code for the matching drop down menu is:

<div class="dropmenu">
   <ul id="showHeaderMenu" style="display:none;" >
      <li class="homebar"> <a class="homebar" href="homepage.htm">Home</a> </li>
      <li class="unzbar"> <a class="unzbar" href="nzguide.htm">Uniquely&nbsp;NZ</a></li>
      <li class="homebar"> <a class="homebar" href="travel.htm">Travel</a> </li>
      <li class="howtobar"> <a class="howtobar" href="howto.htm">Howto&nbsp;Articles</a></li>
      <li class="pemcbar"> <a class="pemcbar" href="pemc.htm" >Pauline</a></li>
      <li class="sfbar"> <a class="sfbar" href="enterprise.htm">Small&nbsp;Firms</a> </li>
      <li class="srchbar"> <a class="srchbar" href="site-search.htm" >Search</a></li>
   </ul>
   <img src="gallery/hamburger.jpg" onClick= "setDisplayHeaderMenu()" alt="Navigation Menu and Settings " title="Navigation Menu and Settings" style="height:32px;width:32px;border-radius:3px;">
</div>

The matching CSS is:


.dropmenu {
   position:relative;
}
.dropmenu ul {
   width:250px;
   position:absolute;
   top:45px;
   left:0px;
   padding:3px 5px;
   border-radius:8px;
   background:#a0a0a0;
}
.dropmenu li {
   margin:2px 0px 2px 0px;
   float:none;
   display:block;
}
.dropmenu a {
   display:block;
}

.dropmenu ul:before {
   width:0px;
   height:0px;
   position:absolute;
   top:-10px;
   left:10px;
   content:"";
   border-left:10px solid transparent;
   border-right:10px solid transparent;
   border-bottom:10px solid #a0a0a0;
}

.dropmenu td {
border-radius:5px;
   color: #000000;
   background-color: #ffeecc;
   text-align: center;
   padding:3px;
}

Changes to Search

I have changed the Search from a text based link to an Icon which has given extra space on the full width top navigation bar to include a new heading of Travel on wide screens ie before any Media Query breakpoints are tripped.

Search now opens a search box below which largely uses the existing Freefind provided code for the site. The Search link in the Drop-down and Push-up menus are to the full Site Search page which offers Searches of both site by Freefind and Google.

The Code for the Search 'drop-down' is mostly provided by Freefind modified by an additional 'Cancel' button and is placed within one of the heading table data cells so (without proper indentation but important items identified in red) looks like this:

<td class="srchbar dropextra" style="background-color:#e0e0e0;width:36px;">
<div id="SearchMenu" style="display:none;" class="dropextra-content">
<form style="margin-bottom:15px; margin-top:20px;" action="http://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
<input type="hidden" name="si" value="nnnnnn">
<input type="hidden" name="pid" value="r">
<input type="hidden" name="n" value="0">
<input type="hidden" name="_charset_" value="">
<input type="hidden" name="bcd" value="&#247;">
<input type="text" name="query" style="font-size:1.0em;" size="22">
<input type="submit" style="font-size:1.0em;" value="Search">
<input TYPE="button" VALUE="Cancel" style="font-size:1.0em;" onClick="ExpandToggle('SearchMenu')">
</form>
<div style="text-align:left;font-size:0.8em;padding-left:5px;">
<a href="http://search.freefind.com/find.html?si=nnnnnnnn&amp;pid=a" style="text-decoration:none; color:#ff00ff;float:right;padding-left:5px;">Advanced Search</a>
Search of&nbsp;pcurtis.com by&nbsp;<a style="text-decoration:none; " href="http://www.freefind.com" ><span style="color: #ff00ff;">Freefind</span></a>
</div>
</div>
<img src="gallery/search_icon_128x128.png" onClick="ExpandToggle('SearchMenu')" alt="Search" title="Search" style="height:32px;width:32px;border-radius:3px; margin-right:5px;">
</td>

This still has rather too much individual styling as well as what is in the CSS include file.

.dropextra {
  position: relative;
}

.dropextra-content {
  width: 300px;
  position: absolute;
  top: 47px;
  right: 0px;
  padding: 0px;
  background-color: #e0e0e0;
  border: solid 2px #a0a0a0;
  border-radius: 5px;
  box-shadow: -5px 5px 10px 0px rgba(0,0,0,0.4);
  z-index: 1;
}

.dropextra-content:before {
  width: 0px;
  height: 0px;
  position: absolute;
  top: -12px;
  right: 12px;
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #a0a0a0;
}

The .dropextra-content:before provides the little pointer.

Other changes to Menu Bars etc

As the size shrinks it first goes from 6 headings plus Menu and Search icons and then down to 3 headings in single steps which is maintained to the minimum screen width the design covers of 320 pixels (302 in tests). This uses the showSize and hideSize classes mentioned below with no page reloads required.

hideLarge, showLarge, hideMedium hideSmall etc classes have been set up in the @Media section of the CSS. These can be used in place of the show/hide functions currently in use so header and footer reloads are never required.

CSS Styling for Travel has been added and provisionally a orange sunset colour has been chosen. The travelblock style is a prottype with a rounded corner and small shadow which brings it out of the page very well and may be copied for other pages.

The CSS style for unhidden text (class .expand) has the margins reduced to work better on small screens

The bottom bar is always in the simplified version used currently for smaller screens with the addition of the HTML5 Check Icon link with coding and has been much rationised to remove use of tables. The overall code is now 23 lines long in place of 78 although part is the removal of the settings code.

Other System and Site Changes

A new function inhibitReload() has been added to inhibit automatic event driven reloads so a common JavaScript include of rbox.js can be used for old and new pages. inhibitReload() needs to be called on all new pages at the start of the body.

I have switched to the latest version of Lightbox2 which has JScript included in the minimised javascript include file. The main advantage of this is that it now lives at the bottom of the <body> which means that the main loading is faster. The only downside is that the latest version of JScript which is in the package only supports Internet Explorer 9 and higher but that version reached end-of-life in 2017 along with Windows Vista. In exchange there is better support for current browsers. I will review the decision if problems occur.

Settings are never set within the new pages, instead there is a link to settings.htm which has been scaled to fit without scrolling onto most phone screens but with a number of extra clarifications and background information which are hidden until a more... is clicked. One downside is that settings changes do not take effect on open pages until they are manually reloaded.

Settings uses cookies and the set and clear functions still call a reload but it is routed through the common routine to optimise for different browsers.

Popups are again supported but the settings screen does not encourage their use.

One side effect of the developments has been an increasing use hiding extra detail which is revealed if a More... is clicked at the end of a paragraph, in particular this is used within standard blocks.

The CSS has been modified to improve the display of information blocks by adding rounded corners and light shadowing to make them stand out.

Update plans

I have been looking for a safe way forwards so I have been checking wht happens with a mix on a page of the new headers and footers and responsive reload tables. provided individual tables are not mixed and responsive reload is not inhibited then it is no worse than previously to the user, in fact slightly better as the new navigation, drop down menu and improved seach is in place. So changing headers and footers is an initial way forwards.

ToDo List

There needs to be rther setting up of use of different block sizes .pic2 and .pic3 for blocks of 2 and 3 pictures only.

Link to W3C HTML5 Validator Copyright © Peter & Pauline Curtis
Content revised: 2nd December, 2019