Improve readability of landscape on mobile devices

nita_rae

On my iPhone, and when viewing a catalog entry and specifically the items for sale in landscape mode, the small icon is leftmost in each line. Because of the layout constraints, the description then is stretched vertically, words being broken, and is difficult to read.

As a suggestion, for each listing displayed, put the icon and the description within a sub-box, with the icon above the description. That would allow the description the full width of that area, but keep the icon as the signal that a new listing line starts here.

Thank You.

Calibrick

Don't forget to upvote your item on the post list, Nita!

mfav

Nita Rae, if you have an iPhone (I don't know about Androids) you can set the iPhone to be a hotspot, then connect your computer wifi to the phone hotspot and avoid all these technical gymnastics you seem to be facing. This isn't to dismiss your ideas here, but it might make your situation a bit easier.

nita_rae

@mfav That is orthogonal to my suggestion. In my case, the hotspot capability requires that I pay the cell provider more than I do (double the monthly fee). I do have AirDrop, but not hotspot.

In any case, this is to improve the readability to those who want to browse listings on their phone (anyone, not just me). For anyone who is browsing/buying via a mobile device, this suggestion is to help make the listings easier to read.

mfav

@nita_rae Re: the cell company, okay if you say so, but I don't know how the company can distinguish X mb of data going to the phone is any different than the same amount of data passing through the phone. Maybe they have their ways. Anyway, just a thought, trying to be helpful.

I applaud the effort to improve the layout in the phone view. Thing number one would be to not set text centered. Number two is probably to get rid of columns. Or most columns. I suspect the layout was not conceived with having 20 words of description from the seller included. These dynamic layouts get trickier with every release of a phone with a different screen size. From a designer view, it makes me misty-eyed for the days when e-v-e-r-y-t-h-i-n-g was 640x480.

Maybe I will take a stab at the layout just to see the possibilities.

mfav

@nita_rae http://v4ei.com/nita_rae/

The source code for the original page has the results in a table. That isn't going to translate well to a narrow phone layout. I put everything into a CSS grid. So this is doable, but fraught with issues. Without writing a bunch of logic to go along with the CSS…well…this sample is quite far from perfect. I didn't spend much time on the full desktop-width page view…a whole 'nother set of problems with that.

If you have a phone, you should be able to look at the results in either portrait or landscape mode and it should dynamically adjust. If somebody wants to play around with it they can view on the desktop in either Safari or Firefox and go into…

Safari: in preferences/advanced check the Show Develop menu item. Then from Develop menu select Enter Responsive Design Mode.

Firefox: from the Tools menu, select Browser Tools > Responsive Design Mode

…then you should be able to grab the side/bottom of the window and drag it around and watch it resize and reconfigure.

The page is "optimized" (he said euphemistically) for widths of 374, 415, and 736 pixel widths. Should hold up down to 320 pixels thereabouts.

I don't know if Chrome or Edge offer similar functions.

Somewhere between a day and a week to code this up for real.

Lawrence

Could you give an example item which highlights the issue described?

nita_rae

@Lawrence A couple of examples are BOID 838854 and BOID 121080.

Also ((possible) 781808 and 848246.

nita_rae

For clarity, the iPhone I’m using is an A2275, which has a 1334 X 750 native resolution.

Lawrence

Would you be able to post a screenshot of that? It looks not too bad for me

mfav

Here's one. It would be further helpful if the "tan" background ran into the second "line" of the listing. As is, it can be confusing whether the second line of info belongs to what's above or what's below.

nita_rae

I have a couple from 838854 (set 8542-1), For unknown reasons, I do not seem to be able to post them here. I will email them via the hello address.

nita_rae

@mfav Part of the problem, perhaps the whole problem, is coming from the public comments. When I provide a full maximum description of a used set, it is constrained horizontally, and strung out vertically. Because of that, much white space is created (left and right of the narrow vertical public comments). The entire point of my suggestion is to try to find some way (not necessarily my way) to make that public comment more readable, and less vertically strung out.

Over at BL, there are two public comments (the short that everyone sees, and the extended that requires a click thru, and is frequently ignored). I’m glad that there is only one here, but how it is being displayed feels problematic. It’s all there, but (to dredge up an old meme) I am reminded of trying to read a program flowchart in an elevator shaft.

HTH

mfav

@nita_rae I completely understand your issue; I think it extends beyond your one specific request. I want the cognitive immediacy you request for the description to extend to the listing as a whole, regardless of screen orientation.