Mobile support test page

[beardie]

It seems to work as it should. It definitely de-clutters the page a bit. It is intuitive (to me at least) and allows me to get to the section I want quickly. If you want people to get to a specific area quickly, then it's probably the way to go. If you want people to have a look at more content and stumble upon some new/good info, then I'd leave it expanded by default (the page loads pretty quickly and the scrolling isn't a big deal unless cell signal is very weak). The downside is that on a small screen, it's a little more difficult to hit the section banner to expand than it is to scroll. I fat finger clicked my way to the banner ad that sits in between What's New? and Recent Articles. Granted banner clicks are good, but accidental clicks can be frustrating. If you keep the current layout, it may be beneficial to increase the size of the section headers or add white space between them so they're a bit easier to click on a small screen.

Good suggestion. It should be easy enough to make it so that they are a little larger.

It probably isn't much of an issue on a tablet or larger screen (I'm using an iPhone 4s).

The layout on tablets is significantly different, actually. For the most part, it looks just like the home page today, except that the nag bar gets collapsed. On my iPad, it flows nicely that way with everything being fairly legible. On a smart phone (my testing has been with an iPhone 5s and 3gs [old work phone]), putting any content section side by side just wouldn't work, which is why I switch it to a vertical flow.

You can actually see all the sizing and layouts by just resizing a desktop web browser to be more narrow. As the browser width gets closer to common device sizes, it snaps into a different layout. I'm not sure if all the "switching" of sizes is working perfectly, so its probably best to refresh the page after resizing to see it properly. There are 3 sizes other than the normal full computer layout. 1 for mobile, and 2 for tablet (generally vertical or horizontal views).

 

[beardie]

...

The downside is that on a small screen, it's a little more difficult to hit the section banner to expand than it is to scroll. I fat finger clicked my way to the banner ad that sits in between What's New? and Recent Articles.

Okay... so, I increased the size of the section headers to make that easier. I think it looks clear. On that note, however, are the navigation and search icons in the upper corners too small? I could cut out the bearded dragon image on the left side of the banner image to allow the "BeardedDragon.org" portion to fill it more. This would allow me to give the whole things a little more height (about the same height as the section headers and the banner ads. So, roughly all those things would be about 60 pixels high.

Is it worth cutting the beardie out of the mobile view for that size increase?

Thoughts?

 

[CooperDragon]

The sections are larger now but the first few aren't working properly from what I can see. Bearded Dragons in the News appears collapsed and I can open it. The other sections are open by default, clicking the headline has no effect. This was the same in both browsers.

The size of the buttons for search and dropdown are OK. I haven't had any fat finger issues with those, so they can probably be left as-is. I'd hate to lose the dragon photo =).

 

[beardie]

You were too quick.

I was making some quick tweaks to simplify the CSS code and you caught it just before I fixed things. Should be good now.

 

[CooperDragon]

Yep, looks good now. Works really well at that size.

 

[beardie]

I'm starting to work on the forums for mobile sizes. So far, tablet sizes were quick to do.

I'm only JUST starting to work on the phone layout, but am quite happy with how it seems to be going already.

Right now, I'm working on the view topic layout. Primarily, I'm just getting the sizing down, and stripped out the user's extra info on the right of posts (probably not needed). I also disabled showing signatures. That alone almost has this quite usable on a smart phone.

You can check it out, but keep in mind, it is VERY beta right now, and I know there are plenty of things not yet positioned correctly. To see the new layouts in the forums, go to your "User Control Panel", "Board Preferences" tab, and change the "My board style" setting to use "BDorg_test". Save, and you are good to go. To switch it back to regular view, change the board style back to just "BDorg".

 

[Drache613]

Hello,

Great job, Alex. I am sure that is a lot of work. It seems like everyone either has a smart phone or a tablet.

Tracie