WordPress Website Development: Davin Tech Group

Davin Technology Group is an IT-based firm offering managed IT & cybersecurity services for growing companies and non-profits, located in Massachusetts, US.

For this project, I teamed up with the team at Datalily (formerly CXD Studio), who provided the website designs. I’d previously worked with Gabby and Katherine from Datalily on another website build and I knew they were incredible at designing professional and polished websites, so I was excited to collaborate with them again.

Davin Tech Group’s previous website wasn’t built on WordPress so I was keen to show the client how powerful and flexible WordPress can be. As always, I utilised the WordPress block editor when developing this website to ensure that the client would be able to easily edit and maintain their own website, while also prioritising speed and performance.

Let’s take a closer look at a couple of my favourite features of the Davin Tech Group website:

Blog page with category filters and search

The client wanted to add a blog to their new website where they showcase the work they were doing and the solutions they were providing for their clients.

The blog page (called Clients) showcases the posts in a grid format, with the most recent post highlighted at the top of the page.

Initially, 7 blog posts are displayed and then users can click the “Load More” button at the bottom of the page to load in the next 6 blog posts. Breaking up the posts using this type of pagination can help keep the blog page loading as quickly as possible.

Blog posts are categorised by the type of solution that Davin Tech Group has provided the client with, and the category page links and located at the top of the blog page as well as on each individual post page. There is also a pop-out search bar that allows users to search for specific content within the blog.

Blog post progress bar

On the individual blog post pages, the blog categories stick to the top of the page as you scroll down.

Attached to this is a progress bar that moves from left to right as you scroll down the page to let you know how far into the blog post you are.

Related blog posts

At the end of each blog post, three random posts from the same category as the one currently being read will be displayed.

It’s set up so that the client has the option to override the three blog posts that are automatically displayed. They can select the posts they wish to show here from a dropdown list, and it will pull through the featured image, category, title, excerpt and link to that particular post.

On mobile devices, the related posts automatically turn into a slider rather than stacking to reduce the amount of space they take up on the screen.

Fully-responsive and editable diagram

If you were to visit the Comprehensive IT Management page on the Davin Tech Group website, you’d come across this diagram:

When I was first shown the website designs the client asked me if this diagram would have to be an image.

Now, an image would have been the easier and quicker way to display this diagram on their website. However, where possible, we want to avoid text in images on websites for a few reasons:

• It’s not responsive unless you’re displaying a different image on different devices (which in turn will slow down the website).
• Search engines cannot read the text within an image, therefore it’s not good from a SEO point of view.
• Screen readers cannot read the text within an image, therefore it’s not accessible.
• It’s not easy for the client to update the text without creating a new image.

So, to avoid these issues, I built this diagram using code!

It wasn’t easy; I had to do a lot of maths and write some complex JavaScript to figure out the lengths of the lines, but I did it, and I’m over the moon with the results.

Here’s what the diagram looks like on mobile devices:

Mega menu

The main menu on the Davin Tech Group website features a mega menu that is styled and formatted differently depending on the link you are hovering over.

For example, when you hover over the Solutions link, you’ll see links to different service pages along with a short description. I love this idea because it allows the user to learn a little more about the service before they read the whole service page.

If you hover over the Contact link instead, you’ll be presented with a smaller mega menu with information on how you can contact Davin Tech Group.

Are you ready to outsource your website development?

If you’re a web designer who loves creating beautiful websites but hates the coding side of things, I can help!

I specialise in turning designs into fully-functioning WordPress websites that not only look beautiful but that are also functional, strategic and fast.