Tools for Handling Large Numbers of Pages
“What tool am I using for managing a huge amount of pages?” I use two tools, one of them is Sidekick at farinspace.com. I use that plugin and that plugin allows me to expand and collapse.
For example, Website Building seminars has a whole bunch of different pages in it, right? And so I can expand and collapse those to get at something that I may need to get at, right? I’ve got 10 pages under boxes, packages and skins. If I want to get down to the bottom of them, I can just expand and contract these things. That’s one of the things. The second thing it does is it shows the post or page id where it would give you the chance of showing the post or page id.
And then the other tool that I use is called Admin Columns. The Admin Columns plugin lets me change what shows up here so that I can put the things on here that I want to show up and it’s not as apparent in pages as it is say, in my courses. I have 730 course pages and so can be time consuming to sort of work your way through these courses.
I’m pretty dependent upon being able to expand and contract stuff like this and then be able to display certain things. That looks like somebody has rearranged this. Actually, I don’t really use it. My staff uses it and they use it to figure out what they need. But anyway, those are the two tools I use.
How did I add the id in modified slug? Yeah okay so that again, it’s a combination of the Admin Columns plugin which you’ll get on WordPress.org and the Sidekick plugin that you can buy inexpensively from farinspace.com.
Page Order – What Happens to Pages with the Same Number?
Dr. Jeff asked, “If you’ve given something a page order of 30, if you give something else a page order of 30, what happens?” What happens is at that point, they get organized alphabetically. So if they share the same page order number then you can have hundreds of them at 30 but they’ll end up being organized alphabetically.
Posts and Page Numbering
Let’s see, Kelly says she’s already got a few posts on her blog. What page would they automatically fall under? If you’ve got posts on your blog, they’re not going to fall under any page. They are posts and there is no such thing as order for posts.
Let’s come over and just take a look at posts. For example, if we just look at the “Hello World” post which is the only sample, if you scroll down here, you’ll see there’s no place for you to set order. There’s no place for you to choose parent because posts can’t have parents. That is, they’re not hierarchical and they also don’t have order, posts are ordered by date or they are ordered by categories and tags which we’ll talk about quite a bit in a later lesson.
SEO Effects of Using Posts vs Pages
Let’s see, Pia asks, “Is it useful to transform a post in pages? Is that an SEO problem?” None whatsoever. There’s no problem transforming that. Actually, I don’t know, Pia do you want to chat with me about that here? I’m just going to unmute your microphone and if you’ve got a microphone and you want to chat, that’s fine. If you don’t, I can just go on and answer your question.
There is absolutely no SEO detriment to using either post or pages. You can use either one and yeah, it doesn’t matter. You can create the hierarchy for pages by just having children and sub-children or pages and sub-pages. You can create the hierarchy and posts by having categories and sub-categories. So you can end up with the same type of URLs regardless of whether it’s post or page. And there is no SEO difference one way or the other.
Is a PSD File Available for Designing a Website in Agility?
Kim asks, “Do you have a layered PSD file that they can download to use as design for a website in Agility?” That’s a great suggestion, Kim. I do not but by next week, I will. But that’s a spectacular suggestion because I certainly could create that for designers to sit down and lay out something based on Agility. We could absolutely do that.
Browser Window Question
Let’s see, Tom. Tom, I’m going to unmute your microphone. Tom Huntington?
Rick: Hey Tom.
Tom: Hey Rick. How are you today?
Rick: I’m doing well. How are you?
Tom: I’m great. You gave us lots today already.
Rick: Yeah. So you want to know about horizontal areas organized to fill edges of browser window.
Rick: What do you mean by that?
Tom: Well, like yours is only… the pages got this based on the site, is there a way to have the header have all the stuff all the way out to the edges?
Rick: Yes, that’s why those areas exist. Now my headers don’t. Well, I don’t know. That’s an interesting question.
Tom: I’m basing it on you can go look at a website, alexwhalley.com. That’s an example.
Rick: Alex Waley?
Tom: Whalley. Well, on yours, it doesn’t show up. On mine, it shows up all the way up to the browser window.
Rick: What shows up?
Tom: Every horizontal thing like shows up all the way out to…
Rick: Well, how wide is your browser window?
Tom: Oh I don’t know.
Rick: My screen is 1600 pixels wide so I mean, it could be that your screen is narrower.
Tom: I’m working on a laptop.
Rick: What’s your browser?
Tom: I use Safari.
Rick: Chances are that means that site is broken on Safari.
Tom: His site?
Rick: Yeah. That’s probably what it means. It either means your browser window is narrower enough that it just fills up his whole site or it’s broken in Safari which is not unusual for a site to be broken in Safari.
Tom: So that would be very unusual to have it fill the whole browser window?
Rick: Well, does this little symbol come all the way up to the edge?
Rick: Yeah, that would be unusual. Now you can do that. That’s what the horizontal, the main horizontal divisions are for really. If we come back over to, let’s see, Skin Editor, these main horizontal divisions, the header area, top menu area, feature box area, content area. Those are all there specifically so that you can put stuff in that will go from browser edge to browser edge. That’s what’s this color is and this color is and this color is. And if you look at the demonstration site, we’ve got stuff that goes all the way to the edges.
However, it’s also the actual content is bounded inside the page. So while you can have stuff that spills out beyond, the main content still stays inside of the page wrap part. And it would be unusual to do it other than that. You could but it would be unusual.
Tom: Well, that’s enough for me for right now.
Tom: Thank you Rick.
Rick: You’re welcome. Have a good day.
Tom: You too.
Thesis 2 Not Staying Activated – Plugin Issues
Okay let’s see, Vic. Vic, I’m going to unmute your microphone here. Good morning, Vic.
Vic: Hi good morning. Can you hear me?
Rick: I can hear you. So I think we’re going to troubleshoot a problem here for you and I think what we need to do is for you to show me your screen. So I’m going to make you the presenter and I’m going to let you show me the problem. Vic is having a problem with Thesis 2 not staying activated.
Rick: So I’ve just told you that you can be the presenter. Now you just have to be it.
Vic: Okay, are you seeing this now?
Vic: Okay good. So basically, you can see this here. I’m trying to open my page and if I’m not logged in, it doesn’t open up. See, I’m logged in here right now but I can see. See? But if I’m not logged in, nothing shows up in the browser, except just a big, blank, empty… nothing.
Rick: Okay so that probably means that you are just in preview mode. So go to your dashboard…
Vic: Hold on. How do I get there from here?
Rick: Well, just click on the… yeah, there you go. Yeah, that’s it.
Vic: Where do we go from here?
Rick: Go to Skins, select skin.
Vic: See, it’s not on preview mode because after a time, it’s live.
Rick: You’re right. It’s not in preview mode. Scroll down for a moment, I want to see the rest of the stuff in there.
Vic: That’s it.
Rick: Okay so you got Thesis blank. You’ve got Agility Nude. Okay, I am going to go over to your site on my window here. So it’s mi… there we go. Yeah, you definitely have a big failure there. Okay, let’s open up your plugins for a moment. Installed plugins… okay, see that checkmark button right up there beside plugin?
Vic: Checkmark button beside plugin?
Rick: Yeah, where it says… near the upper left hand corner.
Vic: Okay, you’re talking about here?
Rick: Yes, check that.
Rick: Okay then bulk actions, select deactivate and hit apply.
Rick: And now I’m going to take a look at it again. That was it. You have a plugin that is causing problems so the way you solve this is to gradually add your plugins back in now, I mean, just gradually reactivate plugins to see which one’s causing it because that’s what it is.
Vic: Okay so I’ll just keep on going through them until I figure out which one and I’ll just delete that one or whatever.
Rick: Yeah or upgrade it, you know. Actually, I’d be interested in knowing which plugin it is that’s not working.
Rick: So when you figure it out, let me know because we’re trying to keep a track of those plugins that for one reason or another, aren’t compatible with Thesis. But that’s what it is. If something’s happening in a plugin that’s preventing you from… I don’t know. Do you have a security plugin?
Vic: Here’s all my plugins here.
Rick: Well, scroll down a little ways. I want to see the stuff near the bottom.
Vic: Okay. They don’t remember security plugin.
Rick: You know, I’m guessing that it’s the Thesis Legacy Helper actually. That plugin didn’t work properly.
Vic: Well, I did try… I doubt it’s some kind of a plugin that was… because I thought we’re going to use our plugin for something to do with this. But I don’t think that even works with this Thesis 2. It only works with the smaller numbers.
Rick: Well, you have two plugins that I think that looks to me that they are suspect, Open Hook and Thesis Legacy Helper.
Rick: And so I would try turning the rest of them on and turning those two off and see if that works.
Vic: Okay, I see. And does the Open Hook actually work with Thesis 2?
Vic: Okay so there’s no sense even having it.
Rick: Well, if you currently are using it on Thesis 1.85 then…
Vic: I’m not. I moved to this now.
Rick: You weren’t using it on 1.85.
Vic: No, I was using it on 1.85 but I’ve moved to… I want to get 2 working. They’re really good.
Rick: Okay. Well, you can just leave it deactivated.
Vic: Yeah, I could do that.
Rick: Oh, somebody says that the latest version of Open Hook is supposed to work with Thesis 2.
Vic: Okay so I’ll try and check that out then. No problem.
Rick: Okay. Well…
Vic: And the other one if you still have a moment here…
How to Remove the Copyright Date
Vic: Is I’m trying to figure out how I can get the… at the very bottom of the page, to take off the tributes to this company and have my own stuff in there.
Rick: Well now if you’re using mine, it’s not in there. But if you’re using Agility, there is no attribution.
Vic: See, I’m talking about this here. The copyright date and your company, these things here. This is what I’m talking about if you can see this. I can change this on here.
Rick: Yes. So the way you use the copyright date is to go back into your Thesis Skin Editor. Now you can…
Vic: Down here?
Rick: Well, I want you to go into the Thesis Skin Editor itself.
Vic: Here it is, okay.
Rick: And then there under bottom footer area, expand it and expand bottom footer area page and columns and left column or column 2, I mean.
Vic: Column 2? Okay.
Vic: Here you go.
Rick: Okay now, you can either drag that out entirely you can open up its settings and enter the information it’s asking for. Let’s open up its settings first. So click on the little gearshift… I mean, the little gear.
Vic: Yeah okay. I see, I just put the information.
Rick: Put your company name in and put the date and then that stuff will be in there.
Vic: I see, okay. I just see what the… 1900, okay. There we go.
Rick: No, that’s the… you put the beginning date. Not the current date but the beginning date. When did you start Hollywood Painting?
Vic: Oh, 1979.
Rick: There you go.
Vic: Okay, there you are. That’s right, okay.
Rick: Now, close it, save your template and you’ll see that it now says your company there and the time and that kind of stuff. But you need to save the template first.
Vic: I just did that, yeah.
Rick: Okay, go back and look at it.
Vic: Part of your screen here is blocking my vision.
Rick: Well, that little orange arrow up there, you can click on to make it hide.
Vic: Oh okay, good. Okay, that’s a good thing. Okay that’s great. I see what it did at the bottom here. Yeah, excellent. I played with that for at least an hour yesterday when I’m trying to figure out how to fix this. That’s very good.
Rick: Well, the… everything in here can be dragged out of there. Everything in Agility could be dragged out of its place and dropped in the toolbox. So if you don’t know what I mean by that, you should go look at the… go rewatch the Beginner’s Guide to the Thesis Skin Editor.
Vic: That’s okay because I got to do that because… I just joined again 2 days ago and I haven’t had the chance to start combing through your site for this kind of stuff.
Rick: Well, that link is on the lesson page there. So the Beginner’s Guide to the Thesis Skin Editor and you should jump on that as quickly as you can.
Vic: Good enough then. Thanks a lot.
Rick: Okay, you’re welcome. Have a good day.
Let’s see, where are you Jim? Okay, Jim, I’ve just unmuted your microphone. Good morning, Jim.
Having One Header Image for All Devices
Jim: Hello. How are you?
Rick: I’m doing well. How are you?
Jim: Good. I haven’t bothered you in a long time. I figured out the old Thesis but now I’m on this whole new learning curve. You know what I mean?
Jim: So is there a way to design without what you exhibited before, having to load all those different sizes of logos on the banner? Is there a way to just create a banner that’s tight and would be responsive to all the different devices?
Rick: Well sure. I mean, the… yes, there is. I mean, you could just take this 300 pixel wide banner and put it everywhere. So let’s see, we go back to the Skin Editor and well, let’s just use the 500 pixel wide one. We’ll copy that and we’ll paste this and we’ll delete this.
Jim: Because as you know, simplicity has become kind of valuable on the web and I really think that. You mentioned earlier where a lot of people are just putting a simple title and tagline of their sites.
Jim: And I’m going for just a simple banner for a client and just a simple little thing that would just adjust everywhere and be very consistent.
Rick: Well so there’s your example, right? You just use a single image, this one here. This is what it looks like in its full size. That’s what it looks like in 320 pixels. I mean, you could do that.
Jim: So it’s 320 wide, right?
Rick: No, that’s actually I think, 500 pixels wide. It got smaller. It scales down to fit in the space.
Jim: And what’s the height on that?
Rick: Well, this one is… there’s no such thing as a right answer to this question now. But having said that, it is 500 pixels by 114 pixels. Now see, I don’t think this little thing down here is readable at 300 pixels wide. So I wouldn’t actually do it this way. I would use different images. But if you don’t want to use different images then you want to pick one that’s going to look good at its smallest size.
Jim: Okay, I got it. I got it. I was looking for a shortcut, that’s all. It is not a complicated logo.
Rick: Yeah, in the grand scheme of things, Agility is a big shortcut for that. Because otherwise, you’d have to do a lot of code to be able to swap images in and out. But if you really only want a e single image you know, it could be that the two column layout will work fine for you because you could put something else in the second column. But the two column layout does not provide you with the opportunity of changing the images for different size devices. The two column layout just automatically scales the image regardless of its size, whereas this one assumes that you’re going to put a great, big, image in and recognizes that the image won’t work.
Jim: I got you. So I want to use 2 columns so I can put just a smaller one on the left and then put the tagline or whatever on the right. And that’s the way Agility is designed, right?
Rick: That’s correct, yes.
Jim: I mean, I’m just starting to work with those. You know, I finally… I was boogie-ing with the old Thesis you know, non responsive way. Now all of this stuff comes out and I got to learn it all again, you know what I mean?
Rick: Well yeah, especially if you wanted… I mean you know, now is the time. If you don’t know how to make a responsive website, now is the time to do it because everybody wants one now. So… and for everybody else in the world, it’s a lot harder to do or it’s dorky-looking, one of the two.
Does It Matter Where You Start Working In Agility?
Okay let’s see, Maya. Where are you? Maya, I’ve just unmuted your microphone. Good morning Maya.
Rick: Hello Maya.
Rick: So you got a couple of questions here. Why don’t you fire away?
Maya: Okay I’ve been trying… I’ve been playing around with Agility, trying to get it to see what I can do with it and just learning my way around it. And I always… I just have a really big problem and I don’t know where I should start working from, from which page, either home or… I see that you have your page, your screen on front page and you’ve been talking about it from front page. So I started working actually at home and so now I’m thinking I did it wrong.
Rick: No, it doesn’t matter where you start. The thing is that if you have your site set up as a blog so that your front page is your posts page then when you open up the Thesis Skin Editor, it opens up on home because home… we’re going to talk about templates next week. But the home template always only applies to your posts page. So in this case, the home template applies to the page we called articles because that’s my post page. So when I’m on my articles, you can see it uses the home template whereas when I’m on my actual home page, it uses the front page template. And the front page template always only applies to a static front page. So if you don’t have a static front page, the front page template’s never going to apply to anything.
Maya: Got it. I think that’s where I am at that point right there. My front page will be post from categories. So then I don’t really need to worry about the front page.
Rick: That’s right. You can go ahead and just style your home page. I mean, you’ll also need to style other templates like your single page, your single post and your page and your archives because changes you make to home aren’t going to be reflected in any of the other templates. But we’ll talk about that in a subsequent session. And if you want to get a jumpstart on that you know, watch The Beginners’ Guide to Thesis Skin Editor because I talk about templates quite a bit there.
Types of Boxes for the Header Area
Maya: Perfect. Okay, that’s great. And then my other question was when you were talking about the header area, there is… you called it a… I just have a basic feature or header area. Yours was something… it was called something else and I’m not really sure why it’s not showing up in my… I went through… so I guess it’s called… the one that I have is called a typical header and I believe yours was a… oh no, you have a typical… okay so maybe. Okay, there was something else there. When you click on that, you can then make it… instead of just having columns, you can have it one full column. And I couldn’t do that in the typical.
Rick: No because that’s not the way it works. You know, I changed it out. You know, I changed it. My typical header, I took out of the front page and I created a new box called front page header. And the new box I created is the Agility one column header. So you have… there are two different types of boxes available for your header. There is Agility 1 column header and the Agility 2 column header. And it comes… every template shipped with the two column header set up. And what I did is I created the one column header and added it to the front page. So that’s it here but it’s not added to any other template yet. So my home template still has the standard two column one.
Maya: Got it. Okay that makes sense. And I opened it and it says Agility two column header so that it makes perfect sense. Okay thank you so much for explaining that.
Rick: You’re welcome. Anything else?
Maya: No, I think that’s it for now. I’m looking forward to next week.
Rick: Okay you have a great day. Bye bye.
Maya: You too. Thanks Rick. Bye.
Question About URLs and Migrating a Site
Okay so let’s see, next up is Sandy. Good morning, Sandy. I’ve just unmuted your microphone.
Sandy: Good morning. How are you?
Rick: I’m doing well. How are you?
Sandy: I’m doing fine, thank you.
Sandy: I just have… I think they’re pretty quick questions. But actually… scroll back and look at what I asked. Oh, one of them was since I developed my client’s site on my server and then I migrate them, when we were talking about putting multiple header images in there and we used the full URL, is there… I don’t know if there’s a different way but I just have to remember to go back and change those, correct?
Rick: What do you use to migrate?
Sandy: Well, when I migrate them, I just downloaded the core files and the database to my hard drive and I upload it to their… you know, to wherever their hosting account’s going to be.
Rick: And then you open up the database and change the URL there?
Sandy: Yes exactly.
Rick: Yeah so you could use a plugin like Search and Replace for searching your database for all the old URLs and just replacing them with a new URL. That’s what I would do.
Sandy: Okay yeah because I actually… I end up you know, linking. There’s different links and things like that that I have to change. But it brought up the… when we were doing the header earlier, it brought up the question again. So this plugin will go through the entire base and then search and replace the URL then?
Rick: Yeah. So you can just give it a string. So http://thewrongurl.com/ and you can search for that one and replace it with the URL.com. And it’ll replace every instance of that in the database, including any links you may have you know, any links in the CSS file. Well, yeah. No, it won’t change it in the css file. It will only change it in the database. But… so that’s the one thing to keep in mind. But it’ll be great. It’ll work well.
Adding to the Copyright in the Footer
Sandy: Okay perfect. And then just one other quick question then. When we were talking about the copyright line. Typically on my site, so I have a 3 line copyright. Is there a way to add a couple more lines of text under the copyright line in the footer?
Rick: Well sure because you could just… you could come over here and add a text box and more copyright. And then drag it up, shift drag it up, drop it into there, put it below the copyright you know, some more copyright text.
Sandy: Very cool. Okay, easy enough. I have a habit of trying to make things more difficult than they are.
Rick: And well, you could leave it in a wrapper like that and just hit save and save the template. And in fact, I mean, if you… you could obviously just drag that copyright thing out too. I think I must have.. oh which… I put that in the home template so if I want to see it, I’d have to go to the home.
Sandy: Oh got it.
Rick: Some more stuff, there you go.
Sandy: Right. Cool. I think I know I’ll have a bajillion more questions but that answers the third today, I think.
Rick: Well great. You have a good weekend.
Sandy: Okay thanks. You too Rick.
Rick: Bye bye.
Column Layout and Mobile Design Questions
Okay so let’s see, Roger. Good morning Roger, I’ve just unmuted your microphone, Roger East. Are you there? Let’s try this one.
Roger: Yeah, I’m here.
Rick: Okay perfect. So what can I do for you here?
Roger: Well, I’m just trying to sort out this column issue here. I’ve got my iPhone, I’m going to turn it off. Hang on, Rick. Can you hear me okay now, Rick?
Rick: Yeah, there’s an odd echo though.
Roger: Well, that’s because I have my iPhone on. Let me… how is that?
Rick: That’s good.
Roger: I’m just a little concerned about how to structure the columns because it just seems to me that a 2 column layout in the content area makes more sense. Because when you look at something on an iPhone, you just got to force these columns into the full width of the iPhone, right?
Rick: Well, in the two column layout, looking at it… oh let’s see, we need to go to the site that’s actually finished rather than looking at the… okay so this is… I want to go to a… I mean, this is actually a one column layout at the moment. If we go to a 2 column page in a horizontal… I mean, in a vertical view of the iPhone you know, everything just lines up in a single column, right? I think in the 480, it’s the same way. But I think in 568, it splits into two… no, it doesn’t. So it stays in one column in that. 685… it’s also staying in one column. Where does it split to two? Oh I’m on the.. pardon me. I’m sorry. I keep looking at a one column page. What I should do is just deliberately pick a different URL. Okay so the narrow width, it just drops into a full column. And if you had half and half, it wouldn’t matter. It would still look just like this.
Roger: Well, it just seems to me that if you have 2/3 1/3 that the 2/3 is going to scale down and the 1/3 is going to scale up. I don’t know if that’s real or…
Rick: That’s not true actually. The 1/3 is 320 pixels wide and so it scales down a little bit down to 300 or so so that the stuff fits in the 320 pixel wide iPhone. Now there’s no reason why you can’t do what you’re suggesting. I mean, you can. I guess I don’t go to… I don’t leave it at two columns until you’re at the iPad portrait. So 800 pixels and above or 768 pixels, that’s where it’s at two columns. And the sidebar column does not change in size but the content column does. That’s the way this is set up. If you do it half and half, I don’t know.
You know, it’s entirely up to you, whatever you think is going to work well. I mean, if you think that this doesn’t work well, I mean, I disagree with you. But to the extent, it doesn’t really matter though because you can choose your own setup. You could take Agility and make it half and half with a couple of minor button clicks and we’ll just do it right here.
If we go to our… let’s go back to the front page. No, not the front page. Let’s go to a page and if you want to make your content area half and half, all you have to do is come over to the two column content wrapper and say instead of 2 columns, 2/3 1/3. You can make it 2 columns equally sized. And then inside these columns, you’ll just say half of the width of the column wrapper and the other one is half the width of the column wrapper and save it. And now, you have… well, since there’s no content in these pages, you can’t really see it. But this is now divided up into halfs with ½ is content and the other half is sidebar.
Roger: I think when you look at it on a desktop or a laptop, I think 2/3 1/3, aesthetically, looks a lot better. But then I have to ask myself, well when you look at it at a mobile device, you’re only going to be looking at each column individually. So does it make sense to try to work with a 50 or half half or work with halves and quarters rather than working with thirds? And maybe it’s not going to make any difference but it just seemed to me that when you get down to the iPhone in the vertical position like you have it now that if it’s equal columns, it may look better on iPhone device. But it’s not going to look as good on a desktop.
Rick: You might be misunderstanding what happens on the iPhone device too because what I do is I take all of the text and make it all the same size, with all the same line heights whether it’s 2/3 wide column or a 1/3 wide column. When you get down to this size, the font size line heights, they all change to be exactly the same. So you know, the paragraph looks like it’s taller but it hasn’t shrunk. The 2/3 didn’t shrink down in size. It’s just the container for the paragraph shrunk in size so now the paragraph is not as wide but now it’s taller. And regardless of that, the text has been reduced to fit the iPhone size.
Roger: Right. I guess I’m more concerned about what I have since I have a lot of images.
Rick: Well, images automatically scale. The images are going to automatically scale down to fit the available space. So in this case, it’s 100% width so this 640 pixel wide image scales down to fit in a 300 pixel wide space.
Roger: I just think the problem with responsive is you can get it to look great on say, a desktop computer but there’s just a lot of compromises when it gets shrunk down to a mobile device.
Rick: Well, that is the argument against responsive design, right? And it’s just a philosophical argument. There are compromises. The biggest compromise, especially if you’re using my system, is that you are choosing to use column sizes that I’ve picked out in advance. And if you don’t like those column sizes then you’re going to have to come up with your own responsive system.
Rick: I mean, that’s one of the big compromises.
Roger: Right. Okay. Alright, yeah I think it’s just a philosophical question.
Rick: And I mean, you can easily make that argument that a widget like this doesn’t look that good that big. I mean, it’s a reasonable… just because the text looks fine this size doesn’t mean the widget looks good this size which is why you know, I sort of deliberately try to… especially with the four widget thicknesses, I try to make them so that they can be stacked side by side, widget 1, widget 2, widget 3, widget 4 rather than all being stacked on top of each other. But I mean… you can make arguments about it in lots of different directions.
Roger: I understand that. Yeah, I just want to make sure I can start out on the right foot and… because especially in putting the graphics together. Text, I think, can scale easily but it’s the graphics. If you design a graphic for a 2/3 1/3 screen and then force that into essentially, 50% 50%, when you squeeze it down to a mobile device then that’s to me where the compromise occurs because…
Rick: Which is an argument for mobile first design, right? That’s the argument for it. And you know, this is… this becomes technical once you get to this level of conversation. But if the graphics… see really, the graphics here is just entertainment. This graphic just shows me and two other people standing around looking at plans. And it doesn’t really matter if it’s 640 pixels wide or if it’s 320 pixels wide. It’s just the graphic.
However, if it’s a graphic that needs to be readable or needs to be a certain size in order to be effective, when that’s the case, you actually need to design what the page is going to look like in a mobile device first. And once you’ve got that mobile first design done then you move on to the full size desktop view. And that’s why people talk about mobile first design.
Now you know, in this case, I don’t think it really matters. But you may very well be talking about a case where it matters very much. And in that case then, I advise people to sit down with a you know, with their graphic designer or their graphic design program and lay out a version of the website at 320 pixels wide and a version at 500 pixels wide and a version at 700 pixels wide and a version at 800 pixels wide and a version at 1024 and just lay out each one of them and decide how big stuff has to be in each one.
Roger: And I think that is my situation. I mean, the graphics are not eye-candy. They’re meaningful and need to be able to read them. You need to be able to understand them that’s why I’m concerned about this.
Rick: So break out Photoshop and lay out each of the… lay out your web pages so that you can see what it looks like at each of those widths. And then make your design decisions that way. Very, very soon, you’ll have a box available from me where you can choose to swap content out based on the size of the device that’s viewing the page. So you could choose to… well for example, you could have a regular nav menu and rather than making it responsive, you could have a mobile menu that swaps out when the mobile device is smaller than 600 pixels, for example. I’m in the process of creating that box right now so you could have images that you’re going to show in a normal context and then have special images that you show instead in a 320 pixel wide device.
That facility, I’m building that right now and it’s not going to be dependent upon Agility. You can use it in any skin you’re using.
Roger: I think I will find that very useful, yeah.
Rick: Yeah. Coming very soon to a website near you.
One Image for Desktop and One for Mobile
Roger: Okay good. Well, one other question on images though, I’m going to be showing something very similar with what we’re looking at right now on my site. I’m going to be showing a bold device with an image in it. Is it possible that when you look at this on a desktop device that you actually see the mobile device with the image in it but on the mobile device itself, it actually would extract the image and not show the mobile device? I’m not sure if that makes sense. But in a sense, can you layer images? In other words, the…
Rick: Of course because you’d have your mobile device would be a background image.
Roger: Okay good.
Rick: And then when you get down to your narrower size, you just you know, remove the background image.
Roger: That’s what I would like to be able to do. Perfect, okay great. Thank you very much. You’ve been very helpful, Rick. Thank you.
Rick: You’re welcome. It’s my pleasure. Bye bye.
Add Padding Around the Logo
Okay let’s see, who’s next? Okay, David Carnaval. David, I just unmuted your microphone.
David: Yes you did.
Rick: Okay so you want to move, give yourself a little bit of extra padding above your logo. Is that right?
David: That is correct.
Rick: Okay well we’ll just use this one as… I don’t know if it’s still there. Is it still that way? Yeah okay, let’s use this one as an example. So go to the Skin Editor, let’s see which one are we at? We are at a page, Skin Editor. If you go over to css and go to your header area, you could simply go over here to Options and under Options, scroll down to padding and add some top padding. Save it and then let’s see, I want to get my canvass back but I want to go to a page.
So you know, I move this down by doing that. And if I wanted to get rid of the extra padding above the site title, I could come over here and select my site title. Come over to options, go down to… is it margin? Yeah, I could go down to margin and delete the top margin and hit save. And you know, now that moved up. I could reduce the size of this text by going back to the settings and doing that kind of stuff.
Rick: Anything else?
Page Width and Vertical Scrolling
David: Yeah, the second question was given that we’re using 1032 as the width, if you’d like to keep your home page so that it did not scroll, what would you recommend for the vertical? 768? A different number?
Rick: Well, verticals… very impossible to predict because you don’t know how big the monitor is that somebody is using to look at your site. Or you don’t even know how big the window is, right? They may be using a big monitor but the window might be you know, might only be this tall. So you know, if you want to make sure or if you want to do your best to make sure that it’s not going to scroll vertically, probably 750, something like that…
David: I was looking at something on TechFun real quick. It was back in April of last year and they said the dominant resolution using StatCounter is now 1366 by 768. So sounds like the number you mentioned and 768 is probably a good approximation. You can…
Rick: Well, 768 doesn’t give you room for all the rest of the additional browser stuff though and neither would 750 because you’ve got… you don’t know how many toolbars a person’s got on their browser.
David: Good point.
Rick: You know, it’s very difficult for you to control vertical.
David: Well, just make it 200 and it’ll be perfect, right?
Rick: Well, there you go. Absolutely. But you may choose 700 then or 720 or something like that.
David: Okay great, super. Thank you.
Rick: You’re welcome. Have a good day.
Adding a Call Now Button for a Mobile Device
Okay let’s see, tonight… Sandy, did you have a follow up question?
Sandy: Yeah, just a follow up question about adding a Call Now button. Have you seen that when it’s reduced? It’s typically like underneath the header. Are you going to be covering how to do that or do you have a video on how to…
Rick: Would you say that one more time?
Sandy: Sure. When a site has reduced down to the size of a mobile, a lot of the mobile sites that I’m looking at now have a button that appears. It’s a Call Now button that appears only in the mobile view and I’m seeing those a lot. I’m wondering if you’ll be covering how to add that or a resource…
Rick: And I’m working on that.
Sandy: Okay great.
Rick: Okay, anything else?
Sandy: Nope, that’s good. Thank you.
Rick: Okay, you’re welcome. Bye bye.
Responsive Design – Users Needs
Let’s see, okay let’s see… I’m going to unmute George to see if he’s got a question. George, did you want to comment on the argument about responsive design? George Anders, I’ve just unmuted your microphone. Okay well so what George says is that the biggest argument about responsive design is that a mobile user has a different needs than a desktop user. I mean, I think that sometimes it’s true. It’s not always true and I think it’s nice that the mobile user make that decision. It’s also not the case that you can always distinguish what kind of a mobile user, what the intent of a mobile user is because in our household, there are lots of different sizes of mobile devices. And my wife spends you know, lots of time during the day on a tablet that which is considered a mobile device but she has very specific non-mobile interests. So it’s a little tougher to say that a mobile user has a you know, very specifically, a different interest. Although you know, it’s harder to manage complexity for a mobile user. So I mean, one of the challenges that I’m working on while I consider how to make my site responsive is how much navigation do I keep because we have a lot of navigation on our site and should I consider reducing that for mobile users. So it’s definitely a question that’s up in the air. I’m not sure I know the right answer to it. But there’s certainly room for me to play around with it.
Let’s see, Ken said, “You could use SVG files for your graphic images.” And that’s true. That would be an interesting experiment to look at using SVG. I haven’t done that yet myself so I can’t really talk authoritatively about it. But I’m thinking about playing around with it especially for stuff that’s easily created in a vector-based software so I’m going to take a look at that.
Okay, I don’t… I think we hit all the questions here today so… Roger asks, “What is SBG?” It’s actually SVG as in Scalable Vector Graphic, I think is what SVG stands for. And it may be worth your while to look into SVG although it’s not going to solve the problem of the image being too small if the image is too small. So that’s something that’s a concern too.