RFC: Feature request: responsive design

[perezandres]

Banners module is still rendering HTML tables, making it almost unusable on responsive web design. At least, it should be render a div based HTML, with enough identifiers and classes so anyone can use CSS to style banners appeareance. A more flexible approach, maybe not so hard to code, would be to make the Banners module templatable. With a simple HTML token-based template (they're just two tokens: image src & link) and overriding most of the settings from Vendors module, we'd have a very easy way of designing responsive templates.

[valadas]

I have changed the tile to RFC (Request for comments) to gather people opinions on how this should be done.

Context

This module was built in a time that had various industry standard banner sizes, see https://support.google.com/adsense/answer/6002621?hl=en

The problem

We now live in a worlds that needs responsiveness and having fixed banner sizes no longer makes sense and could break when used in a responsive skin.

Discussions

I think it is obvious we need to replace tables for divs and have classes to be able to target them easily, this would be the minimal viable solution, but do we need more? Do we just want to keep the existing banner sizes and just add css like max-width:100% in the rendered output? Do we need to modify the uploader to just accept any size instead of fixed sizes? Do we need to make the module templateable to adapt to various needs? Any other ideas?

[perezandres]

Banners uploading is ok, as it actually lets you upload any image size. The rest of features of vendors module are ok as long as they're working on DNN 9. The main issue is about the banners module itself: at least we should get rid of tables and have some CSS styleable divs. But, if it's not too complicated, module should let you choose a template file. This template would contain a repeater, for each banner that will be rendered, with the usual three sections: header, detail and footer. I think that we only need a couple of tokens for each banner (image URL and link URL). These (I hope simple) improvements would give a new youngness to this module.

[OllyHodgson]

(I don't actually use this module right now, but I know of a few use cases)

I really like the idea of making the module templatable - Razor, Handlebars or Liquid have all been used successfully in other DNN modules.

For backwards compatibility, I'd make the default template use basically the same HTML tables as the present module. I know using table elements for presentation/layout isn't ideal, but assuming they have relevant class attributes they can be styled however you like in a modern browser (you could even argue that multiple elements gives you even more flexibility). Additionally, you could add role="presentation" to the table elements, working around any accessibility issues.

[OllyHodgson]

I think that we only need a couple of tokens for each banner (image URL and link URL).

You'd want some sort of alt text for the image, too.

[OllyHodgson]

If you were going to get really responsive, you could allow the user to (optionally) upload a banner at multiple resolutions, and use the srcset attribute on the <img> element to render a different image at different resolutions.

You could go even further and use the <picture> element, allowing for different shaped banners depending on screen shape/size/resolution/orientation.