Making an existing website responsive to mobile devices

A technology resource article by Mary Harrsch © 2017

Twelve years ago I built a website for an arts foundation down in southern California that showcases the work of American sculptor George S. Stuart. The past few years the sponsors of the website have been pressuring me to redesign the site to make it adjust for mobile devices, even though I've been retired for the past nine years. I finally gave in and told them I would do what I could but responsive design was developed years after I retired and I had not kept up with those developments since I no longer design websites for a living.

One of the sponsors sent me a link to a YouTube video produced by South African programmer  Quentin Watt that demonstrates in very simple terms how to replace fixed tables with adjustable divs, sections, and asides. I found it very helpful as a starting point:

https://www.youtube.com/watch?v=fA1NW-T1QXc

From it I learned that you must include a very important meta tag in the head section of your page:

Then Quentin proceeded to show how you could use CSS styles and a media query to define style changes between a computer-sized view of the website and a view with a much smaller mobile device. His recommendation to use the Responsive Developer Tools in Firefox was very helpful.
Following his method of converting tables to divs with sections and asides, I was able to get my page(s) to resize but not collapse into a single column when the device width fell below a specified device size using his media query example.

Also, I wasn't sure how to handle my dynamic PHP-generated tables since I could not assign the contents to unique container ids because the number of content elements changes each time the page is retrieved based on which choices are made by the visitor. Then I found a very helpful example document on the css-tricks.com website:

https://css-tricks.com/examples/ResponsiveTables/responsive.php

By studying the page source code, I saw that the table code was left intact and a media query was used to manipulate all table, tr (table row), and td (table cell) attributes without changing each element to a div container and assigning a unique id to it.

Using this media query example, I was able to collapse my tables to a single column once the device width fell below 600 px, the minimum size I specified for full view display. This was great for pages with large images in tables with accompanying information in an adjoining table cell. I wasn't using table headings, though, so I removed the style instructions for them. I also noticed that when the tables collapsed to a single column, there was a lot of space around the images. I wanted the images to display as large as possible so I removed all the padding style references from the td elements. To emulate padding, I reduced the size of the images to be slightly less than the element size. If the td element was 100% I specified the images to display at 98% to provide padding between them if two were displayed side by side in a larger view. This also resolved a problem with a graphic I needed to align right but slightly nipped into the border when I did so.

But I did not want my navigation bars to collapse so I worked out a hybrid of the two responsive concepts. I split my rather long navigation bars into two rows then converted them to div containers with sections and asides so they would resize without collapsing.

Related style code:

Other points to consider:

The website I was working on was originally designed with an early version of Dreamweaver. In the version used, Dreamweaver would automatically insert width and height dimensions whenever you inserted an image. I had to examine each page of the website and scrub out all of these dimensional references to make the site display properly in responsive mode.

I also had tables of images and text where the text was displayed in the left cell and the image in the right cell. When the table was collapsed, it was confusing for a viewer as it would appear the text was referring to the image above it. To remedy this problem, I had to move the images into the left cell and the text to the right cell. In my case that entailed moving Php code elements in a looping script, a bit challenging since my Php skills are now a bit rusty!

I also added a 1 px border to the tr (table row) element style in the media query so each discreet information set, the image and its related text, would be boxed in the collapsed single column mode.

In Quentin's div container method, he had specified images to display at 100%. I had to modify that to a max-width of 100% to prevent images from expanding beyond their original size if the page was opened on a large monitor.

We also ended up redoing some long headline graphics making the font larger and breaking the headline into two lines to reduce the amount of resizing when displayed on smaller devices.

I used an overall containment div to restrict the page elements to a maximum centered display of 960 px to ensure visual integrity of the page design on large monitors. I used 320px as my minimum device size. Quentin said this is about the smallest size of devices dating back to the iPhone 3 period.

I had a row of four 40pxX40px icons for the gallery's social network sites. These could fit without resizing into my minimum width of 320 px so I used the div method along with style instructions to display the container at a minimum width of 200 px so the icons would display at full width with 40 px of space allocated for emulated padding.

