Jump to content

Making an existing skin mobile friendly?


kjSage
 Share

Recommended Posts

I know I'm making this about 20 times harder than it needs to be because I didn't originally code this skin with mobile devices in mind. This skin has been... 2? years in the making. Ahah. I always told myself I'd get around to looking into mobile-specific stuff "in a few more days" or "once this piece of code is finished." And now the entire skin is pretty much done... Except for a more mobile-friendly version.  lmao

 

Sooo... Where do I even start? I have a basic media query (pointer:coarse because looking at the list of media queries for all the different devices out there scares me, so I figure I'd just target all touch-based devices to start off) and some very, very basic styles for my wrapper and sidebar to get them to span the entire width of the screen. And that's about as far as I've gotten because I am so lost as to what even makes a decent mobile design. (Like I've browsed the initiative a couple of times from my phone and went "o.o how do you do that? That looks so nice!" and that's really it)

 

So, any advice or help with making this somewhat presentable on mobile devices would be loved.

 

You can see my testing board here: https://kjsage.jcink.net/index.php?act=idx

Links in the sidebar won't work because they're relative to BOE (which is linked in the welcome tab of the sidebar)

 

I can share my wrappers and other code if needed, as well.

Link to comment
Share on other sites

  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Let me introduce you to CSS media queries.

 

Basically how this works, is it defines different manner of the CSS operating depending on maximum browser width. You'll need to look at your site's design, and figure out how exactly it can function best on a smaller screen, what to move, what to take out, and then start adding media queries to your CSS to achieve this different layout/arrangement/design on a mobile device. Phones and tablets have different real estate in screen size, and turning the device onto its side also causes a different screen real-estate to open up, so you'll also probably want to decide early on which devices you want to actually change the layout for.

 

Personally myself, I add very little mobile CSS; essentially just enough to be sure the website body resizes, and then I add a collapse class which causes elements to hide. I then add this collapse class to any elements I want to disappear on mobile in order to free up space. Ergo, because one of my site's layouts has forum names and last poster info in the same td, I just collapse the rest. It looks much better on mobile, and isn't really missing anything super important. You can guess what a forum's for based on its name, so descriptions and things like aren't necessary. I don't put in CSS for tablets and such, as the automatic rearrangements on tablets usually work fine, and maybe like one person gets on the site on a tablet every 2-3 years, so it's really just not worth it to me.

 

This really isn't as tricky as it sounds like.

@media only screen and (max-width: 600px) {
    /*Mobile-specific CSS here*/
}

You can change the max-width: here to common device resolutions, and add in multiple media queries in order to code for multiple kinds of device. You can also up this to around 700px in order to just blanket-catch phones and tablets at once. You may still need to fiddle with the CSS to make it look better, may need to add elements that are intended specifically to show on mobile and replace larger similar elements on desktop, like poster info/mini profiles, but ultimately it's not this mystic, obscure art. Ideally, you'd have designed the mobile layout first, not long after the desktop version like here, but you can make it work. Have fun.

 

(Edit: It occurs to me now, you might've known about media queries, but, hopefully the run-down helps, anyway.)

nusignature.png nusignature.png

I am the darkness, always watching, always listening, ALWAYS THERE.
(If you're interested in Plain of Ice, message me, it's private. Bleach site, non-canon.)

Link to comment
Share on other sites

  • Admin

I’m not out of bed yet but standard media query sizes are:

Max-width: 767 (mobile phones)

max-width: 979 (tablets)

 

anything larger is is often considered a desktop. You can add more but those are pretty standard break points. 

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to comment
Share on other sites

@Arceus Ahh, that made things a lot clearer. Thank you. And while somewhat familiar with media queries myself it's always good to have that information repeated another time or two just to really "get it."

 

@Morrigan Yeah. I just switched from an HTC m8 to a galaxy note 8, got super confused why suddenly none of my media queries (which actually were those standards) weren't working all of a sudden despite the note seeming to fit under that resolution. Turned out that none of the standard ones for phones/tablets will work for it unless you go into min/max-device-pixel-ratio and whatnot. And after asking my other members, apparently we all have the note 8. -snort-  I figure I'll do a standard catch-all with pointer:coarse to grab all touchscreens and then add tweaks for other resolutions as they pop up.

 

Slowly picking through my css to see what needs to be changed the most. I've been setting things that aren't really necessary to display:none and then modifying widths and heights of other things, which seems to be working decently enough for now.  I'm kind of glad I have such an aversion to hovers, my entire post row/mini profile (and main profile) actually show up nicely aside from needing an increase to font size. It's just a matter of nixing minor things, definitely a lot easier than what I thought this would be when I first started.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.