Part 65: Enhancing the HomePage with Responsive Design and Next.js

[App] Image Optimization

[App] Image Optimization

Creating a dynamic and responsive user interface is a key aspect of modern web development. With the help of Next.js and some thoughtful design, we can significantly enhance the user experience of a website. In this post, I'll guide you through recent updates made to the HomePage, including the integration of subtitles for reviews and implementing responsive design principles.

Adding Subtitles to Reviews

Previously, our HomePage displayed only the titles of the latest three reviews. To provide more context and engage users, we decided to include subtitles in the display. This required a few changes to both our data-fetching logic and the user interface.

Fetching Subtitles from the CMS

Our CMS already contained subtitle information, but it wasn't utilized in our components. By ensuring that the subtitle field is included when fetching review data, we make it available for rendering on the HomePage:

function toReview(item) {
  return {
    slug: attributes.slug,
    title: attributes.title,
    subtitle: attributes.subtitle,
    date: attributes.publishedAt.slice(0, 'yyyy-mm-dd'.length),
    image: CMS_URL + attributes.image.data.attributes.url,
  };
}

Displaying Subtitles

To display the subtitles, we modified our JSX to render each review's subtitle beneath its title. Here's the updated code snippet:

export default async function HomePage() {
  //const review = await getFeaturedReview();
  const reviews = await getReviews(3);
  console.log('[HomePage] rendering');
  return (
    <>
      <Heading>Featured Review</Heading>
      <p className="text-center mb-4">
        Only the best indie games, reviewed for you.
      </p>
      <ul className="flex flex-row flex-wrap gap-3">
        {reviews.map((review, index) => (
          <li key={review.slug} className="bg-white border rounded shadow w-80 hover:shadow-xl sm:w-full">
          <Link href={`/reviews/${review.slug}`} className="flex flex-col sm:flex-row">
            <Image src={review.image} alt="" priority={index === 0} width="320" height="180" className="rounded-t sm:rounded-l sm:rounded-r-none" />
            <div className="px-2 py-1 text-center sm:text-left">
              <h2 className="font-orbitron font-semibold">
                {review.title}
              </h2>
            <p className="hidden pt-2 sm:block">
              {review.subtitle}
            </p>
            </div>
          </Link>
        </li>
        ))}
      </ul>
      
    </>
  );
}

This markup ensures that the subtitle appears below the title, and we've styled it appropriately to differentiate it from the title.

Responsive Design: Showing Subtitles Conditionally

When designing for various screen sizes, it's important to consider how content will be displayed. Subtitles, while informative, may clutter the interface on smaller screens. To address this, we implemented a responsive design approach that hides subtitles on smaller devices.

Implementing Responsive Visibility

Using utility classes, we conditionally display the subtitles based on the screen size:

export default async function ReviewPage({ params: { slug } }) {
  const review = await getReview(slug);
  console.log(review);
  return (
    <>
      <Heading>{review.title}</Heading>
      <p className="pb-2">{review.subtitle}</p>
      <div className="flex gap-3 items-baseline">
        <p className="italic pb-2">{review.date}</p>
        <ShareLinkButton />
      </div>
      <p className="italic pb-2">{review.date}</p>
      <Image src={review.image} alt={review.title} priority width="640" height="360" className="mb-2 rounded" />
      <article dangerouslySetInnerHTML={{ __html: review.body }} className="prose prose-slate max-w-screen-sm" />
    </>
  );
}

Here, the hidden class ensures the subtitle is not displayed by default. The sm:block class overrides this setting for small and larger screens, making the subtitle visible.

Testing the Layout

After applying these changes, it's crucial to test how the design adapts to different screen sizes. On larger screens, subtitles enhance the content by providing additional details. On smaller screens, they are hidden to maintain a clean and uncluttered layout.

Adding Subtitles to Review Pages

Consistency across the site is important, so we extended the subtitle display to individual ReviewPages as well. By adding a paragraph element styled as a subtitle, we ensure that each review maintains a uniform look and feel:

<p className="font-semibold pb-3">
  {review.subtitle}
</p>

Conclusion

Through these enhancements, we've improved the HomePage by making it more informative and visually appealing. By leveraging responsive design techniques, we ensure that the user experience remains optimal across devices. These updates not only enrich the content presentation but also exemplify how small design choices can have a big impact on usability. As you continue to develop your projects, consider how responsive design can be utilized to create flexible and user-friendly interfaces.