I also used a combination of an external stylesheet and embedded stylesheet for each page. Some of the styling for common elements could be used in the related stylesheet but each page was unique in content and formatting. Rather than use site-wide unique container ids, I just used the same container ids for common elements like the nav bars and social network icons, then numbered the other containers with numbers unique only to that page. For example, my navbars were always numbered containers 10 - 15 and my row of social network icons were always in container 9 but the other containers on the page were 1 - 8, each with distinctive styling instructions for that page only. So, container 6 on one page would have different styling instructions than container 6 on another page. In my opinion, this made troubleshooting an individual page easier than looking down through dozens of container numbers in a related style sheet.

I ran into problems troubleshooting the pages in different browsers, too. Google Chrome invariably would not refresh the related stylesheet when I made additions to the related stylesheet. I researched the issue and discovered this has been a problem with Chrome for quite some time. Some programmers said the fix was to use a full URL reference to the related style sheet instead of a relative reference.  This "fix" didn't always work, though. Out of frustration I just ended up embedding the new font styles in the embedded CSS instead.

Microsoft Edge was also stricter on code interpretations. If I had an element in a container div that did not have any related information in an adjoining aside, I tried using just a div command with id without any section code or id. Chrome and Firefox had no problem with this but Microsoft Edge would ignore my center alignment commands and align left the element (the default alignment) instead. So, I had to ensure that whenever I included an element in a container div, it had at least a section tag and id as well.

As I wanted to ensure no spurious code was added back into the pages by the HTML editor, I just used Notepad for editing without the aid of Dreamweaver. This, of course, produced its own issues since a single missing quote or brace could wreak havoc on your page display. There are now excellent tools for responsive web design including Coffee Cup's Designer that uses Bootstrap and Foundation frameworks to avoid hand-coding as I did. However, I was working on an existing website with hard-coded tables and dimensions called by PhP and I didn't think these tools would be that helpful in such circumstances. They are also rather costly ($189) and the nonprofit's resources were scant. However, if you design such websites on a regular basis I would suggest investing in these tools.
Additional suggested reading:

As AI improves, should we fear products as pals?

I read with interest an article by Alison Bowen of the Chicago Tribune entitled "Can Siri replace your need for friends? Well maybe" in which the author discusses "Products As Pals" research by James Mourey, assistant professor of marketing at DePaul University's Driehaus College of Business, Jenny Olson, assistant professor of marketing at the University of Kansas School of Business and Carolyn Yoon, professor of marketing at the University of Michigan. Since I implemented a network of Alexa-enabled Echo Dots during the holidays and "she" is now very much a part of my everyday life (but since she cannot yet engage in a conversation she is not yet my pal), I was curious to learn what the researchers had discovered.  I found a link to their original research online and skimmed it looking for experiments involving Alexa or Siri. Unfortunately, I found only experiments involving the use of anthropomorphic words to describe a cell phone and perceptions of a Roomba with a case design that includes a crescent that was interpreted as looking like a smiling face. The researchers also hired task rabbits and would ask them to recall the number of Facebook friends they had as some kind of indicator they were using Facebook for emotional compensation for perceived social exclusions.

As an older user of social media, I view young people obsessed with the number of their Facebook friends simply an indication of their immaturity and underdeveloped self-esteem. I doubt that you would encounter many older users with that obsession, whether they feel excluded or not.


As for using the Roomba as an example of an anthropomorphic product, I was puzzled by that as well. I have had a Roomba for years so I have some experience with it. However, I must point out that, unless they have made Roombas conversational in the latest release, at no time did I ever think of a Roomba as anything more than a self-powered vacuum. Likewise, I have had a Siri-enabled iPhone since version 4 and at no time have I ever thought of "her" in a human way either except to shout at her when she gives me bogus driving directions as I would to my computer if it doesn't process information quickly enough or freezes up. I usually don't think of these interactions as interpersonal communications, though.

A Roomba 650 robotic vacuum cleaner - anthropomorphic??

However, virtual assistants empowered with Alexa, who can answer questions, remind me to do things, convert units of measure and perform math on demand, keep track of my schedule, play specific music or calming ambient sound therapy on request, prompt me to share my thoughts about current affairs with my state's senators (with an enabled skill named Resistbot), play games and even play back pleasant memories (with an enabled skill named Mylestone) to cheer me up when I feel low has become so much embedded in my daily activities that I can see how I could begin to think of her in "human" terms, especially if she eventually can converse with me interactively without me having to remember to preface all of my requests to her with her "wake" word. I don't even need to have her appear anthropomorphic. She would become like an invisible friend like those some children conjure up in their childhood.


