IFrames are messing up my HTML Responsive web site, oh the drama of it all! Long live hamsters!

In remembrance of my recently departed (and perfect in every way hamster) Snowflake Brownie, I created a new web site dedicated to all things hamster: http://www.myhamsterzoo.com that utilizes HTML Responsiveness (so basically the web site lays out in 3 nice columns when the web site is viewed on large monitors and then morphs into 1 nice column when the web site is viewed on small devices like smart phones).

My provider, Network Solutions, offers web forwarding so since I already have an existing web site, my plan was to create a page on my existing web site and forward this new domain of http://www.myhamsterzoo.com to my new page (http://www.mummey.com/myhamsterzoo.aspx) on my existing web site. All was well at first. HTML Responsiveness was working as expected with web forwarding turned on but then I went one step further in the options of web forwarding and selected the option to have the URL masked from the visitor (this means the user, when visiting http://www.myhamsterzoo.com, would be forwarded to http://www.mummey.com/myhamsterzoo.aspx but the user would not see http://www.mummey.com/myhamsterzoo.aspx in the address bar, the user would continue to see http://www.myhamsterzoo.com. Unfortunately, taking advantage of this additional web forwarding feature of masking broke the HTML Responsiveness.  With this masking feature turned on, the web site remained in the 3 column layout no matter what size the monitor was so I have since turned this masking feature off so that HTML Responsiveness will work.

I believe the reason this has occurred is associated with the masking feature dumping this web site into an iFrame and the tags in the iFrame may not contain things needed by HTML Responsive layouts (i.e. meta tag like meta name=”viewport” content=”width=device-width, initial-scale=1.0″), even though I have these requirements in my page.  I’ve notified Network Solutions regarding the matter just in case they have a solution or alternate options.

Critical Side Note:

In researching what domains were available that contain the phrase “hamster” for this project, I learned there are quite a few “hamster” sites out there that are beyond disturbing so I would recommend absolutely positively NOT incorrectly typing this url (http://www.myhamsterzoo.com) when attempting to visit my awesome new hamster care web site and make ABSOLUTELY SURE that if you mention my hamster care web site to anyone that you check, double check and triple check that you gave them the correct url of http://www.myhamsterzoo.com because holy molasses on a cracker with a shot of whiskey, you don’t want to go to the wrong hamster url, unless of course you want to harbor horrific memories that will forever carve out a cozy section of your brain for quiet nights when you are feeling vulnerable and are questioning the existence of humanity.

Avoid fully justifying text on electronic devices, align text to the left

If you come from a heavy print background and you are trying to create content for the web, by default you will be driven to fully justify the content on the screen. Avoid doing this. Justifying text is fine for print but it does not translate well to electronic devices. Justified text on an electronic device is not only difficult to read by people with good eyesight, the content is extremely difficult to read for those with cognitive impairments and there is no control over where words break (and the words do not break with required hyphens, the words just break).

Below are two examples of content so you can see the difference:

Fully justified content (this is hard to read)

I wonder how much more I would have accomplished in my life up to this point in time if I had not had to sleep. Just getting back 20 years’ worth of 8 hours of sleep each night would mean a surplus of 58,400 hours! With all of that extra time I could have written 2 long running soap operas by now, become an Olympic skier, crossed Alaska on dog sled, swam across the Atlantic Ocean and learned Physics! Oh Raisinets! I have piddled my life away! No! Why?! Why?! Why?! Oh well, hopefully by the time I hit my 80’s, some fabulous little scientist will announce a wild discovery of complete control over the aging process and I can forever turn my clock back to when I was 72 because that is sure to be my best year yet!

Left-aligned content (easy to read)

I wonder how much more I would have accomplished in my life up to this point in time if I had not had to sleep. Just getting back 20 years’ worth of 8 hours of sleep each night would mean a surplus of 58,400 hours! With all of that extra time I could have written 2 long running soap operas by now, become an Olympic skier, crossed Alaska on dog sled, swam across the Atlantic Ocean and learned Physics! Oh Raisinets! I have piddled my life away! No! Why?! Why?! Why?! Oh well, hopefully by the time I hit my 80’s, some fabulous little scientist will announce a wild discovery of complete control over the aging process and I can forever turn my clock back to when I was 72 because that is sure to be my best year yet!