What's new
  • 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.

Resource Mobile-friendly layouts by welian

How often do you post on RPN from a mobile device?

  • Never

    Votes: 9 8.0%
  • Rarely

    Votes: 13 11.6%
  • Sometimes

    Votes: 20 17.9%
  • Often

    Votes: 31 27.7%
  • All the time

    Votes: 39 34.8%

  • Total voters
    112

welian

#BlackLivesMatter
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 character profiles that they can copy and edit easily.

General guidelines I keep in mind for my mobile RPers:
  • They do not have a full keyboard, so they may not be able to type special characters as quickly, and are not able to use keyboard shortcuts.
  • They do not have a mouse attached to their device, so highlighting large amounts of text will be inconvenient.
  • Centerblock and accordion do not have a minimum width, so anything smaller than 50% will look cramped on a mobile screen.
  • Many of them will be using data instead of internet, so images should be modestly sized. GIFs and wallpaper sized images will take a long time to load and will eat through their data plan. Since Youtube videos don't autoplay, they and other embedded media should be alright in small doses.

The following layouts are (what I consider) aesthetically pleasing while still easy to read on small screens, and should be fairly easy for people to edit without a full keyboard. They are all very simple layout ideas - but simple is best on mobile.

EDIT: Key word up above is "idea". Although I put these layouts together, they're super simple, and well... you can't really plagiarize "centerblock and a header", no? So consider all these layouts freebies - just remember to switch up the font and colors to your liking.

Feel free to comment on them, or ask questions about mobile-friendly BBcode design.
 
Last edited:

welian

#BlackLivesMatter
Thread Title!!
A smaller subtitle


Bolded section header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor turpis eu turpis vehicula varius. Ut quis purus vel ex fermentum fringilla quis ac dolor. Nunc posuere eros faucibus urna accumsan, in bibendum enim dignissim. Aenean dapibus sapien nec mi hendrerit, sed volutpat metus venenatis. Morbi condimentum sem dapibus semper bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus dictum ipsum sit amet tempus faucibus. Nam diam sem, egestas in ultricies quis, suscipit vitae diam. Aenean lectus tellus, efficitur eget libero ut, fermentum tempus tellus. Integer porttitor turpis at ligula bibendum hendrerit. Vivamus nulla orci, tincidunt ac luctus id, eleifend ut lectus. Proin vel risus sit amet tortor auctor placerat.

In dapibus rutrum tellus consectetur gravida. Nulla ipsum diam, vestibulum sit amet tortor eu, consectetur egestas nulla. Vivamus vitae magna ut nisl dapibus elementum sed sed urna. Suspendisse at ornare purus. Sed nunc arcu, convallis nec condimentum eu, sagittis vitae ex. Aliquam varius dui at neque accumsan dictum. Maecenas turpis tortor, finibus at viverra at, pellentesque eget eros.

Bolded section header

Nam lectus ligula, interdum vitae imperdiet in, tempor vel elit. Duis at posuere mauris, sed tempor dolor. Mauris non turpis elit. Morbi sollicitudin velit volutpat rutrum iaculis. Nunc cursus dui eu sapien dictum tempor. Sed a erat nisi. Duis vehicula ligula nec nunc vestibulum, sed bibendum eros viverra. Suspendisse blandit sagittis libero, at porttitor nisl tristique vitae.

Notes: This is one of the most common layouts I use, a centerblock with a full width divider. It can be set up completely in RTE, and a text-based header with a nice font is a great way to decorate a thread when you're in short supply of images.
 

welian

#BlackLivesMatter
This is the header.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor turpis eu turpis vehicula varius. Ut quis purus vel ex fermentum fringilla quis ac dolor. Nunc posuere eros faucibus urna accumsan, in bibendum enim dignissim. Aenean dapibus sapien nec mi hendrerit, sed volutpat metus venenatis. Morbi condimentum sem dapibus semper bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus dictum ipsum sit amet tempus faucibus. Nam diam sem, egestas in ultricies quis, suscipit vitae diam. Aenean lectus tellus, efficitur eget libero ut, fermentum tempus tellus. Integer porttitor turpis at ligula bibendum hendrerit. Vivamus nulla orci, tincidunt ac luctus id, eleifend ut lectus. Proin vel risus sit amet tortor auctor placerat.

In dapibus rutrum tellus consectetur gravida. Nulla ipsum diam, vestibulum sit amet tortor eu, consectetur egestas nulla. Vivamus vitae magna ut nisl dapibus elementum sed sed urna. Suspendisse at ornare purus. Sed nunc arcu, convallis nec condimentum eu, sagittis vitae ex. Aliquam varius dui at neque accumsan dictum. Maecenas turpis tortor, finibus at viverra at, pellentesque eget eros.

