Lessons in Designing a Web Page

Photo by Tranmautritam on Pexels.com

Yesterday I set to work updating the “Books” page on my site. I’d long wanted to fix it so that every cover was approximately the same size. I say approximately because the books are different sizes. But if every photo was the same height, the page would look more consistent. WordPress also offers a “Masonry” option for formatting photos on a page. You enter the various photos into the “Masonry” gallery and when uploaded they run down one side of the page.

Easy peasy mac-n-cheesy. Not.

As I resaved and uploaded photos, I also updated the book descriptions. I had originally gone with the publisher’s descriptions. This time I decided to swap them out for commentary from me, the author. After all, people can read the publisher’s descriptions on their web sites, on Amazon, on Goodreads, etc. Each of my descriptions was the perfect length to fit alongside the photo.

I had finished about 25% of them when I clicked on preview.

Oh, no. The photos resized, becoming much smaller. This meant that suddenly the text was far too long to line up alongside the correct cover. My beautiful lay out was gone.

Photo by Brett Sayles on Pexels.com

As you work up your web page, frequently check the preview screen. Check it out as it would look on a laptop. But also see how your layout looks on a tablet and on a phone. Getting one good looking layout is tricky. Getting three? Let’s just say that it is much more difficult than only one.

But the reality is that even if you are working on a computer when you set things up, that might not be how your audience is viewing your page. Teen readers, parents and teachers may very well be looking you up on their phones. Your fellow writers and librarians may be using their phones when they are out and about and their computers when they are at your desks.

The preview screen is your friend. And check it often so you don’t lose an hour of work. Learn from my mistakes!