The exhibition showcased work from the final year fine arts students from the Stella Maris College for Girls – and before you jump to any conclusions I would like to lay to rest any vicious rumours that the only reason I went was to mingle with exceptionally pretty young 20-something girls…that was just an added bonus (note to mother: I really AM trying!).

Indian art gallery

Art...really!

Now this is art that even I can appreciate!

Now first and foremost I should say that I am by no means an art critic (ha! Imagine!) and I think a lot of the art scene is so far up its own arse they’ve lost touch with reality.

With that said and out of the way, I was really taken aback by just how good exceptional a lot of the work was. I don’t know my Classic from Renaissance (private ‘in’ joke there, wonder if they’ll get it), but I do know what I like when I see it. To me, what I like is waaaaay more important than what some pompous art/design critic says.

Infact, I liked what I saw so much, I’ve decided to actually go ahead and buy some (yeah, it came as a complete surprise to me too!), the problem is, I can’t decide which pieces to buy because I’d happily take them all, so I’m going the ask the audience and see what you think. Take a look at the photos, and let me know if you have any opinions!

I really like this one

I love the green and black on this one

I have no idea why, but it's great!

This is actually my personal favourite...but I couldn't tell you why

i love the colours and the style of hair

It's quite an ethnic feel to it

I want to be very clear on this, I don’t want to be mistaken! I’m not turning arty farty, I’m not buying them as an investment, I just genuinely like them, and at the price they are being sold at, they are a bargain!

I’m usually very harsh about the creativity of Indians because in my line of work it’s incredibly hard to find good graphic designers (my old work colleague, Vel might be an exception here), but these pieces show me that there are very talented artists…if only I could convince them to come and try their hand at web design!

The highlight of the inauguration was a live painting by an artist called R.B. Bhaskaran who regularly sells his art work across the globe for thousands of pounds. He literally stood there in the gallery while everyone was watching and painted this – although on a personal note, in this case I prefer the students work to the one he knocked up in 30 minutes.

R.B. Bhaskaran painted this in 30 minutes!

Like

Unlike

Related posts:

1. I Haz The Culture
2. The Two Indias and Generalizations
3. Culture Vulturing In Chennai

Well, OK, it’s not completely redesigned, I have a bed, a desk and a chair in here, but I created cool bed unit to go behind my bed. I miss having a bookcase for all my books (since books are ridiculously cheap out here – about 40% of the price in England). I also want to have a bedside lamp for late night reading, and it’s such a pain to walk almost 3ft to the light switches and turn them off!

So, I downloaded this Sketchup tool, worked out how to use it in seconds (it’s that easy) and proceeded to design a unit for my bed. Tell me what you think…

Like the bed unit? I did it all by myself. The software is really cool, you can put different textures on things – and the results are quite professional, even if I do say so myself! I’m thinking that I can hire a carpenter here in Chennai to turn my dream in to reality. The wonderful thing about India is that true craftmanship doesn’t still cost the world like it does in England, so you can get a custom made unit for the price of an Ikea wardrobe.

You can even turn your creations in to stylized sketches with a few clicks of a button, check out this, how cool does it look?!

So, hopefully we can get this unit created and then I can have the perfect bedroom with a nice big bookcase and bedside lamps.

I should have been an interior designer.

Like

Unlike

No related posts.

What’s more, I don’t have any evidence to suggest that a search engine optimized layout will do any better in the search engines than a normal HTML layout. Using an SEO layout could be wishful thinking for all I know.

With that said, here are the ingredients that in theory make up the perfect SEO website layout.

1. The code has to be as clean as possible. This means using tableless CSS to define the layout rather than tables because it makes the website much ‘lighter’ and the content becomes the dominant factor rather than the table dividers, rows, font attributes etc.
    
2. The should be as little text and or code from where the body starts to where the content starts. Again, this is the case for using tableless CSS as you can virtually have the content be the first thing the spider reads as it crawls your site while still maintaining an attractive design
    
3. Your H1 and H2 tags should be as close to the beginning of the code as possible. This is to make sure the spider reads it first as the H1 tag is often given a lot of prominance in the search engine rankings. It’s like a big neon sign that says “this page is about ABC”
    