Nam lectus ligula, interdum vitae imperdiet in, tempor vel elit. Duis at posuere mauris, sed tempor dolor. Mauris non turpis elit. Morbi sollicitudin velit volutpat rutrum iaculis. Nunc cursus dui eu sapien dictum tempor. Sed a erat nisi. Duis vehicula ligula nec nunc vestibulum, sed bibendum eros viverra. Suspendisse blandit sagittis libero, at porttitor nisl tristique vitae.

This is a footer with some info.


Notes: Having a matching color bar for a header and footer always looks really nice. Having an image is optional (this one is a little bigger than I would have used, but it's a free-use landscape image from Wiki Commons so I'm not complaining), but I think it looks nice.
 

welian

#BlackLivesMatter
Thread Title!!
A smaller subtitle

LINK 1
LINK 2
LINK 3
Bolded section header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor turpis eu turpis vehicula varius. Ut quis purus vel ex fermentum fringilla quis ac dolor. Nunc posuere eros faucibus urna accumsan, in bibendum enim dignissim. Aenean dapibus sapien nec mi hendrerit, sed volutpat metus venenatis. Morbi condimentum sem dapibus semper bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus dictum ipsum sit amet tempus faucibus. Nam diam sem, egestas in ultricies quis, suscipit vitae diam. Aenean lectus tellus, efficitur eget libero ut, fermentum tempus tellus. Integer porttitor turpis at ligula bibendum hendrerit. Vivamus nulla orci, tincidunt ac luctus id, eleifend ut lectus. Proin vel risus sit amet tortor auctor placerat.

In dapibus rutrum tellus consectetur gravida. Nulla ipsum diam, vestibulum sit amet tortor eu, consectetur egestas nulla. Vivamus vitae magna ut nisl dapibus elementum sed sed urna. Suspendisse at ornare purus. Sed nunc arcu, convallis nec condimentum eu, sagittis vitae ex. Aliquam varius dui at neque accumsan dictum. Maecenas turpis tortor, finibus at viverra at, pellentesque eget eros.

Bolded section header

Nam lectus ligula, interdum vitae imperdiet in, tempor vel elit. Duis at posuere mauris, sed tempor dolor. Mauris non turpis elit. Morbi sollicitudin velit volutpat rutrum iaculis. Nunc cursus dui eu sapien dictum tempor. Sed a erat nisi. Duis vehicula ligula nec nunc vestibulum, sed bibendum eros viverra. Suspendisse blandit sagittis libero, at porttitor nisl tristique vitae.

matching footer

Notes: Although this one displays mobile friendly, it's best put together on a full computer, because it takes a bit of tweaking to get the spacing correct around tables. I've combined the previous two layouts to create a makeshift navigation/menu bar, with a matching footer. Be warned: tables are not as responsive as columns, and more than three or four cells may cause horizontal scrolling on smaller screens. Take note of the limited color palette.
 

welian

#BlackLivesMatter
After double checking this on my own phone, I can confidently say - you do not want to have more than three cells across for a navigation table, and even centerblock at 50% is kinda iffy. 65% is probably better.
 

Life.

Cross the Road. The chicken did it.
RIP my schedule. Anything else in particular you guys want to see from me?
Bless you for doing these. It is hard difficult at times to try to be presentable on mobile. And it'd be interesting to see a condensed character sheet. Those are always the hardest to view, especially when they are heavy with BBCodes.
 

welian

#BlackLivesMatter
Character's Name
  • Information


Notes: I have literally been using this profile layout (with almost no style modifications) for almost two years now. If it's not broke, why fix it? Anyways, I prefer tabs over accordions because they're less finicky and easier to work with, which is the most important thing to consider on mobile.
 

welian

#BlackLivesMatter
To show my appreciation to constellation constellation and Life. Life. and Necessity4Fun Necessity4Fun for aggressively liking my plain-jane layouts, I bequeath to you one of my favorite RP post formats. Nessy should recognize it from Episodes 1 and 2 of Aegis.

Character Name

Overview
LocationData B
CompanyData B
MoodData B
ActionsData B
TagsData B
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor lacus eget mauris blandit, ut porta odio eleifend. Praesent nibh mi, viverra a neque quis, lacinia gravida tellus. Donec tempus magna nec venenatis consectetur. Duis ac metus a dolor ultricies ullamcorper a at tellus. Quisque tempus diam maximus ex convallis tincidunt. Mauris lacinia leo at dui tempus aliquet. Pellentesque eu velit in leo scelerisque iaculis. Aliquam erat volutpat. Curabitur viverra vestibulum ex, non dapibus nisl fermentum quis. Etiam rutrum, ipsum et lobortis vehicula, sem tortor molestie metus, non vestibulum leo felis ac ante. Praesent purus felis, blandit a lacus sed, rutrum vulputate mauris. Sed bibendum sed erat ac lacinia. Pellentesque quam tellus, ultrices sed vulputate vel, ullamcorper et mi. Pellentesque gravida volutpat augue, eu ultrices neque semper eu.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec eleifend justo. Integer aliquet felis sit amet nunc elementum, sit amet efficitur quam lacinia. Sed malesuada elementum eleifend. Nullam vestibulum lacus hendrerit nisl gravida, at venenatis sapien laoreet. Integer fermentum, sem at ullamcorper sodales, arcu ex mattis leo, ut rhoncus urna odio et nunc. Aliquam venenatis nisl a sapien viverra congue. Ut rhoncus congue porta. Aliquam gravida nulla erat, a vestibulum mauris gravida eu. Integer in lorem eu ligula consequat lacinia sit amet ac elit. Donec in enim eu ligula viverra interdum ac a massa. Nunc sed placerat diam, sit amet vulputate felis. In hac habitasse platea dictumst. Proin tempus in urna eget egestas.
 

lehane

five by five
i'm probably going to end up using these whenever i'm lazy tbh lmao

but honestly?? they're v minimalistic but somewhat wonderful at the same time < 3
 

welian

#BlackLivesMatter
Long time no update - I was messing around in my Private Workshop, revisiting my pre BBCode+ stuff, and made this via recycled layouts. Since it's technically mobile friendly, why not share?


Title Goes Here​

Info la

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor lacus eget mauris blandit, ut porta odio eleifend. Praesent nibh mi, viverra a neque quis, lacinia gravida tellus. Donec tempus magna nec venenatis consectetur. Duis ac metus a dolor ultricies ullamcorper a at tellus. Quisque tempus diam maximus ex convallis tincidunt. Mauris lacinia leo at dui tempus aliquet. Pellentesque eu velit in leo scelerisque iaculis. Aliquam erat volutpat. Curabitur viverra vestibulum ex, non dapibus nisl fermentum quis. Etiam rutrum, ipsum et lobortis vehicula, sem tortor molestie metus, non vestibulum leo felis ac ante. Praesent purus felis, blandit a lacus sed, rutrum vulputate mauris. Sed bibendum sed erat ac lacinia. Pellentesque quam tellus, ultrices sed vulputate vel, ullamcorper et mi. Pellentesque gravida volutpat augue, eu ultrices neque semper eu.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec eleifend justo. Integer aliquet felis sit amet nunc elementum, sit amet efficitur quam lacinia. Sed malesuada elementum eleifend. Nullam vestibulum lacus hendrerit nisl gravida, at venenatis sapien laoreet. Integer fermentum, sem at ullamcorper sodales, arcu ex mattis leo, ut rhoncus urna odio et nunc. Aliquam venenatis nisl a sapien viverra congue. Ut rhoncus congue porta. Aliquam gravida nulla erat, a vestibulum mauris gravida eu. Integer in lorem eu ligula consequat lacinia sit amet ac elit. Donec in enim eu ligula viverra interdum ac a massa. Nunc sed placerat diam, sit amet vulputate felis. In hac habitasse platea dictumst. Proin tempus in urna eget egestas.
Info la

Subheader
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec eleifend justo. Integer aliquet felis sit amet nunc elementum, sit amet efficitur quam lacinia. Sed malesuada elementum eleifend. Nullam vestibulum lacus hendrerit nisl gravida, at venenatis sapien laoreet. Integer fermentum, sem at ullamcorper sodales, arcu ex mattis leo, ut rhoncus urna odio et nunc.
Subheader
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec eleifend justo. Integer aliquet felis sit amet nunc elementum, sit amet efficitur quam lacinia. Sed malesuada elementum eleifend. Nullam vestibulum lacus hendrerit nisl gravida, at venenatis sapien laoreet. Integer fermentum, sem at ullamcorper sodales, arcu ex mattis leo, ut rhoncus urna odio et nunc.
Subheader
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec eleifend justo. Integer aliquet felis sit amet nunc elementum, sit amet efficitur quam lacinia. Sed malesuada elementum eleifend. Nullam vestibulum lacus hendrerit nisl gravida, at venenatis sapien laoreet. Integer fermentum, sem at ullamcorper sodales, arcu ex mattis leo, ut rhoncus urna odio et nunc.
Subheader
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec eleifend justo. Integer aliquet felis sit amet nunc elementum, sit amet efficitur quam lacinia. Sed malesuada elementum eleifend. Nullam vestibulum lacus hendrerit nisl gravida, at venenatis sapien laoreet. Integer fermentum, sem at ullamcorper sodales, arcu ex mattis leo, ut rhoncus urna odio et nunc.




