Turning an HTML site Responsive ...

[mopek1]

... how difficult is it?

[HowlingWulf]

It depends, of course.

Did you use CSS at all? inline? external file?

Do all the pages use the same structure/CSS classes?

etc.

[mopek1]

Thanks for the reply.

No it's a plain html site without CSS. I do have php files on each page so I can add code to the head and body sections of all pages instantly.

[HowlingWulf]

Hard to tell without seeing the code, but adding CSS rules for responsiveness would take some time. Try getting a quote at https://www.xhtmlchop.com/html-to-responsive.html

[yuu.design]

hey bud, if you still need some help, contact us ;)

[NakedWomenTime]

Originally Posted by mopek1

... how difficult is it?

It's one of those things where once you know how to do it, it seems like it's not difficult and it seems relatively simple.

However, actually teaching yourself it is difficult, because there is a lot of information out there, and you have to go through it until you work out what's what.

[mopek1]

Originally Posted by NakedWomenTime

It's one of those things where once you know how to do it, it seems like it's not difficult and it seems relatively simple.

However, actually teaching yourself it is difficult, because there is a lot of information out there, and you have to go through it until you work out what's what.

That's what I've been finding so far. There's so much info to wade through that all say different things but the jist of it doesn't seem that hard.

[Kafka]

User-Agent Switcher extension for Chrome is very handy.

[mopek1]

Originally Posted by Kafka

User-Agent Switcher extension for Chrome is very handy.

What does that do exactly?

[DannyA]

The easiest way to get started is to use Bootstrap and learn how to use the grid system ( CSS · Bootstrap ). It's actually a lot easier than it seems. You set your main container div to have a .container class, then each row you want to create is div.row, and each "cell" I guess you could call it has a .col-xx-#. The xx is the screen size (md for default) and the # is the # of columns it should span (there are 12 in total). Like say you want 6 thumbs per row on a computer but 2 on a phone. You'd put a class of "col-md-2 col-sm-6" so it spans 2 on a computer and 6 on a phone. You can of course repeat the process inside cells to create smaller subgrids.

You might not like the padding on the cells, but you can always create another class with different padding and put it on each col element to change this. If you want a width that's not available, copy a col class and change the width and use that. You'll run into this if you want to do something like have 5 thumbs per row. The new width you'd use is 20%.

If you understand that, start with a totally clean HTML file with all the bootstrap includes and start blocking out your elements from largest to smallest, just with placeholder text in them. Figure out what the column counts would make sense on a computer and a phone and assign them both. Tweak it and test it out by shrinking your browser as small as it will go. Once that all makes sense you can copy all the old stuff that doesn't need to be made responsive wherever it belongs.

The one other thing you'll want to note is shrinking the browser doesn't always give you the whole picture. It should be pretty accurate, but in Chrome's developer tools you can set it to actually display as it would on different models of phones and tablets.

[mopek1]

Originally Posted by DannyA

The easiest way to get started is to use Bootstrap and learn how to use the grid system ( CSS · Bootstrap ). It's actually a lot easier than it seems. You set your main container div to have a .container class, then each row you want to create is div.row, and each "cell" I guess you could call it has a .col-xx-#. The xx is the screen size (md for default) and the # is the # of columns it should span (there are 12 in total). Like say you want 6 thumbs per row on a computer but 2 on a phone. You'd put a class of "col-md-2 col-sm-6" so it spans 2 on a computer and 6 on a phone. You can of course repeat the process inside cells to create smaller subgrids.

You might not like the padding on the cells, but you can always create another class with different padding and put it on each col element to change this. If you want a width that's not available, copy a col class and change the width and use that. You'll run into this if you want to do something like have 5 thumbs per row. The new width you'd use is 20%.

If you understand that, start with a totally clean HTML file with all the bootstrap includes and start blocking out your elements from largest to smallest, just with placeholder text in them. Figure out what the column counts would make sense on a computer and a phone and assign them both. Tweak it and test it out by shrinking your browser as small as it will go. Once that all makes sense you can copy all the old stuff that doesn't need to be made responsive wherever it belongs.

The one other thing you'll want to note is shrinking the browser doesn't always give you the whole picture. It should be pretty accurate, but in Chrome's developer tools you can set it to actually display as it would on different models of phones and tablets.

Thanks for taking the time to answer that. It helps!

I'll be looking to convert some old sites in a couple of months or so and this is just what I was looking for.