Optimizing for mobile

Posted 07/03/22 by Kasey Norton

I noticed my site is pretty funky on mobile. It doesn't have the same design or layout and the alignment is off. What do I need to do to optimize it?


Posted by Dan Vis on 08/27/20
Kasey, the bottom menu is actually just the side menu--the same as on your desktop view, only pushed down to the bottom. I think it's block.side or something on your skin. If you change it, you will change it for your whole site on desktop too.

What did you want to do to it? There are some options...
Posted by Kasey Norton on 08/27/20
Dan Okay, the mobile view is coming along but I'm not finding access to change the bottom menu even using the zones action. What should I be seeing to be able to edit those?
Posted by Dan Vis on 08/25/20
See what happens. And keep me posted.
Posted by Kasey Norton on 08/25/20
Okay I just replaced that line with the line you said to put instead and it aligned things perfectly! That was easy!

Now if I could just pretend that adding that site menu wasn't going to create more alignment issues, that would be great 😂
Posted by Dan Vis on 08/25/20
Yes Kasey, if you are looking at a page that has a width wider than the mobile skin, it will stretch off the side. Here's one trick you can try. Go to page "welcome" and change the 1st line to the 2nd:


<center>[^bio.jpg width=90%^]</center>

Basically, you are saying fit the image into the available width. You could try different percentages, too, up to 100% and see what looks best. It will affect both desktop and mobile. But it's probably a good idea, because if you insert a side menu like we're talking about, you'll have problems on the desktop version also. That's because the side menu will eat up some of the screen space and so the images would be too big there...

You will have to go through and fix several of these...
Posted by Kasey Norton on 08/25/20
Dan Ahh, I love it!!! Thank you! Literally the only thing I see that I'd adjust is that the page is off center and you have to scroll sideways. Is this because I've stretched images across the pages?

I will go and try to edit the tabs. Again, thank you!!!
Posted by Dan Vis on 08/25/20
I think you're site looks great Kasey, and as long as you have the capability to do something nice (and have the design eye for it) you might as well. We just have to deal with the realities of mobile technology which is slightly different than desktop technology.

Anyway, I've designed you a simple mobile skin. Basically, I've set pages to use the mobile skin on desktop (on site.auth.skins). Go there ( and you'll see the site others see everywhere on phones. There, add ?action=zones (there's no action bar at present) and you'll see there is a mobile-tabs block. You edit that to change the tabs. The zones action is key to finding where various part of a page are being drawn from. Very useful.

I've gone ahead and changed the colors about how I think you want them and uploaded a shrunk down banner image. I'll leave it to you to edit the links in that block.

Let me know if there are other changes you want to make to this...
Posted by Kasey Norton on 08/24/20
Dan Okay, God has had a chance to speak to my heart and remind me (again) content is key. I probably should have just stuck with the white skin and kept things super simple and I went and complicated everything because my history is as a blogger. I've essentially designed another blog but with more functionality 😂

If I use the mobile skin, can I change the banner area to white, and change the font color and style? If it was possible to enter a small graphic consistent with the pc version, that would be even better. And could the menu bar be silver? I see on the FAST site, you have an area beside the members name (on mobile) that drops down into the account/tools links. How do I make these changes?

Add I'm truly sorry it has taken me so long to catch the vision of building a website versus a blog. You have been very patient!
Posted by Kasey Norton on 08/24/20
Dan Okay, I'm trying to find a skin for mobile and not having a ton of luck since everything seems to be for wordpress. Any idea what keywords to use to find one that's not?

I had no idea this was even a thing. 😂 My previous site loaded on mobile pretty similar to how it looked on a desktop except the side bar items were in a column at the bottom. My banner was the same. I'm assuming it was just a responsive skin or something?

Is it possible to load a much smaller version of the banner? I'm not as concerned about the nav bar because it sounds like I could have a few links there and I could just choose wisely. But if there's a way to make the overall look basically the same, I would like to try. But I am definitely NOT looking to put you to a bunch of extra work!
Posted by Dan Vis on 08/23/20
Kasey, not sure the dropdown will work on mobile because you don't have mouse that hovers over the various tabs to make them drop down. So you'll probably have to just stick with basic tabs. And I usually dispense with a big banner because it typically takes half the screen.

My suggestions are to use the blue accent color for the bar across the top, shrink the letters, add your tabs below that and go with the default skin.

You are welcome to look around for other mobile skins and see what you can find. The NEO skin turned out to be a nice one!
Posted by Kasey Norton on 08/23/20
Dan Wow, so many details I didn't know were happening behind the scenes all these years! I'm not sure I know what to sketch. I'd like the banner and maybe a dropdown nav bar if the links across the top won't fit? I'd like it to have the same color theme which is basically just white with the black type.
Posted by Dan Vis on 08/23/20
It's a completely separate skin Kasey. I need to do a whole week just on the mobile version of the site. But if you tell me what you want on the mobile, I can start working on it for you.

Basically, you need to have a really simplified navigation because the screen size is so small. Usually the side menu is down at the bottom and there's a menu link at the top that jumps you down to the bottom. But there's room for a few tabs and your logo maybe.

Sketch out what you want and shoot me a picture...
Posted by Kasey Norton on 08/23/20

Join Us

To read more posts, or to leave a comment, join our FREE community...