A modular template
Since I presented my idea about the modular website template, I have got a lot of positive e-mails. As I have mentioned, the first beta version has been sent out for testing for a few days now, and so far the response is only positive. I'm still waiting for two testers to reply, and then I will release a second test version which will have almost full functionality. Betatesting requests are still welcome, since I need people with different skill levels (not just designers) to try out the next version.
For the first version (which only included 7 blocks and a simple framework) I was mostly interested in two things. First of all, is this concept a good idea that will allow people to easily build their own website layouts - or does it make template usage difficult and confusing? And second, should I go on with the work or rather give up and make regular templates instead? The feedback I got was very clear about both the simple editing and the value compared to my regular templates. Here are a some of the comments I got:
"This is surely something different which I hadn't myself thought of earlier. I just can't imagine the flexibility or say permutations, combinations possible when there will be 10-20 blocks available. Just 5 mins of checking and I was able to move blocks wherever I wanted to. It surely gives a lot of flexibility and options to users. I was able to make a 3 column block in 3 mins straight. I fell in love with this beauty."
"Looks pretty cool, even the simple test files."
"With the code arranged like this I can work with the code directly without any WYSIWYG editor. I have never been able to do that before. You must be brave to build something like this and then give it away as open source code…"
"I was soon cutting and pasting blocks. So I soon had my own custom layout from your template. I went a little over the top and had footer and header swapped as well as moving menus top bottom and repeating more than once. Nothing seemed to break. This is like a do-it-yourself website building kit!"
So, what is it all about?
I still don't want to get too technical since I'm changing things all the time and anything I write now may be dumped for something else at anytime. But I'll try to make a simple explaination of the concept itself.
The template is built in a modular kind of way where each module has its own independent functionality. Together, the modules form a website layout. This is not any new idea and not very advanced either. But it is new to me, and probably never used in the open source web design world before. The strongest feature with this concept would be that the user would get hundreds of possible layouts from one single template. The template consists only of XHTML and CSS (and no scripts at all) so there are no cool effects. Just a different way of coding which I have never used before. I still don't know if people will like the idea or if the template will work in the real world, but I am pretty sure that it will be useful for myself in the future since I can use it as a starting point for many different kinds of projects.
The different modules are: Blocks, Framework, Colorscheme and Backdrops. Those names are temporary, and if anyone has a better suggestion for what to call each module, please let me know!
Blocks - Small snippets of XHTML and CSS code, in the form of classes that creates independent and styled layout blocks on the website. A layout is formed by using a number of blocks on the HTML pages. Blocks can be used in any order, and the same kind of block can be used several times at different places in the layout. Sizes and margins will adjust automatically to the framework and to other blocks. A block could for example be "Header with slogan", "2 column content", "Horizontal button menu" or "Blog entry" just to name a few. I will include 25-30 blocks in the first final version of the template, and more blocks can easily be added in the future.
Framework - The basic XHTML file and the main page container in which the blocks are placed. The framework can have a fixed or a fluid width - and the blocks will automatically adjust to the size of the framework. The template will include atleast 4 different frameworks at release.
Colorscheme - The framework has a default colorscheme, but it is possible to change the entire colorscheme by including one additional .css file after the main stylesheet. A whole set of colorschemes will be included in the final version of the template.
Backdrops - CSS background images, that can be easily replaced to dramatically change the look of the site. Because of the image filesize limit only one set of backdrops will be included in the template, but more sets will be available for download from my website.
By using different combinations of these modules, it will be possible to create a large number of different layouts and designs from the template. The template user will also be able to use different layouts (or colorschemes) on different pages. With some scripting, this template could also be very CMS friendly, although it is not created for that purpose. The second beta version will be ready in a day or two. Leave a comment or send me an e-mail if you want to test it, and please describe your HTML/CSS skill level if possible!
Comments
Comment from stan
Time: January 16, 2006, 2:33 am
This sounds so cool. i can't wait to check it out, especially since i am not a designer by trade:)
Comment from Matt (DeezNuts)
Time: January 16, 2006, 3:08 am
count me in!
Comment from are jay
Time: January 16, 2006, 4:37 am
i would love to test this on a new site project i have coming up mid week.
Comment from Aaron
Time: January 16, 2006, 4:42 am
Sounds great, as I said before to you. I'm glad you posted this with more information, as the previous post left a bit wanting.
Is your plan to distribute this as a framework for other designers to use, or simply to use on your templates?
Comment from Gareth HUMPHRIS
Time: January 16, 2006, 5:03 am
Have been quietly looking at your work over the last few months and trying to teach myself CSS from it.
I do it for fun and for personal projects and friends websites - all non-profit.
I began programming HTML 1.0 but have not really done much experimenting since 2000 when I changed jobs and travelled.
I am interested in the module idea - I tried a similar thing a few years ago in Java to try to create user -customised interfaces for data collection and display (database). Was rudimentary but concept worked well in this environment…can see the potential of it in CSS/XHTML.
Would like to keep 'in the loop' with developments - I can see it would make my current 'experimenting' quite interesting and a lot easier!
Comment from Andreas
Time: January 16, 2006, 5:27 am
Peter Oliver: Good, I'll keep that in mind for the next round of testing!
stan: I have already promised you, right? =)
Matt: Already done.
are jay: The template will only be available for "silent" testing until I release the finished version, not for sharp use. That is simply because it is ready for that yet… You are very welcome to test the beta versions, but not on a live website (yet!).
Aaron: I will most likely distribute it as a single open source template, pretty much like my other templates but with the one difference: I will have much more information and lots of addons available for it on this website. Add-on blocks, replacement frameworks, new colorschemes and backdrops by myself and others…
I will not release any number of open source variations of it under any other name, but I will of course provide a large number of example layouts built with it inside the template package. But there will be only one template, which I will continue to work on and maybe release new versions of in the future.
And of course other designers will be allowed to use this template to create their own templates - or even their own modular concept. If the concept is well recieved, it will be copied (and improved!) by other designers. And the result of that? Lots of new templates for the world to enjoy!
With that said, I have another announcement to make. But I need to think about it for a while, so I'll probably post it in the blog tomorrow…
Comment from stan
Time: January 16, 2006, 5:39 am
yes, you did, thanks:)
Comment from Kassad
Time: January 17, 2006, 2:41 pm
Exciting project!
My html and css knowledge is very basic but I like to do some "intelligent hacking", mostly in Wordpress. :)
Modularity is one of my "fixa ideas" so I would be glad to test your work.
Thanks!
Comment from Gordon Tatler
Time: January 17, 2006, 6:28 pm
Keep up the good work Andreas - can't wait to see the finished template - if it's anything like previous templates then it will certainly be worth the wait.
My has an example of template8 drawing information from an SQL database (note - the links are mainly dummies). Was going to transfer the whole of my to it, but think I might well wait and see.
Comment from Gordon Tatler
Time: January 17, 2006, 7:36 pm
Ooppss! TRy again.
Keep up the good work Andreas - can't wait to see the finished template - if it's anything like previous templates then it will certainly be worth the wait.
My test site has an example of template8 drawing information from an SQL database (note - the links are mainly dummies). Was going to transfer the whole of my main site to it, but think I might well wait and see.
Comment from Kaushal
Time: January 18, 2006, 6:28 am
I have tested it. The key to this template will be blocks. The more the blocks the more powerful , useful the template will be.
Comment from blacksnday
Time: January 18, 2006, 7:52 pm
I would enjoy testing as well.
As the owner/sole developer of bashmyex.com I am already using your CSS for two designs being used.
While I need to focus the majority of my time with the php/coding side of the website, your Open-Source helps me greatly to be able to focus on the coding back-end.
I had struggled for a good while trying to find a Cross-Browser/Screen Resolution compatible design until I stumbled across your website. I then found a design I liked, and within 30 minutes was able to port to my code.
My skill level in html/css is pretty high… and same for my php coding level.
However, if you asked how my imagination was in terms of making something look cool… well … thats why I prefer to use open-source designs :P
Your modular template idea sounds just along the lines of what I am in the process of creating for the above website.
A template set of many different templates users can select from to optimize their experience while on my website.
So go ahead and contact me if you would like to include me in on any testing.
Comment from Gordon Tatler
Time: January 18, 2006, 9:46 pm
Almost like the way FLEXCMS does it ?
Comment from Mark
Time: January 19, 2006, 3:43 am
I would love to Beta this using a couple of my current project websites to see how it works (not live until released though)
Comment from oeb
Time: January 19, 2006, 10:52 am
Andreas put me down for the testing please, I would like to look at developing a CMS around it if you are intrested.
Comment from Mattias Jämting
Time: January 19, 2006, 2:37 pm
I would really like to test also. Your approach is something I have thought about for some, but haven't found the time. And btw, i was on a Lagoona (or was i TSEC)live concert in Trondheim a long time ago. It was really nice :-)
Comment from Gordon Tatler
Time: January 19, 2006, 9:29 pm
Me too, please.
Comment from Navjot Singh
Time: January 24, 2006, 7:44 am
I would also like to test it. Count me in!
Comment from Peter Oliver
Time: January 16, 2006, 2:00 am
I would love to test this and mess with it. I'm fairly good with xhtml/css so it is interesting to me on the level of using it, as well as how you are doing this. Thanks. Email: peter@leetpete.com