BattleMaster Community

BattleMaster => Development => Topic started by: Solari on January 25, 2013, 03:45:55 PM

Title: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Solari on January 25, 2013, 03:45:55 PM
Alright, it's time to fix the mobile site.

While the code base is being ported, we're going to do this with CSS. There's quite a bit I can change with CSS, and I'd like to start with the messages page. There is one glaring omission on the current mobile site that I will rectify first: the lack of colored message types. This is an easy fix, but I also got to thinking: wouldn't it be nice if we could also improve the way that personal messages are depicted? You're all familiar with the single border on the left side to indicate a personal letter. Well, we might as well extend this to all the other message types. But what else? I can change the color of the heading for each message type (so that a personal request might have a slightly brighter color of green than the message body, for example). We can change the way the border looks. Etc., etc. Rather than impose one particular design vision on everyone else, I'm interested to hear what ideas people have, or have been kicking around.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Solari on January 25, 2013, 04:37:09 PM
Examples. Direct message type first, then broader audience:

(https://dl.dropbox.com/u/11627393/messagetypes.png)
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Indirik on January 25, 2013, 04:39:54 PM
Two things:

At the bottom of each page, there should be a link that takes us back to the top of the page, so we can get to the tabs.

All lists of links/options (like the Command page) neep more separation above and below the options.

As for visual styles, I'm not too particular. Just make it consistent and obvious. And try to keep away from a riot of colors.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Azerax on January 25, 2013, 05:42:35 PM
Post the mobile url just so people don't have to search for it.

Cheers,
Scott
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Solari on January 25, 2013, 05:56:12 PM
m.battlemaster.org, but these changes are only live on the dev server right now. No sense in accidentally  ruining everyone's fun.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Gustav Kuriga on January 25, 2013, 05:57:15 PM
I personally like how the mobile site is set up as is.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Eldargard on January 25, 2013, 10:12:02 PM
Be sure to get the "Save For Later" button to work on mobile. If works 50% of the time on Chrome on Android and 0% of the time on Firefox on Android. When I check in on my cell I usually want mark the messages I plan on responding to so I can easily find them when I sign in on the laptop. It really sucks that this is not reliably possible...

I really like the messages look. the colors and personal message bar look great. I would prefer to keep with the dark color themes though.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Solari on January 25, 2013, 10:37:29 PM
Like this?

EDIT: Well, except I botched that screenshot and didn't include a direct report. Just picture the brighter blue bar on top of the darker, standard report color.

(https://dl.dropbox.com/u/11627393/newmessagetypes.png)
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Indirik on January 25, 2013, 10:39:07 PM
Nice. I like the colored bar.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Penchant on January 25, 2013, 10:44:21 PM
I like it though the personal letter one should be darker as it similar to the OOC type.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Solari on January 25, 2013, 11:01:09 PM
I like it though the personal letter one should be darker as it similar to the OOC type.

I was going to change the OOC to another color entirely, or no color at all. We could also go back to a black background for letters, but in using the site with this new color scheme, I've found that it looks weird to read letters without a bounding box when compared to the other types.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Penchant on January 25, 2013, 11:16:33 PM
I was going to change the OOC to another color entirely, or no color at all. We could also go back to a black background for letters, but in using the site with this new color scheme, I've found that it looks weird to read letters without a bounding box when compared to the other types.
I would prefer OOC being what you currently have for letters and simply using a darker gray for letters.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Solari on January 25, 2013, 11:17:58 PM
I would prefer OOC being what you currently have for letters and simply using a darker gray for letters.

Will do.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Eldargard on January 25, 2013, 11:55:53 PM
The colors are great!
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Gustav Kuriga on January 26, 2013, 05:49:03 AM
I would prefer OOC being the grey it is in the normal web browser, and letters be the color they are in the normal web browser. Otherwise people are going to be getting confused.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Indirik on January 26, 2013, 02:48:18 PM
I agree that the colors should be the same between the two sites. I use both regularly. Changing would be confusing.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Bluelake on January 26, 2013, 11:59:17 PM
I think the white of the text on your second suggestion is a bit too bright. It hurts the eyes somewhat. I remember having to use the lightest grey when I was writing on black background.

Also, the letter title could be a little less bold, so the characters don't mix together too much.

I second and third the request to put a bit more space between every link on the mobile site: there's been a whole lot of missclicks.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Solari on January 27, 2013, 03:59:10 AM
All feedback has been incorporated. I'll update with images tomorrow or Monday. Black letters are out, though. Perhaps a dark grey. If I have to push the change to the main site for consistency, maybe we can do that.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Gustav Kuriga on January 27, 2013, 01:05:34 PM
Why exactly is the black letter out? It works perfectly fine on my phone, so you're both needlessly changing the color and probably causing a ton of confusion in the first place.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Indirik on February 02, 2013, 03:14:53 PM
Two things regarding the new mobile CSS:

1) DO NO LIKE the new gray color for letters. Really, really, really do not like. For 7 years, gray has meant OOC. Changing it now is a Bad Thing. I'm going to constantly be thinking I'm flooded with OOC letters.

2) The new collapsible menu overlaps the page title. (The News or Action or whatever page title.)
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Solari on February 02, 2013, 03:48:03 PM
Both points noted. I'll fix the letter color. The overlap is just a temporary problem. That menu is a skeleton of what it will be. Did those changes get pushed to live? That shouldn't have happened.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Penchant on February 02, 2013, 05:37:35 PM
Both points noted. I'll fix the letter color. The overlap is just a temporary problem. That menu is a skeleton of what it will be. Did those changes get pushed to live? That shouldn't have happened.
I agree with Indirik on what he said though I do like the new menu except that it stays at the top of the page and there is nothing to click to get to the top quickly either. And yes the changes are on live.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Indirik on February 02, 2013, 07:24:00 PM
I love that the messages have color now. I missed that.

