Mobile Skin!

POSTED: Tue Sep 01, 2015 1:26 am

Mobile Layout & Responsiveness

'Souls finally has a mobile skin again! It's a super minimised skin that should help speed up loading times on phones and tablets and limit data usage.

It will automatically display when users view the board from a mobile device, though they can find a link to swap back to their regular skin at the top and bottom of the page. You can view the mobile skin from your non-mobile desktop or laptop via a link at the top/bottom of the page as well, though it'll reset back to your default next time you visit. You can set the mobile skin as your default via your UCP if you just want to see it all the time.

What this means for tables

Though in recent years, many players have swapped to using flex-width, text-mostly tables for their posts, many still use fixed-width image tables, which will stretch the screen on mobile devices.

We highly recommend players move towards using tables that don't use specific pixel sizes for most elements. Try using percentages in your widths, padding, margins, etc, and em for your text-size. Height can, and probably should, still be a fixed pixel number though.

Updating fixed-width tables to be responsive

While we do recommend text-mostly tables that are flex-width (or "responsive," meaning they adjust to your screen) by default, we know many players really like their fixed-width tables.

One way to adjust your fixed-width tables to be responsive is simply by changing your width attribute to "max-width" instead. Another way is to re-define your width attribute with media queries.

Here is an example of one of Sammiie's fixed-width table adjusting for smaller screens:

A fairly standard fixed-width table's main div looks like this:

