Website Update Update

I continued to tweak the meta tag settings on some of the pages to get them to look right on mobile devices. I got to test things on several different phones yesterday, which helped a lot. What I came up with was this:

This setting worked well to scale most of the pages in an effective way. It fits the header in without extra line breaks and ensures the content fills up most of the width of the page. This is the desired result for most pages, in both portrait and landscape modes. This is most important on the Roles and Portfolio main pages, where I wanted the header to be spaced without line breaks while the content displays as a single column of article entries that fill the width of the screen.

The home page needs to accommodate a slightly wider header and two fairly wide elements at the top of the page while ensuring that the article entries (duplicates of those found on the Roles page) show up in a single column filling the width of the screen. I tried setting the width directly to 750 in an attempt to get the page behavior I wanted but that made the display run off the right side of the screen. Then I tried setting the scale down to 0.5 and got the effect I wanted. I can’t say I understand this quite yet, I need to read more, but it worked well on a number of devices. Interestingly, when some phones are rotated to landscape mode the header and top elements still look OK while the articles show up three across at their 350-pixels wide setting. That actually works for me.

Finally, I wanted the resume page to be displayed in a zoomed-out format that would make the layout most closely match the way it would look on the printed page. The solution that worked best was commenting the meta tag out altogether. This just lets each device take its best shot at rendering something at its native resolution. I don’t know how this will look on significantly older phones but it looked about the way I wanted it on all of those I tried. I see that my phone scales down the text in the two sections arranged as three columns of bullets while the remainder of the non-header text is of uniform size.

Last but not least I saw that the site would route the user to the address rpchurchill.com/rpc/, which generated a server error. If the rpc/ was hand-edited off the address then everything worked, but that was clearly not acceptable. This seemed to be a reference to the site’s root directory on my webhost’s server. The root directories of all my domains on that service share the same master parent directory. A brief inspection showed a stray .htaccess file in that shared master directory left over from moving the WordPress installation down one level. I changed the name of that file, effectively deleting it, and that solved the problem.

I’m not saying this setup is optimal but it seems to work and doesn’t involve code. I learned a lot by going through this process and it gives me a good basis for learning and asking questions going forward.

In the meantime feel free to let me know if anything doesn’t look right on one of your devices. This is especially true if you have suggestions for better ways to do any of it. đŸ™‚

This entry was posted in Software and tagged , . Bookmark the permalink.

Leave a Reply