The Big Impact: Simple, Responsive Design

April 01, 2015


Welcome to our series on making small changes that are guaranteed to help level up your blog's look. Every other week we’ll debut a new post, profiling some great blogs for inspiration that employ Typepad's built-in features. We'll also offer up tips and tricks that can help improve your blog's appeal, gain new readers, and build a more engaged community. Check out our other posts in the series here!

Today, we continue our series on small changes to your blog that can make a big impact. Previously, we've talked about landing pages, custom banners, sidebar headers, and navigation. Today we're going to discuss how you can use a base responsive design with small touches to make it your very own.

We've been talking about responsive design a lot around here lately and we've been hard at work creating new responsive designs and the Nimble Design Lab for the past year. We know you want your blog to look great on any device a reader might use and responsive design is the best, most modern solution for that.

But maybe you're a little hesitant to make the switch. Perhaps you like your current design the way it is or maybe you're a little afraid of the work involved with creating a new blog design.

We want to encourage you to make the leap - you'll find that readers will adapt to a new blog design quickly and the rewards far outweigh the bit of work you'll need to invest.

To that end, we want to revisit the very first responsive design we made available called Snap. The design looks simple but that was our intention. You can use it right out of the box or you can use bits of Custom CSS to enhance it and add your own flair.

Remember: CSS is nothing to be afraid of. If you add some code and it doesn't work the way you're expecting, just remove it and save on the Custom CSS page. No harm, no foul.

We've recently worked with three Typepad Blog Services customers on creating blog designs with Snap as the base. You'll notice that while these blog designs look somewhat similar, they are all unique to the blog owner and their content.

First, we have Allergy & Asthma Care Center of Fairfield County. We created a simple but eye-catching banner and used CSS to add that to the blog's design.

Screen Shot 2015-03-30 at 12.17.42 PM

Next we have Denim & Damask. We used the same banner image method with a background image for the body of the blog. We also created a sidebar photo grid for featuring the author's favorite posts.


Finally, we have Diane Sammet's site. We used the CSS for a custom banner, as well as code for custom colors and fonts. You will also notice photo grids for showcasing artwork.


Are you using Snap? Leave a comment with your URL so other Typepad subscribers can see how it looks on a real, active blog.

New to Nimble: Borders for Posts and Sidebar & Miscellaneous Fixes

March 26, 2015

In case you missed all the hullabaloo about Nimble Design Lab, we're continuing to improve it, based not only on our own ideas for features, but also on all the feedback that we've been receiving from our Beta Team members.  Keep the feedback coming!  We love making Nimble work how YOU want it to.

The first thing we want to show off is that it's now incredibly easy to add borders to your posts and sidebars.  To do this, just look for the Border option within each section.  Click it and the options section will slide into view.  You can then click the "Change" link to see the various looks you can apply to the border like changing its color, style, and width:


These options allow you to make some great design choices for your blog.  Check out how the use of a solid border on one side and the double border on the other really sets to the two sides apart on this blog:

Isn't that great?  Borders are just one more tool you can utilize to make your blog stand out from the crowd.

Next, we wanted to cover some of the miscellaneous things we've been fixing as part of our Nimble housekeeping.

Previously you may have noticed that some widgets, like the Twitter or Facebook ones, would overlap within the sidebar.  We've resolved this issue and it shouldn't happen any longer.  If you do see this occurring, though, please open a help ticket so we can help get you straightened out.

There had also been a conflict with the ShareThis widget, but it's also been resolved and you can add it to your blog at Design > Content.  Check out the Knowledge Base for more information on recommended widgets.

Finally, you should see general improvements in icons and margins on blogs.

We hope you're loving Nimble just as much as we're loving working on it!  If you're using Nimble on your blog, leave a comment with a link or send us a Tweet.  Maybe your blog will get featured!  Keep working on those designs and maybe soon, you'll see your own design in Typepad!  (New feature spolier alert!)


Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.