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:
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.
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!
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:
  |
  |
  |