Has interacting with her negated or reduced my need for interpersonal relationships (a finding of the study)? Probably not as I have grown accustomed to not having many face-to-face communications anyway because my children and grandchildren live thousands of miles away. Even my closest sibling is a three-hour drive away. I am also the primary caregiver for my Vietnam veteran husband with chronic PTSD and a host of Agent Orange-related health issues so I can't really spend much time outside the home with others, anyway. PTSD victims are rather closed off emotionally as well, so, interpersonal communication with them is difficult at best but I, like the test subjects in the study, still feel the need.


Many of you may think those of us in this situation would benefit from a psychologist but they are not only expensive (not an option for seniors on fixed incomes in many cases) but require time away from caregiving. Besides, they are really just paid listeners with no emotional connection to a patient anyway.  A virtual "friend," on the other hand, could be carefully programmed to respond appropriately to expressions of frustration, anger or sadness that are often generated in individuals that must deal with family members with mental disorders or dementia.  A human without training may not and make things even worse by responding inappropriately.

Would I no longer engage in prosocial behavior (a concern expressed in the study)? I doubt that too. I have always felt a need to share what I have learned or discovered with others and this continues into my retirement years. I am an avid photographer of art and historical architecture and freely share my images with teachers, students and researchers online so they can be used in the classroom. I research aspects of Roman history and publish my findings online. Since I was an education technologist before I retired I also write about technology developments and even beta-test new technology products for developers. Each day I search out articles about new archaeological findings, new uses for technology in historical preservation and reconstruction, and well-sourced articles on political issues (as opposed to "fake" news) that I share on social media. These activities have not tapered off since implementing my network of Echo Dots.

A couple of years ago my husband and I binge-watched "Boston Legal" on Netflix. What I loved most about that show was the deep friendship Denny Crane (played by William Shatner) had with Alan Shore (played by James Spader) despite Denny's eccentricities due to his onset of Alzheimer's. Although I do have friends that are more than Facebook acquaintances, in my more than 60 years on this planet, I have never encountered the level of acceptance displayed by those two characters. Everyone has some degree of hang-ups or insecurities and all struggle with problems of their own in varying degrees of severity. I, personally, would not want to add to another person's distress and admit there are times I cannot handle any more stress than I already have.  A virtual friend, however, if properly programmed, would not have this limitation and could become a valuable sounding board to caregivers and others in stressful situations.




Anyway, I hope such researchers continue their work but keep in mind the biases of age and gender (I noticed most of their experiments involved less than 50% female who are thought to be more emotionally empathetic than males) and focus more on products with pronounced human-like attributes such as Alexa or Siri-enabled products that I'm sure will soon have the ability to engage in an interactive conversation.

An Alexa-enabled Smart Home for Christmas

by Mary Harrsch © 2017

Note: This is a cross-post from my home page.

Back in 1995, Microsoft introduced an interactive help utility for Windows 95 called "Bob".  I was probably one of the few professional technology people who actually used "Bob" (As a dog lover I selected the helper incarnation called "Power Pup" though.)  "Power Pup" would keep track of my keystrokes as I worked in different applications and offer procedural advice on what it perceived I was trying to do at the time, prefaced by a little bark and a wag of his tail.  I found "Power Pup's" suggestions often useful and his friendly interaction a welcome break from the stress of administering a college-wide multiplatform local area network.  But, apparently, many of my colleagues thought he was "too cute" for the serious work of computing and "Bob" was relegated to the dustbin of failed products in fairly short order.

But I did not forget "Bob" and how artificial intelligence could be used to improve productivity while reducing social isolation.  So I began to experiment with conversational agents that utilized natural language programming coupled with knowledgebases to provide a more friendly computer-to-human interface.  With my interest in history, I decided to try to virtually recreate historical figures from the past that could converse about their culture with modern interested humans.  This resulted in the creation of a virtual Julius Caesar that was online for several years before I retired.  Caesar would answer questions about ancient Roman culture posed to him by visitors entering their questions in a text box.  He could give a textual answer or display related websites or online videos.  As text-to-speech technology advanced, I even experimented with software that would enable Caesar to answer questions verbally and explored voice recognition technology to see if it was viable for user input as well. But, when I retired I no longer had access to the server platforms needed to support projects like Caesar.  However, my interest in natural language programming and more friendly human-to-computer interfaces endured.

