If we go back ten years back into 1990s and start of 2000 the number of people connected with Internet to fulfill their various needs are very limited and it was mostly used by rich. But in the present day more and more people are gathering around the Internet in their daily activities and for most of them spending at least few minutes has being a part of their daily life. Due to its very powerful social networking capability it has made our lives more dynamic and exciting. So it is very important for people who involve in the process of evolving this infrastructure to make use of the accepted standards in all of their development efforts because this greatly benefits all kind of users with varying accessibility issues to achieve maximum satisfaction with less trouble.
In the earlier days of the Internet web sites were developed mainly based on table structure and this method was very popular among everybody. With the effort of numerous industry experts proper standards were defined to give the user a better user experience. As a result HTML and XHTML got evolved over the years to organized the content ( HTML 5 standard will be the future of web ) for representing the content and the CSS is there to control the look and feel (presentation) of the web page. In this article I’m going to share some resources that will be helpful for web developers.
Favicon
This is the small icon that is getting displayed on the address bar of your web browser just before the place where you type the URL which you want to visit or on the left most corner of the browser window tab. It’s it highly encouraged to include this feature into the site during the development phase. There are plenty of freely available services to have your favicon generated out of any popular image formats like png, jpg, gif, bmp, etc…
Introduction
I have seen that still the people use table based structure to handle the overall layout. In most cases they have adapted this approach to overcome the layout issues encountered with IE. It is very important to understand the importance in use of CSS to control the overall as well as element level layout. This gives a grater advantage to the web application in many ways, such as cleaner and structured layout, saves loading time, easier organization, wider accessibility, etc… If you are new to this following are some of the useful sites worth going through.
DIV based layouts
When you first received the site design it’s very important identify the correct layout for the site.
- Tow columns with a sidebar on left or right
- Three columns with sidebars on either side
- Three columns with sidebars either on left or right, etc…
Once this is clearly identified next step is to properly organized it on your HTML page using div elements rather than going for table elements.. For example if the design is a three column layout having the sidebars on either sides of the content with a header and footer, this can be very easily organized as follows:
#wrapper- { width: 450px; margin: 0 auto; }
#header-,
#footer-,
#content-wrapper- { float: left; width: 440px; margin:5px; display: block; clear: both; }
#sidebar-left-,
#sidebar-right- { float: left; width: 90px; height: 250px; }
#content- { float: left; width: 250px; height: 250px; }
<div id="wrapper-">
<div id="header-"> header </div>
<div id="content-wrapper-">
<div id="sidebar-left-"> sidebar left </div>
<div id="content-"> content </div>
<div id="sidebar-right-"> sidebar right </div>
</div>
<div id="footer-"> footer </div>
</div>
Please don’t consider this as a complete example. I just provided this as a starting guide. Following points are very important when you are into serious work.
- Reset the oveall HTML elements to a default styling settings.
This step helps your to reset the HTML element’s properties to know and a standard configuration overriding the properties applied by different web browsers.
- Yahoo‘s YUI 3: CSS Reset
- Approach by Faruk Ates
are few examples to start with.
- Apply HTML element level styling
Start applying the element level styling. Doing so you’ll be able to maintain a consistency throughout the site.
- Apply the overall site layout styling as shown above
- Lastly apply the section level styling
Jason Bartholme has taken the trouble to share some awesome CSS resources. 🙂
tHOUGHTS & iDEAS 