How to combat modern crappy websites?

Paul sutton zleap at zleap.net
Tue Apr 26 06:55:55 UTC 2016


I found this on diaspora

loading button, written in pure css

http://codepen.io/jcoulterdesign/details/NxbePR

shows what IS possible, and how much css / html have matured.

Paul

> Well, I think the main reason is, that web developers just don't know.
>
> Dynamic appearing and hiding of conten can be done with CSS 2.1 (or
> earlyer versions if you keep it simple)
> including:
> - Single page sites with navigation
> - folding/unfolding navigation menues (even with clicking, not just
> hovering)
> - Option boxes appearing dynamically
> - Tooltips
> - side panels
>
> Screen size adaptions can be done in CSS 3.0 (or earlyer, again if you
> do fine with little)
> including:
> - side bars folding to the bottom
> - button icons / button texts showing only on large screens
> - Navigation menus folding into "hamburger buttons" on small
>    screens
>
> Some other specials:
> - Video playback can be done in pure HTML
>    (even before, but better with HTML-5)
> - Carussel animations can be done in CSS 3.0
>    (they suck anyway, but that's beside the point)
> - Highlighting image sections etc can be done... well
>    not sure if earlyer than CSS 2.1
>
> All this falls back gracefully, even if the respective CSS features are
> not supported.
>
> = = = = = = = = = = = ADVERTISEMENT = = = = = = = = = =
>
>   So, who of you volunteers to implement this on the FSFE homepage?
>
>   We currently have:
>   - the language switcher
>   - the closing button on our translation warnings
>     (e.g. http://fsfe.org/index.ru.html)
>   - https://fsfe.org/about/fellows.en.html
>     (should display a highlighted map, apparently defunct)
>   - the caroussel animation on the frontpage
>   - Tooltips on http://fsfe.org/timeline/
>   - the hamburger button (on small screens)
>   - the contribution slider on http://fsfe.org/join
>   - probably some more...
>
> = = = = = = = = = = = = = = = = = = = = = = = = = = = =
>
> In most cases the CSS-Implementatios is *easyer* than doing the same in
> JavaScript.
>
> A while ago I held a lightnig talk in front of some dozend web startup
> developers. I didn't prepare anything, I just happened to be in the
> same place drinking beer. When no one wanted to hold the first talk, I
> jumped in and showed some some of those hacks, mostly the hiding and
> unhiding thing. It turned out the audience was surprised. Some where
> even very interested, they just didn't know this was possible and easy.
>
> Another reason is, I suspect, that some web developers, with regard to
> their sites, don't make the distinction between a document and an
> application. The argument is well founded with the Chomsky Hierarchy.
> Dynamics and interactivity, when introduced by CSS layouting are very
> different from the same dynamics, when they are introduced through
> JavaScript. They are much more controllable in regards to computer
> security and they avoid issues that come up in the context of Software
> Freedom.
>
> The most down-to-earth argument (steming from this language class
> argument) is probably that CSS based interactivity doesn't interfere,
> even interacts with sensory aids and input aids. Those are not only
> required by users with bodily handicaps, but are also used in
> environments where people wear protective gear or operate machines
> while using a website.
>
> Looking at code of modern web pages, I often suspect that the authors
> are not well aquainted with CSS. So it's really a matter of education.
> People in a 100,000 Euro start-up company might just be working on
> their first commercial web project after university.
>
> Maybe it helps if we hang out on StackExchange more.
>
> --
> Paul Hänsch                     █▉            Webmaster,
> System-Hacker
>                                █▉█▉█▉
> Jabber: paul at jabber.fsfe.org    ▉▉     Free Software Foundation
> Europe_______________________________________________
> Discussion mailing list
> Discussion at fsfeurope.org
> https://mail.fsfeurope.org/mailman/listinfo/discussion
>


-- 



More information about the Discussion mailing list