As most of you know, I’ve been partnering up with Anna Moore for a few months now to create website for clients. She handles the design and I handle the coding. Well, today I’m going to tell you all about our latest project: building Jessica Sorensen’s website.
Anna really challenged me with this design. It has some pretty crazy angles and triangles that were SUPER CRAZY to figure out in pure CSS. But I did it and it’s awesome!
A split homepage
You can see the beautiful homepage pictured above. It has a split layout with an angled divider down the middle. That angle was actually a lot more challenging than you’d think. The problem is that there isn’t a way to angle only one side of a div in CSS. You can skew both sides, but not only one. So what this actually involved was:
- Skewing both sides of the container on each side (left and right).
- Skewing the actual images in the other direction so that the images themselves weren’t angled.
- Enlarging the containers so that the skewed outer edges weren’t shown.
- Hiding the overflow so that the inner images fit inside their containers.
This page alone took me a few hours to figure out, but once I got it working I was able to apply the same logic to other areas of the site.
Individual pages have crazy triangles!
At this point I’m thinking, “Oh Anna, what have you done?”
Here we have a split screen, with a full width image on the left and text on the right. But LOOK AT THOSE TRIANGLES!!
- There’s an angled black dividing line that kind of looks like a border.
- There’s a solid, light blue right triangle. It basically fills up all the space to the right of that black border.
- There’s a darker right triangle that’s flipped vertically from the light blue one. But this one is slightly transparent and it doesn’t reach the bottom of the page. It’s a big shorter. And, it also needs to be underneath the black line, but on top of the light blue triangle.
- Then we have an angled “About Jessica” part at the top. It’s angled on the left side to match up with the black divider line.
Let me tell you: it was ridiculously challenging to get all of these layers in order. First I had to figure out CSS triangles. And actually, CSS triangles are quite easy using borders, but the problem with that is you can’t use percentages. You have to use fixed values for borders (like 20px or 500px). And that wasn’t going to work with me when I was dealing with dynamic heights because you don’t know how tall that area is, since it depends on how much content is on the right.
A unique blog layout
Luckily, the blog was quite easy to put together since it was the very last thing I created. At that point, I had the whole “angled on one side” images thing NAILED.
But the blog was unique because the posts are actually loaded with ajax. Then it does this cool thing where when you click on a post, all of the thumbnails fade out except the one for the post you clicked on. Snazzy!
Integrated with the Novelist plugin
Jessica’s whole website is seamlessly integrated with the Novelist plugin, which is a plugin that helps authors manage their websites and book pages.
Here’s an example of what a book’s series page looks like. This one is for the Unbeautiful series:
Each page has a full width picture of the book/series on the left, with the books on the right.
This page is pretty much automatically generated. All Jessica has to do is create a page for each book and fill out user-friendly boxes for the book title, series name, purchase links, etc. Then this page gets created automatically with the covers of each book in the series (each one linking to the individual book) and the purchase links are automatically put together at the bottom.
Then of course each book has individual pages too that list the synopsis, etc.
Jessica had been using WooCommerce to sell her books online, so this integration was a must in her new theme. I did a lot to customize the WooCommerce page templates, including adding the cart to the header area (next to “Sort By”).
The most challenging design I’ve done… until maybe Anna’s website
At the time, Jessica Sorensen’s website was easily the most challenging site I’d ever built, due to the unique angled/triangle design elements. However, after finishing Jessica’s site I started coding Anna’s new site (coming soon!), which might have even more crazy angles! Anna sure likes to keep me on my toes.