adult lynx picture  

CancerLynx - we prowl the net

Always Responsive Accessible Web Page Display and Printing For Any Device
Alexandra Andrews

Because there are many devices and browsers on the Internet. Creating webpages to display content on any device, browser or bandwidth is problematic. Another consideration is with a new version of a browser the old webpage may crumble and the code needs to be rewritten. Pages using Cascading Style Sheets (CSS) and/or Flexbox may be susceptible to failure. This may be due to conflict with browser display.

When creating websites for doctors, I made this code up in 1999/2000. One doctor wanted his website users to be able to print information using any device and browser from anywhere in the world. In addition, he wanted the printed pages to have double sided margins to be inserted into three-ring binders.

I have always believed in the KISS principle. Why write elaborate multiple versions of code that may become outdated at any minute? This presented plain clean code will work for any webpage display and printing.

The Always Adjustable Responsive Code is based on basic HTML, it can be applied to any webpage display. Watch the page content adjust when on a cellphone and then compare the page to a wide screen.

Using this code
- Legacy browsers are not an issue.
- Difficult browsers are not an issue.
- Backwards compatibility is not an issue.
- It can print any webpage straight from the net.

Users with visibility and/or accessibility issues may need to enlarge the text to a preferred size while reading on the browser. The option of increasing or decreasing the size of the font relative to the default size, as in or , where "num" is a number. This allows the fonts to resize according to the page. Remember, while you may use a wall to wall wide screen to design your website, your viewers may use a cell phone. Another consideration is backwards compatibility. Webpages on mobile devices will display a plain border around the web page, making content readable.

Users can choose any font size (unless constrained by CSS or text boxes), and the page will adjust. Centered and percentage table options keeps the text tidy, when users enlarge the text within. Designers may want to drop back to Html 4.01.

When using the Always Adjustable Pages code, avoid large graphics. They may not display on all devices, and may have problems downloading because of slow bandwidth. Optimal is to use multiple small images. Follow this advice with pdfs. Instead of one huge PDF, use several pdfs. Do not forget for you need to offer a html or text version for your webpage PDFs. Checking your site with the Lynx browser is advised.

The Blockquote Version
- Place the code/content for every webpage between an opening blockquote and a closing blockquote.
- Place blockquote after the body tag.
- body>
- blockquote>
- Insert webpage content
- Close the tags at the foot of the webpage
- /blockquote
- /body
- /html

With this version web pages will print allowing margins for pages to be placed in three-ring binders double sided. Again, device and/or printer is not a consideration.

The Table Version
- Alternate to the blockquote option.
- Enclose the webpage in one large table
- Always use percentages to size the table
- Always use the center option for the table.
- Centered and percentage table options keeps the text tidy, when users enlarge the text within. Designers may want to drop back to Html 4.01.

- table width=”90%” align=”center”
- This will produce a 5% margin on each side of the table.
- Avoid the table description option. Browsers may display the description option in plain text on the webpage.
- Insert webpage content into the table using rows and cells.
- Be aware, browsers may display the lines between table cells and rows.
- Close the tags at the foot of the webpage
- /table>
- /body>
- /html>

The Apache 2.0 was filed May 2000. First added to GitHub June 15, 2018, updated March 19, 2019, by Alexandra Andrews

You are welcome to share this © article with friends, but do not forget to include the author name and web address. Permission needed to use articles on commercial and non commercial websites. Thank you.

Search CancerLynx

one one pawprintWhat do you think? one pawprintTop of Page

kitten picture