| Cascading Style Sheets |
|---|
| Concepts |
| Philosophies |
| Tools |
| Comparisons |
Tableless web design (or tableless web layout) is a web design method that avoids the use of HTML tables for page layout control purposes. Instead of HTML tables, style sheet languages such as Cascading Style Sheets (CSS) are used to arrange elements and text on a web page.
HTML is a markup language whose visual presentation was initially left up to the user. However, as the Internet expanded from the academic and research world into the mainstream in the mid-1990s, and became more media oriented, graphic designers sought ways to control the visual appearance of their Web pages. As popularised especially by the designer David Siegel in his book Creating Killer Web sites, tables and spacers (usually transparent single pixel GIF images with explicitly specified width, height or margins) were used to create and maintain page layouts. [1]
In the late 1990s the first reasonably powerful WYSIWYG editors arrived on the market, which meant Web designers no longer needed a technical understanding of HTML to build web pages. [2] Such editors indirectly encouraged extensive use of nested tables to position design elements. As designers edited their documents in these editors, unnecessary code and empty elements were added to the document. Furthermore, unskilled designers were likely to use tables more than required when using a WYSIWYG editor. This practice frequently led to many tables nested within tables, as well as tables with unnecessary rows and columns. The use of graphic editors with slicing tools that output HTML and images directly also promoted poor code with tables often having many rows of 1 pixel height or width. Sometimes many more lines of code were used to render content than the actual content itself.
The reliance on tables for layout purposes caused a number of problems. Many web pages were designed with tables nested within tables, resulting in large HTML documents that use more bandwidth than documents with simpler formatting. Furthermore, when a table-based layout is linearized, for example when being parsed by a screen reader or a search engine, the resulting order of the content can be somewhat jumbled and confusing.
Cascading Style Sheets (CSS) were developed to improve the separation between design and content, and move back towards a semantic organization of content on the Web. The term "tableless design” implies the use of CSS rather than layout tables to position HTML elements on the page. HTML tables still have their legitimate place when presenting tabular information within web pages, [3] and are also sometimes still used as layout devices in situations for which CSS support is poor or problematical, like vertically centering an element. Another area where tables are still used is e-mailers, because many popular Email clients have not kept up with modern HTML and CSS rendering. In such a scenario, complex e-mailers lose some of their structural and creative alignment.
The CSS1 specification was published in December 1996 by the W3C [4] with the aim of improving web accessibility and emphasising the separation of presentational details in style sheets from semantic content in HTML documents. CSS2 in May 1998 (later revised in CSS 2.1 and CSS 2.2) extended CSS1 with facilities for positioning and table layout.
The preference for using HTML tables rather than CSS to control the layout of whole web pages was due to several reasons:
Landmarks in the adoption of CSS-based layouts include the Web Standards Project's Browser Upgrade campaign of February 2001 and the web design magazine A List Apart's simultaneous redesign, followed by the Wired redesign in 2002. [5] The CSS Zen Garden website, launched in 2003, has been credited with popularising tableless layouts. [6]
The intended and semantic purpose of HTML tables lies in presenting tabular data [3] [7] rather than laying out pages. [8] The benefits of using CSS for page layout include improved accessibility of the information to a wider variety of users, using a wide variety of user agents. There are bandwidth savings as large numbers of semantically meaningless <table>, <tr> and <td> tags are removed from dozens of pages leaving fewer, but more meaningful headings, paragraphs and lists. Layout instructions are transferred into site-wide CSS stylesheets, which can be downloaded once and cached for reuse while each visitor navigates the site. Sites may become more maintainable as the whole site can be restyled or re-branded in a single pass merely by altering the mark-up of the specific CSS, affecting every page which relies on that stylesheet. New HTML content can be added in such a way that consistent layout rules are immediately applied to it by the existing CSS without any further effort.
Because of the Internet's rapid growth, expanding disability discrimination legislation, and the increasing use of mobile phones and PDAs, it is necessary for Web content to be made accessible to users operating a wide variety of devices beyond the relatively uniform desktop computer and CRT monitor ecosystem the web first became popular on. Tableless Web design considerably improves Web accessibility in this respect, as tables too wide for a screen need to be scrolled sideways to be read in entirety, whereas text can wrap around.
Screen readers and braille devices have fewer problems with tableless designs because they follow a logical structure. The same is true for search engine Web crawlers, the software agents that most web site publishers hope will find their pages, classify them accurately and so enable potential users to find them easily in appropriate searches.
As a result of the separation of design (CSS) and structure (HTML), it is also possible to provide different layouts for different devices, e.g. handhelds, mobile phones, etc. It is also possible to specify a different style sheet for print, e.g. to hide or modify the appearance of advertisements or navigation elements that are irrelevant and a nuisance in the printable version of the page.
The W3C's Web Content Accessibility Guidelines' guideline no. 3 states "use markup and style sheets and do so properly." [9] The guideline's checkpoint 3.3, a priority-2 checkpoint, says "use style sheets to control layout and presentation." [10]
Tableless design produces web pages with fewer HTML tags used purely to position content. This normally means that the pages themselves become smaller to download. The philosophy implies that all the instructions regarding layout and positioning be moved into external style sheets. According to the basic capabilities of HTTP, as these rarely change and they apply in common to many web pages, they will be cached and reused after the first download. This further reduces bandwidth and download times across the site. [11] [12]
Maintaining a website may require frequent changes, both small and large, to the visual style of a website, depending on the purpose of the site. Under table-based layout, the layout is part of the HTML itself. As such, without the aid of template-based visual editors such as HTML editors, changing the positional layout of elements on a whole site may require a great deal of effort, depending on the amount of repetitive changes required. Even employing sed or similar global find-and-replace utilities cannot alleviate the problem entirely.
In tableless layout using CSS, the layout information may reside in a CSS document. Because the layout information may be centralized, it is possible that these changes can be made quickly and globally by default. The HTML files themselves may not need to be adjusted when making layout changes.
Also, because the layout information may be stored externally to the HTML, it may be quite easy to add new content in a tableless design, whether modifying an existing page or adding a new page. By contrast, without such a design, the layout for each page may require a more time-consuming manual changing of each instance or use of global find-and-replace utilities. However site owners often want particular pages to be different from others on the site either for a short period or long term. This will often necessitate a separate style sheet to be developed for that page. The page (or template) content usually can remain unaltered however, which is not the case in a tables-based design.
HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.
Desktop publishing (DTP) is the creation of documents using dedicated software on a personal ("desktop") computer. It was first used almost exclusively for print publications, but now it also assists in the creation of various forms of online content. Desktop publishing software can generate page layouts and produce text and image content comparable to the simpler forms of traditional typography and printing. This technology allows individuals, businesses, and other organizations to self-publish a wide variety of content, from menus to magazines to books, without the expense of commercial printing.
A HTML editor is a program used for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience, added functionality, and organisation. For example, many HTML editors handle not only HTML, but also related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version control systems such as Subversion or Git. Many word processing, graphic design and page layout programs that are not dedicated to web design, such as Microsoft Word or Quark XPress, also have the ability to function as HTML editors.
HTML-Kit is a proprietary HTML editor for Microsoft Windows made by chami.com. The application is a full-featured HTML editor designed to edit, format, validate, preview and publish web pages in HTML, XHTML and XML -languages.
An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.
Mozilla Composer is the former free and open-source HTML editor and web authoring module of the Mozilla Application Suite. It was used to create and to edit web pages, e-mail, and text documents, and available for Windows, macOS and Linux. Composer was a graphical WYSIWYG HTML editor to view, write and edit HTML source code.
XSL-FO is a markup language for XML document formatting that is most often used to generate PDF files. XSL-FO is part of XSL, a set of W3C technologies designed for the transformation and formatting of XML data. The other parts of XSL are XSLT and XPath. Version 1.1 of XSL-FO was published in 2006.
Web standards are the formal, non-proprietary standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.
A web style sheet is a form of separation of content and presentation for web design in which the markup of a webpage contains the page's semantic content and structure, but does not define its visual layout (style). Instead, the style is defined in an external style sheet file using a style sheet language such as CSS or XSLT. This design approach is identified as a "separation" because it largely supersedes the antecedent methodology in which a page's markup defined both style and structure.
In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, is today often regarded as a violation of same-origin policy.
In graphic design, page layout is the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives.
In HTML, <div> and <span> tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <p> (paragraph), <em> (emphasis), and so on, accurately represent the semantics of the content, the additional use of <span> and <div> tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, <span> and <div> can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.
Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, while users with additional browser features or faster Internet access receive the enhanced version instead. This strategy speeds up loading and facilitates crawling by web search engines, as text on a page is loaded immediately through the HTML source code rather than having to wait for JavaScript to initiate and load the content subsequently, meaning content ready for consumption "out of the box" is served immediately, and not behind additional layers.
In fields employing interface design skills, slicing is the process of dividing a single 2D user interface composition layout (comp) into multiple image files of the graphical user interface (GUI) for one or more electronic pages. It is typically part of the client side development process of creating a web page and/or web site, but is also used in the user interface design process of software development and game development.
Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in web pages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. CSS is used to suggest its presentation to human users.
Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. It is a fundamental concept for the composition of HTML webpages. The guidelines of the box model are described by web standards World Wide Web Consortium (W3C) specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of CSS2 in 1998, which introduced the box-sizing property, the problem had mostly been resolved.
The Web platform is a collection of technologies developed as open standards by the World Wide Web Consortium and other standardization bodies such as the Web Hypertext Application Technology Working Group, the Unicode Consortium, the Internet Engineering Task Force, and Ecma International. It is the umbrella term introduced by the World Wide Web Consortium, and in 2011 it was defined as "a platform for innovation, consolidation and cost efficiencies" by W3C CEO Jeff Jaffe. Being built on The evergreen Web has allowed for the addition of new capabilities while addressing security and privacy risks. Additionally, developers are enabled to build interoperable content on a cohesive platform.
The holy grail is a web page layout which has multiple equal-height columns that are defined with style sheets. It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with available technologies all had drawbacks. Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.
Microsoft Office FrontPage was released as a bundle of the 1997 version of the Microsoft Office, it was the first time that a robust, commercial HTML WYSIWYG editor-and-publisher was available for every person to use... When a webpage built out of the WYSIWYG MS FrontPage software would run with a backend FPSE in place it would enjoy the full strength that a technologist could possibly build by writing HTML code from scratch. Web designers no longer needed a technical understanding of HTML to build web pages.
Guideline 3. Use markup and style sheets and do so properly.
Use style sheets to control layout and presentation.
...on top of the organizational advantages described above, the browser has less code to download. On heavily designed sites, or sites with hundreds of pages or more, this reduced download time can have a significant impact both on the user experience, and on your bandwidth costs.
