[htdocs,v2] index: replace frameset with a table + iframe
Commit Message
The frameset element has been deprecated for a long time now in favor
of using iframe's. GNU website standards suggest avoiding this as a
result. So replace the 3 frames with a table & 1 iframe. The table
inlines the top.html & left.html into the index, and keeps the main
content as a frame.
The experience is basically the same for end users. But it gives us
more control over document flow, and will make it easier for us to
adapt the site to different device sizes (e.g. mobile phones) which
the frameset structure does not.
---
v2
- fix the background color of the main frame so docs don't end up
black-on-black since iframes default to background-color:transparent
index.html | 43 +++++++++++++++++++++++++++++++------------
left.html | 17 -----------------
top.html | 22 ----------------------
3 files changed, 31 insertions(+), 51 deletions(-)
delete mode 100644 left.html
delete mode 100644 top.html
Comments
Hi Mike,
Happy New Year. Thanks for the improvements to the documentation.
On 04/01/2024 04.12, Mike Frysinger wrote:
> The frameset element has been deprecated for a long time now in favor
> of using iframe's. GNU website standards suggest avoiding this as a
> result. So replace the 3 frames with a table & 1 iframe. The table
> inlines the top.html & left.html into the index, and keeps the main
> content as a frame.
>
> The experience is basically the same for end users. But it gives us
> more control over document flow, and will make it easier for us to
> adapt the site to different device sizes (e.g. mobile phones) which
> the frameset structure does not.
> ---
> v2
> - fix the background color of the main frame so docs don't end up
> black-on-black since iframes default to background-color:transparent
>
> index.html | 43 +++++++++++++++++++++++++++++++------------
> left.html | 17 -----------------
> top.html | 22 ----------------------
> 3 files changed, 31 insertions(+), 51 deletions(-)
> delete mode 100644 left.html
> delete mode 100644 top.html
>
> diff --git a/index.html b/index.html
> index af72b0e14d37..8d2ea0a023d4 100644
> --- a/index.html
> +++ b/index.html
> @@ -4,17 +4,36 @@
> <title>The Newlib Homepage</title>
> </head>
>
> - <frameset rows="100,*" frameborder="NO" border="0" framespacing="0">
> - <frame src="top.html" name="top" noresize>
> - <frameset cols="130,*" frameborder="NO" border="0" framespacing="0">
> - <frame src="left.html" name="left" noresize>
> - <frame src="info.html" name="main" noresize>
> - </frameset>
> - </frameset>
> - <noframes>
> + <body style="margin: 0" text="white" link="#00ccff" vlink="#00cc66">
>
> - <body>
> - </body>
> -
> - </noframes>
> + <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
> + <tr height="100">
> + <td bgcolor="#cc0000" align="center"><a href="https://www.redhat.com/" target=_top>
> + <img src="logo_big2.png"
> + width="81" height="69" alt="[redhat.com]" border="0"></a>
> + </td>
> + <a name="top"></a>
> + <td align="center" bgcolor="#ce0000">
> + <a href="https://sourceware.org/" target=_top>
> + <img src="/img/topbar.png"
> + width="483" height="68" alt="sourceware.org" border="0">
> + </a>
> + </td>
> + </tr>
> + <tr>
> + <td bgcolor="black" width="130" align="center" valign="top">
> + <img height="30" width="100" src="newlib.jpg">
> + <p><a href="info.html" target="main">Info</a></p>
> + <p><a href="news.html" target="main">News</a></p>
> + <p><a href="download.html" target="main">Download</a></p>
> + <p><a href="mailing.html" target="main">Mailing List</a></p>
> + <p><a href="faq.html" target="main">FAQ</a></p>
> + <p><a href="docs.html" target="main">Docs</a></p>
> + </td>
> + <td>
> + <iframe src="info.html" name="main" noresize width="100%" height="100%" frameborder="0">
> + </td>
> + </tr>
> + </table>
> + </body>
> </html>
> diff --git a/left.html b/left.html
> deleted file mode 100644
> index 10a4d54cdeaf..000000000000
> --- a/left.html
> +++ /dev/null
> @@ -1,17 +0,0 @@
> -<html>
> -
> - <head>
> - </head>
> -
> - <body bgcolor="black" text="white" link="#00ccff" vlink="#00cc66">
> - <center>
> - <img height="30" width="100" src="newlib.jpg">
> - <p><a href="info.html" target="main">Info</a></p>
> - <p><a href="news.html" target="main">News</a></p>
> - <p><a href="download.html" target="main">Download</a></p>
> - <p><a href="mailing.html" target="main">Mailing List</a>
> - <p><a href="faq.html" target="main">FAQ</a>
> - <p><a href="docs.html" target="main">Docs</a></center>
> - </body>
> -
> -</html>
> diff --git a/top.html b/top.html
> deleted file mode 100644
> index 14e7b4367466..000000000000
> --- a/top.html
> +++ /dev/null
> @@ -1,22 +0,0 @@
> -<html>
> -
> - <head>
> - </head>
> -
> - <body bgcolor="#ce0000" text="black">
> - <table width="100%" cellspacing="0" cellpadding="0" border="0">
> - <tr>
> - <td bgcolor="#cc0000"><a href="https://www.redhat.com/" target=_top>
> - <img src="logo_big2.png"
> - width="81" height="69" alt="[redhat.com]" border="0"></a></td>
> - <a name="top"></a>
> - <td align="center" valign="bottom" bgcolor="#ce0000">
> - <a href="https://sourceware.org/" target=_top>
> - <img src="/img/topbar.png"
> - width="483" height="68" alt="sourceware.org" border="0"></a></td>
> - </tr>
> -</table>
> -
> - </body>
> -
> -</html>
Tables are not very good for aligning items - in particular the reduce
screen reader accessibility. May consider using a nav element:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
For other parts in the table, consider using flexbox or one of the other
layout methods described at:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
Just suggestions though.
Patch merged, thanks.
-- Jeff J.
On Wed, Jan 3, 2024 at 8:13 PM Mike Frysinger <vapier@gentoo.org> wrote:
> The frameset element has been deprecated for a long time now in favor
> of using iframe's. GNU website standards suggest avoiding this as a
> result. So replace the 3 frames with a table & 1 iframe. The table
> inlines the top.html & left.html into the index, and keeps the main
> content as a frame.
>
> The experience is basically the same for end users. But it gives us
> more control over document flow, and will make it easier for us to
> adapt the site to different device sizes (e.g. mobile phones) which
> the frameset structure does not.
> ---
> v2
> - fix the background color of the main frame so docs don't end up
> black-on-black since iframes default to background-color:transparent
>
> index.html | 43 +++++++++++++++++++++++++++++++------------
> left.html | 17 -----------------
> top.html | 22 ----------------------
> 3 files changed, 31 insertions(+), 51 deletions(-)
> delete mode 100644 left.html
> delete mode 100644 top.html
>
> diff --git a/index.html b/index.html
> index af72b0e14d37..8d2ea0a023d4 100644
> --- a/index.html
> +++ b/index.html
> @@ -4,17 +4,36 @@
> <title>The Newlib Homepage</title>
> </head>
>
> - <frameset rows="100,*" frameborder="NO" border="0"
> framespacing="0">
> - <frame src="top.html" name="top" noresize>
> - <frameset cols="130,*" frameborder="NO" border="0"
> framespacing="0">
> - <frame src="left.html" name="left" noresize>
> - <frame src="info.html" name="main" noresize>
> - </frameset>
> - </frameset>
> - <noframes>
> + <body style="margin: 0" text="white" link="#00ccff"
> vlink="#00cc66">
>
> - <body>
> - </body>
> -
> - </noframes>
> + <table width="100%" height="100%" cellspacing="0" cellpadding="0"
> border="0">
> + <tr height="100">
> + <td bgcolor="#cc0000" align="center"><a href="
> https://www.redhat.com/" target=_top>
> + <img src="logo_big2.png"
> + width="81" height="69" alt="[
> redhat.com]" border="0"></a>
> + </td>
> + <a name="top"></a>
> + <td align="center" bgcolor="#ce0000">
> + <a href="https://sourceware.org/"
> target=_top>
> + <img src="/img/topbar.png"
> + width="483" height="68"
> alt="sourceware.org" border="0">
> + </a>
> + </td>
> + </tr>
> + <tr>
> + <td bgcolor="black" width="130" align="center"
> valign="top">
> + <img height="30" width="100"
> src="newlib.jpg">
> + <p><a href="info.html"
> target="main">Info</a></p>
> + <p><a href="news.html"
> target="main">News</a></p>
> + <p><a href="download.html"
> target="main">Download</a></p>
> + <p><a href="mailing.html"
> target="main">Mailing List</a></p>
> + <p><a href="faq.html"
> target="main">FAQ</a></p>
> + <p><a href="docs.html"
> target="main">Docs</a></p>
> + </td>
> + <td>
> + <iframe src="info.html" name="main"
> noresize width="100%" height="100%" frameborder="0">
> + </td>
> + </tr>
> + </table>
> + </body>
> </html>
> diff --git a/left.html b/left.html
> deleted file mode 100644
> index 10a4d54cdeaf..000000000000
> --- a/left.html
> +++ /dev/null
> @@ -1,17 +0,0 @@
> -<html>
> -
> - <head>
> - </head>
> -
> - <body bgcolor="black" text="white" link="#00ccff" vlink="#00cc66">
> - <center>
> - <img height="30" width="100" src="newlib.jpg">
> - <p><a href="info.html" target="main">Info</a></p>
> - <p><a href="news.html" target="main">News</a></p>
> - <p><a href="download.html"
> target="main">Download</a></p>
> - <p><a href="mailing.html" target="main">Mailing
> List</a>
> - <p><a href="faq.html" target="main">FAQ</a>
> - <p><a href="docs.html"
> target="main">Docs</a></center>
> - </body>
> -
> -</html>
> diff --git a/top.html b/top.html
> deleted file mode 100644
> index 14e7b4367466..000000000000
> --- a/top.html
> +++ /dev/null
> @@ -1,22 +0,0 @@
> -<html>
> -
> - <head>
> - </head>
> -
> - <body bgcolor="#ce0000" text="black">
> - <table width="100%" cellspacing="0" cellpadding="0"
> border="0">
> - <tr>
> - <td bgcolor="#cc0000"><a href="https://www.redhat.com/" target=_top>
> - <img src="logo_big2.png"
> - width="81" height="69" alt="[redhat.com]" border="0"></a></td>
> - <a name="top"></a>
> - <td align="center" valign="bottom" bgcolor="#ce0000">
> - <a href="https://sourceware.org/" target=_top>
> - <img src="/img/topbar.png"
> - width="483" height="68" alt="sourceware.org" border="0"></a></td>
> - </tr>
> -</table>
> -
> - </body>
> -
> -</html>
> --
> 2.43.0
>
>
@@ -4,17 +4,36 @@
<title>The Newlib Homepage</title>
</head>
- <frameset rows="100,*" frameborder="NO" border="0" framespacing="0">
- <frame src="top.html" name="top" noresize>
- <frameset cols="130,*" frameborder="NO" border="0" framespacing="0">
- <frame src="left.html" name="left" noresize>
- <frame src="info.html" name="main" noresize>
- </frameset>
- </frameset>
- <noframes>
+ <body style="margin: 0" text="white" link="#00ccff" vlink="#00cc66">
- <body>
- </body>
-
- </noframes>
+ <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
+ <tr height="100">
+ <td bgcolor="#cc0000" align="center"><a href="https://www.redhat.com/" target=_top>
+ <img src="logo_big2.png"
+ width="81" height="69" alt="[redhat.com]" border="0"></a>
+ </td>
+ <a name="top"></a>
+ <td align="center" bgcolor="#ce0000">
+ <a href="https://sourceware.org/" target=_top>
+ <img src="/img/topbar.png"
+ width="483" height="68" alt="sourceware.org" border="0">
+ </a>
+ </td>
+ </tr>
+ <tr>
+ <td bgcolor="black" width="130" align="center" valign="top">
+ <img height="30" width="100" src="newlib.jpg">
+ <p><a href="info.html" target="main">Info</a></p>
+ <p><a href="news.html" target="main">News</a></p>
+ <p><a href="download.html" target="main">Download</a></p>
+ <p><a href="mailing.html" target="main">Mailing List</a></p>
+ <p><a href="faq.html" target="main">FAQ</a></p>
+ <p><a href="docs.html" target="main">Docs</a></p>
+ </td>
+ <td>
+ <iframe src="info.html" name="main" noresize width="100%" height="100%" frameborder="0">
+ </td>
+ </tr>
+ </table>
+ </body>
</html>
deleted file mode 100644
@@ -1,17 +0,0 @@
-<html>
-
- <head>
- </head>
-
- <body bgcolor="black" text="white" link="#00ccff" vlink="#00cc66">
- <center>
- <img height="30" width="100" src="newlib.jpg">
- <p><a href="info.html" target="main">Info</a></p>
- <p><a href="news.html" target="main">News</a></p>
- <p><a href="download.html" target="main">Download</a></p>
- <p><a href="mailing.html" target="main">Mailing List</a>
- <p><a href="faq.html" target="main">FAQ</a>
- <p><a href="docs.html" target="main">Docs</a></center>
- </body>
-
-</html>
deleted file mode 100644
@@ -1,22 +0,0 @@
-<html>
-
- <head>
- </head>
-
- <body bgcolor="#ce0000" text="black">
- <table width="100%" cellspacing="0" cellpadding="0" border="0">
- <tr>
- <td bgcolor="#cc0000"><a href="https://www.redhat.com/" target=_top>
- <img src="logo_big2.png"
- width="81" height="69" alt="[redhat.com]" border="0"></a></td>
- <a name="top"></a>
- <td align="center" valign="bottom" bgcolor="#ce0000">
- <a href="https://sourceware.org/" target=_top>
- <img src="/img/topbar.png"
- width="483" height="68" alt="sourceware.org" border="0"></a></td>
- </tr>
-</table>
-
- </body>
-
-</html>