Designing the websites for all types of monitor

Few years back I used to design webpage by simply designing a layout of 800 by 600 in photoshop and then splicing the images of the layout in dreamweaver. The layout looks good in the monitor of resolution 1024 by 768. With the increasing design requirements people has started using monitor of bigger sizes having higher resolutions. In such cases the above method fails and results in smaller layout having small fonts which would certainly not readable.

To design a layout keeping in mind the web 2.0 specification and the monitor of higher resolution it is best idea to have a top and bottom strip of hundred percent width and a content portion in the middle of some fixed size between the two elements of full width. This will ensure that the websites header and fotter will span the whole screen making the website all types of monitor friendly site and the content portion at the middle will be always at right angle to the user eyes.
For example see the facebook.com , ravishtechnology.com

Set background image for your website

Recently I played with a CSS property background-position for setting background image. You can set image at top, right, bottom or on the left side. It will set in the assigned position depending on it's size( if image fits the screen resolution , it will not move and will cover the whole screen). The opention proves best if you want a small part of an image to be displayed on some side and remaining portion to fill with color to achive some effect( You can see on the top right side of my blog)

My most celebrated Blogs

Besides web designing I have seperate blogs on graphic designing, action scripting, 3d modelling, SEO...etc. I feel that these blogs represents my different moods. When I get time I write a blog post according to my mood.

Problem of centering the div element in Internet Explorer

We use margin property to align an element on the page. This property works in Firefox but can't work properly in the Internet Explorer.  Consider the following segment of code:

 
We have defined an id outer-wrapper of width 880 pixels and align it center by using margin:0 auto; which automatically sets margin on both the sides of the element and align it to center. But, sometimes it may happen that the code works in Firefox but not in IE. Actually If you do not add DOCTYPE the IE goes in the quirk mode so that it does not understands margin property.

The solution might be adding a DOCTYPE line at the top of the document like

Or you may add the following code to solve the problem:

One of above method should work...Enjoy :-)

Usability and Web Designing

When a web designer starts designing a UI for a site, he has two things in his minds- one is to create a design that would impress the client and the second is to create a design that is different from the previous designed UI. My personal experience says that while designing beautiful UI generally designer forget the usability of the site.

To me usability is the ease of use of the sites element for the every kind of user, right from a child of age 8 to the old man of age 70. They should get easily what they want from the site. Easy navigation, proper placement of element like sign in, sign up etc boxes are some of the features of usability.

If u have seen traditional website designing, it will include a side bar, a header and a footer with navigation on the left hand side but in the modern sites the navigation are generally found horizontally at the top. What could be the difference between the two methods of laying the navigation? User generally find it easy to use the horizontal navigation because it is laid out in one line which does not requires movement of the eyes on the other hand the vertical navigational style in the sidebar takes more than one line which requires user to move the eyes on more than one lines.

Another point that could be discussed here is that the placement of sign Up/ Sign in box (lets call it SIBOX). A SIBOX at the left would always be a good choice. The reason behind that is the scrollbar. Users always tend to keep their mouse pointer on the right side, as the scrollbar is located on the right side only.

I hope the article will help you in your designing work at least to some extent.

Let's understand the importance of the web standards.....

Web has reached to it's second iteration, web 2.0 is spreading everywhere, people has started understanding W3C standards, but in our India situation is little worring. Not many people know the concept know the latest web standards and in such situation some company has launched website designing package which is truely standardless. When I saw that package first time I was astonished. I thought, how careless is the company launching this package about the web standards. Not only web standards but also designs of the site are worst and defeating the concept of web 2.0 - small size of text, difficuilt navigational system and less control over the design are some of the disadvantages of this package, but the worst part is that the templates available in this package are designed completely in tables. Tables were used for designing around 90s, it has been five to six years that the concept of tableless desing is introduced.

When I asked some person of this company about the standardlessness of the package, he gave me the reason that the target of these package are the people who have low budget for there site and has some small business. I don't think that table less designs are not quick. I thought that designing website through this package is like creating garbage in the web. The only reason of the success of this package is the ignorance of the people towards the web standards......

India come On! Let's understand the importance of the web standards.....

It is time to adopt tableless design

Tableless designing means to design the website layout without using HTML tables. If we design our layout by using table we might get the intended design output over the different browser but it will not be so consistent across different devices. Also designing layout by using tables increases the code which in turn increases file size. 


According to W3C tables should only be used for displaying the tabular data only. For designing div tag can be used along with CSS. Sometimes list element could also be used for designing navigations. Using CSS along with div tag has an advantage of seperating layout markup from presentational details which makes further modification easier.


All the above advantages of using div tag for layout along with CSS is associated with some problems like cross browser compatibility issues i.e. a website layout on one browser might look different on other browser. The problem might exist on different versions of the same browser. So be aware of all these hacking techniques of browser. One such problem is Box Expansion problem in IE where floated box expands in size drops at the bottom.  So start working on tableless design from today........