Creating a Better Responsive Website

Maggiemccausland
Maggie McCausland
Published in
3 min readApr 10, 2023

--

I’m a fan of the Redwood Drive-In Theatre in West Valley, Utah. I love to go in the summer when I get the chance. However, every time I check out their website to see the latest showtimes I can’t help but think their website could use some help.

Keeping Consistency Across Devices

Original Redwood Drive-In Desktop & Mobile Version

While their desktop & tablet versions are the same, their mobile version is drastically different. On desktop it’s a creative, colorful, and fun website. Meanwhile, on mobile it does not share the same vibe in the slightest. It appears all time and effort went into creating their desktop version and in the remaining time they had left they threw together a rough skeleton outline for mobile. Not only that, the mobile version gives access to less content than what’s offered on desktop. I decided to try my hand at re-designing their site to be more consistent across all devices. I wanted the website to look and feel exactly the same across all devices.

Redesigned Desktop & Mobile

Scaling Content to Fit Screen

As opposed to the original desktop website version, shown below, I made the content adjust appropriately with the the scaling of the screen width. By doing so, all content became easily visible and accessible no matter what the screen width is adjusted to by users. This eliminated the original website’s problem of unnecessary horizontal scrolling to find content when the screen size is made smaller.

Redwood Drive-In Theatre Original Website — horizontal scrolling

Fixing the Mobile Menu

One of the first changes I made to the navigation was making sure the list was the same for both mobile and desktop. I realized they listed different navigation items for each device. This change was to ensure better navigational ease for users across all devices.

I also designed the mobile version to be more subtle and visually appealing to not make it the main focal point. The original hamburger menu is so unnecessarily large you can’t help but stare at it.

Original websites mobile menu vs redesigned version

Below is the link to view both the original Redwood Drive-in Theatre website and my version on Netlify.

Maggie McCausland is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to extracurricular work and representative of the skills learned.

--

--