Web Design Discussion > General Web Design Discussion

Optimization for phones

(1/2) > >>

I saw the "Summer 2021 HDX development" thread, but it didn't deal with this issue.

Many phones, probably all high-end ones, have something around 4K resolution. But they don't have super resolution to display a lot more stuff on the screen, they have it to resample from different resolution without visible artifacts. The screens are still small, and can't show very much.

Many web pages know how to adapt to this situation. Travel Mapping would be easier to use on these phones (I have a Pixel 3XL) if it did, too. When I open it, I see basically what I'd see on my 4K desktop monitor, if I used portrait orientation. On the phone, the title bar (of the page, not the browser) is extremely tiny, so the checkboxes are very hard to check, taking me ten or twenty taps before it lands in that tiny square. The route highlighting is also extremely thin, and almost impossible to select by touch.

If I manage to squeeze my fingers into the title bar, and unpinch, I can zoom in on the image. (This is with Chrome on Android.) But that isn't zooming the page within the browser window, it's zooming the entire window within the display. Now I've got two things I can scroll, depending on where I touch. If I drag the map, I'm scrolling the map, which is actually much larger than what I'm looking at. If I can get to the stuff outside the map, then I can scroll the magnified browser window within the actual screen. If it updates the display, it's loading much more data than I can see.

Needless to say, this does not make for a very user-friendly experience. I'm commencing a cross-country trip, and would like to use the phone to see where I might go to find untraveled routes while I'm driving. I'll be using my laptop to record my travels each evening, but just being able to use the mapview page more easily on the phone would have been immensely useful. (Not that I expect this would be doable before my trip is done.)

Thanks for the thoughts, these are definitely issues I'm interested in seeing addressed.  It comes back to the project's need to find someone with real web and UI design expertise to develop a new and improved front end.  Unfortunately, I'm not that person.

Neither am I. But I expect that this is mostly about identifying the type of device, and adjusting some sizes.

Am I the only one whose phone browser (Chrome on Android) completely crashes when opening mapview.php? I think it started at the beginning of August.

It's true that it is not user-friendly but it works for me somehow. The stats pages are fine but the main issue on mapview is zooming. I don't mean zooming into the map but zooming the page itself so that I can use the header option for selecting "Highlight Untraveled". Having this option as a cookie would really be a great improvement for a quick check during a travel (we might expand to railways one day where a phone can be used more easily during the travel).
Nonetheless, I realized that it is best to use the "route table" on the right for zooming. Then, I need to disable the table since it is really covering most of the screen. With a lot of patience*, I'm able to click on a line to get the popup window to find out which route that is. I can only read the first route name but not the concurrent routes lists below. It's just too small.
showroute does not have the zooming issue since there is a large pane on the left. However, it is mostly impossible to perceive the translucent line (mainly the red one). I just see the leaflet layer and need to select [None User] to get the route visible. Clicking on wps is impossible. Even perceiving the wp icons is really hard.

* I think that I'm the most impatient person on planet earth like some of you might already have realized ;)


[0] Message Index

[#] Next page

Go to full version