Mobile First!

Discussion in 'HTML & Website Design' started by Yazzeh, Nov 2, 2013.

Thread Status:
Not open for further replies.
  1. Yazzeh

    Yazzeh Newcomer

    As a web designer, I tend to sit back and watch the trends and there's been tons of conversation around the idea of "Mobile First" and designing sites to become mobile friendly.

    I see a lot of websites are becoming responsive or offering up mobile sites as an alternative for mobile users, but (to my knowledge) I haven't really seen this translate to forums. I've seen a few sites with mobile alternatives and I know myBB offers a mobile plugin to help with that kind of thing, but I have yet to find a good example of a mobile forum.

    Should mobile be a concern? What are the best ways to address it?

    I recently coded a mybb forum and stripped it of all its tables and substituted divs with the intention of making the site responsive before I got lazy and gave up on trying to figure it out. But! At the same time, I know of an instance where one of our members can only access the site by phone, so I'm looking to re-evaluate that thought process.

    Has anyone taken measures to address accessing their site by phone? Tips, tricks, advice on retro-fitting?
  2. Shriker

    Shriker Shadowlack Owner RPGfix Admin Patron Game Owner

    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.
    Morrigan likes this.
  3. I'm currently in the process of converting RoW's layout to be responsive, and I'm finding it to be just as much of a pain in the ass I'm sure you did. The way myBB templates are makes it pretty time-consuming to go through and take out all of those tables and replace them with divs, but I think in the long run, it'll be worth it. I'm making use of the bootstrap v3 framework to accomplish this for my site - it's especially helpful because not only do we frequently have users accessing the site on their phones or tablets, but we also have a few people with giant ass screens that get frustrated at some of the unused space that comes with having a fixed width layout.

    Until that project is finished, I use the GoMobile plugin you mentioned in your first post, which I've found to be really helpful. It does what it needs to do, and most members have told me they can use it to access the basics of the site without too much of an issue. I frequently check in on my phone, but only to read threads and maybe make the occasional reply; I couldn't imagine only having a mobile phone to use 100% of the time.
  4. Yazzeh

    Yazzeh Newcomer

    Alright. Aside from buckling down to actually go responsive...

    How are you guys addressing user-generated coded content? For example, character tables or post scripts that are fixed widths?
  5. Shriker

    Shriker Shadowlack Owner RPGfix Admin Patron Game Owner

    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)
  6. @Iversia You make my job harder, but I'm envious. ;)

    I try and encourage people to use fluid postscripts if they can, especially if their postscript doesn't use images and has no reason to be a set width. In the postscript tutorial that one of our members created, she used divs rather than tables, which at least helps a little bit, though obviously if they have a specific size image, that all goes out the drain.

    I'd be curious to know how you would go about overriding the users' input. I think that ultimately might be the only thing you can do to ensure that all posts are able to be read on smaller devices. Would you give each post body a class and have it look something like this (within a media query):

    .post img {display:none;} .post table {width:90%;}
  7. Shriker

    Shriker Shadowlack Owner RPGfix Admin Patron Game Owner

    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.
  8. I am of the opinion that if you design well, it will look good on most used resolutions and devices. (Or you can turn that around and state that you should design for your users and know your audience and so on...) I do not design for mobile. I do have people checking if they can view the site on their mobile, but I don't design for it. There are many reasons.

    I don't have a smart phone myself. If I did, I wouldnt want to use it to write roleplay posts the way I like posts to be written. I actually want my members to sit down at a laptop or computer and get in the mindset of writing, not texting or sending cute little emails or simple status updates.

    I do have a tablet, and even that is not used for posting and writing. It is used for little updates on the shoutbox. It is used to re/read chapters in bed. But if in a pinch, I could use the tablet for adding and writing to a post.

    Regarding RPG Fix and the mobile theme, which shows up on my tablet. It is unnecessary for me! I always have to switch back to ´view desktop version´ because it just looks and works better. Mobile versions feel limited, look ugly (no offense, I think this is true for all mobile versions of websites trying to immitate an ´app-look'), and regular desktop versions work FINE for me. IF they are coded and desgigned well. Which leads me back to my opening line... if you design well, ...
  9. Shriker

    Shriker Shadowlack Owner RPGfix Admin Patron Game Owner

    @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.
  10. Kitsufox
    Caffeine Fix

    Kitsufox Resident Game Owner

    @Inversia: I love your comment about Tunnel Vision. I don't know why every site I do for this one company needs one, but they have a thing for rotators that serve no purpose. Being all over the place. And do nothing but rotator through 3 images that bring nothing to the page over what a single static image could bring to the page.
    Shriker likes this.
  11. Shriker

    Shriker Shadowlack Owner RPGfix Admin Patron Game Owner

    @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.
    Kitsufox likes this.
  12. Zozma

    Zozma Resident Game Owner

    ^ Ugh, the rotating images are a total turn off for me. Anything on the the index that moves is a huge turn off. I don't even allow gif affiliate banners anymore and switch any gif banners I do get to a static image.

    As for a mobile first mindset... I don't think that way. As far as I can see, my site looks fine in mobile and I've never had any complaints from my members (1/3 of which do access it regularly through the phone.) Of course, I don't know what the site looks like on a phone that's not an iphone, so I just have to take their word for it. I think the only thing that's not accessible are the hover profiles but the information there isn't going to break them if they can't see it immediately (it's just convenient for those of us who are using computers to be able to hover and see at a glance without making the postbit 500px tall, but they can find their info by clicking on the profile if they need it.)

    Of course, if I had complaints, I would try to make my site easier to use for the members, but only for current members. I'm more concerned with keeping them happy than "potential" users who might make me jump through hoops... just to leave the site a month later anyway.
Thread Status:
Not open for further replies.