4. Make your content appear before the menu in your code. This makes sure the spider doesn’t get distracted by all the other keywords in your menu and indexes all your content before it moves on to another page
    
5. Use the title attribute in your h1, h2, a and img tags. The title attribute enables you to add a few more relevant keywords about the page and increase the keyword density of the page
    
6. What ever method you use to code the website (HTML/XHTML) make sure it is valid code. It is often said that Google will rank a valid code website above a non-valid one, however, I don’t have any evidence to support this. But hey, it can’t hurt, right?

Using the pointers above, i sat down and attempted to create my first XHTML/tableless CSS valid website that was extremely optimized for the search engines. Here’s what I came up with…

Creating The Graphics

The first thing I did was fire up photoshop and create a background and foreground. The background was a solid light grey and I created the foreground using the rectangular shape tool and setting the width to 770px (which is about the size of a standard website).

I added a few blending options to the rectangular shape to give it a glow and a solid border. I also did a slight inner glow to really define the shape. If you look at the image below, you will see it looks nothing like a website right now!

I then added a small blue bar which was going to act as the divider between the header and content. The blue bar was made just using the rectangular shape again with a gradient over the top with the opacity set very low. To make the bar stand out I added a light drop shadow to it. The result was this:

Still doesn’t look much like a website, right? For one thing it’s way to short

Slicing The Graphic

The method of creating a website nowadays is to create the graphics in photoshop, do a process called slicing and start working with the graphics in a HTML editor like Frontpage or Dreamweaver.

When you are slicing a graphic to become a website you need to start thinking of it as a jigsaw and working out how all the bits will fit together.

This is a very simple website so I just need to create four graphics from this image:

• Top bar
• Header with the blue bar
• Main background
• Bottom bar

The image below shows how I have sliced the website. There are four blue boxes and each one will create a separate image.

Since the background attribute can be repeated in what ever direction I want, I can get away with creating a background image that is just 1px high and then repeat it vertically. This is why I didn’t need to create a large website layout in photoshop because I knew that I only needed to take 1 pixel from it for the background. Clever, huh?!

Writing The Code

When I began this project, I had basic CSS skills, things like defining text attributes. But to create the design I wanted, I needed to learn how to do layouts with CSS. To do this I used these resources to learn CSS layouts:

• Pixel2Life.com
• W3Schools.com
• OpenWebDesign.org

What I found helpful was to imagine that you are substituting tables, dividers and rows for div tags. The content within a div tag can then be placed left or right by using the float attribute.

float: left

The code above would align the content to the left.

The construction of the website consists of 4 parts:

• The Main Wrapper – This defines the alignment and width of the website
• The Header – This defines the top image and the title of the website
• The Content Wrapper – This defines where the content goes
• The Footer – This defines the bottom image and any text to go in the footer

The whole website is enclosed in a wrapper (think of it as wrapping paper around a Christmas present, it encloses everything). The wrapper defines the alignment and the width of the website.

#wrap {
position: relative;
width: 800px;
background: #FFF url('images/bg.gif') repeat-y center top;
margin: 0 auto;
text-align: left
}

The next part of the code needs to define the top image, the header and the title of the website. This has to use an absolute postion because we want the top image to appear on top of the background image.

#top-bg {
position: absolute;
width: 800px;
height: 30px;
background: #F8F8F8 url('images/top.gif') repeat-y center top;
top: 0; left: 0;
z-index: 2
}

#header {
width: 800px;
position: relative;
height: 95px;
padding-top: 10px;
background: #CCC url('images/header.gif') no-repeat center top;
padding: 0;
color: #FFF
}

#header h1 {
position: absolute;
margin: 0; padding: 0;
font: bold 36px 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -1px;
color: #AEAAAA;
text-transform: none;
text-decoration: none;

/* change the values of top and left to adjust the position of the logo*/
top: 25px; left: 30px;
}
#header h1#logo-text span {
color: #838181;
}