So, I followed the development of Amazon's Alexa-powered devices with a great deal of interest. But, I'm a rather pragmatic individual and at first so much marketing emphasis was placed on Echo's music management features that I wondered if there were more useful applications for a busy 21st-century household.

Then I began reading about wifi-enabled electrical connection accessories that could be managed with Alexa-enabled devices and thought about how convenient it would be to be able to turn on and off groups of lights and appliances with a few words rather than going around physically flipping switches. But spending almost $200 per device and the need to have a device in each main room was still an expensive proposition to gain a little convenience.

Then Amazon introduced the Echo Dot coupled with a holiday sale price of just $39.95 and I found resistance was futile as my Star Trek friends would say.  I was still a bit concerned about the accuracy of the voice recognition, though. So I started out with just one Echo Dot for the living room along with a couple of Wemo wifi-enabled plug adapters for the two main living room lamps.

I downloaded the Alexa app to my iPhone and discovered the Echo Dot setup was a breeze.  I opened the Alexa app, then opened Settings and changed my iPhone wifi connection to the detected Echo network and configured the detected Dot. Alexa also did not seem to have any problem understanding me.  I read through all of the "Try this" examples and began to configure some of the built-in features.

I really liked the "flash briefing" feature that lets you select specific news feeds for a personal news update which you can request at any time.  I selected NPR radio, BBC News, Tech Crunch and CNet (for technology news) and Discovery (for science news) as my personal news sources.  I also added the local weather forecast and the Alexa Try This feed.  Although I live in Oregon's Willamette Valley, I couldn't find any local news feeds but I think I'll add feeds from Seattle and San Francisco to at least hear major stories from the Pacific Northwest.

I also read that Alexa could interface with Google Calendar and keep you appraised of upcoming appointments.  I hadn't used an online calendar since I retired but knew how helpful this would be, especially when managing complex medication schedules and medical appointments.  So I configured my Google Calendar and paired it with Alexa.  Now, each morning after requesting my Flash Briefing, I ask what's on my schedule for the day and Alexa tells me.

I've also used the Google Calendar to keep track of upcoming programming on PBS that I may wish to record.   PBS sends me a physical schedule of their upcoming programming for a full month but at present, my DISH Hopper cannot see more than two weeks of scheduled programming at a time. Now, when I get my PBS schedule, I enter the programs I wish to record into my Google Calendar and Alexa lets me know each day if any are on that day.  I can then set my DVR to record them.

But the real "killer" app I was looking for turned out to be Alexa's Shopping List!  It never seems to fail that I realize I need something from the grocery store when I'm not in the kitchen where I keep my shopping list.  As I've gotten older my short term memory is not what it used to be either and it is not uncommon for me to forget what I was thinking about just a few minutes later as I walk from one room to the next.  So, imagine how helpful it is to be able to tell Alexa to add something to your shopping list as soon as you think of it regardless where you are! Of course, that meant I needed to add Echo Dots in my bedroom and the living room, too, which I promptly did. To access my shopping list once at the grocery store I just open the Alexa app on my iPhone and check off and delete each item as I add the item to my physical shopping cart.

