Today my site looks unstyled*.
The website you just came from is not broken, its owner has decided to participate to CSS Naked Day! CSS Naked Day is an event that is held once per year to celebrate good & well planned design. The website you come from will be back to its normal state tomorrow.
The reason behind the #cssnaked day is: Good sites work, even when the "pretty" visual layer is removed.
It is one of the super powers of the web and good html-markup: The elements' browser defaults may not look pretty, but their function is intact. Sadly this functional aspect is often forgotten and the use of the appropiate semantic html element is neglected. With CSS, any element can change its visual or positional state on user interaction, and with JavaScript any element can become interactive - but if, for example, a button is marked-up with the <button>,
element, most of the interaction is already there, and it is less hassle than to use a <div>
element and pimp that with JavaScript.
So in a way #cssnakedday is a reminder of the fact that ultimately everything on the web is a suggestion for the user's web browser; and that web "sites" (or apps or PWA or SPA or whatever you like to call your product that is on the web) are multi layered, and everything besides html-markup is optional.
I used to design and code my works accordingly - start with the html markup and structure, visit it unstyled and make sure, that the main goals a visitor needs to reach are working. THEN start the hard work of styling and coding fancy interactions where needed.
*Update: Not 100% unstyled; I have now a temporarily style at the body tag to ensure a max-width and some padding to the viewport. And I changed the css styling of my svg header with the guitar strings to inline attributes.
4 Reaktionen zu “CSS Naked Day 2020”
Can you share the script you use for WordPress?
Sorry, nothing fancy - I just commented out my complete content in my theme's style.css :-))
I think a hook in functions.php and enqueue_scripts with a date comparison would do the trick in a more sustainable way …
SVG (Logos) würde ich immer mit Attributen stylen.
Ich hab' das gerade mal eingebaut, damit es auch naggisch hybscher aussieht. :)
Kommentare sind geschlossen.