Although it looks like quite a lot of code above, all it’s doing is placing the top image, the header image (with the blue bar) and defining how the h1 title tag should display.

The next task is to define how the content will look. Since I want to make this a two column layout with the text on the left and the menu on the right I will need to use three sets of div tags. In the code example below I have taken out all the content and just left the div tags so you can see how the structure looks.

To my mind it is very similar to using tables. The top “content-wrap” div looks like the table tag to me and the “main” and “sidebar” divs act like the td and tr tags. (I replaced the < and > with [ and ] so that it displays correctly below)

[div id="content-wrap"]

[div id="main"]

[/div]

[div id="sidebar"]

[/div]

[/div]

Once the code is in there you can define the layout in CSS. I mentioned before about the “float: left/right” attribute. In this case we will just float the “main” div to the left and the “sidebar” div to the right. Very easy huh? This creates our two column layout without using tables.

The code below shows how the CSS defines each of the divs. Notice the float left/right for the main and sidebar div id’s.

#content-wrap {
position: relative;
clear: both;
float: left;
width: 770px;
padding-left: 15px;
display: inline;
}

#main {
float: left;
width: 68%;
padding: 0 0 0 0;
margin: 10px 0 0 20px;
display: inline;
}

#sidebar {
float: right;
width: 27%;
padding: 0 0 0 0;
margin: 10px 0 0 0;
}

The final piece of the jigsaw is to insert the footer image and make sure it’s perfectly aligned. To achieve this I needed two div tags, one to define the position and location of the image and the other to define the text. This ended up looking like this:

#footer-wrap {
clear: both;
width: 800px;
font-size: 95%;
background: url('images/footer.gif') no-repeat center bottom;
}

#footer-bottom {
clear: both;
color: #666;
height: 25px;
margin: 0 auto;
width: 800px;
padding: 10px 0;
text-align: center;
}

And Viola!

I added in a few extra bits such as a cool rollover menu on the left and the list in the main content column. But the code I have used above should help you create your very own 2 column tableless css design with a header and footer image.

View the final design here: SEO Optimized Template

You can download the files here:

Right Hand Menu

Left Hand Menu

You are free to download and use the templates, but please don’t sell them or claim them as your own. I don’t require any link backs (although I should!) but if you mention this page on your blog or website or reference it in a forum post that would be cool.

Your feedback and suggestions are always appreciated. Do you want to see any more templates of this nature?

Let me know, use the comments form below!

Like

Unlike

Related posts:

1. The Quest For A Perfect Haircut
2. A New Website
3. HYIP101 Website

I made the new design to be lighter and have more white space that gives it less of a cluttered feel. I also wanted to make sure each blog post was in it’s own container so it was obvious where one ended and the other one started. I increased the font size too because I think it will make the text easier to read.

It’s still got a few more bits and pieces to be sorted out before it is done but I think the bulk of it is completed now. Even the search form works! Check it out above! I was happy when I saw that working for the first time.

Unfortunately the website isn’t XHTML valid – I’m just not that good yet. I still like to use Frontpage to do all my editing (and sod anyone that slates Frontpage…it does a bloody good job and is no different to Dreamweaver) though I do a lot of the design integration using Wordpad. Maybe when I can get my hands on Microsoft’s new Expression software I can start coding sites in XHTML and tableless CSS but to do that I need to get a new computer.

I found that working with Wordpress can be infuriating at times, particularly when it comes to the menu options down the right hand side. More than once I found that I had to delve into the bowels of the software to edit/remove/add some code to make the menus display right.

I am actually developing the easyCMS software because it was born out of the frustration of trying to integrate designs into Wordpress and finding I didn’t have complete and utter control over absolutely everything design related. Can you say control freak?! :p

Well, I’d really like to get your feedback on what you think of this new design. So far the response has been 50 / 50, some saying that they like it, others are hating it.

Like

Unlike

Related posts:

1. Great Web Design Resource

easyCMS Promises To Make CMS Easy (yeah, we’re still working on the slogan!)

I’ve always felt that a CMS should be about managing your content, not about managing your design and layout. A CMS should be a useful tool to make your website interactive and dynamic, not try to control every aspect of your website.

