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?

=> Old School RPG Planet | Indie RPG Planet

=> Screenshot of how it looks on wide screen

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:

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:

...

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:

Members


...

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