Difference between revisions of "Website/Going Tableless"
m (Categorizing) |
|||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
The OpenOffice.org website currently uses a table-based layout: the table #main, which contains the columns #navcol (left hand navigation area), #midcol (main body) and for My Pages, #communitycol. Each of these columns contains a div-based wrapper; #navcolumn, #bodycol and #rightcol (respectively). | The OpenOffice.org website currently uses a table-based layout: the table #main, which contains the columns #navcol (left hand navigation area), #midcol (main body) and for My Pages, #communitycol. Each of these columns contains a div-based wrapper; #navcolumn, #bodycol and #rightcol (respectively). | ||
| − | Although most of OpenOffice.org's pages are tableless (i.e., they have no tables | + | Although most of OpenOffice.org's pages are tableless (i.e., they have no tables other than #main), the CollabNet template imposes the #main table on all OOo pages. [http://sitening.com/blog/going-tableless-why-css-should-be-used-for-layouts/ This is not good web design practice], and we can accomplish the same thing using just divs while simplifying the layout at the same time and making it more future-proof. |
'''Please note: This will not affect any tables other than #main!''' If any of your pages contain tables (e.g. [http://projects.openoffice.org/native-lang.html The Native Language Confederation Project page]), they will not be changed at all. For example, IssueZilla will continue to use tables to display issue data. | '''Please note: This will not affect any tables other than #main!''' If any of your pages contain tables (e.g. [http://projects.openoffice.org/native-lang.html The Native Language Confederation Project page]), they will not be changed at all. For example, IssueZilla will continue to use tables to display issue data. | ||
| Line 7: | Line 7: | ||
== The process == | == The process == | ||
| − | This section will detail how project leads can transition to the tableless layout. | + | This section will detail how project leads can transition to the tableless layout. For now, discussion on this issue is encouraged on both [http://website.openoffice.org/servlets/BrowseList?list=dev&by=thread&from=2156073 Website] and [http://native-lang.openoffice.org/servlets/BrowseList?list=dev&by=thread&from=2162673 Native Language] project mailing lists. |
| + | |||
| + | The [[Website/Going_Tableless/Transition_Guide|Transition Guide]] will list common CSS fixes. | ||
== Tableless Projects == | == Tableless Projects == | ||
| − | The following projects have moved to | + | The following projects have moved to the tableless layout: |
| − | |||
* [http://bizdev.openoffice.org Biz Dev] | * [http://bizdev.openoffice.org Biz Dev] | ||
== Structural Changes == | == Structural Changes == | ||
| − | The images below allow you to compare the existing layout (skeleton) with the proposed layout. | + | The images below allow you to compare the existing layout (skeleton) with the proposed layout. Please note that they have been simplified to show the most important layout elements - margins and padding are not included in the outlines. |
:[[Image:OOo-Website-Skeleton-Table-Based.png|left|thumb|Existing, table-based layout]] | :[[Image:OOo-Website-Skeleton-Table-Based.png|left|thumb|Existing, table-based layout]] | ||
:[[Image:OOo-Website-Skeleton-Tableless.png|left|thumb|Proposed tableless layout]] | :[[Image:OOo-Website-Skeleton-Tableless.png|left|thumb|Proposed tableless layout]] | ||
| + | |||
| + | [[Category:Website]] | ||
Latest revision as of 19:14, 16 March 2010
The OpenOffice.org website currently uses a table-based layout: the table #main, which contains the columns #navcol (left hand navigation area), #midcol (main body) and for My Pages, #communitycol. Each of these columns contains a div-based wrapper; #navcolumn, #bodycol and #rightcol (respectively).
Although most of OpenOffice.org's pages are tableless (i.e., they have no tables other than #main), the CollabNet template imposes the #main table on all OOo pages. This is not good web design practice, and we can accomplish the same thing using just divs while simplifying the layout at the same time and making it more future-proof.
Please note: This will not affect any tables other than #main! If any of your pages contain tables (e.g. The Native Language Confederation Project page), they will not be changed at all. For example, IssueZilla will continue to use tables to display issue data.
The process
This section will detail how project leads can transition to the tableless layout. For now, discussion on this issue is encouraged on both Website and Native Language project mailing lists.
The Transition Guide will list common CSS fixes.
Tableless Projects
The following projects have moved to the tableless layout:
Structural Changes
The images below allow you to compare the existing layout (skeleton) with the proposed layout. Please note that they have been simplified to show the most important layout elements - margins and padding are not included in the outlines.
Existing, table-based layout
Proposed tableless layout
