1

Basically what the title says.

I know that anyone can do what they want, and I also know that the embedded content can be integrated in a responsive way, thus maintaining its original proportion. However, as everything related to the sizes, I'm pretty sure there must be some kind of optimal size for each device.

For example, on my 2560x1440 monitor, the videos look excessively large if I'm on my desk, and the maps require a lot of zoom to focus on where I'm looking.

Another common case is that of many designs that take the entire width of the page for a map, but with a reduced height, providing a lot of information on the x axis, and very little on the y axis, which leads me to think that simple use of the laws of Hicks and Fitts, there must necessarily be an optimal measure. However, I could not find anything conclusive, which motivates my question

Just in case, I'm interested on any kind o embedded content, but mainly on maps

  • It's not a solution to your question but you should be thinking and working in real dimensions. Most of your issues would be easy to define and solve if you work in physical dimensions of the display - dimensions in inches of the interface. Density Pixels is the popular unit used to convert pixels to inches. Here's DP explained in material design material.io/design/layout/… – moot Aug 7 '18 at 1:36
  • Thank you @moot, but I don't have any issues per se, I'm just looking for authoritative answers on the subject. Also, working on physical dimensions just like that would lead to the exact issue I already perceive on many pages – Devin Aug 7 '18 at 17:23
  • I know it's weird but it really is the way to define things. People don't use it because they don't get it but it'll be the future standard. The difference between the size of a 1000 pixel-wide component on your phone versus on your desktop is in its display size, not pixel size. On desktop, 1000 pixels could be 7 inches and on a phone it's 2. !000 pixels doesn't tell anybody anything. Two inches on phones and 7 inches on desktop are the real dimensions. Density pixels are how you measure inches on screens. – moot Aug 7 '18 at 21:06
0

Depends really, (I'll start with maps) if you want to show the user a location (e.g. you office location), then how much of the area you show that is around your location is not as important. Unless, of course, your business is brick and mortar, and so having users find you is more important. But then again you would make it easier for users to get directions, not see more of the area around your current location.

Now what if your app uses embedded maps as a core part of it's service (e.g. a tourist app that shows a bunch of points of interest around the user), then showing the area around the user is more important. Having the embedded map take more of a square shape. And if that looks jarring, then keep the rectangular shape, zoom out, and make the icons (for restaurants, hotels, museums, etc.) bigger and easier to click on.

Videos on the other hand are a slightly different ball game. When a video is created it has a set aspect ratio, trying to break that aspect ratio can proof disastrous, as things will obviously just look weird. On the web, for example, black bars are added whenever the video isn't fitting right in it's container. You can calculate this as well and use the extra real estate for controls, subtitles, video title, etc.

| improve this answer | |
  • Thank you, good insight, but I'm looking for authority answers and research. btw, Youtube videos respond to browser resizing, not sure if this is what you mean – Devin Aug 7 '18 at 17:20
0

Nothing definite but I know from previous work that users will start complaining below 600px X 600px for a web application. For mobile, we will need to go full width preferable with a square aspect ratio.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.