Before converting a design from PSD to HTML, it is vital to choose the correct layout beforehand. Choosing between using Div tags or Table based layouts is a critical key that influences the process from converting the design to HTML, and the end results of the look, and navigation of the website. Considering the benefits, strengths and weaknesses, and drawbacks of each, is extremely important in making the decision. Each website has its own characteristics, and deciding on the layout is probably one of, if not the most important, decision the HTML designer needs to make.
In 1993, the web browser Mosaic, was created (Wroblewski 7). A Table layout was used to create this web browser that began the snowball effect of having websites on Internet. It changed the outlook of the Internet and usage thereof. The Internet was no longer only the playground of a selected few, but grew so much in popularity that websites are used by the public on a daily basis. Initially scientists were the actual Internet users; they used it to send data to one another. In the beginning the data was displayed in table format, which changed until it became Table layouts for websites. The tradition of Table layouts continued when websites were developed for Universities, businesses and the public.
In January 1997, the World Wide Consortium (W3C) accepted Div tags when HTML 3.2 was released (Raggett). The greater demand in websites, created a greater demand for how websites were displayed in web browsers. Website creators were now challenged with needing more flexibility and control of how the pages looked and the overall display of the website. The result was a new method, Cascading Style Sheets (CSS), assisting web designers to create web layouts.
How do Div tags and Table layouts compare to one another when deciding on the layout of a website? What are the strengths and weaknesses, the advantages and disadvantages?
A basic fact is that extra or additional code causes that websites run slower. A potential client is not going to sit around waiting for the company’s website to load. A website that loads slowly may be the cause of losing business. The client will go to another business, whose website loads quickly and is easy to navigate. This is one of the disadvantages, when converting PSD into HTML, by make use of Table layouts. Websites creating conversions are dead ducks in the water when navigation and opening the webpage are slow.
Table layouts are extremely time consuming when modifications or, alterations become necessary. The HTML designer will need to change the values of every single page of the website, width and height. This can take up to days to complete, it all depends on the website’s size. Even if it takes only minutes, it is minutes that could have been spent in more productive activities. Clients change their minds. It can happen after using the website for a while, and they need adjustments. This should be taken into account before the HTML designers convert the design to HTML. Will the HTML designer be willing to spend this unnecessary time on conversions?
Div tags also have weaknesses that CSS designers should take into consideration when converting PSD into HTML. Earlier web browsers sometimes display websites using Div tags incorrectly; the older web browsers are not geared for CSS. It is therefore essential when converting a design from PSD to HTML and using Div tags that the CSS designer is knowledgeable about CSS. Presently, CSS designers need to adjust by providing solutions to this problem, ensuring the pages of the websites are displayed correctly. Internet Explorer is the primary web browsers that cause problems regarding display.
Before converting PSD into HTML, another language needs to be learned. Although CSS is not intricate to learn, it does require time from the CSS designer to learn the new coding language. The time needed, will depend on the individual and the individuals coding experience. However, this is time well spent, that will reap ongoing reward. If compared withhaving chosen Table layouts, and the repetition necessary for adjustments, learning CSS is a much better option.
In certain conditions, Table based layouts are the superior choice to Div tags. Table layouts are the better option for calendars and price lists data. When Div tags are used, with similar data to convert design to HTML, a substantial amount of code would be necessary, and is very time consuming. It defeats the object of using Div tags.
The Table based layout is an easier concept to understand than Div tags. CSS knowledge is not required when using Table layouts. The majority of HTML designers have the right tools to convert tables quickly and with ease. Table layouts are easier to use to convert design to HTML for new designers. It is also easier to use in converting PSD into HTML when creating your own website.
Most CSS designers prefer using Div tags when converting a design from PSD to HTML, because its benefits are more than Table layouts. CSS gives CSS designers freedom by using external sheets to convert design to HTML, and changing the whole look of the website. In other words, instead of modifying every single page, one change changes the whole website.
When the CSS designer uses Div tags to convert design to HTML, one of the results will be a fast loading website with easy navigation. The potential client will not crossover to another business’ website because of poor navigation or slow opening of the page.
Table layouts do have their strengths and usages. However, when considering the benefits of both, Div tags are the better choice to use when converting a design from PSD to HTML. If you are unsure, Div tags is the better option for modern times.