Hey there! Brian Dys here — I’m a visual and visceral person at heart. Ever since my mom lent me her old film camera, I fell in love with photography. All of my creative musings were exemplified by my second brain, the computer. This journey is a topsy-turvy ride of creative pursuits — from electronic music to UX design.
I enjoy every dull and wild moments of it — yes, this life of mine that I share with a woman named Jaycelle and a boy named Bryce. Take a peek into my kaleidoscope!
I’ve had the privilege to attend a talk at Camera Cart about branding for photographers.
Heidi Aquende invited me to their studio’s 6th anniversary. She did not say who were speaking – only the topics. I chose the first one in the morning and it she who’s speaking.
Please read with discrection since these are simply notes from the actual context of the talk. Nevertheless, the gist is in there.
Using your own name as the company – better because of perceived trust that you will protect your name’s reputation.
Here are some guiding principles we’ve adapted along the way in the web design and development industry:
If a component is significant enough, it must contain a component name in the form of a heading element (e.g., h1).
But sometimes there’s a big tone discrepancy between the name of the component and what you want to say in the heading. Consider this example:
[html]
<div class="registration-component">
<h1>Welcome! Please register.</h1>
<form>…</form>
</div>
[/html]
Although, the context of a registration component is mentioned both in the class name and in the heading element, it still fails in providing an official name for the component which can be crawled by search engines and read by screenreaders.
It would be what we call an accessible name. It is a formal name for the component inside a heading tag. In the existing example, the heading with the brand tone or voice would be a friendly name wherein we can get creative about.
Here’s a better example of that registration component:
[html]
<div class="registration-component">
<h1 class="accessible-name">Registration Component</h1>
<p class="friendly-name">Welcome! Please register.</p>
<form>…</form>
</div>
[/html]
In CSS, we could visually hide the accessible name and always use a friendly name even if they both have the same content (mostly for HTML markup consistency).
In its basic sense, HTML is standalone. It is independent from CSS especially from the perspective of screenreaders and search engine crawlers. This goes to show about the importance of semantics and content structure in the HTML markup.
In this regard, I strongly advocate for the manipulation of the style sheet instead of the manipulation of the HTML markup.
Consider the scenario wherein you, as the front-end designer, have only 3 chances in having control over the HTML markup and on the other hand, an unlimited number of revisions and updates on the visual design aspect of the project.
This indeed is a far-fetched situation – but it definitely will get us creative in setting up the HTML markup or in planning ahead. This scenario encourages us to use semantic names in the class attribute of the HTML markup as opposed to peppering it with presentational class names which are heavily tied up with the style sheet.
