Mobile First!

For me, it's not so much as "mobile first" anymore, as it is "one design that fits all devices." Any site that I have worked on over the past several years has had responsive design (CSS media queries) built along with it from the ground up. I find it pretty much essential. My current target audience (I can't speak for everyone's demographics), over 70% of them access the internet and their email via phones or other internet enabled devices. Ignoring that market is a pretty bad mistake, as it's only going to get bigger.

As for a mobile-friendly forum - RPGfix is completely responsive. You can test it out by resizing your browser window (although sometimes Google adsense ads are finicky as their responsive ads are still in beta), or viewing it on your phone. It uses CSS media queries to change the sizes of things based upon the width of the user's viewport. It's super useful because it means I can moderate things while I'm AFK. :)

Retro-fitting can be a pain in the ass, but really, you should only have to do it once and it isn't that much work. Once the media queries are there, they can be reused throughout multiple layouts and the end result is highly worth it.

 

I currently don't have post tables on Shadowlack. Instead we have character "plates" which are banners that show above In Character posts. These also resize along down with the layout and are responsive.

If I were allowing character tables/post script though, what I'd do is once the viewport/browser has been shrunk down to say, 480-610px or so, I'd override the user's generated code and force a site-wide default. So they would no longer see their custom colours, images, etc., when the forum was being viewed on a smaller device. That way it'd remain consistent and readable (and lets face it, your members aren't going to make multiple mobile versions of their tables). Then if they want to view character tables, they'd have to use the site on a regular-sized device.

(@moosetracks114 I am also one of those people with a giant-ass screen... haha. XD)

 

Yep, totally similar to what I'd do in that situation. :) Might have to toss in some !important declarations depending on if you allow CSS in post tables.

This actually reminds me of a post table script I wrote before. The user would enter in the code for their header and footer, then it'd validate all of the HTML and CSS. It'd then assign it all a unique CSS ID, as well as a class, so they could be easily removed from view if the need arose. Doing it that way with assigning a universal class made it so that no one could tamper with the site's default layout by attempting to override CSS IDs if CSS was enabled in posts. I might have to rewrite that add-on someday.

 

@Daenelia Totally valid. :) A lot of tablets these days are large enough (~7 inches) that they don't suffer much when it comes to resolution, and for the most part mobile versions aren't that necessary. Like the Nexus 7. It's a wonderful device and browsing seems so wonderful on it, and not cramped at all.

Phones are still at a disadvantage and have less screen real estate to work with. Here's a few more things that I think are important.

• Is it even necessary? Do you even have a significant amount of mobile users? RPGfix does. 45.5% of people so far use iOS (iPhone, iPad, iPod Touch), and another 6% (and climbing) use Android devices. So it's not really something that I can ignore.
• Not all information on sites are equally important or necessary for most of your audience. This is really true for mobile sites. Say if you had a mobile version of a restaurant site. What would you consider to be the most important? Surely their location, hours, and likely their menu. You wouldn't necessarily feature all of the photographs from your last public event for mobile users. You'd give them the information that you know they're probably looking for first and foremost. This is where a lot of mobile design fails: people try to squeeze in too much information in the limited space that is available.
  
• Optimization is a must. Not everyone is always has their device connected to WiFi. Some people browse exclusively on data plans. Making sure that you site is speedy and only loading what is necessary is essential. This is likely something that will become less of a big deal as time progresses, but currently in places like Canada, mobile data plans are expensive and there is almost no such thing as "unlimited data" plans.
• That said, very often "mobile versions" of sites, are the *exact same size* byte-wise as their desktop counterparts. Less content and smaller image sizes does not mean that the site will load faster. A lot of news sites have heavily mobile-optimized versions of their pages. Unfortunately just throwing media queries on your site doesn't automatically optimize everything for you. However, on the time and money scale, it is a lot less cheaper to just add media queries than it is to ensure that everything is optimized as best as it can be.
• Lack of user choice. Many people hate having their user experience dictated, and responsive design is just that. Forcing responsive design on say, tablet users, can really annoy some people. Really it's a lot of trial and error here in regards to catering to screen sizes.
• Advertising can fail. A lot of advertisers pay you for banners and such that are a specific size. You often cannot use these on smaller screens, so you can suffer income loss with mobile sites. This can be major or minor depending on how much you rely on ads.
• The difference between devices is not just screen size. Responsive sites are limited to what they can access and know about a user. They cannot fully replace the experience that someone can get from a dedicated app. There are some very clear limitations.
• Tunnel vision. They can actually prevent innovation. Before blindly following what others are doing, try asking yourself about potential other ways that you can make the user's mobile experience better. How are your users using the site? Would they benefit better from the standard layout, or maybe just the most recently active content? Can you utilize other parts of the user's device? Cameras? Etc.

 

@Kitsufox I know completely what you mean about the image rotators. I've had corporations demanding that I add them since about 2009. I think that the novelty of "omg something moving!" on the page just hasn't worn off.