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.
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!).
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.
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
- Smashing magazine’s responsive design roundup
- The goldilocks approach to responsive design
- Fittext.js- a responsive text resource
4 Comments
NubbyTwiglet.com Development
Posted on
August 15th, 2012
Category
Design, Development, Web
[...] • 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! [...]
[...] 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 [...]
[...] wait. She’s the one that first encouraged me to blog on my domain in 2007 and most recently coded up my redesign. LOVE [...]
[...] 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! [...]