HTML Notes: minimal support for responsive HTML

Introduction

Many computer programmers were early adopters of the internet (1969) and the world-wide-web (1991) but back then we knew that 'internet support' required computers (mainframes and minicomputers for the early days of the internet; workstations and personal computers for the world-wide-web).

That all changed with the development of smart phones starting with RIM's BlackBerry, Apple's iPhone, and Google's gPhone (which now goes by the name Android). Since then, a whole lot more people are also using tablets. Now Google tells us that hand-held devices connected to the internet far out-number all other devices.

Using HTML5 to implement a simple web page

Back in the days before Y2K, you only needed 9-lines of simple HTML to support a simple web page in HTML4 (1997).

comment: at this time Microsoft was not thinking about CSS but Netscape Communications, and others, were. Since then, Microsoft browsers always seemed to have the worst support for CSS. That all changed after Microsoft replaced MS-Edge-18 (based on their own code) with MS-Edge-80 (also called Chrome Edge because it is based upon Chromium source code).

But as time moved on you needed this very minimal 10-line effort in order to support HTML5 (2008, 2011). Part of the reason for this simplicity (including the plain DOCTYPE) was due to the practicalities of supporting web pages in smart-phone browsers where it was no longer seemed necessary to back-support SGML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>YOUR TITLE</title>
</head>
<body>
YOUR CONTENT GOES HERE
</body>
</html>

Adding a tiny bit

I don't need to remind everyone that Google is a business -AND- they want to market their services to everyone. So a few years back (2015-2016) they began prodding web-developers to begin migrating web pages to a so-called responsive design where the web-page can automatically be reformatted on smaller devices. The proper way to do this is to include support for a fully responsive framework, like BOOTSTRAP (which is one of many). But failing that, Google was instructing web developers to, at the very least, add one line to the head of every web page (seen in red just below).

The inline STYLE information (shown in GREEN) is optional but some people swear by it when "only" renovating older web pages. If you decide to use these STYLE(s) then be sure to first test them with the device simulator built into your browser's DEVELOPER TOOLS pallet (visible after hitting the F12 key).

Caveat: I show "inline styles" here only to talk about them. Remember to move this stuff into an external CSS file if you decide to use it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>YOUR TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media (max-width: @screen-xs) {
    body{font-size: 8px;}
}
@media (max-width: @screen-sm) {
    body{font-size: 10px;}
}
@media (max-width: @screen-md) {
    body{font-size: 12px;}
}
@media (max-width: @screen-lg) {
    body{font-size: 14px;}
}
</style>
</head>
<body>
YOUR CONTENT GOES HERE
</body>
</html>

Adding a tiny bit more

In early 2020 Google announced that they are going to preferentially index responsive web-pages by the end of the year. At this point the best way forward, IMHO, is to fully adopt some sort of responsive frame work like BOOTSTRAP then go back and do page maintenance. Depending upon the number of pages, this may not be possible or even desirable but the following hack (highlighted in BLUE) might get you over the hump, and can be implemented with a tool like NOTEPAD++ along with a tall cup of coffee.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>YOUR TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="row" style="padding:5px">
        <div class="col-xs-12">
YOUR CONTENT GOES HERE
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

How to test/update this stuff with GUI tools?

People still using HTML WYSIWYG editors like Microsoft Frontpage or  Microsoft Expression Web will now realize those tools are totally useless.

So here are a few alternatives of many as of 2020-12-31:

Product Cost Notes
Notepad++ free you work in text mode so this is more text-based than GUI
but does have a "view in {browser}" and "launch in {browser}" test tools
Visual Studio Code free you work in text mode so this is more text-based than GUI
but does offer a cool plugin called live-link
SeaMonkey free this is a continuation of the editor code that used to be built into the Netscape Communicator browser
notes:
1) in this application the editor is known as composer
2) right-clicking on an existing HTML file then selecting SeaMonkey does not bring up the program in composer mode
3) once in SeaMonkey, click "Menu:Window" then "Item:Composer"; a new window will appear
4) now click "Menu:File" then "Item:Open File" to bring up the file finder
BlueGriffon free 1) this is a continuation of the editor code that used to be built into the Netscape Communicator browser
2) this a fully functional editor;
3) you can work in either text-mode or GUI mode or both (try the "Dual View" button)
Caveat: as of December-2020 this whole web site will be maintained with BlueGriffon
Pinegrow ~ $100 per year a fully functional editor;
you can work in either text-mode or GUI mode
Adobe Dreamweaver expensive a fully functional editor;
you can work in either text-mode or GUI mode

Next steps?

Change your web-pages and/or web-site to a fully responsive design but be aware of the fact that some tutorials only use the phrase "mobile friendly". Here are a few links:

  1. https://www.thesitewizard.com/css/mobile-friendly-responsive-design.shtml
  2. https://www.thenetninja.co.uk/courses/responsive-web-design-tutorial
  3. https://www.thenetninja.co.uk/courses/bootstrap-3-tutorial
  4. https://www.w3schools.com/bootstrap/bootstrap_ver.asp

Back to Home
Neil Rieck
Waterloo, Ontario, Canada.