Information and Diagram for www.glassdesignsbygeorgemcginn.com

General Site Design Information

After a stable site for a few years, the following major changes have occurred since early 2014.

• On Jan 27, 2017 and again in late March 2017, I added Google Analytics Tracking to all pages as my hosting company no longer maintained AWStats as a functional tool. I had used AWStats for years to get site usage information.
• In Dec 2016 I modified the text at the bottom of all pages related to "send an email" to more clearly identify the email address and what to do if a user doesn't have a default email service defined. I'm hoping this reduces the HTML 404 errors from "/mailto:glassdesignsbygm@aol.com"
• On May 3, 2016, I promoted the Terrarium Designs page (10) back to a Main Page as it has become so popular.
• In the April / May 2015 time frame I spend significant effort to ensure all pages achieved Green status when analyzed with Google's PageSpeed Insights tool.
• During July 2014 I moved all active pages to HTML 5 using a single CSS3 style sheet. All pages have been verified, with no errors or warnings, at the W3C site as experimental Strict HTML 5.

Since the 2001 start of my site the underlying design has remained unchanged.

• The basis site design, shown in the image below, is a three tier hierarchy of:
  • Index HTML page,
  • Main HTML pages named as Page plus a digit part, like Page 4 or Page12,
  • Individual HTML pages related to a specific design or layout with a name associated with the design and sometime a little long.
• The various solid arrow lines show the main linkage between pages via navigation buttons. The thickness of the arrow is related to the importance of the linkage.
• The dashed arrow lines show linkage achieved by thumbnail navigation images.

Additional Information

General additional information about my site.

• Individual html files (lowest tier entries) are related to specific designs and usually display one or more jpg or gif files.
• An individual level file only allows return to the Main page it is associated with or alternative Main pages. There are a few exceptions to this rule.
• On the map the numbers in parenthesis refer to the naming of the Main html pages (the second tier pages), like page2.html. The numbers run from 2 to 21 and represent the second level hierarchy of the site.
• A Main page represents a design area and has links to the individual html pages related to that area.
• Two Main pages are collections of all the content for the individual html pages, allowing easy scrolling, but with a large page, over a wide range of designs.
  • Page8 has all the Standard Design individual pages linked from Page7.
  • Page9 has all the Custom Design individual pages linked from Page4.
• Page 11, related to Cameo Flower hangings, has been demoted to "Individual html" status without a name change. This covers the possibility they were bookmarked in the past.
• Finally, there are a number of inactive lowest tier pages, about 40, on the site. I have left them so that if bookmarked or still referenced somewhere on the web, they will still be found. They all have back navigation links only to active portions of the site.

For site maintenance I use the following tools:

• Notepad ++ for maintaining the html, including spell checking with the new versions, and css files. It also is used to maintain the site ".htaccess" file. All editing is done offline on a secure desktop.
• Corel PaintShop Pro X4 for editing jpg files.
• Microsoft Live Movie Maker to convert camera's avi files to wmv format and for trimming the ends of the video.
• The online W3 Validator at http://validator.w3.org for HTML.
• The online W3 CSS3 checker at http://jigsaw.w3.org/css-validator/ for CSS.
• FileZilla Client for FTP loading to my hosting site.
• LinkAlarm for linkage testing of the site, only 100% allowed.
• CSS file compression from the http://csscompressor.com site.
• Google Mobile Friendly testing from https://www.google.com/webmasters/tools/mobile-friendly/
• Google PageSpeen Insights checking from https://developers.google.com/speed/pagespeed/insights/
• Site performance from the GTmetrix tool at http://gtmetrix.com

Migration to HTM5 and CSS3 Comments:

The previous site level had all pages at HTML 4.01 Strict and used 2 CSS style sheets.

My strategy in moving to HTML 5 and CSS3 was:

• A desire to not use any JavaScript or links to third party tools. Rather I want just "native" HTML5 and CSS3 features. This changed on Jan 27, 2017 with the need to get some site usage information with my hosting company no longer supporting a functional AWStats application on their servers (added Gogle Anayltics)!
• A desire to not use device specific media queries.
• I may need device size media queries and CSS3 rules to support better viewing on small phone devices. But I'm not there yet.

