HomeSearchDr. Hain Clinic website Information for Dizzy Patients MusicFLWVarious and Sundry

This space holds helpful information about software and hardware and vendors that Dr. Hain has discovered by trial and error. Perhaps if enough of us do this, searches on these devices or companies will bring up more relevant information.

Mobile ready -- making your web page mobile friendly.

See also: seo

Last edited: May 23, 2021

Google now largely refuses to index web pages that are not mobile friendly. Or in other words, even if your content might be awesomely insightful and useful the world, Google will not index it unless it can be easily viewed on a cellphone. Appearance is more important than meaning.

This basically means that images cannot push text over to the side. This is the way I fixed up my website (dizziness-and-balance.com). Also see the seo page which has other stuff to do to improve your indexing.

Figure out if your site is mobile ready -- two ways.

  1. Check with google search console. This is a little complicated as you have to prove you own the website. This is still the best for a big website.
  2. Use the Chrome developer tools, and click on the little mobile box on the top. Once you figure out how to access it, this is pretty easy and quick for a single page. It works better than Google when you are tweaking as it shows the entire page rather than just a "snapshot" of the mobile crawler page.

Use some mobile framework -- I am using "bootstrap".

  1. Bootstrap is a jquery library that you have to download in front of every page.
  2. It has a lot of stuff in it and adds lots of time to every page. There is no way around this.
  3. On the other hand, it is fairly easy to implement. You just put a bunch of downloads to the front of every web page. As I use dreamweaver, I use a "template" that I apply to every page.
  4. This is the stuff I use to implement bootstrap with support for a search icon on the nav bar (that is why you need the font__awesome link -- but see below):
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Load icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script type="text/javascript" src="/javascript/include_file.js"></script>
    In more recent versions, I managed to remove the popper.js code as well as the font-awesome, in an effort to slim things down. But this works
  5. Put into the script tags above defer="defer" -- right after the crossorigin. . This makes the loading wait till the rest of the page is done. This is IMPORTANT for Google Lighthouse metrics.

Add some more code to your pages:

  1. Add a viewport meta tag to the HEAD section of every page.
    1. <meta name="viewport" content="width=device-width, initial-scale=1">
    2. This by itself will work if your pages are simple and don't have any tables or images.
  2. For every table, enclose it within a div that looks like this:
    1. <div class="table-responsive"> <table class="table" ..... >
    2. Table contents
    3. </div>
  3. Add the following to every img (well all of the big ones anyway), that are not already inside tables.
    1. class="img-fluid"
    2. This is called a "responsive image".
  4. For a big site, this process is very tedious as you have to edit every single page.

It helps to have a method of including repeated stuff on every page.

  1. I use Dreamweaver and the "template" system. When you update a "template", it then updates every page that was created with that template. This saves time for the pages as it is faster to have stuff in your main page rather than linked (except for css I guess)..
  2. I also use a method of including external html, include_file.js.
    1. Why do this ? Well you can change the external html once, without having to change every page on the site. This saves a whole lot of time, especially if you are doing a lot of changes or have a lot of pages.
  3. For a working site, this code (which is part of the template) looks like this (at the end of the page):
  4. 	<div w3-include-html="/javascript/footer.html"></div> 	<!-- footer -->
    </div> <!-- ends dif for an indent at the top, not really relevant-->
    <script> includeHTML(); </script> <!-- this is the javascript file that loads in stuff -->
    So if you decide your footer needs to have a link to something else, you can just edit the footer code, without uploading the changes to every page. This is faster for you, but I guess slower for the web page.


© Copyright May 23, 2021 , Timothy C. Hain, M.D. All rights reserved.
Dr Hain's CV Clinic dizziness-and-hearing.com FLW Various and Sundry Dr. Hain's CV