Archive for May 2008

This week, CSS layouts kept me awake into the wee hours almost every single day. I think a bit of background is in order before I go any further here.

My company is busy developing the next generation shopping cart application. We are looking to break our usual mould and use some new technologies – well, some are old and established and some are new – such as CSS (so that we can optimise the shopping card for Search Engines), XHTML, Java EE, JBoss Seam, JSF, EJB3 and JPA.

In the past, I have used frames and tables to a very large extent for layouts. However, this has quite a few problems:

  • Search Engines cannot work with Frames particularly well
  • Screen readers cannot read Frames and Tables based websites properly
  • Coding Login and Logout using Frames requires JavaScript hacks
  • and many more…

So I decided to look for a way to use CSS for layouts. Initially I managed to get hold of a layout that got us off the ground. However, we quickly realised that if we were serious about our product, we needed a better layout…something that made better utilisation of the Screen real estate.

Most CSS layouts out there are lame, to say the least. They simply use a width of 800 pixels. Come on designers, most people have a monitor with 1024 pixels width these days…and even more so on wide screen laptops such as mine. So why waste this space?

So I set out to search for a layout that had a header, a top menu, 2 to 3 columns with one column having fluid width and a footer that stuck to the bottom of the screen/content. Easier said than done. It so happens that what I was looking for was the “Holy Grail of CSS”. And the search proved to be just as difficult and frustrating as the search for the real “Holy Grail”.

I searched on Google. I asked the question on LinkedIn Answers. And I tried many a times in vain to create a layout of my own.

Well, I must say, I had quite a few sleepless nights…and a lot of frustration. However, I kept at it. And finally, I have managed to come up with a set of my own layouts.

I have uploaded all my layouts in a single zip file here.

These layouts are as follow:

  • 1colsbottomfooter – 1 column with footer sticking to the bottom of the screen/content
  • 1colsleftnavslickbottomfooter – 1 column with footer sticking to the bottom of the screen/content and extra CSS for navigation
  • 1colstickyfooter – 1 column with footer sticking to the bottom of the content
  • 2colsleftnavbottomfooter – 2 columns with left nav and footer sticking to the bottom of the screen/content
  • 2colsleftnavslickbottomfooter – 2 columns with left nav and footer sticking to the bottom of the screen/content and extra CSS for navigation
  • 2colsleftnavstickyfooter – 2 columns with left nav and footer sticking to the bottom of the content
  • 2colsrightnavbottomfooter – 2 columns with right nav and footer sticking to the bottom of the screen/content
  • 2colsrightnavslickbottomfooter – 2 columns with right nav and footer sticking to the bottom of the screen/content and extra CSS for navigation
  • 2colsrightnavstickyfooter – 2 columns with right nav and footer sticking to the bottom of the content
  • 3colsbottomfooter – 3 columns – holy grail css – with foter sticking to the bottom of the screen/content
  • 3colsslickbottomfooter – 3 columns – holy grail css – with foter sticking to the bottom of the screen/content and extra CSS for navigation
  • 3colstickyfooter – 3 columns – holy grail css – with foter sticking to the bottom of the content

Quite a few of them…I didn’t realise until I actually started to write about them.

The following resources were useful in creating the above layouts:

These layouts are free to use. And if they help you sleep any better, feel free to link back to me or drop me an email :-) .

For those of you looking to get any modifications done, I am happy to do so at a reasonable charge. Feel free to contact me.

I hope you have found the true Holy Grail of CSS here.

Search Engine Optimisation seems to be the hot topic of the moment for every website and online business.

After having done some search, I have found the basic elements that make a website rise up like a bubble through the ocean of websites on the Internet in a Search Engine.

But the internal factors seem to be only half the story. One also needs to look at the external factors.

Blog, blog and blog some more. That seems to be the way to go.

Become a member of websites like LinkedIn and give some good answers to LinkedIn questions.

Contribute some good quality content to websites that are constantly looking for content. And believe me, there are hundreds of websites that are looking for quality content.

Anything from as simple as how to setup a SubVersion Repository on Linux to how to create a Web Application using JSF and JBoss Seam seems to attract a lot of attention.

Luckily I have also found some websites like www.vipsem.com that allow you to quickly check your website keywords, description, etc. and give you a good idea of how the website would fare with Search Engines.

Tricky stuff. Driving me up the wall. But then, Internet is here to stay. So are search engines. And there is no shortcut to popularity.

Hardwork folks…hardwork and more hardwork seems to be the way to go. Or rather, smart hardwork.

My SEO guidelines:

  • Ensure that the website is XHTML compliant.
  • Choose a meaningful title. For example, my title is “Ashish Kulkarni”.
  • Choose relevant keywords and ensure they appear in the content. For example, my keywords are Ashish Kulkarni, Ashish, Kulkarni, etc.
  • Choose a description that is relevant to the content.
  • Refrain from using irrelevant keywords. For example, if I had a keyword like “Google” or “iPhone” in my keywords, even though they are popular keywords, they would not help improve my search engine ranking.
  • Ensure that the content of your website has a good density of the keywords and that they appear in the content naturally.
  • Check your signature on blogs and forums. Ensure that the URL of your website appears every time you post a message or a comment.

My favourite SEO tools/resources:

JBoss have released Seam 2.0.2.GA, the premier Java EE framework.

This release focuses on stability, component updates and documentation improvements. They’ve fixed over 150 bugs since Seam 2 was released back in November, and, with over 70 000 downloads since then, Seam 2 has had pretty good exposure.

 More details…

RichFaces 3.2.1 GA has been released. Following is a small list of new features and bug-fixes:

New Features Introduced
 

  • Plug’n'Skin feature introduced
  • Demo laguna skin created using plug’n'skin
  • Suggestion Box improved (JS API for calling suggestion and accessing selected Objects added)
  • Sorting futher improvements (Sorting objects not strings)
  • Filtering further improvements (default input corrected and styled)
  • DataScroller? improved (multiple instances behaviour and page binding corrected)
  • componentControl and contextMenu attachement improved

 
Bug Fixes
 

  • dataTable and sorting, filtering features (corrections on decode)
  • scrollableDataTable fixes (Scrolling and loading data problems, cross-browser support fixes)
  • ComboBox? fixes (according to customers feedback)
  • File Upload improvements and fixes (according to community feedback and internal tests)
  • Character encoding problems(according to customers feedback)
  • Memory leaks and perfomance fixes (according to customers feedback)
  • MyFaces specific fixes
  • Opera browser support fixes

JBoss have released version 2.0.2.CR2 of JBoss Seam, the premier Java EE framework. This release includes a lot of bug fixes and feature requests including the use of RichFaces 3.1.4.

More details…