So often I have gotten frustrated with the willingness of CMS developers trying to make the CMS everything to everyone that it becomes so complex and tricky it actually becomes unusable. Take Joomla for example. It’s a great CMS, with tonnes of tools. But why should I be told where the menu has to go and control all the menu options from the admin area? Why is the templating system only accessible to those that have degrees in rocket science? It’s too much.

Or how about Drupal? Another great CMS, but a degree in nuclear physics is a requisite if you plan on using the admin area or attempting to create a complete new design.

Why is easyCMS different?

I have built it to be webmaster friendly. For people that don’t have the time to code strict XHTML sites (even though we all know we should, right?!) or don’t know how to create the XML file to import. It uses basic SMARTY files meaning that you can integrate any design you wish (and I do mean any) and have it be dynamic and content driven in no time.

I have set the price of easyCMS at $14.95 which you can pay with PayPal. It comes with a default design which is pretty awful, I’ll be the first to admit and am working on creating some nice designs for the script.

The default design needs to be changed ASAP to something with a nicer design!

So far I have already created a couple of great designs, but I will not be releasing them to the public as they will be for my own sites. However, to prove that you really can integrate some great designs to easyCMS here are the screenshots to the designs that I have created and integrated into the script.

I created this design for a site called IMCentral which I’m developing and am using easyCMS to run it. I’ll release more details on IMCentral soon

I think I’m going to use this design for a new range of products over on NicheAdSenseSites.com

There are many many new features in the pipeline for easyCMS, infact, when I spoke to the development company tasked with programming this software they reckon that there is about a years worth of development ahead. I’ve broken everything down in to phases though – I’ve learned my lessons from last time with HYIPJunction. Nice short development cycles with lots of testing and feedback throughout. Wash and rinse as required

You can visit easyCMS here: http://www.easycms.net

Like

Unlike

No related posts.

The drawbacks to using website templates are that your design will never be unique – there may be lots of other websites out there with the same design – maybe even a competitor. Next, a template may not have the exact layout that you require (maybe the nav bar is in the wrong place or there’s not enough room for your logo or the menu has too many options that you don’t need) in which case you would end up paying a designer to modify the layout anyway.

However, given that there are tens of thousands of pre-made website designs available on the internet the chances of you having the same design as a competitor are extremely remote. Infact, given the cost advantages of pre-made templates, I think the benefits far outweigh the drawbacks.

There are dozens of different website template stores online so knowing which is the right one can be a difficult task. I have composed a list of the top 5 website template stores that I highly recommend from personal use.

5. Boxed Art – From $49.99

This website offers an incredible range of products for your website, from simple website templates to logos, brochure layouts and even mascot. If you develop a lot of websites, then boxed art should be in your toolkit. The best part is that of the thousands of products that they have, you get access to all of them when you pay the subscription fee.

A lot of their layouts and designs are a bit bland and can look quite ‘templatey’ and may be hard to customize for your use. There are not many designs available that are really stunning. However, given the sheer number of templates and range of products they have available, it shouldn’t be hard to find something that you like. Also, so many of the other products can be used for promotion of your site.

Another great thing about Boxed Art is that it is updated nearly daily with different products so there is always something new to check out.

You can check out Boxed Art by going to: http://www.boxedart.com

4. Dream Template – $59.99 Per Year

Just like Boxed Art, these guys offer you access to thousands of templates for a single yearly fee. Although they don’t have the same amount of, or range of products as Boxed Art the design quality is noticeably better. The templates have less of a templatey look to them and are definitely stylised with a more modern touch.

They have a large range of XHTML & CSS templates which is the design and build method that is becoming the norm nowadays. More importantly to some, they have a whole category for Web 2.0 templates as webmasters all over the world look to jump on the Web 2.0 bandwagon. The problem here is that everyone has different ideas as to what a Web 2.0 template should look like, so some people will invariably be disappointed.

A membership to Dream Template also gives you access to three other sites. If you are a prolifant webmaster, then access to the CMS themes site is worth the money all by itself with dozens of Joomla, Wordpress and osCommerce templates available (some of which are very good!).

