DEV Community: Joey Burzynski

58 bytes of CSS to look great nearly everywhere

Joey Burzynski — Mon, 26 Sep 2022 21:49:57 +0000

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

let's break this down:

max-width: 38rem

it appears that the default font size for most browsers is 16px, so 38rem is 608px. supporting 600px displays at a minimum seems reasonable.

padding: 2rem

if the display's width goes under 38rem, then this padding keeps things looking pretty good until around 256px. while this may seem optional, it actually hits two birds with one stone - the padding also provides sorely-needed top and bottom whitespace.

margin: auto

this is really all that is needed to center the page, because main is a block element under semantic html5.

a key insight: it took me a surprising number of iterations to arrive at this point. perhaps that speaks to the fact that i know nothing about "modern" web development, or, as i'm more inclined to believe, just how hard it is to keep it simple in a world of complication.

update 1: following some discussion, I've since changed the padding to 1.5rem for a happier compromise between mobile and desktop displays.

update 2: the ch unit was brought to my attention, and I quite like it! I've since changed to 70ch/2ch, which looks nearly the same with 2 less bytes, except that the padding is a little bit smaller (a good thing for mobile).

100 Bytes of CSS to look great everywhere (enhanced version)

This should be simple drop-in css to look good on most displays:

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

Let's break this down. I've adapted the original text with my own commentary.

max-width: 70ch

the "readable range" is usually 60-80 character widths, and CSS lets you express that directly with the ch unit.

padding: 3em 1em

If the display's width goes under the max-width set above, then this padding prevents edge-to-edge text on mobile. We use 3em to provide top/bottom whitespace.

margin: auto

This is really all that is needed to center the page - applied on html, because Dan's site doesnt have a semantic tag and is more likely to exist in most sites. That the top tag centers itself relative to nothing is unintuitive, but thats how browsers do.

line-height: 1.75

Spacing between the lines to help increase visual clarity. Always leave line height unitless because reasons.

font-size: 1.5em

I've noticed that recent design trends and screen sizes have tended toward bigger font sizes. Or maybe I'm getting old. Prefer em or rem over px if you want to let users scale it.

You can use :root instead of <html> to guarantee that there is some selector present, but its a touch too fancy for me and uses an extra character :)

Optional 100 more bytes

h1,h2,h3,h4,h5,h6 {
  margin: 3em 0 1em;
}

p,ul,ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}

Reference

CodePen

Are multiple H1 tags across a website bad for SEO?

Joey Burzynski — Thu, 18 Aug 2022 01:20:56 +0000

Are multiple H1 tags bad for SEO?

Are multiple H1 tags bad for SEO?

tldr: Multiple H1 tags will NOT negatively impact SEO performance.

Recently answered this question on Quora:

Are duplicate H1 tags across a website bad for SEO? tldr: Multiple H1 tags will NOT negatively impact SEO performance. https://www.quor...

Prior to 2014, concerns around multiple H1 tags were based on the HTML4 spec. With the advent of HTML5, you can use multiple h1 tags and still have a well-structured, semantically accurate document.

If you’re interested in a deep dive on the difference in the HTML specs, I’d suggest reviewing the article below:

The Truth About Multiple H1 Tags in the HTML5 Era

Other References:

Is it mandatory to just have one h1 tag on a web page or can it be used multiple times?

Google’s John Mueller said that your site can rank fine with or without H1 tags. You don’t have to use any H1 tags, or you can use many, either way, it is not a critical issue specifically for Google search.

He did say it helps Google understand the structure of the page, just like it helps users understand the structure of the page.

He said this in a video this Friday at the 23:47 mark when he was asked if “Is it mandatory to just have one h1 tag on a web page or can it be used multiple times?”

John responded (emphasis my own):

So we we get this question multiple times as well. You can use h1 tags as often as you want on a page. There’s no limit. Neither upper nor lower bound. h1 elements are a great way to give more structure to a page so that users and search engines can understand which parts of a page are kind of under different headings. So I would use them in in the proper way on a page.

And especially with HTML5 having multiple h1 elements on a page is completely normal and kind of expected. So it’s not something that you need to worry about. And some SEO tools flag this as an issue and say like oh you don’t have any h1 tag or you have two h1 tags. From our point of view that’s not a critical issue . From a usability point of view, maybe it makes sense to improve that. So it’s not that I would completely ignore those suggestions but I wouldn’t see it as a critical issue.

Your site can do perfectly fine with no h1 tags or with five h1 tags.

How many H1, header tags, should he use on a single page?

In response to a question from a novice SEO about “How many H1, header tags, should he use on a single page?” , Google’s John Mueller said on Twitter “as many as you want”.

// Detect dark theme var iframe = document.getElementById('tweet-852131231928135680-60'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=852131231928135680&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1179285934883389441-413'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1179285934883389441&theme=dark" }

Multiple H1 Headings: How to Handle Them for SEO & Accessibility?

In this episode of Ask Google Webmasters, John Mueller discusses how to handle multiple H1 headings and accessibility, and whether multiple H1 headings work with Google systems.

In the video John Mueller says:

“Our systems don’t have a problem when it comes to multiple H1 headings on a page. That’s a fairly common pattern on the web.”

SEO Snippets: Multiple H1 Tags

How To Write A Blog Post (That Doesn’t Suck)

Joey Burzynski — Mon, 25 Apr 2022 08:25:50 +0000

Photo by RAPHAEL MAKSIAN on Unsplash

A Content Marketer’s Tips for Quality Blogging

We moved out of the caves, we killed all the dragons, we have electric can-openers.

