That darn viewport statement!

Click here to preview my book at Amazon or at Google Play Books!

Well, it's finally time to roll out the blog and social media announcements for my ebook A Furniture Refinisher's Newsletter just in time for the Christmas season, yay! When writing the book, I compared our 20-year ventures into the antiques and refinishing business to a journey ... and subsequently discovered the same comparison held for writing an ebook! Writing an ebook was a very looong and sometimes tedious process. It started in earnest in Jan 2016 during winter's rest. Back then I hoped the book would be finished before growing season; instead it was (finally!) finished in Dec of 2017, amidst all life's interruptions big and small. And I learned enough on the way to post about writing ebooks for some time to come!

So last week I submitted the final version of A Furniture Refinisher's Newsletter and created my Amazon Author's Page. This week I have "successfully" updated all my various websites - blog, Second Looks Furniture Refinishing, photography, portfolio, and writing sites - with information about the book and where to get it. Now is the time to craft posts for this blog and my Second Looks Facebook page to help me roll out The Big Announcement on Facebook, Twitter, and Linked-in (and also to do promotional pricing on my ebook at Amazon for this Christmas Season; and maybe even pay for some boosting on Facebook).

But waking up this Monday morning all I can think of is "that darn viewport"! In the process of updating my websites I had to reacquaint with HTML and CSS (mark-up languages for creating web pages). Hadn't touched any of it in so long! It started coming back to me, but not all at once, the trick being to leave yourself a breadcrumb trail, especially in how you originally conceived and designed your web pages. Like most things, I was hoping that putting news of the book on my webpages would be easy (you know, just stick it in).

But no, of course not.


In order to announce my ebook, I had to first learn how to obtain the ads and links from Google and Amazon; secondly I had to learn how to incorporate these into the design of the top pages on my websites. I realized at that point that I also needed to rework my top-level page design to fit changing circumstances and purposes. And on a side note, unfortunately, I found out that the highest-traffic post on my blog - the post that had served as the inspiration for the ebook -now has items that are considered "unsafe." These items are the many photos that I linked in from our Second Looks Furniture Refinishing website - nothing sinister here - but if people are going to get warnings when they try to read my post, then it's a problem. So instead of linking to the photos that appear in that post, I have to upload all 72 of them to Blogger. :( Oh, well. At least the YouTube overlay ad on my "quick-and-dirty" yet amazingly-popular how-to-insert-a drill-bit video proved easy! I thought that ad would have been the hardest of all to figure out. YouTube provides most of my web traffic - going on about 350,000 views - so that's good news.

But back to that darn viewport for a minute. I had forgotten how much grief it had given me when Google started nagging me about making my sites more mobile friendly a few years ago. In all fairness I had upgraded some of my top-level pages a few years back when I had some time to study CSS (Cascading Style Sheets); however, time being what it is - scarce, I left many of my lower-level pages in legacy HTML. While I was practicing my CSS back then, I did create a mobile version for the Second Looks Refinishing website. But for Google my efforts weren't good enough. If I didn't use the viewport statement, Google warned me they wouldn't give my site a high ranking in their search results.

Well, back when I was working through my CSS textbook and using my photography site and my Second Looks Furniture Refinishing site as my guinea pigs, I designed my top-level pages to be as responsive as possible to any screen size. I followed the textbook's advice and made everything relative, specifying dimensions in percentages and ems - fewer tables, no fixed positioning, and no absolute pixel sizes. I designed my pages to size down, reflow, and reposition correctly and coherently to fit any screen size or browser window. I checked my work in Internet Explorer, chrome, Firefox, Opera, and Safari browsers on my windows laptop. (I didn't get into checking previous versions of these browsers, although that is recommended - I didn't have different versions of the same browsers - maybe there's an online site that would have allowed me to do that, but I didn't take the time). Anyway, that CSS project is the reason I bought my first smartphone, a Blackberry, in 2012 or 2013 so that I could see how my pages looked on a small device as I was developing them (also important to do when you are working on an ebook, I might add). As already mentioned I also designed a mobile version of our Second Looks Refinishing website with reduced content using the same "responsive" principles. But Google kept insisting on the viewport "to give my visitors a better mobile experience." So, I tried. I mean I am no longer a professional programmer, and the current state of web-programming is way past my era (as well as my time constraints). But I try to keep my finger in the pot. So I looked up stuff about the viewport, tried to understand it (still trying) and tried to put in the minimum requisite statements as best I could. Well, let me tell you ... that darn viewport statement seriously messed up my web pages, mobile versions or not. On my mobile-device browsers the viewport turned my web pages into re-sized scrambled eggs! Improved user experience? Ha! I think not! I'll just let my users either view my mobile pages or pinch and zoom and scroll on a well-rendered legacy site because that's why those features on your touchscreen device are provided! I yanked those viewport statements off my web pages and decided to let the chips fall where they may in Google searches.

Well, fast-forwarding to December 2017, I was revisiting my websites, trying to decide how to incorporate ads for my book, and I came across W3-CSS which sounded like it would make some very nice improvements in responsive image re-sizing. See, the problem with making images fit on whatever screen they are viewed (by making their size "relative") is that sometimes images end up being stretched beyond their resolution  - and therefore appear pixelated (poor quality). So you kind of have to make your best guess about how much is too much when you specify percentages for image size. So this W3-CSS has some styles that would handle this problem, only W3-CSS needs the viewport statement to be included on the web page. By now I had forgotten all about the viewport. I put the links to the W3-CSS styles into my web pages and included the viewport statement with the recommended parameters and all appeared well. Until I started looking at my sites on my iphone. What a mess! What was this, I wondered! Is this how people were now seeing my pages? It took me a while and some playing around to figure it out. It was that damn viewport statement! I yanked it out, forgot about using  W3-CSS, and things went back to normal.

Stay tuned ... there's more to come! :) By the way ... W3 Schools is a website I learned about while taking classes at my community college Ivy Tech back in 2010. W3 Schools is an absolutely wonderful resource for learning how to use correctly use HTML and CSS.

June Bug

And next, the rest of the story ...