Review of new CN community banner template
Open, MediumPublic
Actions

Assigned To

None

Authored By

	• Jseddon
	Feb 28 2017, 12:59 AM

Description

Whilst trying to improve our campaign processes and usage, one of the biggest needs I identified was the need for updated community banners.

For the this first stage was to achieve the following aim:

"Responsive and compatible for mobile viewing"

This is vital given the trend towards mobile traffic and the especially important to our editors and readers in countries with high mobile usage.

The most recent example of a banner showing the flaws with many of the current templates we use is the following:

https://meta.wikimedia.org/w/index.php?title=Communications_committee/November_2016_survey/hi&banner=WikiFranca_MC17&uselang=en&force=1

The new template I would like to encourage use of is:

https://meta.wikimedia.org/wiki/Special:CentralNoticeBanners/edit/Community_banner_template

Notable changes:

Responsive and compatible for mobile
New close button
CSS gradient replaces raster/unresponsive image gradient background

Event Timeline

• Jseddon created this task.Feb 28 2017, 12:59 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 28 2017, 12:59 AM

• Jseddon moved this task from Unsorted to Q1-2017 on the Wikimedia-CentralNotice-Administration board.Feb 28 2017, 12:59 AM

• Jseddon edited projects, added Wikimedia-CentralNotice-Administration (Q1-2017); removed Wikimedia-CentralNotice-Administration.

• Jseddon updated the task description. (Show Details)

I would appreciate something smaller.

Banner looks clean and great, but if it could be made a bit smaller as Nemo suggested that won't hurt at all. Thanks Joseph for doing this. Regards.

Thank you Joseph. Regarding WikiFranca banners, I copy the code from another banner 5 or 6 years ago, and keep using the same code over and over.
And it's true, it displeases me to not be able to reach mobile devices. I will now use the code you propose as soon as we reach consensus here.
Thank you again.

@Benoit_Rochon - Yeah it's definitely not a critique of yourself directly. You were just simply unfortunate to be the most recently created campaign :)

@Nemo_bis & @MarcoAurelio - I've trimmed off about 16px in height though 10px of that was from the logo which obviously can change from banner to banner and remains at the discretion of the CentralNotice admin creating the banner. I've also reduced the banner logo margins to 0.5em in the logo but any smaller and it begins to look too crowded. This smaller form factor works fine for logos without text but realistically most community banners will continue to occupy a range between 60-80px in height.

Sure, I didn't thought it was a critique, don't worry ! It's improvement. I changed WikiFranca's banner. Thank you very much for flagging this.

• Jseddon added a project: User-JSeddon.Feb 28 2017, 6:56 PM

@Jseddon I gave the code another quick review and it looks good to me. One minor thing: the logo position needs tweaking in RtL languages e.g. https://he.wikipedia.org/wiki/?banner=Community_banner_template

Samat subscribed.Mar 1 2017, 12:11 PM

In T159201#3062069, @Pcoombe wrote:

@Jseddon I gave the code another quick review and it looks good to me. One minor thing: the logo position needs tweaking in RtL languages e.g. https://he.wikipedia.org/wiki/?banner=Community_banner_template

Indded, the banner doesn't work properly in RTL. Can we try and fix it?

MarcoAurelio edited projects, added Wikimedia-CentralNotice-Administration; removed Wikimedia-CentralNotice-Administration (Q1-2017).May 2 2017, 2:41 PM

All the code that has been smoothed and improved on in conjuction with my work with Wiki Loves Monuments has been merged into this new banner:

https://meta.wikimedia.org/wiki/Special:CentralNoticeBanners/Edit/Community_banner_templatev2

Changelog: