In this session we discuss how easy it is to make a Thesis Classic site responsive using the responsive skin data for the single column and responsive columns that are both boxes and packages instead of creating custom columns for adding responsive elements. Also needed are the Thesis Responsive Meta Helper Box and the BYOB Thesis 2 Simple Responsive Columns which let us create an HTML structure that makes everything automatically responsive.
Member: I started building the site before you release your responsive theme like maybe two months ago and now, I’m wondering how easy would it be to convert this so that it’s responsive or what’s the basic to start over?
Rick: What’s your URL?
Member: It’s jamieforsyth.com let me just pull it up…
Rick: I must be spelling it wrong.
Member: Oh sorry, jamieforsyth.com
Rick: So jamieforsyth.com? So I just have that extra “e” in there.
Member: Yes, sir.
Member: I just made that skin live, it’s up, yeah.
Rick: Well, this skin, this would be very easy to do in Agility.
Rick: That’s the responsive skin that I have published.
Rick: However, let’s see what else could you do instead of that. Yeah, you know the problem is that everything that, all of these styles are dependent on your skin, right? And everything that I have that lets you make something responsive essentially changes the skin so I got those responsive versions of Thesis Classic that you could upload but it would overwrite all of the changes you made.
Member: Yeah, I mean also I was wondering if it was the fact that I’ve forced the sliders to be x pixels wide.
Rick: Well, it’s not just that. I mean the responsiveness is a whole bunch of different things but if this is an iframe which I’m pretty sure it is, then Agility will automatically resize anyway. This is revolution slider so this revolution slider itself is automatically responsive as long the container that’s around it is responsive.
Member: I see.
Rick: So, it’s not going to be responsive because the post content isn’t responsive.
Rick: So yeah, you pretty much do need to start all over again. This would be easy to do in Agility although really, it’s simple enough that it would also be easy to do, continuing to use Thesis Classic but just starting with my responsive skin data. Is this single column? That’s what I would say, it probably is.
Rick: So the responsive skin data for the single column and then using my responsive columns boxes and packages that you would use instead of say, creating your own custom columns. I have those responsive columns that are both boxes and packages for adding responsive elements to Thesis Classic. The nice thing about doing it that way is that, it’s going to be more straight across the board transfer from this version of Thesis Classic to a responsive version.
Member: Okay and which of your skins will I download to find that data?
Rick: Well, if you come over to Member Benefits and look under Skins for Thesis Theme 2, I have this free Mobile Responsive Thesis Classic Skin versions and the one you would be using would be this one here, The Responsive 1 Column Layout, I guess. I mean it seems like what you’ve got as it closest to what you’ve got.
Member: Yeah, the only 2 Column layout I have is in the blog which I haven’t put on the site yet.
Rick: Okay, well if that’s the case, then you would go ahead and stick with the 2 Column layout, one of these two 2 Column layout, whether it’s left or right. It start there and then from there, you would install the Thesis Responsive Meta Helper and then the BYOB Thesis 2 Simple Responsive Columns and what those let you do is essentially, create your own HTML structure that makes it automatically responsive. So for example, your header here, you’ve got essentially, I’m presuming you made this with two different columns and what you would use is my system for creating columns instead so that the stuff stacks you know, when it gets narrower enough, the menu would drop down below the jamieforsyth and so on.
Member: Right, okay.
Rick: And the same thing is this, I’m sure this is three columns and so these three columns, you do the same thing, create a 3 Column responsive package and then when you have these, when it’s down to 320 pixel wide phone, you know, this one would stack on top of this one which would stack on top of this one.
Member: Okay. Okay, that’s all that make sense.