Meridian Leap Software

Meridianleap.com is our own webpage, where clients can come to learn about our company and services. It’s a representation of the quality and craftsmanship that we deliver for all of our clients, so it was important to apply our usual web best practices, like accessibility, responsive design, and SEO. It’s also an opportunity to try out some of the newer technologies that have gained popularity in recent years, and assess what kind of value they might bring for our clients going forward.

The site is built using a static site generator (SSG) to generate webpages from templates and Markdown files. It uses TailwindCSS to style the pages and CSS media queries to optimize the layout for different screensizes. The site gets a perfect score on Google Lighthouse, which is a big help for SEO.

If you think this site looks great, send us an email to learn how we can help your organization!

Hugo

The site is built using the Hugo static site generator. This is a great choice for websites without a server component. It provides lots of tools for making the site performant, and content is written as markdown, meaning that adding new content (like this page!) doesn’t require editing the website code.

Tailwind

The UI/UX is our own custom-built Hugo layout, styled using TailwindCSS. TailwindCSS has skyrocketed in popularity over the last few years, and I wanted to see if it lived up to the hype. Overall, it’s a very nice developer experience, but I agree with many of the critics who say that styling with utility classes makes the HTML difficult to read. This is especially true for sites built with Hugo, where it’s not as easy to encapsulate elements into their own components as with other frameworks like React.

Having now used TailwindCSS for the entire build, I can say that I slightly prefer SASS, organized according to a methodology like BEM and processed with PostCSS. It’s a bit more work to set up in the beginning, but it’s more maintainable than common Tailwind lines like this:

AI coding tools don’t care as much about messy lines like these, but at Meridian Leap Software we actually write our code, and keeping it clean is key for maintainability. You can learn more about our AI policy here.

Responsive images

Tailwind makes it very easy to build responsive layouts, and this site looks great on devices of any size. In addition to dynamically reflowing the page layout, I also used HTML <picture> tags so the browser can automatically choose the optimal image resolution based on the screen size. On small screens, devices will load a lower-resolution version of images ¹. Since the screen is small, the image will appear just as crisp as the full-size image on a large screen, but users will benefit from faster page loads and reduced data usage. On slow mobile connections, the site continues to feel fast and snappy, without sacrificing image quality.

Manually creating multiple copies of every image is a lot of work, so I configured Hugo to automatically generate copies with various resolutions and file formats automatically. I only have to add the image to the site once, and Hugo will handle the rest. If the user’s browser supports it, they’ll even get WEBP images, which are smaller and more performant than old formats like PNG or JPEG.