How site statistics (old 2014 stats) influenced my approach to migration:

• All statistics are from the Awstats facility supplied by the hosting company I use, BlueHost. They are for the 2nd Quarter of 2014.
• After Jan 2017.
• For OS used:
  • Windows, in all its levels, is still the most common at 56%. Vista and XP are still fairly active with 8% each of the total site hits.
  • Mac OS is at 31%
  • The total Linux is at 8%.
• For Browser used:
  • Safari was 26.6%
  • Chrome was 25.7%
  • IE was 15.2%
  • Firefox was 11.6%
  • Mozilla was 11.7% (not sure why Firefox and Mozilla are broken out since I thought they were the same?)
  • Android was 3.5%
  • Opera was 2.1%
  • Netscape was 0.9%
  • All the rest (mostly Phone/PDA browsers) was 2.4%

Some test and coding thoughts:

• The browser numbers clearly showed me where to focus appearance testing: Safari, Chrome, IE and Firefox/Mozilla. All can be done within Notepad++ in a few seconds each!
• I've only tested a few pages under Opera as this must be done page by page outside of Notepad++ within an Opera session.
• Emulation runs, using the Chrome facility, show that my site pages display in "pads" and some PDA well. Phone size screens are another animal!

The CSS3 approach to having a single CSS3 file that handles all style issues:

• Change all font sizes to em units.
• On the highest level P { ... word-wrap:break-word;} use word-wrap just in case it's needed.
• Use body { font-size:100%;} to allow for reduction if needed
• Still investigating the newer rem, vm and vmin font size CSS3 properties.
• Still investigating the @viewport support at the CSS3 level. (Seems it's not yet supported by all the major 4 browsers.)

The HTML approach is as follows:

• Removed all width and height tags from images to allow for better "natural" resizing within a browser.
• Recoded the main navigation buttons so that they fold naturally when a screen is resized. They will stack down to a single vertical column if necessary. These navigation buttons are the main path to move about the Main, or second tier, pages and to get back to a main page from an individual page.
• Redesign all tables to be three columns wide so they can be resized to a smaller width. The tables are used, with thumbnail images in the first column, as the main navigation path to the Individual, or third tier, pages of the site.
• Still investigating meta name="viewport" for usage on MHTL pages. But I really want all style in the CSS3 file.

My migration work bench:

• The Notepad++ tool:
  • Editing is very easy with good tag checking. However, there is no substitute for a final on line check via the W3C verification engine.
  • The ability to have many HTML files open at once and copy / paste across all. In a migration effort where there are similar changes to be made to most files this is a great time saver.
  • The ability to test appearance from within the tool for Firefox, IE, Chrome and Safari is fantastic.
  • Too bad Opera cannot be integrated into Notepad++. It's good that this browser is a real minor player.
  • Notepad++ offers some spell checking support although I always do a final text check using MS Word.
• Chrome Mobile Device (available in level 32 or higher):
  • The ability to test appearance on a wide variety of mobile devices using the Emulate features: Chrome -> Tools -> Developer Tools -> Console. And to do so within a Notepad++ session where changes can be made in seconds.

Migration to Achieve Google Green status Comments:

My strategy in moving to Mobile Friendly was:

• Make the most changes possible in the single CSS3 site file and the site .htaccess file.
• Maintain a single site image that performs and looks great on a desktop or a pad device while still achieving a Google Mobile Green status.
• Since CSS3 currently doesn't support the viewport meta tag, this needed to be added to every HTML page.
• All HTML table layouts were converted to list elements with an image link and short text.
• The navigation buttons were modified to shorten their text and have different padding to achieve touch points that are not to close on mobile devices yet not too large for the small mobile device screens.

I need to monitor site performance, page usage and any visitor feedback for a few months (as of 5/2015) to see if additional changes are appropriate.

Back to Top