Responsive Changes - Feedback

[robcan0630]

Hey guys, I've made a tweak to the deck modal that opens when you click on a deck on mobile devices. All of the changes planned are not completed, but I think I've got a good start on mobile usability. See screenshots below for example. This should work for the search, collections, wish lists, and trade lists. Please let me know if you have any issues. There is one manual step in order to activate this. I plan to eliminate that in the future, but one thing at a time. What you'll need to do when you first load the list of decks (be it search, collection, etc.) is to click the grid icon at the top of the list and change it to the small grid (represented by 4 squares). Once that's done, you shouldn't have to do it again until you leave the page. If you only change search terms from the search page, it should retain the setting. Screenshots below show the grid you need to click on, etc. Please leave some feedback so I know if I've broken anything or if additional changes are needed before I move on. If you leave feedback, please also let me know what device you tried it with (make and model so I can determine screen size). Also note that if you click through the modal to the full detail page, it is better than it was, but it's still not completed as far as mobile experience. Thanks!

Edit: Removed the image showing the grid selection as I should have it to where it forces the decks to stack single file when visiting on a mobile device (anything with less than 768 pixels horizontally). See my next post for details, but you may have to clear browser cache if it's not working until the updates are propagated.

Another edit: Additional tweaks made so that by default on mobile, it will load 2 decks wide. If you select the left grid, it will show a larger deck image (1 wide), while picking either middle grid (default) or right grid will show 2 cards wide on mobile.

After you click the grid with 4 squares, you should see the decks listed in single file now.

Example showing how the deck details are now below the deck rather than beside so you don't have to side scroll on mobile.

Showing the rest of the deck detail section.

[Harvonsgard]

Awesome improvement. Works pretty good with Safari. One minor thing is that if you use the wide screen it overlaps the decks in the preview.

[robcan0630]

Can you tell me if you are on search, discover, collection, tradelist, or wishlist? Also, did you just turn the phone in landscape mode for that to happen? I’ve made some additional tweaks just in the last hour or so that may end up resolving what you are seeing once the cache gets updated.

[Harvonsgard]

It's the main page after clicking on my profile. So it is the preview of collection, wishlist and tradelist.
Yup, happend after turning to phone. When browsing within each list everything is fine.

[robcan0630]

Got it, I see where you are now. I haven’t made any changes to that part yet. I will add it to my list to make sure I don’t forget to take a look at it. Thanks!

[robcan0630]

It's the main page after clicking on my profile. So it is the preview of collection, wishlist and tradelist.
Yup, happend after turning to phone. When browsing within each list everything is fine.

This should now be corrected. Also tweaked the “See more” button so that it wraps to its own line on mobile devices so it doesn’t get cut off.

[Harvonsgard]

Yup. Fixed and works great.

Just one more thought. It kinda doesn't make sense for me to be limited to two decks in one row.
Vertical mode = 2 decks in a row tilt the display to landscape mode = still 2 decks just bigger
I'm on a normal iPhone 8, so not a huge display size at all, compared to other smartphones, but i feel like three or four would be better. My collection isn't big but even for me it takes some time to scroll through around 190 decks with only 2 in a row. Plus I love browsing in the landscape mode but in the current layout/dimesions the vertical mode makes more sense/is more usable imo.

[robcan0630]

Yup. Fixed and works great.

Just one more thought. It kinda doesn't make sense for me to be limited to two decks in one row.
Vertical mode = 2 decks in a row tilt the display to landscape mode = still 2 decks just bigger
I'm on a normal iPhone 8, so not a huge display size at all, compared to other smartphones, but i feel like three or four would be better. My collection isn't big but even for me it takes some time to scroll through around 190 decks with only 2 in a row. Plus I love browsing in the landscape mode but in the current layout/dimesions the vertical mode makes more sense/is more usable imo.

While I agree with you about it being nice to maybe squeeze in another deck or two in landscape,that is not something in my current plans. I do appreciate the feedback though, and if you run across other things, please let me know. I am just trying to get some things implemented that will make the site much more mobile-friendly than it is in its current state (well, recently previous state now maybe?), but I likely won’t be able to do everything in the current architecture. I do hope you are enjoying the changes made so far.

[Harvonsgard]

I do hope you are enjoying the changes made so far.

Most definitely. Before it was literally unusable on mobile. Now it is so, I'd say 100% improvement .

[robcan0630]

Yup. Fixed and works great.

Just one more thought. It kinda doesn't make sense for me to be limited to two decks in one row.
Vertical mode = 2 decks in a row tilt the display to landscape mode = still 2 decks just bigger
I'm on a normal iPhone 8, so not a huge display size at all, compared to other smartphones, but i feel like three or four would be better. My collection isn't big but even for me it takes some time to scroll through around 190 decks with only 2 in a row. Plus I love browsing in the landscape mode but in the current layout/dimesions the vertical mode makes more sense/is more usable imo.

While I agree with you about it being nice to maybe squeeze in another deck or two in landscape,that is not something in my current plans. I do appreciate the feedback though, and if you run across other things, please let me know. I am just trying to get some things implemented that will make the site much more mobile-friendly than it is in its current state (well, recently previous state now maybe?), but I likely won’t be able to do everything in the current architecture. I do hope you are enjoying the changes made so far.

Well, it turns out I was able to do something with this after all. When you load the search / discover, collection, wishlist, or tradelist pages on mobile, it will default to two decks wide. If you click the "grid" icon at the top of the list, there are three options now (same as on desktop). The left grid will show 1 deck wide, the middle grid (default will show 2 decks wide, and the right grid will now display 4 decks wide on mobile. Please give it a try and let me know what you think. I have a larger phone (iPhone XS Max) and the 4 is pretty good, especially on searches. I'm going to re-work the "share" buttons that show up on the collection, wishlist, and tradelist pages to span the top of the list rather than the side so that the deck thumbnails are as large on those pages as they are for search / discover. I'll update again when that part is complete.

[robcan0630]

I'm going to re-work the "share" buttons that show up on the collection, wishlist, and tradelist pages to span the top of the list rather than the side so that the deck thumbnails are as large on those pages as they are for search / discover. I'll update again when that part is complete.

Okay, the collection, wishlist, and tradelist pages will now show the "share" buttons horizontally across the top on all devices so that they do not detract from the size of the deck images.
I've also tweaked the "Menu" button that shows in the top-right corner for mobile devices on pages with a transparent header to make the button easier to see.