Apr 2015
1 / 12
Apr 2015
Jul 2015
noxfox
Apr '15
2

Hi there!
As you may know, the Tapastic App was recently improved, which is absolutely awesome. However, the series banners don't display on it as they display on the website: they are cropped from the middle, which can lead to very awkward-looking stuff that no creator would want:

This is how the banner of Singmire Haze is supposed to look:

Tapastic-Banner-cal.jpg1280x360 113 KB

This his how it displays on Nexus 5 (on left) and how it displays on Iphone 6 (on right)

Nexus-5.jpg612x1088 108 KB
iphone6.jpg612x1086 112 KB

...Not as sexy, eh.
So I'd like to make a template to help creators make banners that would look good both on website and app, but in way to determine the "safe zones" I would very much love to get some screenshots taken with different mobile devices (and preferably screenshots of Singmire Haze8 so to ease the overlay --you don't have to read it of course xD)

Special thanks to Hobbes and Michael Son for providing the above screenshots!

  • created

    Apr '15

  • last reply

    Jul '15
  • 11

    replies

  • 5.0k

    views

  • 7

    users

  • 21

    likes

  • 6

    links

Doubtcent
Apr '15

If you scroll downward, the banner shrinks down to it's normal size. There's really no need to change your banner.

daronakiraProduct Guy
Apr '15
1

Cool, way to be proactive! This should be helpful for creators our there who want to put their best foot forward on both the web and mobile apps.

Obviously there's a lot we're still working on (especially apps-wise), so things like being able to edit your series banner image/position, profile pic, profile banner image/position, etc. haven't made it in yet. Those should give creators and readers a much better degree of control and customization in the app once they're baked in. However, as you can probably guess, there are a bunch of important bits we're working on first... things like improving the main feed, adding an activity/notification tab, and other "big" items. For now, your approach of trying to make something that looks pretty good on web AND in the app is a good way to go, as the customization features are probably a little ways off.

Couple quick details to help out:

  • If you don't have a banner set for your series, the series thumbnail is used as the default background (stretched and tinted), just as on the current Profile pages.

    • As @vincentprendick mentioned, on iOS the background zooms/stretches as you scroll up or down. On Android, however, the structure is a bit different and the banner is always fixed/static as it scrolls with the rest of the page. Eventually this behavior might be consistent across platforms, but there will always be some differences between Android and iOS depending on how we are able to build various elements (tabs, scrolling, swiping, bouncing, etc.). In the future, pulling down (i.e. trying to scroll up too far) could hide the elements in front of the banner (title, thumbnail, buttons) to expose the full artwork, but even then cropping/zooming may still be an issue.

    • On the web, the center 940px is the "safe" zone, as it sits directly above the column of comics content below:

      coverbanner.png802x548 370 KB

For banners with a pattern, collage, or other artwork this is less important, but if you have text, important details, or if the image is balanced in a particular way (for example, with a title/logo on one side and a character bust or cast on the other), aligning things based on those left/right margins may help things look better. Of course, on very large screens or window sizes the banners zoom and stretch out, but it's a good starting point and generally works better than having important bits at the extreme left or right edges. Also keep in mind that the top and bottom edges will be the first to get cropped when the banner starts to zoom/stretch.

  • The use and style of series banners is completely up to the creator/owner of the comic, of course, but was originally intended primarily as a background image (for branding/personalization/theme/color scheme), and less as a billboard for critical text or other info. However, your example (with short intro and update schedule) is really very nice, so there are obviously ways to accomplish both. Unfortunately, the fact that the aspect ratio of the mobile series page is different (and that it's really intended as a background, especially on mobile) will continue to introduce challenges and the need for compromise, until we're able to let you set or adjust the mobile version independently. Basically, unless the banner is very simple it probably won't look "perfect" on both platforms at the same time.

  • Ideally, in the future you'll be able to at least move/scale the banner to set the default view... such that even using your current web banner, you could end up with something like this:

    somedayhaze.png720x1280 499 KB

Still not perfect, but pretty good (also just a quick, hacked mockup without any tweaks or adjustments : )

  • The huge variety of device sizes and pixel densities (particularly on Android) further complicate things in terms of trying to get a pixel-perfect look across screens... but based on the current image ratio, zooming/cropping, and base size of the banner, here's a rough guideline/template for what will show up on web vs. mobile:
    bannertemplate.jpg1280x480 132 KB

This works really well for banners like Satan and Me10 and Geomagnetic6, decently well for those like Mary Death6and Les Normaux4... and unfortunately not particularly well at all for banners with your layout, despite looking good on the web.

Hope that helps!

noxfox
Apr '15

Wow, this is just perfect! Thank you very much for the extensive explanation, it's very welcome, and thank you for the template! That'll really come in handy to improve the design!

daronakiraProduct Guy
Apr '15

Sure thing. I'm sorry we don't have more control and customization options at the moment... so you'll have to get a bit creative given the constraints.

Being able to move/crop the banner on mobile (or even upload a separate image) will certainly be nice, but like I said not exactly sure how soon we'll be able to get to that feature!

noxfox
Apr '15

I would say it's already nice to have those banners and that there are features that are more expected than the customization, so it's not a problem having to wait for it^^ I think the possibility to unsubscribe from discussion notifications and a revamping of the NSFW filter are among those that are being waited for most, for practical reasons =)

10 days later
PotooGryphonFriendly Neighborhood Gryphon Rider
Apr '15

This thread is super amazingly helpful. After reading it, I revamped my banner and I think it's looking better on both the PC site and the app. Thanks guys XD

banner 6.jpg1280x360 542 KB

2 months later
15 days later
noxfox
Jul '15

True! I switched the section =D