Not this blog of course – it had been responsive already.
But I gave in to Google’s nagging and did not ignore messages in Google Webmaster Tools any longer. All my home-grown websites had a fixed width of the content pane and a fixed left sidebar. On a mobile device you only saw the upper left corner – showing the side bar and only part of the content pane.
Learning about a major Google update implemented last week I spent one night coding until the test went fine for our business website …
… and for my/our other sites.
This is not a guide to the perfect responsive design, I am not a professional web developer, and I don’t claim my CSS or HTML code is flawless, elegant, or processed correctly by all browsers in the world. I read this tutorial and this guide, and they provided me with clues to answer my main question:
What is the bare minimum to make a classical website
mobile-friendly according to Google’s requirements?
It also does not necessarily mean other websites are extremely difficult to read on a mobile device. There is a famous website that doesn’t meet Google’s standards although the content pane fits nicely into the width of a smartphone – if you turn it by 90° and scroll to the right … which Googlebot will not do.
In summary I did the following:
Pre-requisites: Use only CSS for formatting, especially define the layout by containers referred to in the stylesheet. Fortunately I made that move long ago.
1) Set a viewport metatag which tells the device to adapt the visible content to the width of the screen. Even if the width of the content is not fixed in a desktop browser, it is not automatically interpreted correctly on mobile devices without viewport. Actually, I was wrong in assuming that a plain old-school hardly formatted HTML text of variable width is mobile-friendly by default. In this case the content adapts to the width of the device, but Google rightly complains about too small text, and links too close together – in addition to missing viewport.
I had been intimidated by the small text / links close errors some time ago and figured I had to re-do all navigation elements. But after adding viewport, the ‘only’ thing left was to make the content break or flow so that it won’t be larger than the screen width. Text size and links were fine without any change to font size or width / height of containers for navigation links.
2) Add at least one media query to my CSS stylesheets in order to make the left side bar vanish or move if the width of the screen is pixels is smaller than a certain size. I tested with an Android device, and with Google’s tool – but mainly I was squeezing the window on a desktop PC to very small widths. For the business website I decided the sidebar is nice-to-have as it just shows recent blog posts – the same approach as used with by my current WordPress template. For some other sites it was an essential navigation pane; so I let it move to the top.
3) Make sure that all containers and images on a page resize or flow accordingly by making their styles change at the threshold width or continuously – this meant cross-checking the styles of all containers that define the layout and changing / adding style definitions depending on the screen width. I made images resizable, and text displayed left to images should flow under it at a certain width.
elkemental Force 
I can’t resist slipping in a question here about Tesla’s new battery. Have you done any quick calculations to see if it might prove to be a useful add-in to your existing system? My off-the-cuff guess is that it would be complete overkill and that your existing PV will already give you enough juice for the system with just, maybe, standard lead-acid batteries coupled to an off-the-shelf inverter for backup.
Yes, I did! Tesla’s announced prices are quite intriguing: In the US they say they will charge $ 3000 for 7 kWh – this is about what a lead-acid battery (the better ones, gel-based, maintenance-free) of the same capacity costs today in Austria, and it means an enormous drop in price compared to Li-ion battery packs available now. E.g. one LiFeP battery we had a serious look at (before we decided against the purchase) was at least € 7000 for 5kWh.
Our non-heat-pump electricity demands are just the Austrian household average of about 3500kWh per year, so we have about 10kWh per day base-load (refrigerator, computers, office stuff, cooking etc.). This in case of a few rainly days 10 kWh would not be an overkill. The heat pump need also about 3500 kWh per year, so we need about 7000kWh in total per year
So the capacity does not sound like an overkill – but solar gains in winter are only a few kWh per day, much less than what the heat pump needs. It would not help though to make the battery even bigger (connect several Tesla Powerwall modules) as the battery always has to stay at about 20% capacity and the bigger the battery, the larger the losses. If the battery is enormous all solar power would be used to just compensate the losses.
So in winter – when ‘autonomy’ is perhaps most critical – you don’t need a battery as you are able to use all the meager kWh you produce during the day anyway. In summer the battery will help to shift loads, but this is not that interesting economically (compared to heat pump energy in winter).
Now finally the interesting number: Based on rule-of thumb numbers on typical percentages of power you can consumer in your house (function of battery size and rated power of the generator), you can estimate how much more power you would be able to use compared to no battery. A household (without a heat pump) would typically be able to use about 25-30% of power generated of a generate with 5kW rated power. A battery with a few kWh capacity would increase this to about 40. Now this would result in a yearly financial gain of only about € 150 in our case (comparing system with battery to system without battery, and based on current price for kWh purchased versus the much lower selling price). This means a € 3000 battery will be paid back in about 20 years (neglecting interest rates…) – which is perhaps the maximum lifetime! So still not interesting enough yet from economical perspective.
The more power we are able to consume immediately without the battery, the less economical the battery will be. So we decided to gather some experience, but we picked an inverter that would allow fairly easy replacement by a battery-ready model in the future (and the vendor is one of the partners Tesla quoted in the first press release – they plan to offer a complete solution.)
Then there is the question of the price of ‘autonomy’. Tesla says they offer a full, built-on backup system. From my encounters with inquiring about safety standards for electrical wiring, I am really curious how and if their system will be certified in Europe. We would have been very interested in a backup system, too, even though our yearly outages are just minutes. It just feels wrong to have PV and no access to its power if the grid fails. But implementing that backup here is basically installing another huge box with redundant switches, not supplied by the batter / inverter vendor, and subject to ever changing local laws (and costs are on-top of the packaged system). Since nobody could tell us how big / how expensive that thing was going to be, and the emergency option for the existing inverters was delayed for months, we finally decided to wait until this becomes more of a standard.
I have been asked that question quite often in the meantime – now I have finally dedicated a post to it:
https://elkement.wordpress.com/2015/07/15/solar-energy-batteries-and-autonomy/
Funny–as it turns out just two weeks ago the marketing lead Camouflage Software contacted me regarding the interactive training components I had created for them last year. They were all flash movies created with Adobe Captivate and were housed in f different courses in Camouflages Desire2Learn instance. All of them were behaving badly all of a sudden. Instead of sizing themselves to fit the available browser window they were instead appearing as tiny objects around 250 pixels high! They’d already contacted Desire2Learn support who had told them that the developer (me) had been usng “old code.” No problem, I said, and opened my current version of captivate 8 (I have a ongoing subscription just for cases like this) and re-published several of the lessons, then used them to recreate part of one of the courses.
No change; the SWFs were still as tiny as before.
I sighed, went to Desire2Learn’s file manager and opened one of the HTML files used to call the SWF. I manually changed the size parameters for width and height from 100% and 100% to 975 pixels by 575 pixels, saved and loaded the content. All was back and functioning again.
Apparently Desire2Learn sees the loss of support of sizing to fit the available window as a step forward. Sad, eh?
Oh, and I manually had to do exactly that for the remaining objects–and there were a lot. Too bad because in the previous version the window would scale to fit whatever the user had. Now it’s a fixed width.
I wonder what Google’s tool might say? (But I guess this is an internal-only site?) One reason I did not tackle the remaining website using the old stylesheet was that that there is a flash SWF object in one page – and Google’s tool list “Usage of flash” as one of the no-go errors in its list.
Good advice, thanks.
My home web site needs some major attention because for some reason PHP-driven pages take an extra several seconds to get started. I can’t figure any reason for that, but it would kill the page’s usability if anyone were using it for anything.
So this is a “secret” website ;-)? Accessible from the internet on principle but nobody knows the URL?
I have no experience with PHP, I still use stone-age ASP (which was sort of the counter-part to PHP in the Windows world, although I think you can run PHP on a Windows webserver now.) Someday I will migrate all my applications to .NET / ASPX…
I read your post on my android device during lunch, and then followed up by clicking the links. All looks good. I am amazed at how your on-line identity has slowly morphed toward a fairly comprehensive narrative, more uniform now than it was a couple of years ago. I haven’t viewed your other sites in a while, so this was a pleasure to see how your constructs evolve.
Thanks, Michelle!! All those pages gradually and ‘organically’ converged somehow! :-) It was a really nice experience – like my experimental gardening :-)
And thanks for checking on one more device – I am sure some glitches might be lurking somewhere. But I was also satisfied with the result because I had expected it to be much more work!
Everything was really nice to read and view. I like to adjust the font size on my own, or enlarge images to better see them, and I can’t always do that on some websites (so I usually just close them on my mobile), but it worked really well for yours. By the way, I had followed a link from Twitter to your German blog a little while ago, a post (I believe) on your solar panels with images from inside your renovated home? You have a beautiful space, Elke; a very lovely home and work space.
Thanks again, Michelle! This was a German post on the safety features of our solar generator, kind of satirical. I considered to write an English version, too, but the fun would be lost in translation as our laws and standards are quite special (at least I hope so ;-)).
We now have a big grey box on the ceiling – above the Chief Engineer’s desktop: the counter-part of an emergency switch for firefighters (that big red button). Normally that box would be tucked away in a non-inhabitable attic, and we had the chance to have it somehow squeezed into the roof’s insulation.
What we did not know was that you need to switch on the thing near the roof once you had turned it off downstairs… or when the power grid is down! This happens once a year for a few minutes – but we would not have wanted to climb up the roof and take off some shingles to switch on that thing again. So we said: Why not have some weird decoration inside?
The image in case anybody else wants to know what this comment is about:
But yes, we love to work and live in that space :-)
We have furnace shut-off switches hovering on the above-ground floors. They aren’t pretty, but if the basement every fills with water we can kill the power before electrocuting ourselves. The box does not appear intrusive in the photo. In Canada we’d think it was part of some fancy building security system or a built-in speaker for a sound system.