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.
@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.
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.
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.
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.
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.
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.
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.
I was mainly going for a Google+ based design for the posts, which is why they existed on the sides. They were more to represent a background, rather than a border.
In regards to the text, there’s more to it then using space. On tablets, it isn’t an issue of space, they have larger screens, and mostly likely could use a more desktop version of the threads. For mobile, it is a matter of opinion. I can’t really make a decision without a few peoples input.
I use a mobile device for the forums all the time. I don’t really have an issue with fonts or anything along those lines. The issue for me is trying to tap things like the users online, notifications, PMs, and those
Refresh the page 2+ times. For some reason a simple refresh won’t re-obtain the css, so you need to do it multiple times to get the latest css. When I get a fully working css for most of the site, I’ll rename it so the browser is forced to use it rather than a cached version.
As a programmer believes a graphic designer in the matter of look