I am trying to get my website to be more mobile friendly. I have been trying different meta tags but none seem to be great. When I use the one that includes device = width or something like that, the width looks great but the text in the page is too small. I have tried setting the initial scale to 1 but this does not work well either.
Any suggestions?
While the recommended viewport meta looks like:
<meta name='viewport' content='width=device-width, height=device-height, initial-scale=1'>
That is not sufficient to make your website mobile friendly. You may want to post a link to your site so folks might have suggestions as to what needs to be changed.
As @tracknut said, the viewport meta element is just the first step in mobile-friendly design. It lets you use media queries for styling your mobile layouts. You might want to set a larger font size for small screens, for example. As said, a code demo or link would be needed to help further.
Thank yo for the reply. Here is the website that I have been using to experiment on
https://www.series63examtutor.com/
The font size I am using is pretty large. At least this is the way it looks on my laptop/monitor. I Also have a website through Wix, which lets you create a mobile version of the desktop site. The mobile version is created through the site with the help of Duda Mobile.
I have several other sites on Homestead.com but there is no way to create mobile versions without creating new sites.
<meta name="viewport" content="width=device-width">
You really need the initial scale set to 1 in that tag, as @tracknut has shown.
But as @ralphm said, that is just the start of making the site mobile friendly.
If Iâm brutally honest, the way that site is styled is the absolute polar opposite of how a site should be coded for mobile use.
It is riddled with in-line styling with absolute positioning and fixed widths on just about everything. I would say it needs redesigning from the ground up.
When the initial scale is set to 1, the text is way too large on mobile. The text covers more than the width of a phone. How do I fix it? I know the design is not good. I could re-create them or have someone else do it but a redesign could negatively impact my SEO. I would rather have the site look bad but have good seo. The sites I have generally rank in the top 5 on page 1 in Google for my key words
How?
Bearing in mind that mobile use is now (has been for some time now) the vast majority of the web use and as such mobile friendlyness is now a large factor in ranking, this makes no sense.
Besides, there is no point in having good ranking when visitors canât read your site.
Again, thatâs because the site isnât coded to be mobile friendly, quite the opposite. No implementation of a viewport tag is going to fix that.
The only way to make this look right on mobile is to use the correct viewport tag (which has been shown) and completely redesign the site.
So the harsh reality is:
(a) Redisign.
(b) Leave as is.
Those are the choices.
Despite the terrible design and I know it is terrible, I have managed to rank very well. Obviously my background is not technology. The way I have it set now, the text is small but if you turn the phone sideways, it can be read easily. I am open to getting a redesign but I think I run the risk of losing ranking. Yeah, mobile is part of SEO but I do not think I get penalized substantially for not being mobile friendly. I would be interested in redesigning the site I posted here, as an experiment because I get the least traffic on this one. I would need to hire someone. I reached out to Duda Mobile but they have not followed up with me.
I donât see how this is so.
If you are ranking well inspite of a rigid design, I presume you must have good content. Changing the design isnât changing your content, that can remain the same.
I actually beleive that chanaging the design to be responsive should improve your SEO. I see no reason it can do harm, it can only get better by opening it to a new mobile audience.
I understand it may be daunting to make this move yourself, but help is at hand here.
But it is the way forward. Many sites were doing this about 10 years ago, so itâs well overdue.
The way to do this that makes most sense for me it is use a third party, which would convert it to mobile a couple of clicks. Is this possible.
It would take more than a couple of clicks, but certainly any capable third party will be able to do it if you are not confident to tackle it yourself.
Any recommendations for a third party?
Sorry, not really, since Iâm the tyoe to do this mayself.
But responsive design is pretty much the standard these days, so I would expect any (decent) development company (or individual) would be capable.
Though there are still a few about doing things the old ways. But thatâs another story.
Though if you find any, best to check out their own site and their clientâs.
Is there any way to change the font size with HTML code without changing the font size on the desktop website?
There is, a simple media query will do that.
But, itâs going to take a lot more than that to make it work properly for everyone.
Unfortunately the way the whole page is coded goes directly against all the principles of âFluid Designâ, which is IMO the best approach to making a page that looks good on any size screen.
What you have is a âRigid Designâ, where every element has a fixed size (width and height) and a fixed position. The positions are âabsoluteâ which means the elements are all ignorant of the space and positions or their neighbouring elements, so there is no natural âflowâ to the layout where one element follows the previous, in a space after it.
From the outset, itâs not difficult to make a page that flows freely, because the default styling of HTML before the addition of CSS mostly does this itself.
But on this page there is a lot that needs undoing to free it up.
So as I say, there is no âquick fixâ to this. Itâs not just a case of adding the correct viewport tag or changing the font size. The whole layout needs to be re-worked.
You could in fact have the same looking layout if you wanted, but the way in which it is achieved needs to change, so that it may adapt to different screen sizes.
It is indeed crucial to optimize the viewport meta tag of your website in order to increase its mobile-friendliness. The âinitial-scaleâ property does not appear to work when the âdevice-widthâ setting is used.
Yeah, When I set the initial scale to 1, it does not work as intended. The font is larger and it is easier to read but it only covers like 1/3 of the width of the page. When I use device -width. All of the width of page is visible but the font is small. If you turn a phone sideways, it looks okay, though. I think the issue is that the system I am using has very limited hmtl capability. On page settings in the programs, if gives you an option for html such as head tag and java. May be it only allows for a head tag. The other problem is that I know very little about html
I know the site has lots of issues. I am looking for two things: a short term solution to make the site more mobile friendly, even if it is just a minor thing like changing font size, which I do not know how to do and also a longer term solution. I have a site on the Wix platform that allows me to make a duplicate of the site for free and then I can make whatever changes I want. I am leaning towards going in this direction. They also give you a mobile version of the site
This answer will be little help to you as you are stuck between a rock and a hard place but it may help you understand what is going on. 
At present your site is not responsive or designed for small screen or mobile and therefore should not use the viewport meta tag.
However when a mobile device accesses your page it sees that there is no viewport tag and will assume that the page is old legacy code.
Therefore in order to allow your site to be viewed on a mobile device it simply shrinks the whole thing until it fits the viewport of the device. It is then up to the user to pinch and zoom to read anything. Thatâs the reason that when you turn your phone sideways the text is bigger because the phone is wider and the layout has not been shrunk so much.
Increasing the text size would mean increasing it for everyone and then of course nothing would fit on desktop either as it would be too wide.
In order to target mobile and small screens you would add the viewport meta tag already mentioned but then using media queries you would re-arrange the content to fit the smaller screen in a better manner.
Once the viewport tag is added the mobile device renders the page at the real size you designed. Thatâs why it no longer fits because a mobile screen is only 375px wide but your design is three times that width. However the text is now readable because it has not been shrunk. You then have to move things around until they fit in a smaller viewport or instead of sticking out wide.
None of that is really helpful to you unless you want to learn how to redesign the page yourself.
Therefore your options are to use a typical web site builder or get someone to redesign it for you. I believe there some sites that say they can convert sites to mobile but I have no experience of them and wouldnât trust them anyway:)