HTML Notes: minimal support for responsive HTML

Introduction

Many computer programmers were early adopters of the ARPAnet (1969), the internet (1982), and the world-wide-web (1991).

But back then, '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, many 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).

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) Google 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.
Legend:


 screen size
xs
 extra small
sm
 small
md
 medium
lg
 large
 

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>YOUR TITLE</title>
<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.
Legend:


 BOOTSTRAP 3
 BOOTSTRAP 4
col-xs-?? column size = ?? when screen = extra small
 same
col-sm-?? column size = ?? when screen = small same
col-md-?? column size = ?? when screen = medium same
col-lg-?? column size = ?? when screen = large same
col-xl-??
column size = ?? when screen = extra large
Notes:
  1. BOOTSTRAP columns are broken up into 12
  2. when more than one "DIV col" exists within one "DIV row" then the individual unit numbers must add up to 12
  3. the only exception to is when the column size is set to 12
  4. the following demo employs Bootstrap 3 (supports older browsers like IE 9)
  5. newer projects should employ Bootstrap 4 (supports IE 11) or Bootstrap 5 (only modern browsers)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>YOUR TITLE</title>
  <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">
        <div class="col-xs-12">
	YOUR CONTENT GOES HERE
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
	TEXT CONTENT GOES HERE
        </div>
        <div class="col-xs-12 col-sm-6 col-md-7 col-lg-6">
	IMAGE 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 which simulates a local web server
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, all of neilrieck.net is 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.