Using element suppression to get responsiveness

1 points by tabtab ↗ HN
All these "responsive" web design frameworks seem buggy and hard to tune/test to me. What if one returns to regular HTML tables for formatting, but switches HTML elements on or off based on device size? With tables one can switch borders on easily to test/inspect designs using the "Table ... Border=[number]" attribute.

Here's an example of how this "Element Suppression System" (ESS) might work. One defines say 3 screen-size ranges: small, medium, and large (sometimes called "breakpoints"). More sizes are possible, but let's start simple. A table-row element (TR) may then be defined as such:

<tr class="ess_ml">...</tr>

This HTML element is suppressed if the screen is "small". Only medium ("m") and large ("l") screens activate it. If you wanted all elements inside of this tag set also suppressed, such as "td" tags (when applicable), then also include "ess_inherit":

<tr class="ess_ml, ess_inherit">...</tr>

Jquery or similar can then detect the screen width and width changes, and apply a filter to the relevant classes to deactivate tags not relevant to the given size.

0 comments

[ 2.8 ms ] story [ 7.7 ms ] thread

No comments yet.