Resource Mobile-friendly layouts by welian

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

 

[welian]

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]

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]

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.

 

[constellation]

you're a life saver. ❤

 

[welian]

you're a life saver. ❤

Glad you think so! I'll work on a few more when I get home. I think some stock character sheets are in order.

 

[constellation]

this is hella useful for mobile users. like yasss. keep up the good work.

 

[welian]

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.

 

[welian]

RIP my schedule. Anything else in particular you guys want to see from me?

 

[Life.]

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]

Character's Name

• TAB1
• TAB2
• TAB3
• TAB4

• Information
• Information
• Information
• 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]

Notes: For those of you who prefer a more vertical profile layout. As always, it's not exactly fine art I'm posting in here - it's templates for mobile users who want to make their RPs look fancied-up while still being easy to edit on a mobile device.

Character's Name

• TAB1
• TAB2
• TAB3
• TAB4

• Information1
• Information2
• Information3
• Information4

 

[welian]

To show my appreciation to constellation and Life. and 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

Location	Data B
Company	Data B
Mood	Data B
Actions	Data B
Tags	Data 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.

 

[true blue]

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]

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

Only losers reinvent the wheel.

 

[Life.]

They are truly beautiful on mobile phone ;__; so beautiful.

 

[welian]

Thanks! There's not too much more to post, I think - 90% of my work is some combination of these templates. The other 10% is more complex stuff that's pretty hard to edit on a phone and therefore doesn't qualify as mobile-friendly.

 

[welian]

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.

Spoiler: 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]

 

[Almond Milk]

These are waaaaay too good...these are perfect for mobile users..i think i’m in love...

 

[welian]

These are waaaaay too good...these are perfect for mobile users..i think i’m in love...

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.

 

[pinnasina]

You are a godsendddd bless you

 

[BlossomsOfRainbows]

This is amazing! I am almost always on my phone, and while I’m tech savvy in other areas, BBCode isn’t my field of expertise. I’ll definitely be using these