17 June 2014

DIY Wedding Week 2014: wedding website

Wedding week continues!

Yesterday I told you all about our DIY’d invitations, which are so lovely that we keep one framed (as I told you about yeeeears ago).


But that wasn’t the only way we kept our guests informed of our wedding goings-on. You might have noticed from the blurred-out info on our map cards that we also had a wedding website.


Wedding websites weren’t uncommon four years ago, and now it’s a bit odd to attend a wedding that doesn’t have at least a super-basic website set up. But once again, Mr. P and I figured that what comes standard could be made even better with a bit of DIY customization! And that’s how we ended up with this.


I had a vision of re-creating a fancy paper invitation on the screen, with a few old-timey tropes (like the silhouettes and the damask ornaments) to make it feel even more retro. This was way beyond the basic build-your-own-wedding-site customization options offered, so we decided to build the entire thing, from scratch, all by ourselves! Maybe it looks a bit basic now, but it seemed pretty dang fancy at the time.

Mr. P, as the wizard behind the curtain, incorporated all sorts of neat coding tricks, like menus that popped open (with little damasks too!) and menu options that turned gray when you hovered over them.


Plus he ensured that the text was placed exactly in the correct place, and tinkered with the precise page width until I was satisfied... all thanks to his coding wizardry. He then had it hosted through GoDaddy with a custom web address. Unfortunately: I have no idea how he did any of that. So I guess you should just be sure to get engaged to a guy who can do that sort of thing?

But no worries! Even though the website may have only run well thanks to Mr. P’s javascript prowess, it looked good and was chock-full of content thanks to ME. If you’ve only got basic html skills (like me), you can at least put together a comprehensive website that looks super fancy if you put the effort into the graphics and the content.

Let’s start with graphics, like those silhouettes at the top. To make those, we just took pictures in profile in front of a blank wall. I played with the threshold levels in Photoshop to make the silhouettes and then converted them to Illustrator vector files, but you could honestly do the same thing just tracing over your photo in Powerpoint.


To give the website the feeling of ink-on-paper, I just googled around for a free parchment texture background and added the shadow behind it (to make it seem like a piece of paper). For the headers, I just typed the words out with good ol’ Tagettes fonts (same as the calligraphy on our invitations!) and saved them as PNG files, which have transparent background and let the “paper” show through.


If you’re interested, the super-curly ampersand comes from Edwardian font. It’s like it was made for wedding websites! The other fonts I used were Yesterday Regular and Mona Lisa Solid (in small caps). Oh, and Damask Dings!

Finally in the “graphics” category, we have photos. Because I was going for the old-fashioned paper look, I wanted to make my photos look like I’d pasted them onto the page. So, I added a white border and shadow to each. I then “borrowed” (ahem) an image of photo album corners from a website selling them and pasted them in the corners, slightly outside the photo. Save the whole thing as a PNG and you’ve got photos “pasted” on your page!


Added bonus: use the Never Let Go font to “handwrite” captions for your photos (just save the text along with the photo in the file).

But with all this talk of graphics and design, hopefully you’ve noticed something else: CONTENT. Our wedding website had SO MUCH INFORMATION.




Here’s the deal. Your wedding website needs to have all that information AND MORE. Out-of-town guests are taking the time and money to travel to your wedding – you’d better make it super dang easy on them to get a hotel, find where they’re going, know what to wear, have an idea about what the weather will be like, know where to park, all of that.

You should also give them plenty of ideas of what to do and where to eat – we focused on recommendations that had some meaning in our relationship.



Because Mr. P and I hadn’t spent a ton of time with each others’ extended families, we also made sure to include a few pages about ourselves. At first this struck me as a bit vain and narcissistic, but I realized that this was my only chance for me to introduce myself to some of Mr. P’s family before I actually met them!



Plus everyone loves baby photos. COME ON.

And that, dear readers, is THE MOST important advice I can provide when making your wedding website, DIY or otherwise: provide lots of content. Honestly, I get a little annoyed when I get a URL to a wedding website, only to discover it’s just the ceremony time and address of the church (which is already on the invitation with the website address, duh) and twenty out-of-context photos of the happy couple (which I already saw on facebook). That is not useful to me as a guest at your wedding. That is not useful to anyone. I’ll take a bare-bones website chock full of content over a pretty one with no information any day!

Bottom line: if you’re going to make a wedding website, make it fancy and pretty if you must, but above all, make it USEFUL. Focus on the content, and let the design flow from that!

We’re not done with the hospitality for guests this year on wedding week – more to come tomorrow!

0 comments: