Help Tips for creating mobile-friendly code?

[dulcinea]

So I started coding something on my laptop and then when I went to bed, I switched to my phone. It looked really messy, even when I viewed it on desktop mode. I was wondering what things to avoid? I think I read somewhere that columns aren't seen on mobile, but is there anything else? And is there a way to preview how a post would look on mobile from my laptop? Thank you in advance! I'm still new to this.

 

[kevintheradioguy]

Just use percentages instead of pixels and don't make text artificially large, I suppose. As a rule of thumb I set text on 80% for this sole purpose.

Columns are seen, but they are wonky c: I'd screencap to show in what way, but my capture button fell off, no jokes.

 

[Idea]

Generally the simpler the code the better it will work on phone.

For more complex code, don't make code that relies on having things on the side of other things, make them be on top of each other rather than on the side of one another. The biggest difference between phone and, say, a PC screen, is that phone screens are usually viewed vertically while PC's are viewed horizontally. So when someone views something on phone, it tends to either fall entirely out of proportion or move things that would normally be on the side to the top or bottom.

 

[kevintheradioguy]

tends to either fall entirely out of proportion or move things that would normally be on the side to the top or bottom.

Or cut the portion of the code, placing it off screen.

 

[Idea]

Or cut the portion of the code, placing it off screen.

Yeah, but that tends to happen more when there is a fixed size like in pixels and such, and you had already told them to use percentages.

 

[welian]

My resource thread is old, but it still holds up, if you're interested in building off of it.

Resource - Mobile-friendly layouts by welian

mobile-friendly layouts by welian Hello there, RPN! We all like pretty posts and aesthetically pleasing threads – but I’ve found that a lot of my roleplayers primarily use the site through mobile devices. So, I try to make posts and thread layouts that will look nice on their screens, and...

www.rpnation.com

The most important thing, to me, is to keep in mind that phones have long skinny screens and that not everyone has a big data plan. So, I go easy on the pictures and try to make sure that most of my info isn't in side to side blocks.

 

[welian]

And is there a way to preview how a post would look on mobile from my laptop?

Oh, and for this, you can simply resize your browser window. RPN is a responsive site and will shrink itself accordingly.

 

[dulcinea]

Thank you everyone for your responses! I'll be sure to check out welian's guide. I hadn't thought about resizing the screen, that's a good idea!

 

[Uxie]

but do keep in mind that what you view when you resize the browser may not exactly match the mobile layout too!! so it's always good to cross-check afterwards too :")

depending on how advanced you are in coding, it's worthwhile to check out lamb's or glucose guardian's codes!!! they use different methods to make their codes mobile-friendly, but it's worth giving a looksie bc these methods are usually how to achieve codes that can look a little more contained n quaint on desktop while still looking good on mobile :")
that said, it could be rly bad to look at if you're only just starting out on coding!!! once you establish knowledge of classes n all it should be alright tho!!

good luck :")

 

[dulcinea]

Uxie Ahh, thank you for the links! I do have some background in coding from taking an html/css course but I don't remember a lot;; I've been looking at example templates and using Chrome's built-in developer tools to kinda understand the codes!