Building Anna's Art Website - Episode 5: First Progress on Home Page

Introduction

Welcome back to our miniseries! In Episode 5, we're excited to share the initial progress on Anna's new website homepage. Finally, I got started with the new website! All the development setup is done and ready for making significant strides.

Development Environment Overview

Our development environment is mainly set up with two main software platforms. For the front end (mainly the user interface), we're using the Next.js framework, which offers a powerful and flexible way to build web applications. For the back end, we're leveraging Directus CMS for content and database management. This setup allows us to efficiently handle both the visible parts of the website and the underlying logic and database management.

Content Management System

Administrators can log into the content management system powered by Directus. I've set up page and content collections, making it easy to create and manage different page contents. This data structure and system allow for real-time updates and efficient management of the website's various sections. Additionally, access to the system is controlled to ensure only authorised users can make changes, enhancing both security and workflow.

Wireframe and Initial Layout

Building on our last episode's wireframe, we've created components for the homepage. Key sections include Anna's self-portrait, a title, and an introduction. The YouTube section will eventually feature Anna's greeting video. We will also continue to refine the design as we go along. Continuous adjustment and evolution are important for the final polished look of the website.

Navigation and Additional Pages

The homepage includes a navigation link at the top, a functional contact section, and a "page not found" page with a link back to the homepage. The menu bar is also already mobile responsive, adapting its form into a burger menu for mobile devices. This ensures a seamless user experience across different screen sizes. It is very important to keep fine-tuning the website during the development phase to ensure everything works smoothly and looks polished. At the beginning of the development, there will be many things that are not working well or not optimal in terms of the UX/UI design.

Responsiveness

Ensuring the site is responsive for mobile devices is crucial. By inspecting the site, you can see how it adapts to different screen sizes, providing a seamless experience. A lot of manual checks and work are required to make sure that the layout adjusts fluidly, ensuring all elements remain accessible and visually appealing on smaller screens. The menu bar transitions into a burger menu, and images and text resize appropriately, maintaining readability and usability.

Lighthouse Audit

We ran a Lighthouse audit to check performance and accessibility. The results were great: 100% accessibility and 100% best practices. The SEO score is at 91%, but by adding a robots.txt file, we can achieve 100%. Performance for mobile devices scored at 85%, which we will further look at in a future episode to improve. It is a great start.

Current Progress and Next Steps

I've uploaded the website in progress to my server and connected it to Anna's subdomain. The site is now accessible at dev.annamartin.co.uk (to be changed to gallery.annamartin.co.uk). Feel free to check it out, but keep in mind it's still a work in progress. In the next episode, we'll focus on improving mobile performance and refining additional features to enhance the user experience further.