The extra space around list items is good. Can something be done with the Send Message page? The various selections are pretty crowded.

I am finding the collapsing menu annoying. Every time you want to do anything, you have to use the menus. It is constantly being used, so I have to keep opening it every time I do something. Also, it's so tall that I have to scroll to see the bottom half of it. That makes accessing it a two click process instead of one, unless it's on the bottom half, and then it's click, scroll, click. While it's an interesting concept to hide the menus, I think this implementation is actually counterproductive. If it was always visible, that would be different. But as it is, I have to scroll back to the top to see it any way, so making it smaller doesn't gain us anything.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Pike on February 02, 2013, 09:13:12 PM

2) The new collapsible menu overlaps the page title. (The News or Action or whatever page title.)
I not only had problems with it overlaping the title page but when it expands it expands over links such as when I play a charcter who has no new messages or in my advetnure charcter alot.

Overall I like it. While it is a bit more scrolling I like the information page.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Gustav Kuriga on February 05, 2013, 08:06:54 PM
the letters are still grey on the mobile site. i keep having to double check to make sure it says letter rather than OOC on the grey ones.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Gustav Kuriga on February 17, 2013, 07:06:00 AM
See above, this is especially confusing if there are ooc messages mixed in. Please reverse colors of letters and ooc messages.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Solari on February 17, 2013, 10:15:52 PM
See above, this is especially confusing if there are ooc messages mixed in. Please reverse colors of letters and ooc messages.

I pushed this change through. Just waiting for it to post to the live server.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Chenier on February 18, 2013, 02:04:07 AM
I rarely use the mobile site, but doing so the other day made me reply OOC to IC letters because the grey made me think their letters was OOC.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Vellos on February 20, 2013, 10:47:53 PM
I rarely use the mobile site, but doing so the other day made me reply OOC to IC letters because the grey made me think their letters was OOC.

I have also done this before.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Blue Star on March 06, 2013, 04:54:25 AM
So does the mobile site work or ...?
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Penchant on March 06, 2013, 05:37:10 AM
So does the mobile site work or ...?
What do you mean by work? You can use it, but its still rather preliminary.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Gustav Kuriga on March 06, 2013, 02:57:49 PM
I thought it was fine the way it was before...
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Solari on March 06, 2013, 03:22:30 PM
I thought it was fine the way it was before...

I just loaded it up. What's different, exactly?
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Gustav Kuriga on March 06, 2013, 03:57:10 PM
Well the original mobile site had large boxes at the top of the page for navigation, making it easy to use on mobile without misclicking. Now it's a a list of all the options that's relatively plain and takes up more room while making misclicking easier.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Solari on March 06, 2013, 06:20:41 PM
Well the original mobile site had large boxes at the top of the page for navigation, making it easy to use on mobile without misclicking. Now it's a a list of all the options that's relatively plain and takes up more room while making misclicking easier.

Oh. That's not intentional. I try to push a fix through.
Title: Re: Mobile site users! Your input wanted! And actually USED! In real code!
Post by: Charles on March 10, 2013, 04:54:47 AM
I agree, making the navigation boxes take up as little room as possible without causing misclicking to be inevitable would be great.