Updating the Hadrosaur Bookstore

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.

A benefit the company added in response to the pandemic was to make LinkedIn Learning available to employees. I first became interested in LinkedIn Learning, when Australian writer and artist Greg Long reviewed some of the courses he’s taken, so I knew there were courses there that could help me improve my skills. Because of how early I came to coding websites, there were no classes. I learned by trial and error and browsing through the w3 standards. If I remember right, when I started, all of the standards could be printed out on three or four sheets of paper! The web has evolved a lot since those days. HTML has been improved and things like cascading style sheets and Javascript were introduced. So, I knew I could do with some formal training. So I decided to enroll in a “learning path” for becoming a web developer. In LinkedIn Learning, learning paths are a bundle of courses that cover a broad topic. I’ve completed two of the courses and am about three-quarters of the way through a third.

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.

Take One of the Hadrosaur Bookstore

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.

2 comments on “Updating the Hadrosaur Bookstore

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 )

Google photo

You are commenting using your Google 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

This site uses Akismet to reduce spam. Learn how your comment data is processed.