Noteworthy: Gal Meets Glam Revamped

Last week I finished a blog revamp for Gal Meets Glam. I realize I’ve said that I don’t do blog design and instead refer all potential design work to my Blog Design Directory. But when Julia asked me to migrate her blog from Blogger to WordPress, and do a redesign in the process, I hesitated. And then I said yes. What swayed me was that Julia had a clear vision for her blog — Gal Meets Glam was already in good shape and all I had to do was to streamline the columns to a proper grid while keeping a decidedly feminine look.

In the before and after screenshots below you can see some of the most prominent changes I made. One of them was the banner. The original banner used a block font for Glam and a script font for Gal Meets. I thought it would be best to flip the font types, so I used a script font for Glam to give the sense of a black marker “autograph” on an 8×11 glamour head shot photo.

I chose the color scheme from Julia’s pin boards and selected pinks, yellows, and blues to create the resulting palette. You’ll see touches of these colors in the little polka dots at the top of each post, in the link colors, and in some of the sidebar blocks. You might be wondering where the yellow lives — you’ll only see it when your mouse hovers over the sidebar social links.

More Highlights

• At the top of the page, I added a fixed navbar that stays in place as the page scrolls — its transparency and background color adjust to harmonize with the images and text scrolling beneath it.
• In the spirit of using space economically and to make the blog more dynamic, I combined the house and affiliate ads in their own groups for in-place rotation. I also combined the Style and Beauty thumbnails with an integrated search box. (Photos by Ashley Batz, styled by Rosy Strazzeri-Fridman)
• There is an on-photo text caption on the Instagram carousel. I used the same technique I demonstrated in this CSS tutorial.
• I installed an FM ad so that it displays after the first post of every page.
• The blog archive moved from a sidebar drop-down menu to its own page with a month-by-month listing of every blog post.

Lessons Learned

• I learned how to make sure that self-hosted webfonts work with Firefox and IE. The tip: use relative paths!
• Posts imported from Blogger retain all of the inline CSS and break tags and because of the “cascade”, your WordPress theme’s style won’t work on the posts. I emphasize this because it’s important to be able to style every blog post uniformly using external style sheets (versus editing each post by hand) to match a new blog design. Blog posts cover at least 30% of the visible screen and greatly influence the look and feel and mood of a site. The lesson: Remove the post formatting from the Blogger XML before importing into WordPress!
• When installing a Pinterest plugin (with count), try this one first.

It was great working with Julia. We had a lot of virtual high-five moments in the design process, and maybe that’s because our design aesthetics are in sync. I hope you check out her blog and enjoy out her oodles of style and beauty tips.

P.S.
I get a lot of questions asking how to get started with CSS. Lynda is a great resource and they cover everything in great detail. I also have my own CSS screencasts that you can watch for $25/30 days. The course focuses on the CSS I use for the blogs I create. You can learn more about it here. You can also check out my free HTML/CSS tutorial quickies here.