We’ve arrived: we have The Internet.

Now anyone can publish a blog, a book, white paper, podcast, and get it out there. We can all taste the delights of being ‘a writer’ (whatever that means), one of those rich and clever people who make the books we see everywhere. Wonderful!

With one problem. No more than maybe 1 in 20 internet writers can actually write.

Beloved brethren of the Earth and of the keyboard — allow me to impart some tough love.

A list of your breakfast items; top 237 recommended activities to do in Bangkok (available from any guidebook, written by better writers); or soulless ‘top ten tips’ for attracting more business, lifted from someone else’s website and ploddingly rejigged with disdainful ennui — these things add as much enjoyable value to the human thought-pool as a fart in a crowded lift.

And, dear bloggers, an inarticulate and bitchy analysis of the “funny way” your girlfriend looked at your friend, then went to Pizza Hut and didn’t reply to your texts for 2 hours (and you have the ‘flu’, your left knee feels weird, and now your ‘phone battery has died)… this may be mesmerizing for you and scratch some dull itch on the periphery of half-arsed existential query, but it adds to the world not a jot.

The central consciousness of our distracted and misled species is clouded with toxic detritus. You are not addressing it, you are adding to it.

But fear not! With the following tips, this odd person you have never met and who uses the word ‘ennui’ will now put all that badness to bed, and guide your dreams so that your pen-hand wakes up tomorrow aggressively sentient, and as fertile as a fothermucking randy Chihuahua. And with a bit of luck, you’ll be one of the 1 in 20.

Talk Rubbish

An accomplished writer has both the confidence and the ability, to employ the art of relaxed play in his writing. To loll about, for an acceptable period, in his own reverie. He can mention dragons in a respectable internet writing guide. He can give risky and slightly misleading subtitles to its advice segments because it amuses him, and so will likely amuse others too.

He can say “didoodoodoo” if he damn well wants. If it’s good enough for The Police, it’s good enough for me. After all, we are but children of various ages. Show me an ‘adult’ who doesn’t long for occasional constructive nonsense to ease the flow of a potentially dry topic, and I’ll admit I’ve got it all wrong and run naked through the woods (again) to press the reset button.

The prose’s proving is in the stamina of the readability, not the impressive poetry or complex technical correctness of every sentence.

But — linger too long in the formless void, and you’ve lost the reader. If you do not consider an alienated or bored reader, that is exactly what you shall have. And if the colorful tangent is too irrelevant to the writing’s comprehensive aim, or too self-absorbed, it’s also bye bye Mister Readingman. Employ well-placed illustrative or restful diversions, and don’t let them drag on.

Laugh or Die

Please, if you are a person who still believes that others absorb facts better — or will continue to volunteer their time to your writing — without the medium ever being funny, kindly return to the teacher’s desk of my Catholic secondary school business studies class where you belong, and die.

With such a dry and lightless approach to life, death will surely be merciful and swift.

I assume you are above such an archaic and hideous misconception, so shall continue without issuing further wishes of corporeal destruction.

We all know there is disturbing darkness in the world — some people sell films of themselves stamping on puppies’ heads for God’s sake. So if a piece of writing requires you to embrace a meaty issue, do so head on, then get the hell out of there before it sucks you — and all who look upon it — limp. Then, after not too long a wait, do your utmost to flush the paragraph with laughter, that warmest of temperers.

Strive to exist in that beautiful pendulum rhythm, swinging balanced between the exhilaratingly thought-provoking, and the refreshingly mindless and amusing. This can be applied to everything from a blog on our approach to business, to a romantic novel.

Reward Strangers

Why would anyone read your blog? Why would any human read any writing? Because they want something, or need something. We externalize our inspiration, our therapy, our entertainment, even our introspection. We often look to others to think for us. If you do not provide these humble seekers with some sustenance, you have done them a disservice.

If you write for yourself, put it in a private diary. That’s what it’s for. But if you’re publishing in a public blog, you are stating that what you have to say is of value, and asking for interaction with strangers, including feedback on this value. If you have not considered those strangers, not given them something from the heart that adds something to their life, don’t be surprised if you’re shot down as a waste of good reading time. “I’d rather nail my eyelid to a moving train than read another post from this cheese-dick”, or words to that effect. And you’d deserve it.

The already savage world of internet comments is bursting to tear even half-decent writers to shreds. People are often merciless when they know they’re anonymous.

Compromise

No artist is utterly, unreservedly proud of their work. If they are, they’re probably not very good. Mama’s vegetable soup was a profound metaphysical experience. It was so good it made me smile. Something about it — beyond its organic, untainted, skillfully handpicked ingredients — made it exhilarating. Maybe it tasted of love.

But every time she made it, Mama would — without exception — denounce it as “too sweet”, “too creamy”, “too bland”, “too green”, “too… carroty”. Yet she served it up, much to my pleasure. She was a culinary genius.

Any writer worth their weight in pen nibs will share this healthy self-depreciation. Given a chance, a great writer will quickly decompose into a twitching neurotic mess of doubt and infinite re-edits, locked alone in a darkened room, aching and dribbling for an hour over which is the most complimentary adverb.

But the divine vegetable soup must be served. It’s good. It might not be perfect, but people like it.

So just do a good, solid, proofread job, with heart and with humor; swallow; and get it out there. You don’t have time to achieve the ultimate prose. It’s probably impossible anyway. Yes, you have a responsibility to spread quality, but you also — if you’re any good — have a responsibility just to spread. Better something you’re 80% happy with than nothing at all.