While Kitt Peak National Observatory is shutdown for the COVID-19 pandemic, one of my jobs has been to review, edit, and update documentation on the observatory’s websites. I can’t really show off much of what I’ve been working on there since those are internal sites behind firewalls, and, unless you’re versed in astronomical observation, these documents probably wouldn’t hold much general interest. Part of the reason I edit these documents is that the observatory values my skills as a writer and an editor, which I really appreciate. Also, I’ve been coding HTML since the “Wild West” days of the World Wide Web in the early 1990s.
This training doesn’t just benefit Kitt Peak National Observatory. It is helping me build a better writer’s website and a better website for my company Hadrosaur Productions. This is work I can show you and talk about.
A couple of years ago, my older daughter helped to redesign the Hadrosaur Productions website. She made it through several pages and they look really nice, but then she was hired away to a full-time software engineering job. One of the pages she left for me was the main bookstore page. My objective for this page was to show off our books so people could discover what we had. They could then click the covers to get more details. In the screenshot above, you can see the page as I originally coded it. It’s a rigid table structure, which looks nice on a modest home computer screen. The problem is that the grid becomes small on phones. If you are using a bigger screen, there would be a lot of wasted white space.
This particular layout does not need to be organized as a table. All it needs is to display the covers, and better yet the covers with some additional information, in a neat and orderly fashion. Fortunately, there are some tools to do that in CSS. These tools also give me “under the hood” functionality that make it much easier to add new titles as they’re released, or remove titles as they’re sold out. What’s more, the new layout will adapt so that if you display it on a phone, you’ll just see a column of book covers and titles. If you display it on a wide screen, the rows will expand to fill the browser’s viewport.
You can take a look at the updated design here: http://hadrosaur.com/bookstore.php
I’d love to hear what you think of the updated design. As I say, it’s a work in progress. In the long run, I hope to make this more searchable and sortable. While you’re visiting the page, if a book grabs your eye, feel free to click on it to learn more. The “Add to Cart” and “View cart” buttons are all hosted at PayPal, so all purchases are secure. We don’t get any of your information other than your shipping address.