Bureaucrats, content-moderator, emailconfirmed, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Administrators, threadmoderator
85,404
edits
More actions
→Portrait guidelines
No edit summary Tag: sourceedit |
Tag: sourceedit |
||
| Line 19: | Line 19: | ||
For portrait orientation, try to hit an aspect ratio of no less than .75. Once you hit an AR of less than .5 (that is, your height is more than double your width), the infobox will become unnecessarily long on desktop, and it'll become so truncated on mobile as to be unhelpful. | For portrait orientation, try to hit an aspect ratio of no less than .75. Once you hit an AR of less than .5 (that is, your height is more than double your width), the infobox will become unnecessarily long on desktop, and it'll become so truncated on mobile as to be unhelpful. | ||
=== Consequences of extreme portrait orientation === | |||
Still, sometimes you really ''can't'' do even that. If not, then you end up with something like this. | Still, sometimes you really ''can't'' do even that. If not, then you end up with something like this. | ||
[[file:HippocratesBaseMobile.jpg|thumb|left|See how little of this very much longer-than-wide image is seen on mobile? And note that it doesn't extend the whole width of the box.]] | [[file:HippocratesBaseMobile.jpg|thumb|left|See how little of this very much longer-than-wide image is seen on mobile? And note that it doesn't extend the whole width of the box.]] | ||
<div style="float:left;margin-left:10px;"> | |||
{{Infobox Demo | {{Infobox Demo | ||
|name=Hippocrates Base | |name=Hippocrates Base | ||
| Line 30: | Line 30: | ||
</div> | </div> | ||
{{clear}} | {{clear}} | ||
=== Improving portrait cropping === | |||
Luckily, even modest improvements in cropping can help a lot. In the examples below, we took the image above and got its aspect ratio back over the .5 threshhold. The image still isnt' 420px, so on mobile it doesn't extend the whole width of the display. But, on mobile, it's at least giving us a clear idea of what the base looks like. | |||
<div style="float:left;margin-left:10px;"> | <div style="float:left;margin-left:10px;"> | ||
[[file:HippocratesBaseMobileTruncated.jpg|thumb|left|Sure, it still doesn't extend the width of a 420px phone display, but truncating the image to a .64 AR makes the subject show up much better on a phone]] | [[file:HippocratesBaseMobileTruncated.jpg|thumb|left|Sure, it still doesn't extend the width of a 420px phone display, but truncating the image to a .64 AR makes the subject show up much better on a phone]] | ||
</div> | |||
<div style="float:left;margin-left:10px;"> | |||
{{Infobox Demo | {{Infobox Demo | ||
|name=Hippocrates Base | |name=Hippocrates Base | ||
| Line 37: | Line 41: | ||
|caption= This image is still below the 420px minimum, but it has a much more palatable aspect ratio of .64 | |caption= This image is still below the 420px minimum, but it has a much more palatable aspect ratio of .64 | ||
}} | }} | ||
</div> | |||
{{Clear}} | {{Clear}} | ||
=== Book and magazine covers === | === Book and magazine covers === | ||