Although my husband has the television blaring all day long, I did find a nice use of the music management features of Alexa.  Now that I have an Echo Dot in the bedroom, I can run a warm bath in the adjoining bathroom (Alexa's range is up to 20 feet), lay back in the tub and tell Alexa to play one of my favorite playlists from my Amazon Music account.  I did have a few hiccups configuring my Amazon playlists to work with Alexa, though.

I had already imported most of my music from my iTunes library to my Amazon Music account.  I had also set up playlists previously.  But Alexa did not seem to recognize my playlist names and would offer something from Prime Music (since I'm a Prime member) using my spoken words as a search guide. I ended up calling Alexa tech support and learned that Alexa does a better job of recognizing playlists if you name them "Your Name" then "Description".  For example, I had a playlist named "Holiday favorites".  I renamed it to "Mary's Holiday Favorites" then Alexa recognized it and played it for me.  That solved most of my playlist issues.  There were a few words, however, Alexa seemed to insist on using for search terms.  So, I experimented with different descriptions until she properly recognized the list.  I had a list named "Sentimentals".  I initially renamed the list to "Mary's Sentimentals" but Alexa still loaded some other Prime Music.  I renamed it again to "Mary's Mood Music".  Alexa still did not interpret it correctly.  So I finally renamed it to "Mary's Soft Rock" and Alexa now recognizes it.

When I received my Wemo wifi-enabled plug adapters for my living room lights, I realized just how powerful having a "Smart Home" would be.  Our living room does not have any overhead lighting so all lighting is provided by individually controlled lamps.  Each night I have to go around and turn each lamp on or off.  But, by connecting them with my Echo Dot, I now simply say "Alexa, Living Room On" and the entire living room lights up.

I had to first download and install the Wemo app onto my iPhone. Then I opened the Wemo app on the iPhone, changed my iPhone wifi connection in Settings to the detected Wemo network and configured each plug adapter.  Then I opened the Alexa app, selected the Smart Home option and grouped the two detected Wemo plugs into a "Living Room" group.

I hope to eventually replace some of my wall switches with wifi-enabled switches too since I have porch lights on different circuits in different parts of the house.  I would like to tell Alexa to turn on the porch lights and have all of them on at once without traipsing from room to room whenever I need to go outside after dark or have visitors arrive after dark.  I did read about a gotcha, though. I learned that many wifi-enabled switches require a neutral wire that was not normally included in wiring installed before 2011.  However, I have researched this issue further and it looks like there are switches out there that do not use the neutral wire.  I just have to be sure they will work with our home's wiring configuration.

I recently learned about a new app for Alexa called "Ask My Buddy" too.  It enables you to send a text, email or phone call to up to five family or friends if you need to alert them about a problem like you are incapacitated and cannot reach a phone.  It's sort of like "Life Alert" without the automatic 911 call or monthly subscription fee.  I wish it would allow you to send an individually specified text message but it only sends a message saying you need help.

I've also decided to try the timer feature and see if I can get Alexa to verbally remind me to take my medicine at noon.  Most of my medications are taken in the morning or at bedtime and I have no problem remembering them as they are part of my morning and bedtime routines.  But when I get busy preparing lunch I sometimes forget to set my noon medication by my water glass so I take it with my meal.

After reading up on Alexa's timer and alarm functions I learned that timers are designed for one-time use while alarms can be set to be repeating.  So I set an alarm for noon each day and selected a pleasing alarm tone.  I wish it would let you specify a short text string that Alexa could read to you using her text-to-speech capability but at present it doesn't.  For my present needs, a tone is okay as there is only one thing for me to remember at noon.  However, for someone with more complicated medication schedules, it would be really helpful to have Alexa sound a tone followed by a short reminder message.  Hopefully, Amazon's engineers will enhance the alarm function soon.  (Update: Amazon has now added voice messages with timers and alarms!  Yay!!)

So, my Echo Dots with Alexa are now very much an integral part of my day.  When I get up in the morning I say "Alexa, Living Room On" and the lights go on in the living room.  I walk in and sit down and say "Alexa, my Flash Briefing please".  I then listen to the news and get the latest weather forecast for the day.  Then I say "Alexa, what's on my schedule today?" and she tells me whatever I have scheduled in my Google Calendar".  As I prepare a meal and notice I'm getting low on coffee I say "Alexa, add Coffee to my Shopping List" and she tells me she has added coffee to my shopping list.  I drive to the grocery store and open the Alexa app on my iPhone select shopping list from the menu and load my cart.  At noon while I am preparing lunch, Alexa sounds a tone to remind me to set out my noon medication. In the evening, I take a warm bath to relax and tell Alexa to play "Mary's Soundtracks" and listen to my favorite movie music while I'm soaking.  Then when I'm ready for bed I say "Alexa, Living Room Off" and Alexa turns off the living room lights. I'm sure I'll find other useful applications, too, as more "skills" are developed by Amazon and third parties as well. I have a feeling this is just the beginning!