Custom Wedding Website
The ubiquitous wedding website is a tool many couples cannot imagine getting married without now. With all in one platforms with an integrated registry and RSVP capability, it’s no wonder why The Knot, With Joy, and Zola are so popular. When it came time for my own wedding, I wanted to try something a bit more unique and custom. Thus began a personal project to build my own wedding website and include some more personal touches for telling our story.
Drawing up plans
While working on this website, I was still working as a full time software engineer, so I hadn’t developed the skills for digital wireframing or prototyping yet. However, I created a few paper wireframes and started drafting my ideas before I started.
After creating my initial drafts I held a meeting with the other stakeholder (i.e. my then fiancé) to discuss the planned design and gather additional feedback. His notes included adding recommended restaurants and sightseeing locations for our out of town guests.
Mapping out details
Before starting development, I listed out each page for the website and a list of details and content that would be included for each page. This also helped me create more actionable tasks as I started building.
Page
Overview
Content to include
Home
Landing page with general information and navigation links
-
Wedding date and location
-
Link to RSVP page
-
Link to Registry page
-
Discord invitation link
RSVP
Deadlines for response and RSVP functionality
-
RVSP deadline August 1, 2023
-
Embed RSVPify iframe - opens dialog on button click
-
Remove iframe after deadline
Our Story
Interactive display for how we met
-
Picture carousal with engagement photos
-
Click links to swap between Amberly and Austin
Wedding Party
Gallery and bios for our wedding party
-
Two columns of wedding party pictures
-
Click name or picture to see a detailed bio
Schedule
Schedule and location details on wedding day
-
Time and location of wedding ceremony at church
-
Location and details for parking
-
Time and location of cocktail hour and following reception
-
Embed Google Maps of each location
Travel
Travel information and hotel block instructions
-
Closest airports and approximate travel times
-
Hotel block information and link to reserve
-
Other accommodation suggestions
-
Suggested locations for:
-
Restaurants
-
Shopping
-
Museums and sightseeing
-
Outdoor and hiking
-
Registry
Gift registry information
-
Link to Zola registry - open in separate window
FAQs
Answers for generally asked questions from wedding guests
-
Indoor or outdoor venue
-
Dress code information
-
Do’s and don’ts for our ceremony and reception
Evaluating potential tools
To build the application, I decided to utilize React.js, as I was already quite familiar with the framework. I wanted to try a new design library though, so I went with Tailwind CSS, which I never used before. For hosting and storing data, I used Google's Firebase and Firestore.
​
I chose to utilize a couple additional services as well from RSVPify and Flodesk. Overall, the cost of using an existing service was not very high and saved me time from developing a full end to end RSVP and email distribution system.
Incorporating responsive design
I built the website with a mobile first approach and used Tailwind CSS’s breakpoints to make adjustments based on screen size. People can access wedding websites on a variety of different devices and screen sizes, so building with responsive design was a critical part of the website. With each page, I took careful consideration in how the elements should be placed and followed the common guidelines for column spacing.
Project screenshots
Home page
Schedule page
Travel page
