Not a developer? Go to MovableType.com

News

Introducing the Movable Type Design Assistant

By Byrne Reese
Posted February 7, 2008, in Tips & Tricks.

For years now, Movable Type has had a powerful "Style Catcher" built in, which lets you browse a number of different style libraries all over the Internet, and then apply a style to your blog with just a click. It's really simple, but as a company that's always cared a lot about design, we wanted to give you more power, more personalization, and more control over the way your site looks. So behold, the Movable Type Design Assistant, a beta of a new tool designed to help you make beautiful sites, easily.

style-tour.png We started with a few of our most popular default styles, which cover a wide variety of visual looks, and which also offer a range of different choices for the number of columns of content you have on your site.

But what if you like one of the default styles and just need to make a few tweaks to it here and there? Or what if you want to start from a clean slate, working with a completely unstyled blog and adding in your own look and feel? The Design Assistant makes that easy, too.

Jim Ramsey, Movable Type's lead designer and someone who's done some great thinking about design in general has listened to a lot of feedback from the community, and knew that we could make this whole process easier. One of the first steps to making great design simple was his Universal Template Set concept. But everyone who uses Movable Type's default templates should have more tools -- not just to make the design process easier, but so that it's easy to learn how the whole system works while making a custom design.

We've already seen our Six Apart hackathons yield really innovative features like Action Streams or the first iPhone blogging interface, so it was easy for Jim to carry on that tradition to solve this design problem, putting together the Movable Type Design Assistant during the past few hackathons. The Assistant's as beautiful as the designs it creates, and it gives you the most intuitive way yet to select a style and layout as a starting point, and then to apply and preview modifications to a design using CSS -- all in real time, completely live. Once everything is exactly the way you like it, you can take the custom style and just copy-and-paste to apply it to your blog. There's even a handy "Learn More" area for you to find additional Movable Type design resources and our recommended reading list for learning and mastering stylesheets.

And this is just the beginning. In the coming weeks, the Design Assistant will be growing with new capabilities: More styles to start with, more layouts to choose from, easier ways to apply styles to your blog, and some great social sharing features to help you learn from, and benefit from, the incredibly generous and talented community of designers who use Movable Type.

We have released the tool under the GPL to encourage others to build on top of it. You can check it out of our code repository and make edits and improvements as you see fit. In the future we also hope to:

  • improve compatibility with Internet Explorer 6 and 7
  • include additional base styles to choose from
  • package it as a plugin so that the process of applying custom styles can be completely automated
  • include support for additional template sets so that users can more easily customize the style of sets like the Universal Template Set

If you are interested in helping, or have a question about how this works, or have found a bug, leave a note and let us know. We would love to hear from you!

Back

14 Comments

Arvind Satyanarayan

Arvind Satyanarayan on February 7, 2008, 9:41 p.m. Reply

Major props to Jim and everyone else involved. This is amazing!

Grace

Grace on February 7, 2008, 9:47 p.m. Reply

Amazing!!!

http://openid.aol.com/studiolift

http://openid.aol.com/studiolift on February 8, 2008, 4:08 a.m. Reply

Very cool!

PRO IT Service

PRO IT Service on February 8, 2008, 9:34 a.m. Reply

Fantastic! This is something many didn’t even dream of

Carlo48

Carlo48 on February 8, 2008, 9:52 a.m. Reply

Good

Ken Edwards

Ken Edwards on February 15, 2008, 2:49 a.m. Reply

I sure hope the next step of this is to integrate it into the MT4 Dashboard.

Mindtrain

Mindtrain on February 17, 2008, 11:41 a.m. Reply

Good job!!It’s great that you did this: much more user friendly. I had to purchase the Professional Pack because the standard interface was too cumbersome for my needs. I’ve found the Universal Template Set to be outstanding to use. It will be great when you guys get a version of the assistant for the UT set.

I also think that if the documentation for MT4 was a little more user-friendly, it would be easier for people like myself to customize our websites using CSS. By that I mean those of us who are not full-time or even part-time coders, but who know a little scripting from way back and have visions we want to accomplish in MT4.

mikeg

mikeg on March 27, 2008, 1:40 p.m. Reply

It looks great but how do I apply a style in the design assistant to my site? I don’t see how to do it.

Thank you, Michael

tima [typekey.com]

tima [typekey.com] on March 27, 2008, 4:58 p.m. Reply

When you use the Design Assistant and reach the last step (“Apply to Your Blog”) you are given these instructions:

1 Login in to Movable Type 2 In Design > Styles, select ______ 3 Below the large thumbnail on the right, you’ll see Layout options. Choose _______

Not the most ideal, but this is a first cut at the concept afterall.

Prefabric

Prefabric on January 3, 2011, 12:22 a.m. Reply

well,good article for newbies. I’m glad to read your post and i love it. It seems really helpful to me

Victoria.M

Victoria.M on July 14, 2012, 10:33 a.m. Reply

Hello, this is my first touch to MT. Until now I used mostly Wordpress and Snewscms. I having troubles integrating this into my MT account. Any help for a newbie?

PRO IT Service

PRO IT Service on July 14, 2012, 10:35 a.m. Reply

Hi Victoria,

Can you be more specific, please?

Thanks, Mihai

Daily Movable Type Consultant

Web Development Movable Type Consulting Six Apart Partner

http://www.pro-it-service.com/

Movable Type Demo http://www.movabletypedemo.org/

Edwina

Edwina on August 5, 2012, 1:35 p.m. Reply

Where can I find some of Jim’s MT designs?

Carl Hannegan

Carl Hannegan on October 26, 2012, 1:54 a.m. Reply

I can’t see where is the problem to login into the account and make some clicks before the new style by applied. It is great tool which gives lots of options to the designers.

Leave a Comment

Byrne Reese

Byrne Reese was previously the Product Manager of Movable Type at Six Apart, where he had also held positions as the Manager of Platform Technology and Product Manager for TypePad. Byrne is a huge supporter of the Movable Type user and developer community. He dedicates much of his time to promoting and educating people about Movable Type as well as building the tools and plugins for Movable Type that are showcased on Majordojo. He contributes regularly to open source; and he is an advocate for open protocols and standards like Atom and OpenID.

Website: http://profile.typekey.com/byrnereese