Sarah Designs the World!

A real labor of love (including meticulously cutting out and collaging 100+ flowers from the generous folks at the Biodiversity Heritage Library), I proudly present: luisandsarah.com, the website for our recent wedding.

Lots of sweet images in the full-width responsive slider. Including this one of us jumping off the dock where the wedding was held:

Cowabunga!

Here are some of the other pages:

The wedding was small (under a hundred guests) and a bit remote. We were so touched by our friends and family who traveled from near and far (and farther!) to be there with us.

I had A LOT of fun making our paper invitations (will do a post on those soon), but we kept the RSVPs digital to cut down on costs….and to force people to venture to the dang website, bwahahaha.

Beyond logistics, I thought it’d be fun to also include some mushy and/or human interest content.

Like our little story:

(Maybe not so little?)

And also some miscellanea, including a collection of the things we love, snapshots of wedding dresses that didn’t make the cut, and a few of our favorite love stories from books and movies.

What’s awesome about making a website for yourself? Well, for one, you can do whatever you want! So I took that liberty to pepper the site with quotes and passages that felt like us. Such as:

^ This, folks, is a true story. I wanted it as a reading during the ceremony, but it was sorta awkwardly short.

Enough with the romance. How about the specs? Well, this site is responsive and hand-coded (with love).

Get Cool Stuff is a non-profit up-cycle boutique. They provide training for women in underserved populations, giving them the skills to revitalize forsaken items and then sell the cool stuff they produce. Good for people. Good for the earth. What’s not to love?

Eventually their site will be more of an e-commerce platform, but for now it’s a cool web presence they can use as they gather funding and establish their storefront.

Since there isn’t too much content at this stage, I went with a one-page design, kept hip and interactive with some parallax scroll effects and CSS3 animations, none of which you can see in the screen shot below.

The parallax images actually look more like this:

and this:

Not quite sure why my Paparazzi Ap turned them into scary red and beige blobs.

In parallax scrolling, the background (in this case, the image) and the foreground (the text) scroll at different speeds, which creates a nice feeling in your tummy. Try it.

(Someday I’ll stop being so lazy and mock-up my screen shots in an empty browser window with Photoshop, the way a proper blogger/designer would, but that day is not today. So please shame me for my nerdy browser tabs and really lame bookmark folders and Inbox with 3,931 messages if you feel so inclined.)

Here’s a closer look at the content sections:

On mobile, since there’s no hover, the “We Believe” circles aren’t so interactive:

That’s right folks. This site is responsive. Shouldn’t it go without saying? Can we please make responsiveness (responsivity?) mandatory?? (Full disclosure my own site isn’t responsive, but it’s a grandpa at three years old, so, give it some slack, will ya? He’s just trying to keep the weeds out of the garden and keep track of his teeth.)

Unfortunately the actual site isn’t responding as shown above because Go Daddy has some auto-redirect mobile bananas set up. But as soon as I get the client’s credentials to update the DNS, it’ll work like the beta site, captured above, and currently living on my non-Go Daddy and not-bananafied server.

Alright. Go getcher cool stuff.