Site Updates: September 2015

An ongoing catalogue of Knossos Games website issues and minor updates.

Updated through WordPress v4.3.1.

Logic pages for chronologically and thematically ordered listings now better labeled as such.

Navigation bar on Logic 17 puzzle and solution pages now point to the most recent version of the Logic index page.

The Wind Farm puzzles received a significant update.

Fixed: Header graphics, linked versus unlinked

Problem: I’m always concerned about how the layout and general presentation of the website visually communicates how one navigates around the site. It occurred to me that the header and sidebar graphics use a consistent visual language while having inconsistent behavior. Sometimes these graphics are links that are clickable/tappable, and sometimes these graphics simply announce the next section of a page.

Quick! Which one is a link?

This isn’t as much of a problem on a computer with a mouse, since the site uses rollovers. But as more and more people use touchscreen devices, rollovers cannot be depended upon to communicate information. (On a computer, there is a difference between a point and a tap, whereas on a touchscreen, there is no difference between a point and a tap.)

Solution: By modifying the CSS and replacing a few of the navigation graphics, all clickable/tappable header graphics are now shown as buttons.

How about now?

I maintained the visual language of the navigation bar, which uses lighter colors as buttons which turn darker when clicked/tapped.

Old colors/buttons on the left, new on the right.

The rollovers themselves use a clever trick that creates a quick, responsive change when pointing/tapping. The header graphic has an actual height of 72px, but the CSS specifies the displayed height as only half of this. This means that only half the graphic will be visible at any one time. Which half? When the graphic is originally displayed, it is aligned to the “top”, so the top half displays. When you point/tap, the graphic is aligned to the “bottom”, so the bottom half displays. Since both halves of the graphic are contained within the same file, the rollover/tap action is as fast as your browser can redraw the change (instead of as fast as your internet connection can download a new file).

.content-blue-link {
	background-image: url(...);
	background-position: left top;
	color: #000000;}

.content-blue-link:hover {
	background-position: left bottom;
	color: #FFFFFF;}

Fixed: All-around misbehavior in touch interfaces (WebKit)

Problem: Oh, where to begin. I have noticed consistent differences between the computer version of the website and the touch-screen (WebKit) version of the website. In iOS 7, a tap showed a delayed behavior attached to a rollover. However, in iOS 8 and 9, that behavior was gone completely. Most of the offending behavior can be best summarized in the following graphic, which shows what happened when you tapped a rollover button.


Solution: I initially had no idea why this was happening. Turns out, this was a combination of two problems. First, WebKit displays a grey box around a tap target that contains a link. While I found this acceptable for text links, I didn’t want this for the navigational buttons, puzzle swaths, and headers on the site. It either produced a large grey box covering the entire (linked) graphic, or, as seen above, produced a tiny grey circle when it though no link was present. Fortunately, there is a way to turn this off. (The second line, apparently, is for some Android devices.)

.button {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;}

Second, the rollover was no longer being triggered by a tap, as it had been previously (if only fleetingly). The solution here, admittedly a hack, is to insert specific code in the HTML document to activate the “hover” style. The “ontouchstart” and “ontouchend” in the example below do absolutely nothing, other than trigger the “hover” style in the associated CSS. (It won’t work to insert this or some other code on the CSS end, since the tap never triggers the “hover” style, so the CSS document itself is never accessed.) Again, I chose this over a fancier solution using JavaScript.

<a href="spod.Index.html" ontouchstart ontouchend>
<span class="sidebar-green-instructions">
<span class="sidebar-green-instructions-text"> instructions </span>

Continuing aggravation: Fonts in SVG files

Problem: SVG files containing font information are not supported in Firefox (or Internet Explorer), only in Safari and Android Browser (WebKit). Mozilla decided to put their support behind Web Open Font Format (WOFF) instead.

Workaround: When saving Adobe Illustrator files as SVG, be sure to specify in the Options (save) window Fonts > Type > Convert to outline. This results in larger files sizes, and still doesn’t always work for some reason. For example, the coin box graphic for Logic problem #1 fails to render properly in Firefox. This makes no sense whatsoever, since the font is no longer a font: it is a vector object shape. But Firefox still renders it inappropriately.

Firefox render with incorrect font
Safari render with correct font (notice differences with 4, 8)