• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help Tips for creating mobile-friendly code?

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.
 
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.
 
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.
 
My resource thread is old, but it still holds up, if you're interested in building off of it.


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.
 
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.
 
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!
 

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 :")
 
Uxie 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!
 

Users who are viewing this thread

Back
Top