Skip to: Content | Main menu | Section menu

andreasviklund.com

musician | web designer | writer

RSS



Category: Projects

A modular template

15 January, 2006 (22:20) | Projects, Webdesign | By: Andreas

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!

New thinking

11 January, 2006 (18:29) | Projects, Template news, Webdesign | By: Andreas

The decision is now made, and my next template will be something completely different from what I have done so far - and very different from the typical standard open source template functionality. A new way of building templates will give a new way of building websites from the templates. I don't know if it will be considered creative or stupid, but I like the whole concept and I hope that others will copy my idea and develop it further!

So what will it be? I can't tell you all about it just yet since not all details are finished, but the keywords are "modular structure". The page will contain a basic framework where modules of HTML and CSS code can be added. Modules consist of different layout parts, and any number if modules can be added in any order inside the framework. A module can be a header, a menu, a sidebar or a footer for example. It can also be a blog layout, a thumbnail gallery layout or a regular set if 2 or 3 content columns. The modules are written and styled in a way that allows them to be combined freely to create a full layout with the wanted features. When the layout is built, a colorscheme is applied to the whole framework (and all included modules). All this with only XHTML and CSS, so it is very basic.

If this works as I want it to, the final template should be very easy to use inside blogs or content management systems. It should make it easy to make scalable websites, since it will be possible to add more modules in the future. Modules can be written separately, without any need to change the main framework or colorscheme. Modules could even be shared with other people using the same layout, and included in different frameworks in the future.

Will all this work? I don't know, but I hope so. I have the first template and the first modules ready for testing now. Not very advanced, but hopefully a good start. The first release will be in a few days. Beta testers would be appreciated!

Introducing: ILEVA

19 December, 2005 (03:52) | Projects, Template news, Webdesign | By: Andreas

With nine templates released in my first set of free website templates, it is now time for me to come up with something new. The andreasXX collection has become amazingly well recieved, and popular to a level that I didn't think was possible. More than 36.000 copies of my templates have been downloaded from OSWD.org alone since andreas01 was released only five months ago! I have got a number of new friends among the other open source designers, and of course I have also learned a lot during these months. Because of all good things that the open source design scene has brought me, I want to do something really good for the second template set - not only for the template users but also for other designers and for myself too. After a month of brainstorming and planning, I can now present the idea for my next open source web design project. I call it "ILEVA"!

Think of ILEVA as a quality mark. The word is is an acronym for "Independent, Lightweight, Elementary, Valid, Accessible", which I believe are five very important features of a good website template. A template that have these features (and a number of additional ones that I will list later) can be called an ILEVA-approved template. This will mean that ILEVA templates will keep a very high quality, especially since they are free to download and use! Let me explain:

ILEVA (sample logo)

Independent: The template consists of hand-written code that works with any editor. You are not forced to use any specific program to edit the template, you can use any tool you want to.

Lightweight: The template has a low load size through to light (and intelligent) use of images and optimized code. It loads in a few seconds even with a slow dialup modem connection.

Elementary: The template does not have any useless features or advanced scripts. It consists only of the basic XHTML markup and the CSS styles that are applied to it, and the content is fully separated from the presentation.

Valid: All code in the template is valid according to the W3 web standards (XHTML 1.1 and CSS2), and the markup is semantically correct to make sure that the page is readable even when the styles are disabled.

Accessible: The template has basic accessibility features, giving it atleast a Double-A rating (WCAG 1.0), and compliancy with section 508.

The idea I have is to use these guidelines (and a few additional ones) and establish ILEVA as a tool that will force me to pay extra attention to the quality and the details when I create new templates. I also hope that other designers will take on the challenge and create ILEVA-approved templates. If the term gets accepted and spread, people with high quality demands can search for ILEVA templates to get what they want. These templates may not be suitable for a HTML beginners first website, or even for experienced users. ILEVA is for professionals and for businesses which require top quality code!

Now, I have the main idea of the quality level done, but I will need suggestions and feedback from others in order to find a level that can be accepted by others as well. I also need to know if there is any interest for a project like this, and what it should be called (ILEVA "rating", "-grade", "-approval" or anything else?). This is a first step, you now know what I will do next. If you want to join the idea, you are more than welcome! Please send me any feedback you may have, no matter if you are a template user, a designer or a website owner!

Five months ago I was happy just to see my first free design online, beside all those amazing designs that I had seen on the site before I joined. Today I know that the friendly spirit between the open source designers is a great help to get inspiration and to improve the coding skills. If the ILEVA project would work out well, I believe that it can give a great result in many ways - both for the professional template users that will benefit from the high quality, and for the designers since we will all need to learn a lot of new tricks…

The word is free, all feedback is welcome.