One slight drawback to Dream Template is that the stock is not updated frequently – maybe once or twice a month. But if you want a design that is of a higher quality than Boxed Art, then check out Dream Template.

You can find out more about Dream Template at: http://www.dreamtemplate.com

3. Template Monster – From $45 Per Template

Template Monster is the heavy weight in the world of website templates. Their designs are of the highest quality and are easily as good as a professionally designed website. In many cases they are the trend setters in the design world, although some of their older designs may look a little dated (they have been online for around 5 years), the latest designs look bang up to date.

Another great thing about Template Monster templates is that they don’t look ‘templatey’ at all. With a little customisation your site could look as if it was tailor made to your website requirements.

They also have a wide range of Wordpress, osCommerce, ZenCart and phpBB templates available. All of them are of the highest quality and you would be hard pushed to find a website that has better looking themes for these bits of software.

One minor complaint that I have about Template Monster is that they insist on integrating flash into most of their designs when it’s not needed and they don’t code all their new templates to the new XHTML & CSS standards. Although they do release some templates like this, most are coded in valid HTML 4.01.

Template Monster is updated daily with new HTML and Flash websites. They add two or three themes for Wordpress, osCommerce, PHP-Nuke and phpBB weekly. Although many templates cost the same as a yearly membership to Boxed Art or Dream Template (where you get thousands of templates), the design quality is significantly higher.

You can visit Template Monster here: http://www.templatemonster.com

2. Template World – From $49.95

Template World recently came to my attention and I have become more and more impressed with their quality of design as time goes by. Although it’s not quite as high as something you would get from Template Monster, given that many individual templates on Template Monster cost more than a 6 month membership to Template World, could you live with a little dip in quality?

It seems that Template World are beginning to focus more on the XHTML & CSS based layouts than traditional HTML. They are also bringing in some gorgeous Web 2.0 templates that are far better than the ones offered by Dream Template.

Recently Template World have introduced some WordPress and osCommerce templates and quite frankly I prefer them to the ones offered by Template Monster. Infact, I think the design quality is above what Template Monster offers.

Template World doesn’t appear to have a fixed timetable for updating their site and this can be a drawback. Sometimes they even go months without adding new templates – but when they do, the wait can usually be worth it!

You can visit Template World here: http://www.templateworld.com

1. 4Templates – From $15 Per Template

And finally, introducing the number one place to purchase templates…4Templates.com. This site has been a favourite of mine for the past 4 years or so. Not quite as cutting edge as Template Monster, but their simple, clean and attractive designs have won many fans over the years.

Where Template Monster go for impressive visual impact, 4Templates concentrate on the layout and content architecture that makes the layouts very easy to customise and a dream to work with for webmasters. Couple that with the fact that many of these templates are half the price of Template Monster and the advantages are very apparent.

For the past year or so, 4Templates have been concentrating on providing XHTML & CSS layouts as well as traditional HTML layouts with all their templates. Ths gives them a significant advantage over Template Monster because where a webmaster might find a nice template on TM, he may have to spend a lot of time turning it into valid XHTML & CSS, whereas on 4Templates the work is already done.

Unfortunately 4Templates don’t provide any templates for various software like Wordpress or osCommerce and I think they are missing out on a massive market for this. Hopefully it will be something that they plan to add soon.

During 2007 I’ve seen a significant slowdown in the number of templates that are churned out. In 2005 and 2006 the site used to be updated nearly daily with new designs, but in 2007 this has slowed considerably – sometimes going more than a month without new designs being added. However, given that they have thousands of designs to choose from, finding the right one for you shouldn’t be too difficult!

You can visit 4Templates here: http://www.4templates.com

Like

Unlike

Related posts:

1. A New Website
2. HYIP101 Website
3. A New Website, A New Address

I think I have found where I will be getting all my templates from in the future

The website is: http://www.oswd.org

Like

Unlike

Related posts:

1. Another New Design!
2. Excellent SEO Resource
3. Three Great Films You Probably Haven’t Seen