iPhonePortraitThumb NubbyTwiglet.com Development via ThisIsStar.com iPhoneLandscapeThumb NubbyTwiglet.com Development via ThisIsStar.com ipadThumb NubbyTwiglet.com Development via ThisIsStar.com desktopThumb NubbyTwiglet.com Development via ThisIsStar.com

My dear friend Nubby Twiglet has been running her blog for 5 years!
She decided to relaunch her site with a new design to celebrate, and she asked me to do the development. I decided this would be a perfect opportunity to turn her fixed design into a super awesome responsive layout.

desktop 640x706 NubbyTwiglet.com Development via ThisIsStar.com

This is Nubby’s original design. The unusual Navbar is my favorite element, and it was also the most difficult part of the layout to code. It was a challenge getting the nav items to stay in line with the left side of the post content, while keeping the triangle on the right pinned in line with the right side of the content.

Other fun aspects of this design that were the expandable sidebar sections (hooray for jquery toggle!) and font replacement (typekit for the win!).

ipad 640x1167 NubbyTwiglet.com Development via ThisIsStar.com

When the window gets smaller, the social link content on the right begins to run out of room on the screen. This brings me to the next section of the responsive layout.

Nubby didn’t have any mockups for other resolutions, so I designed some solutions to fix this issue as well as other small screen problems.
To keep the social links from overlapping with the main navigation, I simply stacked them vertically.
I used the same approach for the sponsor content in the sidebar.

I also wanted all the content to fit nicely on ipads and netbooks, so I set both the posts and the sidebar to fluid widths, so they would get smaller along with the size of the window.

iPhones 1 640x920 NubbyTwiglet.com Development via ThisIsStar.com

For very small screens, like phones, I removed the sidebar entirely.
This allows the content to take up the full width of the screen.
The images scale as they do in the previous resolution size, taking up the full width of the content container.

I’m so happy to have had the chance to work with Nubby all these years, and I’m so excited to see what we make together in the future.
5 years of blogging nearly every weekday is no small feat!
I’m so so proud of her for coming so far.

Extra responsive layout resources

About Star St.Germain

I am a tornado disguised as a girl.

4 Comments
  1. […] • If you’re interested in reading more about the development of my new site and learning more about responsive layouts, Star shares it all in her recap! […]

  2. […] I really loved these insights of the new responsive web-design of nubbytwiglet.com. There are already some new layout plans spinning in my head… [This is […]

  3. […] wait. She’s the one that first encouraged me to blog on my domain in 2007 and most recently coded up my redesign. LOVE […]

  4. […] Star’s development of Nubby’s new blog design is AMAZING! I really want to learn how to do this and incorporate it into my blog! The page layout morphs into the exact size of whatever window you are using! […]

NubbyTwiglet.com Development

Posted on

August 15th, 2012

Category

Design, Development, Web

Tags