Mobile Website

Posted by popstarfreas, 13th Mar, 2015 @ 5:56 pm

Page 1 of 2 :
1
 
popstarfreas
user

Administrator

 

To enhance our website for mobile users, the website's css will be engineered to work on mobile. The design goal is to make every page use only the space available on a mobile device, so that no one needs to drag the display around.

At this time, the navigation bar and forum main page have been updated to contain a usable design. Right now, it is mainly the display of the page that is being worked on, rather than using features such as the chat and shoutbox.

If you have a mobile device, it would be great for any feedback. If you want to view the non-mobile website, you can set your mobile browser to "display desktop site" or something similar in its settings. This simply fakes your browser as a desktop-browser. It is however, not recommended, as many features are designed for a mouse, and therefore are very small.


13th Mar, 2015 @ 5:56 pm
 
jassofallout
user

Staff Assistant

 

To access the mobile forum, do I just enter the same url as the forum on the pc?


13th Mar, 2015 @ 6:48 pm
 
A68PL
user

Administrator

 

I've tested it here: http://www.browserstack.com/screenshots/d10bc3ecd3932a2cd4821013ab1e8a1acfc2fefc

Looks good!


13th Mar, 2015 @ 7:37 pm
 
popstarfreas
user

Administrator

 

Updated threads to have a (somewhat) mobile design, I.E. Viewing threads on mobile is now easier.
@A68
http://www.browserstack.com/screenshots/553f2b11bcae69479609fc6c3edf9a7c599d8176


13th Mar, 2015 @ 9:27 pm
 
A68PL
user

Administrator

 

I'd add about 10 - 15 px padding to thread_content. And maybe try to float the text around user image area.


13th Mar, 2015 @ 10:02 pm
 
jassofallout
user

Staff Assistant

 

Coming to you live from my phone. Everything is looking good so far.
Edit: the edit isn't messed with yet.


14th Mar, 2015 @ 12:57 am
 
popstarfreas
user

Administrator

 

@A68PL
I've added a border to all the posts, to make it easier to see where each post section is. I also changed the spacing of the username+avatar from the top of the post area, as well as the text below. And by floating the text around the user image area, you mean having the text start next to (on the right of) the username+avatar? The problem with this is that the width will be inconsistent.


14th Mar, 2015 @ 1:19 am
 
ThePunisher
user

Known Member

 

http://tinypic.com/r/125mj9x/8 tried it by a fast browser known as CleanMaster Browser, looking good also there, but login page seems like the old one, like the one which is used by PC.


14th Mar, 2015 @ 8:17 am
 
A68PL
user

Administrator

 

Yes Rofle, that's what I mean. That's why I said "try to". I don't remember how to do that myself... Will need to check how easy/hard it is.

OK, first entry in search results: http://www.coffeecup.com/help/articles/how-to-allow-text-to-wrap-around-an-image-in-responsive-layout-maker/ Here are also some useful things http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design


14th Mar, 2015 @ 10:09 am
 
popstarfreas
user

Administrator

 

I know how to wrap it around. That's not the problem. The problem is that the text width will be inconsistent. Next to the image it will be ~50% width, and below it will be at the max.


14th Mar, 2015 @ 12:50 pm
 
A68PL
user

Administrator

 

Take a look here: https://drive.google.com/folderview?id=0B5C160nToDx7eWU4OWhJS25nQmc&usp=sharing

I worked with the code and came up some nice style. If you have Stylish you can just import the code, to see it live. The code will work on this post only. You can see how a web page looks in mobile view by switching user agent. I use Firefox's add-on for that.

The most important changes:
- removed unnecessary borders around posts
- post text floats around the image
- added background gradient to posts
- made the expandable menu button fixed in the top right corner
- made the expandable menu fill whole screen and be transparent
- added glow to focused text area and made the Submit button stand out more

The style is of course not perfect. I left some things unchanged. Couldn't spend more time on it right now.


14th Mar, 2015 @ 3:10 pm
 
popstarfreas
user

Administrator

 

The borders aren't unnecessary. They are there for a visual cue for when you are passing a post. There's not much point in relying on gradients because not all mobile devices browsers support gradients (mainly those for 'speed' rendering) which means there's no visual cue. It will also be inconsistent with the desktop-version, meaning threads will look different if they use certain colors. And do you see how the text width is inconsistent, and for the most part will create a lot of white space between two lines.


14th Mar, 2015 @ 3:16 pm
 
A68PL
user

Administrator

 

Well I did not though about it before, about thread inconsistency with the desktop version. yeah, it should match.

When talking about borders I mean those on right and left of the posts - those are unnecessary - 1. they don't match with desktop version; 2. They distract from the content - plain white border is enough.

I don't agree that you should not use gradients because some older web browser don't support it. My thinking is that older technologies should not limit opportunities. But you're right, that a fallback version/attributes should exist (like borders) for older browsers. In this case to clearly see when previous post end and the next starts.

I think that the text should wrap around the user info. On smaller screens more space is more important than consistency. Especially, that these larger spaces between lines aren't looking bad.


14th Mar, 2015 @ 3:49 pm
 
popstarfreas
user

Administrator

 

They do not match with the desktop version, but in a way that does not differ the content. They're simply there like the borders on these posts are. The difference is that the smaller screen needs a larger border for it to be seen.

Gradients do not work with text very well and are not rendered the same on all browsers. Some text will be harder to read, while others will be easier.

The larger spaces do look bad when scrolling. If you have a text like "This is the link:" and the link is way further down, it looks odd. You will also be going left to right while reading, from the same ~4 lines at the same start position, and then you hit the ~5th line, and suddenly you have to look further back.


14th Mar, 2015 @ 4:20 pm
 
A68PL
user

Administrator

 

You could believe me regarding the left/right borders As a programmer believes a graphic designer in the matter of look

Well, I already said that I consider better usage of space more important than such little shortcomings.

ps. I've changed the code a little - Submit button might not look the way I wanted.


14th Mar, 2015 @ 4:26 pm
Page 1 of 2 :
1
 
 

Reply