Follow-up to the phone post & an easy HTML upgrade!

I truly did not expect more than two people tops to read the last blog post I made, much less respond to it or share it. But to my surprise, I have received many kind and thoughtful messages on the 32-bit Cafe Discord, my guestbook, and my Neocities feed. It was a lot of feedback for my first blog post on a newborn site. I appreciate that people in this community are so open-minded and willing to consider things from my perspective while sharing theirs with me in turn. To summarize: Thanks!

Chxri wrote a blog response that I wanted to highlight. She used to have an anti-phone attitude to web browsing, but realized after reading my post that it wasn't truly phones she had an issue with. Rather, it was flat, minimalist, and frankly ugly web design that ticked her off. That's a point I hadn't considered.

I think it can be easy to mix up the platform with some of the trends that have emerged from it. Phones are a convenient and accessible way to browse the web for many of us, but they have also led to some pretty boring websites over the last decade. I'd love to see more mobile-friendly sites that are fun and have personality. The good news is that I have seen some awesome ones in this community, and maybe more people will be interested in mobile web design if we keep that energy going! I appreciate Chxri sharing her thoughts and hearing out mine as well.

I sincerely hope that my post didn't come across as too preachy or negative. In retrospect, it was as much of a vent post as it was an informative piece. I saw one too many "screw mobile" messages on people's homepages and just started typing until I was done at 2 AM...you know how it is. If reading my post helped you consider a new perspective, then I am very glad for it. Mostly, I'd just like people to be a little kinder to those of us accessing the web from our beds. (I partly drafted this on my phone! Back pain WILL NOT stop me from doing what I was born to do: post.)

If you're a less experienced web developer and you have no idea where to start with making your site mobile-responsive...it's alright! Code anyway. The last thing I want to do is gatekeep anyone from making a website because they're new to coding. My code was frankly hideous and not accessible until I took a web design course in grad school. That's over a decade of crap websites. You should've seen 'em. (Actually, maybe it's best you didn't...)

At least being aware of different users on your site can influence the design decisions you make in the future. And as you gain experience with coding, you will figure out ways to make your site look great on all screens. In fact, there's an accessibility feature I didn't talk about in the last post and it's very easy to make your website play nice with it. And that's Reader Mode!

Maybe you have used it before to clean up ugly news sites littered with ads...I certainly do. It's available on lots of mobile browsers like Safari and Firefox (and desktop ones, for that matter). If your website is Reader Mode-friendly, then it will still be easy to read your content even if you haven't made your layout responsive yet. Folks will be able to press a button on their mobile browser and all the body text will be rendered in a clean, readable layout. And you'll barely have to change your code, promise!

All you have to do is use what's called semantic HTML. This was something that I didn't know about until that course, because it wasn't a thing in the old-school HTML I learned back in the '00s. I think that's why a lot of people aren't familiar with it! But with HTML5, there are now dedicated tags to the major parts of a web page. These tags can be styled with CSS however you'd like, just the same as a <div>.

If you really want to learn about semantic HTML then I strongly recommend W3schools. (Best site ever. Reference it at least 5x per coding sesh.) But what I'll show you right now is just to get your main content hopefully displaying properly in Reader Mode by changing only one tag.

Let's say that you have a standard 3-column website layout. The big box in the middle where you put all the main content of the page is probably a <div>. You might have named it something like "content" or "main." Your CSS might look like this:

#content {
	width:700px;
	padding:20px;
	background-color:#fff;
}

And your corresponding HTML might look like this:

<div id="content">
		
	<h1>Welcome to my site!</h1>
	
	<p>This paragraph rocks.</p>
		
</div>

All you have to do is swap the <div> tag for a <main> tag, like so:

<main id="content">
		
	<h1>Welcome to my site!</h1>
		
	<p>This paragraph rocks.</p>
		
</main>

Because Semantic HTML elements can also have an ID or class, you actually don't have to change anything in your CSS. The <main> tag should display exactly the same as your <div> did. But if you'd prefer, you can also directly style your semantic elements in your CSS file like this:

main {
	width:700px;
	padding:20px;
	background-color:#fff;
}

Then you wouldn't have to add the id="content" to the <main>. Either method works!

Congratulations: you just used semantic HTML. See how easy it was? You can swap out the rest of your site's <div> tags for semantic tags in the same way. Change your header to the <header> tag, your navigation to the <nav> tag, your footer to the <footer> tag...you get the gist.

I'm sorry if my coding explanation sucked or I used incorrect terminology. If I'm being frank, you should just go read that W3schools page.

Now, not only does your site probably display better in Reader Mode, but it's also much easier to use with a screen reader! It's a two-for-one accessibility improvement with very little effort. If you want to go even more in-depth about coding with Reader Mode in mind, this article has a lot of great tips.

Even if your site works with Reader Mode, I still think it's worth considering how you can make your site layout more responsive. That's because, unfortunately, Reader Mode strips away your pretty layout and all the gorgeous colours. It removes a lot of the personality that I think makes the indie web so much fun. But it's better than not being able to read your content at all, so making sure that your site is Reader Mode-friendly is an excellent first step.

Ultimately, it's up to you what you want to do with your site. I know that I and others like me would be delighted if we could read your site with any device, but it's also something that can be really intimidating to new developers, or might not even work with certain types of website concepts and layouts. There are "art" sites that rely on the desktop format to work properly, and that's okay.

All I ask is that you earnestly consider how you can improve the user experience of your site, and if you think you have the ability, to give it a shot. And even if you decide to stick to a desktop-only experience, please remove the rude/sarcastic message from your homepage. It was probably just meant to be funny, and sometimes you don't realize how a joke might come across. But regardless, it isn't particularly nice and I think it's cool to be nice. Peace and love on planet earth. ✌️

OK I'm really tired and I can't do words good anymore. bye.