I currently have a web app that works quite well (if I may say so) on both mobile and desktop via the use of media-queries and by keeping things simple. The UI looks like this
┌────────────────┐ ┌────────────────────────────────────────────────────┐
│ │ │ │
│ title │ │ title │
│ │ │ │
│ ┌────────┐ │ │ ┌─────────────────────┐ │
│ └────────┘ │ │ └─────────────────────┘ │
│ │ │ │
│┌──────────────┐│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
││ ││ │ │ │ │ │ │ │ │
││ ││ │ │ │ │ │ │ │ │
││ image ││ │ │ image │ │ image │ │ image │ │
││ ││ │ │ │ │ │ │ │ │
││ ││ │ │ │ │ │ │ │ │
└┴──────────────┴┘ └─┴──────────────┴─┴──────────────┴─┴──────────────┴─┘
You search in input field at the top, and columns of images appear below. Now, some of the images have locations attached to them, so I would like to (somehow) show a map with points for the locations of those images, points that, perhaps, get highlighted when the respective image is in the viewport. It is relatively easy to pull off on a desktop but I am struggling with the mobile version (without having to actually create completely separate layouts).
┌────────────────┐ ┌────────────────────────────────────────────────────┐
│ │ │ │
│ │ │ title │
│ │ │ │
│ │ │ ┌─────────────────────┐ │
│ │ │ └─────────────────────┘ │
│ │ │ │
│ ? │ │ ┌──────────────┐ ┌────────■──────────▪───────■───┐ │
│ │ │ │ │ │ ■ ▪▪ ■■ │ │
│ │ │ │ │ │ ■■■■■ ▪▪ ■■ │ │
│ │ │ │ image │ ■■■■■■ map ■■■■■■ │ │
│ │ │ │ │ │ ■ │ │
│ │ │ │ │ │ ▪▪▪ ■ │ │
└────────────────┘ └─┴──────────────┴─┴────────────▪────────────────■─┴─┘
Part of the issue, of course, is from the fact that a map is usually of fixed dimensions without any overflow. So, all of it fits in the available viewport with no scrollbars. The image list, on the other hand, is a column that is scrollable to show more images. One option I am thinking of is a tab view
┌───────┬────────┐
│ images│ map │
│ └────────┤
│ ┌────────┐ │
│ └────────┘ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
└────────────────┘
Once the results appear, the input field should "disappear" or shrink to a little tab, and the image list would appear like in the current design. Clicking on the map tab would show the locations. The problem is, of course, that once you switch to the map view, you have no idea what images you are looking at, and when you are in the image view, you have no idea what its location is.
So, another option is to show the map of the locations by default, and have the images lurking in the little dog-ear tab on the upper-left. Clicking on that would open a drawer with images in a list view with the map underneath.
┌────────────────┐ ┌────────────────┐
│ ┌────────┐ │ │ ┌────────┐ │
│ └────────┘ │ │ └────────┘ │
├───┐ │ ├─────────────┐ │
│ ◎◎│ ■■ │ ├───────────┐ ├──┤
├───┘ ▪▪▪ ■ │ │ │ │◎◎│
│ ▪▪ ■■ │ │ image │ ├──┤
│ ▪ ■ │ │ │ │ │
│ ■ ▪▪ ▪▪▪▪▪ │ │ │▪▪▪
▪▪▪■▪▪▪▪▪ ▪▪ │ ├───────────┘ │ │
│ ■■ ▪ │ ├───────────┐ │ │
│ ■■■■■■ ▪▪ │ │ │ │ │
│ ▪▪ │ │ image │ │ │
└────────────────┘ └───────────┴─┴──┘
Of course, it goes without saying that I am hoping to stuff too much in a mobile view making it cluttered and ugly. If that is definitely an irredeemable case then perhaps I should just think of showing a map view only on the desktop.
Any and all ideas welcome. For what its worth, the current (image-only) app can be viewed at https://ocellus.info/