Code:
[bg=#3b3535][COLOR=#d9d7ca][border=double 4px #73604f][centerblock=90]
[border=none; font-size:50px; padding:0; text-shadow: 1px 1px 1px black;][center]Title Goes Here[/center][/border]

[Row][Column=span2][fieldset=Info]la[/fieldset]
[/Column][Column=span6]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor lacus eget mauris blandit, ut porta odio eleifend. Praesent nibh mi, viverra a neque quis, lacinia gravida tellus. Donec tempus magna nec venenatis consectetur. Duis ac metus a dolor ultricies ullamcorper a at tellus. Quisque tempus diam maximus ex convallis tincidunt. Mauris lacinia leo at dui tempus aliquet. Pellentesque eu velit in leo scelerisque iaculis. Aliquam erat volutpat. Curabitur viverra vestibulum ex, non dapibus nisl fermentum quis. Etiam rutrum, ipsum et lobortis vehicula, sem tortor molestie metus, non vestibulum leo felis ac ante. Praesent purus felis, blandit a lacus sed, rutrum vulputate mauris. Sed bibendum sed erat ac lacinia. Pellentesque quam tellus, ultrices sed vulputate vel, ullamcorper et mi. Pellentesque gravida volutpat augue, eu ultrices neque semper eu.[/Column][/Row]

[Row][Column=span6]Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec eleifend justo. Integer aliquet felis sit amet nunc elementum, sit amet efficitur quam lacinia. Sed malesuada elementum eleifend. Nullam vestibulum lacus hendrerit nisl gravida, at venenatis sapien laoreet. Integer fermentum, sem at ullamcorper sodales, arcu ex mattis leo, ut rhoncus urna odio et nunc. Aliquam venenatis nisl a sapien viverra congue. Ut rhoncus congue porta. Aliquam gravida nulla erat, a vestibulum mauris gravida eu. Integer in lorem eu ligula consequat lacinia sit amet ac elit. Donec in enim eu ligula viverra interdum ac a massa. Nunc sed placerat diam, sit amet vulputate felis. In hac habitasse platea dictumst. Proin tempus in urna eget egestas.[/Column][Column=span2][fieldset=Info]la[/fieldset][/Column][/Row]

[Row][Column=span2][border=none; font-size:28px; padding:0; text-shadow: 1px 1px 1px black;]Subheader[/border]Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec eleifend justo. Integer aliquet felis sit amet nunc elementum, sit amet efficitur quam lacinia. Sed malesuada elementum eleifend. Nullam vestibulum lacus hendrerit nisl gravida, at venenatis sapien laoreet. Integer fermentum, sem at ullamcorper sodales, arcu ex mattis leo, ut rhoncus urna odio et nunc.[/Column][Column=span2][border=none; font-size:28px; padding:0; text-shadow: 1px 1px 1px black;]Subheader[/border]Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec eleifend justo. Integer aliquet felis sit amet nunc elementum, sit amet efficitur quam lacinia. Sed malesuada elementum eleifend. Nullam vestibulum lacus hendrerit nisl gravida, at venenatis sapien laoreet. Integer fermentum, sem at ullamcorper sodales, arcu ex mattis leo, ut rhoncus urna odio et nunc.[/Column][Column=span2][border=none; font-size:28px; padding:0; text-shadow: 1px 1px 1px black;]Subheader[/border]Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec eleifend justo. Integer aliquet felis sit amet nunc elementum, sit amet efficitur quam lacinia. Sed malesuada elementum eleifend. Nullam vestibulum lacus hendrerit nisl gravida, at venenatis sapien laoreet. Integer fermentum, sem at ullamcorper sodales, arcu ex mattis leo, ut rhoncus urna odio et nunc.[/Column][Column=span2][border=none; font-size:28px; padding:0; text-shadow: 1px 1px 1px black;]Subheader[/border]Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec eleifend justo. Integer aliquet felis sit amet nunc elementum, sit amet efficitur quam lacinia. Sed malesuada elementum eleifend. Nullam vestibulum lacus hendrerit nisl gravida, at venenatis sapien laoreet. Integer fermentum, sem at ullamcorper sodales, arcu ex mattis leo, ut rhoncus urna odio et nunc.[/Column][/Row]


[/centerblock][/border][/color][/bg][/color]
 
Last edited:

welian

#BlackLivesMatter
These are waaaaay too good...these are perfect for mobile users..i think i’m in love... <3
Thanks! The best part is, I just updated the code to fix the text color - I nested things out of order and the text ended up showing black on dark mode instead of that cream color.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top