|
Home | Uniquely NZ | Travel |
|
|
Next Generation Site Layout Media Queries replace Responsive Reload Headers and Footers Enhanced |
Examples/Tests 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.
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.
The Next Generation Web Pages
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 situation: 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.
New Approach to Responsive design using CSS alone
CSS Media Queries: There is now a viable alternative using only CSS (Cascading Style Sheets) as most browsers in use now reliably and consistently 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.
CSS Media Queries browser support: 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.
Picture Block Implementation using Media Queries
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 but can be fine tuned with experience.
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 remain the same and are written on-the-fly when the page is loaded by a <script> so can not be changed directly 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 encountered in implementing the approach 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;
}
The actual css used is all in a separate include file media.css if you wish to download/inspect the latest version. You will see that there are additional picture frames (pic2 and pic3) defined for blocks which are chosen to be two or three wide which may eventually be explained more fully. In summary they allow additional tuning for blocks of 2, 3, 5, 6, and 9 picture to have more pleasing layouts. For example use of pic3 allows a block of six to be a nicely spread block of 3 x 2 rather than 4 + 2 on a large screen and 9 become 3 x 3 instead of 4 x 2 + 1. It is also possible to use pic3 on the final 3 in a 7 or 11 block adjust the bottom of the block. If you want to see this in action then have a look at Australia & New Zealand Cruise 2019 part 1 - Perth which has examples of all the different blocks using class pic3.
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 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 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 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="÷">
<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&pid=a" style="text-decoration:none; color:#ff00ff;float:right;padding-left:5px;">Advanced Search</a>
Search of pcurtis.com by <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 further setting up of use of different block sizes .pic2 and .pic3 for blocks of 2 and 3 pictures only.
