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.
To access the mobile forum, do I just enter the same url as the forum on the pc?
Updated threads to have a (somewhat) mobile design, I.E. Viewing threads on mobile is now easier.
I’d add about 10 - 15 px padding to thread_content. And maybe try to float the text around user image area.
Coming to you live from my phone. Everything is looking good so far.
Edit: the edit isn’t messed with yet.
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.
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
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.
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.
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.
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.
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
Have you even used the mobile design yet?
For me, when I go on the forums on my phone, it stays the same way it is now, just far more zoomed in.
I can’t select anything on the top bar at all.
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.