Is there an easy way to turn my old html site into responsive (not much code skills here).
Maybe adding some css code to make layout width flow (no idea of what to do with images and text inside or left menu)
pages are basically identical, so it´s an example. Any help greately appreciated.
It’s usually tricky to retrofit old sites, but a simple option would be to change
#wrap {
width: 800px;
}
to
#wrap {
max-width: 800px;
}
and then add this to your CSS:
* {max-width: 100%}
That gets a reasonable result.
1 Like
Google has a very good Mobile Friendly Test Site
Most important item for each page is to set the following header Meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
2 Likes
Hi,
As mentioned by John above you must first add that meta tag in place in each page or media queries won’t work at the required widths on mobile.
A problem with your page is all those adverts which can’t really be resized so you may need to look at responsive ads instead to do this properly.
In the meantime you could add the following rules which show how to linearise the home page although it is necessary to hide the overflow in cases which is never the best option. You should be looking at making content that fits rather than hiding anything that doesn’t.
Anyway to get a feel of what can be done you should add the following code to the end of your stylesheet for testing (or directly inject it to the live site with something like Live css which will allow you to see what the code does before you actually add it to a stylesheet).
#wrap {
width:auto;
max-width:800px
}
#frontphoto {
width:100%;
height:auto;
margin:auto;
display:block;
}
img {max-width:100%}
#footer {width:auto}
@media screen and (max-width:600px) {
#avmenu {float:none;width:auto;}
#avmenu ul {width:100%}
#avmenu img, #avmenu iframe, #avmenu ins, #content ins, ins {
display:block!important;
margin:auto!important;
max-width:100%;
overflow:hidden;
}
#content {margin:10px 0}
.announce {margin:auto}
#header, #footer, #content {margin:0 0 10px}
#header h1 {float:none; width:auto;}
* { max-width:100%}
#wrap {overflow:hidden}
}
That is only tested on the home page so you would need to then test other pages and make adjustments accordingly. If as you say they are the same format then there shouldn’t be too much to do.
As I said that is just a start as in most cases you will want to add classes in the html to allow better re-ordering and indeed work out what to do with fixed sized adverts.
1 Like
Just read a simple explanation of why the meta tag should be used:
Courtesy of:
http://arkpod.in/pills/?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning
Thanks you all Paul, John, Ralph. I made the changes, and some other little tweaks, and doesn´t look bad considering the site needs to be redone.
About the left column ads, vertical skycrapper: I tried changing the adsense code for a new one, creating adaptable unit. Unfortunatelly the result was that no ad at all was shown.
That’s too bad, because my earnings would go to 0 if no ads are shown. So had to put the old vertical skycrappers again.
- The other ads are just pictures. How could I make those “flexible”?
Finally: the left navigation menu has some 180 px wide. The font looks to small now in comparison with the rest of the page. My attempts in giving the menu a greater size resulted in a mess, because text flows in two lines.
2)Can I do something about it?
- How do I change the Verdana,Tahoma,Arial,sans-serif for a Google font (in order to modernize the look)?
presumably you made an error in the code you added as the responsive ads work fine on all the sites I’ve used them on.
I didn´t. Maybe theres just no advertisers for the flexible format in my case. And there is for the skycrapper.?
check this page. On right column I have 2 adsense blocks: 1st one is fixed vertical skycrapper, and 2nd is adaptable. If I see it in my pc the “adaptable” doesn´t show. If I see it on my phone it does…
?
I managed to add the Google Fonts (importing to css, just 2 families in order to watch the loading time).
Anyway I’m still stuck in
The left navigation menu has some 180 px wide. The font looks to small now in comparison with the rest of the page. My attempts in giving the menu a greater size resulted in a mess, because text flows
in two lines. Any insight on how to deal with this (I guess those links should be more tall, bold and big)
Also no ideas on my stiff image banners (how setting width of images to 100%)? And adsense responsive not showing anything.
You need to refresh the page because most responsive ads aren’t exactly responsive as such. They only respond to the page size that they loaded on. So if you close your browser window and click refresh the responsive ad will fit the space required which is about as good as some of those get.
I assume you are talking about the wide screen display when there are two columns. If so the options are clear. Either increase the width of the menu if you want the text to stay on one line; or instead allow the text to wrap if it doesn’t fit (you have in the spaces stopping the text from wrapping).
Of course widenning the menu will mean adjusting the left margin on your content to accomodate. I would probably just increase the text size of the menu and let the text wrap to two lines where it needs to (by removing the non breaking spaces).
On mobile you were probably getting no click through anyway as the site was not mobile enabled and the page too small to use. You may need to just show the flexible ad formats for mobile or put up with a skyscraper in the middle of a column.
The easiest way is to link to the font on google.
e.g.
Generally that means the font gets served from googles fast servers which are probably faster than yours and depending on font may already be cached in the users browser.
Ok thanks
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.