My Slide Rule Museum website was built in 2003 using basic HTML. Text is not compatible with mobile devices

sliderulemuseum.com

I need a CSS template that forces the text to be the same size on desktops or mobile devices. The website is too huge to revamp the pages. I used frames, tables, text and images. very basic stuff. Its a not-for-profit so there is no money to pay for a professional coder.

Any help or advice to modernize it would be welcome. I really do not have the mental bandwidth (Over 70 y.o.) to learn a whole new style of coding, but with help on setting up the main pages I might learn. I want to be able to reach students that are now on tablets and smart phones.

Hi @curator and a warm welcome to the SitePoint Forums.

Try this in the header of your frame, it may help with the text size.

<meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1'>

I just checked your site and I don't think there is an easy solution to make it mobile friendly :frowning:

The following FREE HTML, CSS and Google Mobile Friendly links will get you started. It looks as though you have got a lot of work to do!

Try each link and follow each help. If there is somethings you do not understand then please feel free to either askr questions.

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fsliderulemuseum.com%2FSRM_Menu.htm&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

https://search.google.com/test/mobile-friendly?id=CRtyV5gpToC5n4begdlu6A

2 Likes

Unfortunately, I’d have to agree with @John_Betong that there’s no quick and easy solution here.

Frames have been dropped from the latest version of HTML. Although desktop browsers will continue to display them OK, they are not considered a good choice from an accessibility point of view.

You could do away with the frames, and add the menu to each page using a PHP include. That’s not difficult, and we can walk you through it, if required.

Where you are using HTML tables for layout, you should try to replace them with more semantic elements, or even <div>s. HTML tables used this way will not readily resize to fit on small screens. Use CSS to control the layout (and all other styling, too). There is always more than one way of achieving a layout with CSS, but you might find it simplest to try CSS display:table and related properties.

https://www.sitepoint.com/solving-layout-problems-css-table-property/

The key to making a site flexible, so that it will adjust to different screen sizes, is to avoid fixed widths as far as possible. Use flexible measurements like em or % to define the size of containers, where needed. That will get you off to a good start.

There is more to it than that, but if you can get that far, it will be much easier for us to help you put the finishing touches to it.

These articles might help give you an insight into responsive design.

https://www.sitepoint.com/web-foundations/what-is-responsive-web-design

https://www.sitepoint.com/responsive-web-design

It seems like a lot to learn at first, but it’s actually easier than you might think. Just take it one step at a time, and ask for help when you need it.

5 Likes

Thank you. things are working better. does the <meta name=“viewport”… only go on my index.html where I set the two frames, or do i place it on every page?

It needs to be on every page.

thanks. I notice that I cannot shrink the page on the android now to see the whole page width. Is there another element I need to modify in that meta tag?

<meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1'>

This tag effectively tells browsers that the site is “mobile-friendly”. Without it, they assume the site is a fixed width (960px, IIRC) and simply scale that down until it fits in the window. This tag indicates that they shouldn’t do that. Including it on your site before you’ve made the other necessary changes is going to cause problems, as you’ve found.

Thanks, to do an include of the left hand navigation frame page would be highly desirable to remove the frames. Do I have to convert all my web pages to SHTML or can I add the navigation menu without it?
This would be my first redesign step, across the site. Then I can start looking at other option to make a mobile specific app. There is a east coast university that is interested in taking the collection, so if that happens, than younger geeks than me can continue with the website evolution.

I assume I have to make another table with two columns that surrounds the existing body of a page that drops the nav menu in the first column and the existing page stays in the 2nd column.
Future plan to insert left-hand navigation column in all pages
To remove FRAMES from sliderulemuseum.com
Page 960px wide max - nav col 140px - main body 770px or 750px

<table width="960"><tr><td width="140"> 
 Insert left-hand Navigation column code
</td><td width="*">  

 the existing page body tables  

</td></tr></table>

It would be worth it to just reroll the entire site and use a CMS (like Wordpress) so you can easily keep the content updated. Trying to retrofit all this and bring it up to modern standards is just going to be a huge waste of effort.

I’ve got over a hundred pages, and most of those are huge galleries. there is more than 7000 images and 500 pdf (books) in the relevant folders. I’m afraid of losing my control over the content by not understanding what they would be doing. I assume you can use wordpress on my existing host server.

Probably, but you would need to check with your host. WordPress requires a database for which some hosts charge extra.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.