I am planning an article about proper semantics and the process I use for building sites, known as “progressive enhancement”.

One of the big problems with web development is people think appearance first, when HTML — the foundation, the base, what should be THE starting point — is NOT supposed to be about what it looks like. To that end screwing around in a paint program like Photoshop, or a visual tool, or a WYSIWYG is utterly bass-ackward. Thus why so many people have layouts and codebases that flip the bird at usability, accessibility, and even efficiency.

Progressive enhancement can be summarized as being the ultimate in separation of concerns. You build in stages so that if any fancy later steps are missing or broken, a bare minimum usable result is available to the user. It basically hands you non-visual accessibility, scripting off accessibility, css off accessibility, and a whole host of other concerns.

And it’s really easy.

1. Take your content or a reasonable facsimile of future content and organize it in a flat text editor as if HTML doesn’t even exist.
2. Apply your semantic tags (basically everything except DIV and SPAN) to say what things ARE grammatically and structurally, NOT WHAT YOU WANT THEM TO LOOK LIKE!
3. Bend that markup to your will with CSS to create the baseline screen media layout, adding DIV, SPAN, classes and ID’s only where and as necessary. Don’t just blindly slop them in until you are 100% sure you even need them! I like to start with a desktop layout that is semi-fluid (max width to prevent long lines of text from being hard to follow), elastic (designed in EM or REM so it scales to user preference, PX is for fools), and with as much natural wrapping behaviors as possible (flex-wrap and floats are your friend) so as to keep the media queries to a minimum. Said CSS being ENTIRELY external and having ZERO business in your markup. Nearly 100% of the time you see <style> and 95% of the time you see style=””, you’re looking at ignorant garbage. Used to be 99% of the time for style=””, but custom properties (aka CSS variables) have changed that up a bit.
4. Narrow the window, figure out where it breaks, and apply your media query to fix things. Lather, rinse, repeat. DO NOT try to use some dumbass pre-determined grid as that just results in having to design content to the layout instead of building layouts that adjust to the content.
5. Apply colouration, gradients, and other visual styling options.
6. Then and only then enhance the already working page with scripting to improve the user experience, WITHOUT compromising base usability for users who have it blocked, or are on UA’s where it’s inapplicable.

If you build up in those steps, it gracefully degrades for users where this stuff doesn’t apply…The first two steps also hand you your non-screen media behavior/accessibility — and as such also your on-page SEO — on a silver platter.

REAL design should be done in the code and care about more than what it looks like. Thus why I say those who screw around in Photoshop, Illustrator, or even tools like Sketch/Figma/Adobe XD are nothing more than artists under the DELUSION they know what design is.

As a dearly departed friend of mine used to joke, “the only thing about visually oriented web development software that can be considered professional grade tools, are the people promoting their use. “