• http://www.techneurons.com/career/
  • experienced programming consultants for hire !!!

    Contact Now

    Web Designing Articles

    KB: Web Designing Tips - How to make your web layouts clean and search engine friendly

    SATURDAY, NOVEMBER 5, 2011

    The TechWorld is now traversing from HTML 4 to HTML 5 using great features and advantages of the later, but still a major share of web still relies on the former version to keep compatibility and to meet with greater number of incompatible of browsers still in use. HTML5/CSS3 is greatly picked by web enthusiasts and web designing companies, but yet not reached the commercial production in larger scale.

    In any version of HTML/CSS, the layout of the website is very important for making it programmer friendly, as well as search engine friendly. A friendly web layout will help you to modify the design very easily at any point of time later, than leaving buggy views after modifications.

    Mantra of Balanced Web Layout

    The mantra for creating a well balanced and efficient web layout is as follows: DIV for layouts, TABLE for data, and PARAGRAPHS for contents. Paragraphs represent P elements and all inherited elements like headings (H1, H2, H3,..), lists (UL, LI,..). All other elements should be used as supporting features only. If your design follows this manthra as a design standard, your web HTML will remain standard for any co-coder, and will be clean for a search engine to crawl and index your page.

    DIV based layouts

    DIVs are grouping elements in HTML and is used more for client-side programming for visual effects, or simply showing or hiding group of elements in a page. DIVs are used to create visual elements like Tabs. The main purpose of DIV is for defining layout of web pages. As the name is, it makes divisions of the web page. DIV along with CSS styles float and clear can efficiently design the overall design of the website.

    For more detailed idea of using DIVs to make layouts, refer my previous article : Tableless Layouts using floating DIVs.

    TABLES for data

    TABLE elements are row/column representation of content in HTML, and was once a great revolution on in web technology. TABLE was extensively used for making web layouts. Using ROWSPAN and COLSPAN for cells, TABLE could render out different page layouts, but ultimately the requirements of web designing has gone beyond the flexibility limits of table. 

    TABLE is a tabular representation of content in HTML, hence well suited to represent tabular data. Latest indexing algorithms of search engines like Google look for data in TABLE elements and try to show them as extracted data in SERPs (Search Engine Result Pages). Now it is not wise for web designers to design their websites using TABLE layouts.

    PARAGRAPHS for content

    All web content - all text data, should be represented in one or other way as Paragraph or Heading elements. The content based HTML elements are P, H1, H2, H3, H4, H5, A, UL, OL, LI, PRE, BLOCKQUOTE, DT, etc. 

    SPAN element is used mainly for character grouping or character formatting, for example, words of phrases. They do not have search engine significance, but the content inside will be indexed, if it is in a suitable paragraph element. 

    Use STRONG element, whereever you need to show contents in bold form, and this element has a greater weightage than normal text with search engines.

    Please take care that there's only one H1 heading in a web page, but you could have any number of other heading tags. 

    Web Layout Planning

    1. Even before getting your graphic design done, you can make the skeletal work of your website by creating DIV based layouts. 
    2. Depend of stylesheet classes for style definitions. Provide neat structural class names for each layout element, and define the style defintions for each.
    3. Differentiate each layout area with a different color, till you have your graphic design ready to fill up the space.
    4. Use of CSS background style for setting layout images will preserve your web design images from being cached by search engines.
    5. If you are using ASP.NET, create master pages using the design above, and provide ContentPlaceHolders to define content areas.
    6. Provide contents in form of paragraph elements wherever needed.

    Points to take care:

    1. Do not enclose any text content plainly inside any DIV element.
    2. Do not place a DIV element inside a paragraph element
    3. Follow strict markup rules while composing your content.
    4. You may avoid META Description, if your page has enough text content, but make sure to provide a META Description if there is not much text content in any web page.

    You can adopt these rules to your web designs, and you'll get your search engine results clean and professional.

    ConsultSarath - We provide end to end outsourcing solutions for .net programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India. ConsultSarath - We provide end to end outsourcing solutions for php programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India. ConsultSarath - We provide end to end outsourcing solutions for python programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India.

    Other Popular Articles
    We are experts in Cloud Computing Technologies. We can assist you to build high scalable business applications using Amazon Web Services (Amazon EC2, Amazon S3, Amazon SES, SNS, CloudFront), Windows Azure Platforms - Windows Azure and SQL Server Azure, Google App Engine using Python and Django Framework. We are Expert Programming Consultants available at affordable rates per hour. We work on several technologies - .NET, Python, Google App Engine, PHP, Windows Azure, Amazon Web Services ...