The Trouble with Browsers

If you want to sell books, you need a website. I get that. I’ve had a personal website for close to 20 years now. It’s hand-coded and quirky, but that’s all right, because nobody ever visits it unless they’re looking for cello lessons. In anticipation of the impending release of my first new novel in many years (more than 20 years), today I sat down and did some redesign on my site. We’re not talking about this blog — I mean my actual website, musicwords.net.

I positioned the graphics showing my new book covers. Uploaded a bunch of files. Hooray, I’m a web champ!

Well, no, not quite. Tonight a friend took a look at the new pages on his phone, and wouldn’t you know it, there’s a technical problem. HTML on a phone’s browser is apparently not the same as HTML on a desktop browser. Oh, dear.

On doing a little checking, I find that the situation is even worse than that. Forget phone displays; the book covers on my nice hand-coded Books page do not show up in the same alignment in Firefox, Chrome, and Internet Explorer, all of which are running here on the same identical Windows machine. If you’re curious, you can jet over to the Books page and compare your results to the following screenshots. I grabbed only a small section of the page, right at the top of the Non-Fiction header. What’s of interest is the positioning of the book covers that’s visible to the right of the text.

First, here’s how it looks in Firefox:

firefox_posiiton

Next, here’s Chrome:

chrome_position

And finally, in IE:

ie_position

What the actual fuck? This is the same HTML code in all three browsers. The code is set up with HTML style tags that have position:absolute and values for the top of the image in pixels. But somehow each browser has its own idea about the vertical height of a pixel. And of course the alignment is far worse in my iPhone, but I’ve never learned to take screen grabs with it, and it’s an old phone, so let’s not worry about that.

And do you notice the difference in the type font? In Firefox it’s blurry, because the anti-aliasing is more aggressive. In Chrome and IE it’s crisp.

On further reflection, though, that’s the clue to the mystery. The graphics are positioned exactly the same in every browser (including a phone). What’s different is the vertical spacing of the type! And that’s not something that HTML can control. This is, I’m sure, one of the reasons why modern websites have a very modular look, with little blocks of stuff. Getting the stuff in the left column to align with stuff in the right column is not gonna happen.

So please forgive me — I’m going to whine now. HTML is supposed to be a standard, but it never was, and as the years roll on it plainly becomes less and less reliable. This is why people hire professionals to design their websites. The professionals know lots of tricks to get reliable results across many platforms. Or at least you hope they do.

This week I spent $295 on a block of ten ISBNs. I spent $315 on a redo of the cover for Book 2. And tonight I dropped $139 plus tax and shipping on a Kindle, precisely so I can check how my books look on that device. And now it appears I’m going to have to drop a couple of grand on a properly coded website, even though I already know how to write HTML and javascript! And this is on top of the $5,000 I spent back in February on a developmental edit.

As my father used to say, “It’s only money.” But he was an artist. My mother kept the household accounts. When he said that, it made her a little crazy. What truly scares me is not spending the money. What scares me is that my tax return for 2017 is going to show a huge operating loss on my writing business — and that may trigger an audit. I’ve never had an audit. Maybe I should just eat the loss and not claim it. I asked a friend who is a CPA if she’d like to do my return this year. She charges $200 an hour. It’s only money, but I’m gonna have to think about that.

This entry was posted in fiction, technology, writing and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s