Code: Select all
 .CharacterTableClass {width:500px; background: url('IMAGE URL') top center no-repeat #cccccc; border: 1px solid #000; padding:400px 10px 10px; margin:0px auto; }

This will display a 500x400 image at the top of the table, with the RP text below it. On a mobile screen that's smaller than 500px wide, it will show a horizontal scroll bar in order to fit the full 500px table. You can just change "width" to "max-width," which will let the table expand to it's max-width of 500px on larger screens while shrinking gracefully to fit smaller screens.

Or, with a media query, you can change the set width for .CharacterTableClass if the screen is smaller than 500px. Just add this after the rest of your CSS:

Code: Select all
@media (max-width: 499px)
{
   .CharacterTableClass { width: 90%; }
}

This means that if the screen is 499px wide or smaller, the width for .CharacterTableClass will be 90% instead of 500px. If you have padding on your table, don't set the adjusted width to 100%, or the padding will still cause the table to stretch. The image used for the table will be cropped depending on the width the table adjusts to, but the table will fit the screen without stretching -- yay!

You can also use the CSS3 calc() function to account for your table's padding in the adjusted width, like so:

Code: Select all
@media (max-width: 499px)
{
   .CharacterTableClass { width: calc(100%-20px);  }
}

Since the table has 10px padding on both the left and the right, if the table is 100% minus the total 20px padding, it should fit! Though it works on most, calc() doesn't work on all browsers. Still, you can always add a fallback:

Code: Select all
@media (max-width: 499px)
{
   .CharacterTableClass { width: 90%; }
   .CharacterTableClass { width: calc(100%-20px);  }
}

This way, if calc() doesn't work, it can still use 90% as the adjusted width on small screens.

Multiple classes & multiple media queries

Some players have multiple classes within their table that have a set width. You can re-define however many classes you want within your media query. You can also redefine any attribute, not just width. Like so:

Code: Select all
@media (max-width: 499px)
{
   .CharacterTableClass { width: 90%; font-size: 0.75em; }
   .CharacterTableOOC { width: 50%; font-size: 0.75em; font-weight: normal; }
   .CharacterTableFooter { width: 90%; }
}

Some players include a small floating box inside their tables to designate OOC information like territory, Luperci form, NPCs, etc. While this box can have its width adjusted via media query, there comes a width after which it doesn't make sense for the box to float anymore because any text inline with the box won't be readable anymore. In these cases, you can add a second media query to remove the float:

Code: Select all
@media (max-width: 350px)
{
   .CharacterTableOOC { width: 90%; font-size: 0.75em; font-weight: normal; float: none; }
}

Here's another one of Sammiie's fixed-width table adjusting for smaller screens, this time with the additional floating inside div:

Responsive table template

For the coding novices among us, here's a simple responsive table template to play around with! As always, regardless of the adjustments you make, please double-check all your div tags and make sure that you close the same amount that you open! Unclosed div tags or closing more than you open will break the board's layout!



Code: Select all
[html]<div class="responsiveTableK"><div>

<ul>
<li><strong>(WC)</strong> 236</li>
<li><strong>(Date)</strong> 26 August 2015</li>
<li><strong>(Territory)</strong> The Dampwoods</li>
<li><strong>(Form)</strong> Optime</li>
<li><strong>(NPCs)</strong> None</a>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac nunc libero. Integer dictum tortor in dui pretium, in euismod nunc hendrerit. Sed bibendum imperdiet vehicula. Vestibulum efficitur rutrum eros id cursus. Phasellus id cursus purus, nec egestas augue. Nam rhoncus congue justo quis malesuada. Nullam tempor eros nunc, vel luctus est euismod eu. Maecenas id quam vitae ante gravida mollis. Fusce eget mattis tortor. Proin a dui vel diam sollicitudin mattis. Morbi pretium egestas arcu at pellentesque.</p>

<p>Maecenas congue fermentum magna, nec placerat urna eleifend vel. Pellentesque a tellus tempor, ullamcorper velit gravida, semper neque. Nulla laoreet leo libero, consectetur consequat tortor hendrerit tempus. Aliquam viverra ante est, vel laoreet tortor mattis in. Integer eget tempus velit, et mattis tortor. Praesent a ornare leo. Ut ullamcorper hendrerit sem, interdum malesuada enim finibus in. Ut at ornare arcu. Cras tristique ipsum et turpis venenatis ullamcorper. Donec est ante, finibus quis elit id, tempor feugiat massa. Donec euismod lorem sit amet lacus pharetra, sed mollis urna rutrum. Etiam quis dolor gravida, volutpat elit id, vulputate odio.</p>

</div></div>

<style>
.responsiveTableK { max-width: 600px; margin: 0 auto; background: url('http://i.imgur.com/OEpdwGc.jpg') top right no-repeat #fff; border: 1px solid #000}
.responsiveTableK div { width: 90%; margin: 265px auto 20px; padding: 10px; border: 1px dashed #a8bcc4; color: #0b323e; }
.responsiveTableK div p { text-indent: 3em; font-family: Verdana, sans-serif; }
.responsiveTableK div ul { display: block; float: right; width: 40%; border: 1px dotted #adc4c9; padding: 5px;}
.responsiveTableK div ul li { list-style: none; font-size: 0.8em; }
@media (max-width: 400px) { .responsiveTableK div ul { float: none; width: 90%; } }
</style>
[/html]


This is what the template table looks like:

  • (WC) 236
  • (Date) 26 August 2015
  • (Territory) The Dampwoods
  • (Form) Optime
  • (NPCs) None

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac nunc libero. Integer dictum tortor in dui pretium, in euismod nunc hendrerit. Sed bibendum imperdiet vehicula. Vestibulum efficitur rutrum eros id cursus. Phasellus id cursus purus, nec egestas augue. Nam rhoncus congue justo quis malesuada. Nullam tempor eros nunc, vel luctus est euismod eu. Maecenas id quam vitae ante gravida mollis. Fusce eget mattis tortor. Proin a dui vel diam sollicitudin mattis. Morbi pretium egestas arcu at pellentesque.

Maecenas congue fermentum magna, nec placerat urna eleifend vel. Pellentesque a tellus tempor, ullamcorper velit gravida, semper neque. Nulla laoreet leo libero, consectetur consequat tortor hendrerit tempus. Aliquam viverra ante est, vel laoreet tortor mattis in. Integer eget tempus velit, et mattis tortor. Praesent a ornare leo. Ut ullamcorper hendrerit sem, interdum malesuada enim finibus in. Ut at ornare arcu. Cras tristique ipsum et turpis venenatis ullamcorper. Donec est ante, finibus quis elit id, tempor feugiat massa. Donec euismod lorem sit amet lacus pharetra, sed mollis urna rutrum. Etiam quis dolor gravida, volutpat elit id, vulputate odio.


Responsive tables will not be enforced

Existing rules for tables stand, but there won't be a new rule requiring players to have flex-width tables. If you browse frequently from mobile and notice a player's table doesn't look great there, feel free to politely inform them! As always though, they're under no obligation to change it if they don't want to.

Still, players should be aware that over 40% of traffic on 'Souls is from a phone or tablet. It's definitely in everyone's best interest that all parts of the board adjust nicely on different screens, and we hope that players will take the initiative to adjust accordingly. :)

Mobile issues elsewhere else

Outside of individual user tables, if you see a general part of the board that looks weird on mobile, please report it to Maintenance with your device, browser, and if possible, a screenshot.

If the issue is in a pack announcement box, pack news, pack ranks, or another pack-specific area, please report it to the pack's leader. Thank you!

'Souls Assemblage
The Few, The Proud
User avatar
'Souls Assemblage
'Souls Assemblage

POSTED: Tue Sep 01, 2015 2:06 am

I love you guys, as someone that cannot always to get to their computer, this is wonderful and I love you!

Hollr (NPC)
User avatar
Lullaby
Luperci

POSTED: Tue Sep 01, 2015 3:10 am

Two hours later... all of my tables are now responsive. –rubs poor tired eyes




Avatar by San; Siggy by Raze

User avatar
Eve
Luperci Chaos Star
DRAGONBORN
YOL TOOR SHUL

POSTED: Tue Sep 01, 2015 3:52 am

Kerrian Demos wrote:I love you guys, as someone that cannot always to get to their computer, this is wonderful and I love you!


I second this ! <3
Keep on Aiming.


Avatar by Raze. ♥

POSTED: Tue Sep 01, 2015 6:02 am

Perfect for browsing 'Souls in stealth mode at school without copious amounts of werewolves. ;D


Inferni
Evocati
User avatar
Raze
Luperci Multiple Co-ranks SoSuWriMo 2012 - 2017 Champion!
tatter-winged phoenix
cunning linguist

POSTED: Tue Sep 01, 2015 7:53 am

it startled me at first, haha! but i do browse a lot from my phone, so i like this. funny to think how ten or more years ago i could only imagine carrying 'souls around in my pocket. now apparently nearly half of the traffic is mobile.
Никита Во́лков

User avatar
Luperci
LEVIATHAN

POSTED: Tue Sep 01, 2015 9:22 am

I just found out about it, and it confused me at first. I honestly prefer the desktop layout

chien dupont

Icons by Bek, Levi, and myself

User avatar
FriendlyHougen
Luperci
arf ye matey

POSTED: Tue Sep 01, 2015 9:32 am

Chien Dupont wrote:I just found out about it, and it confused me at first. I honestly prefer the desktop layout

You can easily switch back to the desktop layout by clicking "Switch to full style" at the bottom of the board if you prefer the desktop layout on your mobile. :>


Inferni
Evocati
User avatar
Raze
Luperci Multiple Co-ranks SoSuWriMo 2012 - 2017 Champion!
tatter-winged phoenix
cunning linguist

POSTED: Tue Sep 01, 2015 10:26 am

This is definitely going to get some getting used to, but this is probably for the best for when I'm at school for the same as Raze. Very discreet and professional looking! :D And thank you for the table codes!
It’s easy to explain 'cause this world’s not tame

User avatar
Shannah
Luperci
little fang

POSTED: Tue Sep 01, 2015 2:55 pm

Maybe...I just can't find it because I am blind/oblivious.

But is there any kind of return to the main page thing to click on? Like on any of the layouts I can click on 'Souls Rpg, on the navigation thing (ie, Souls Rpg > Out of Character > Roleplay Info > News on this page, if I click Souls Rpg, it takes me back to the index) but I can't seem to find that on the mobile layout?
Salsola
The Arbiter (NPC)
User avatar
hilli
Luperci Curander, Boticario Mate to Basilaris tak

the night is dark
and full of terrors

News