2018-10-25 Web Design for Simpletons

As mentioned before, I now have two static sites generated by a *Planet*, Old School RPG Planet and Indie RPG Planet. I wanted these pages to be easy to read from a phone. How to do this?

The first step is to add a viewport meta element. Don’t ask me why this is necessary. What were mobile browser makers thinking?

I added this to the HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

Next, I wanted the unnumbered list with all the members to be hidden by default, and to show or hide it with a click. The simplest solution (to a simpleton like me) is to use a class attribute on the element I want to toggle.

Thus:

<ul class="hidden">
...
</ul>

And some Javascript to toggle it:

function toggle(elem) {
   if (elem.className=="shown") {
      elem.className="hidden";
   }
   else {
      elem.className="shown";
   }
}

function addMenu() {
  var sidebar = document.getElementById('sidebar');
  if (!sidebar) return;
  var ul = sidebar.getElementsByTagName('ul')[0];
  var h2 = sidebar.getElementsByTagName('h2')[0];
  if (!ul || !h2) return;
  h2.onclick = function(){toggle(ul)};
}

I call `addMenu` when the page loads. It identifies the “Members” heading (the first `h2`) which will be used as a button and it identifies the actual list of members (the first `ul`) which will be toggled. Toggling simply means changing the class attribute from “hidden” to “shown” and back. Everything else happens in the CSS.

/* ------------------------- Small Devices ------------------------- */
@media only screen and (max-width: 1000px) {
    body {
        margin: 0.2em;
    }
    .news .content {
	padding: 0;
	margin: 0;
    }
    #sidebar {
	float: none;
	width: 100%;
	padding: 0;
	margin: 0;
    }
    #sidebar ul {
	list-style: none;
	display: none;
    }
    #sidebar ul.shown {
	display: block;
    }
    #sidebar ul.hidden {
	display: none;
    }
    #sidebar li {
	float: left;
	width: 100%;
	white-space: nowrap;
    }
    /* hide INFO */
    #sidebar h2, #sidebar dl, #sidebar form {
	display: none;
    }
    #sidebar h2, #sidebar dl, #sidebar form {
	display: none;
    }
    /* show MEMBERS */
    #sidebar h2:first-of-type {
	display: block;
	background: #ddd;
	margin: 0.5em;
	cursor: pointer;
    }
}

As you can see, I’m setting a few borders and paddings to smaller values or to zero in order to not waste any space, and most importantly, the `display` property of the list changes depending on the class attribute.

All of this is wrapped in a selector for narrow screens, which in this case means anything less than 1000px wide. Which you trigger on the Desktop by simply making your browser window narrow.

Screenshot on a narrow screen

Also, if your Javascript is disabled, the list is hidden and remains hidden. I think that’s a good default.

And in a text browser, the list is present. But it’s OK because there’s a “Skip to content” link at the very top.

Screenshot of w3m

#Web #CSS

Comments

(Please contact me if you want to remove your comment.)

⁂

@tomasino offers a different solution without JavaScript using a checkbox and the `:checked` pseudo class. He posted a codepen demo, too. Thanks!

@tomasino

codepen demo

And I used it for the two Planets,too!

The HTML now looks as follows:

<h2><label for="toggle">Members</label></h2>
<input type="checkbox" id="toggle"/>
<ul id="toggled">
...
</ul>

And the CSS stripped down to its essentials looks as follows:

#toggle {
    display: none;
}

@media only screen and (max-width: 1000px) {
    #sidebar ul {
	display: none;
    }
    #sidebar h2 label:before {
	content: "☰ ";
	font-size: 1.2em;
    }
    #sidebar h2 label:hover {
	cursor: pointer;
    }
    #toggle:checked ~ #toggled {
	display: block;
    }
}

In a text browser, the checkbox remains visible:

#                                              Indie RPG Planet (p1 of 40)
   #Indie RPG Planet

   Skip to content

                                  Indie RPG Planet

   What is this?

Members

   [ ]
     * (feed) Alex Schroeder
     * (feed) Burn After Running
     * (feed) Doom Rides
     * (feed) FASA Games, Inc.
     * (feed) Red Moose Games
     * (feed) Space·Time Will Tell
     * (feed) Spouting Lore
     * (feed) Step into RPGs
     * (feed) Take on Rules
     * (feed) Thoughty
     * (feed) UFO Press

For browsers without CSS support, the useless checkbox remains visible, of course.

– Alex Schroeder 2018-10-25 20:17 UTC