Turning an HTML site Responsive ... - GoFuckYourself.com

mopek1 · 09-08-2016, 04:07 AM

... how difficult is it?

HowlingWulf · 09-08-2016, 07:00 AM

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 · 09-08-2016, 07:07 AM

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 · 09-08-2016, 07:17 AM

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 · 09-08-2016, 07:30 AM

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

NakedWomenTime · 09-10-2016, 02:08 AM

Quote:

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 · 09-10-2016, 09:50 AM

Quote:

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 · 09-12-2016, 05:13 AM

User-Agent Switcher extension for Chrome is very handy.

mopek1 · 09-12-2016, 05:17 AM

Quote:

Originally Posted by Kafka

User-Agent Switcher extension for Chrome is very handy.

What does that do exactly?

DannyA · 09-13-2016, 02:50 AM

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 · 09-13-2016, 04:26 AM

Quote:

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.

09-08-2016, 04:07 AM	#1
mopek1 Confirmed User Industry Role: Join Date: Jun 2004 Location: Canada Posts: 3,056	Turning an HTML site Responsive ... ... how difficult is it?

09-08-2016, 07:00 AM	#2
HowlingWulf Confirmed User Join Date: Nov 2001 Posts: 1,662	It depends, of course. Did you use CSS at all? inline? external file? Do all the pages use the same structure/CSS classes? etc. __________________ WP Porn directory/review theme Maddos $35. webmaster AT howling-wulf.com

09-08-2016, 07:17 AM	#4
HowlingWulf Confirmed User Join Date: Nov 2001 Posts: 1,662	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 __________________ WP Porn directory/review theme Maddos $35. webmaster AT howling-wulf.com

09-08-2016, 07:30 AM	#5
yuu.design Too lazy to set a custom title Industry Role: Join Date: Mar 2006 Location: Argentina Posts: 25,924	hey bud, if you still need some help, contact us ;) __________________ Beautiful And Usable Web Design Creations For The Adult Industry Since 2003 I'm Yuu, Designer and Content Producer Paysites - Affiliate Programs - Dating & Cam Sites - Mainstream Projects - Tube Sites - Banners - Wordpress Themes - NATs integration - Landing Pages Check my Portfolio and Content Production Offers

09-08-2016, 07:07 AM	#3
mopek1 Confirmed User Industry Role: Join Date: Jun 2004 Location: Canada Posts: 3,056	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.

09-12-2016, 05:13 AM	#8
Kafka Confirmed User Join Date: Oct 2002 Location: Holland Posts: 466	User-Agent Switcher extension for Chrome is very handy.

09-13-2016, 02:50 AM	#10
DannyA Registered User Join Date: Oct 2005 Posts: 85	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.