Mobile support test page

[beardie]

Based on the feedback I've gotten so far from members, and my own understanding of needing better mobile support, I've been working on a test page (initially a bunch of colorful blob segments, but now based on the home page) that let me work through being able to make the site work better with mobile devices...

I think at this point, I'd be interested in getting initial feedback on the page I put together. It's basically a copy of the home page. The main difference is that it will draw the page differently depending on the width of your web browser (a basic interpretation of different mobile devices and view modes (landscape vs. portrait)).

There are two ways to try this...
1. Use a mobile device (smart phone or tablet).
2. Use your browser and resize the width of your browser.

I still have some minor spacing bugs, but am working on those. I would love to hear feedback on...
1. Does it look good on your mobile devices? Better or worse than looking at the regular home page?
2. Is the navigation drop down intuitive? Is it what you're used to when you see navigation button drop downs on other sites?
3. Any major bugs or issues?
4. Any suggestions on improving it more?

Here's the link to the test page...
https://www.beardeddragon.org/index_c.php

And for simplicity, here's the link to the normal home page:
https://www.beardeddragon.org/

Please note that the links on the page will just take you to the regular website with the normal formatting... only the one page is setup for this design test so far.

Please post feedback on this thread.

Thanks!
-Alex

 

[CooperDragon]

This is very helpful, thanks! I will continue to do some testing with it. So far the main page looks good. It's easy to read and is drawn in a good scale for my iPhone. The drop down menu works well, but the icon for it appears over the image in the top banner so it isn't apparent right away. Perhaps adjusting it's location or color would help with that. I haven't seen any bugs so far but will continue testing. I've been using the Mercury browser on my iPhone. Will do some testing with Safari as well. I primarily use Mercury for the forum because it remembers which threads have been read when I go back from reading one to the unread posts search results page with the back button. Safari doesn't do that.

 

[CooperDragon]

It looks pretty good in Safari so far as well.

 

[beardie]

So, any thoughts on what I might do to make the Navigation Button more noticeable? Also, is it too "hidden" for all views, or just with mobile phones? Should I make it larger, do you think? Or just move it so it overlaps the edge of the banner to stand out?

Also... move to take a gander at... it didn't take me much more work to do the care sheet... mostly, I needed to work with rescaling the "Next Page" buttons at the bottom and making room for them on mobile phones.

https://www.beardeddragon.org/articles/caresheet_c/

What do you think?

 

[CooperDragon]

You could try lowering it a bit so it appears against the tan background next to the "Home" text, or change the color from green to red or yellow. Something that would stand out more.

The care sheet looks pretty good too. Easy to read. The photos are kind of big but it doesn't get in the way. The buttons are big enough to press easily and are easy to see. It looks the same in Safari and Mercury.

 

[beardie]

You could try lowering it a bit so it appears against the tan background next to the "Home" text, or change the color from green to red or yellow. Something that would stand out more.

Maybe color would be the best way. There isn't room next to "Home" in all the layouts, and I'd want to keep the button placement consistent for all layouts where it exists.

The care sheet looks pretty good too. Easy to read. The photos are kind of big but it doesn't get in the way. The buttons are big enough to press easily and are easy to see. It looks the same in Safari and Mercury.

I'm working on the photos. I tried something with them at first, but I need them to have slightly different HTML around them to easily manipulate them (not difficult). So, I'll give that a show. I'm figuring about 80% their current size will fit reasonably well.

 

[beardie]

Check out the mobile phone size. Do a full reload once set at that size, if using a computer browser, since I haven't put in the code to properly "transition" between sizes for what I just did yet.

I think THAT is the right way to handle the navigation menu! I also shrank the banner a tad more. And I left space to the right side of the banner (as opposed to the left where the menu drop down is), to put a search icon (typical magnifying glass icon). I'll move the search out of the navigation.

Also, I recently took a look at the Google APIs to perform searches behind the scenes and post the results myself (formatted how I like, etc., without the Google branding). I think for maybe $5 a month, I could drastically improve and customize our search feature for the site while still leveraging Google's power. But that will be a little more down the road, and not part of the general Mobile UI support.

Anyway... let me know what you think of this latest approach. I got the idea when using some apps on my phone, and thought... hey! Apps keep a bar at the top... why shouldn't I!!!

And the resizing allows me to make the icons stand out more too (not overlapped now).

 

[beardie]

Also just fixed the issue with article images being too large. They're now reduced down in size on the Phone-sized display.

 

[CooperDragon]

I like the symmetry with this layout. It's easy to see both the search button and the drop down now. At first look I wondered if they were too far in the corners near the browser buttons but haven't had any issues pressing them, so no problem there. Having the top menu bar stay static while scrolling works well too.

The ads and photos are showing up at a much better size, but the photos appear to have a large whitespace around them. The ads don't have the white space around them.

 

[beardie]

I like the symmetry with this layout. It's easy to see both the search button and the drop down now. At first look I wondered if they were too far in the corners near the browser buttons but haven't had any issues pressing them, so no problem there. Having the top menu bar stay static while scrolling works well too.

The ads and photos are showing up at a much better size, but the photos appear to have a large whitespace around them. The ads don't have the white space around them.

I'll have to double check the ads. Today, I made some big changes (found I could use more CSS and less JavaScript to do the same thing, which is more efficient), so I may have broken the image size fixes that I did. I'll look into that later. They should have had the white space removed (at least when I last checked).

 

[CooperDragon]

The ads looked fine, it was just the photos in the articles. I can check it out again later if you make some changes. Saw the same thing in both browsers. I can take screen caps if they'd be helpful to you.

 

[beardie]

Fixed. Had exactly to do with my recent changes. JavaScript would change CSS tied into a tag, but CSS defined in a file won't. It's bad to have the CSS in the HTML anyway, so good for me to pull some of that out and do it in a cleaner way.

Should be good now.

 

[CooperDragon]

Yep, that looks just right.

 

[beardie]

Things are starting to come together...

So... I decided to try something. I'm not yet sure what I think of it, though.

From a cell phone, where the content is all stacked, I felt it was getting a little long. So, I decided to default most section to being "collapsed" and adding support to expand or collapse them.

1. What do you think about that functionality in general?

2. Is it at all intuitive that you can collapse and expand section? I wouldn't want people to go to the page with their phone, and think there just wasn't must there.

3. What do you think about the default settings for what is collapsed on page load? Any suggestions for a better starting point?

Thanks!
-Alex

 

[CooperDragon]

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. It probably isn't much of an issue on a tablet or larger screen (I'm using an iPhone 4s).