[ARCHIVED] Page Banners - HTML or PNG file?

[kylecage]

I am working on some training courses and am using banner images for each individual item in a module (i.e. Pages, Discussions, Quizzes, etc.). I am wondering if the best approach for adding banners to a template course that might be used by many instructors is with image files or should this be something done in the HTML editor? One good thing about doing it in the HTML is that then the banner text can be editable by the user through the RCE. The problem with that is that the user may try to add too much text and make the banner look weird. Also, a benefit of using image files is that it's easier for individuals to customize their banners as most people are more familiar with using photo editing software than they are with manipulating HTML code. Thoughts? Here is an example of the banner image file that I'm using. I edit the text in Photoshop and export the PNG files. 

[Stef_retired]

kylecage‌, this is an interesting question. Your image didn't come through; could you provide it? Also, are you including very descriptive alt-text along with your PNG file? My immediate thoughts went to accessibility for screen readers.

[kylecage]

Forgot to add the image. It's there now. My thinking on accessibility is that the text in the PNG file is just the title of the page so with the proper alt-text, the screenreader would basically just read the same title twice. 

[Su_UT]

I recently read that not every image needs to be described, like Banners or pure decorative elements. 

Reference: Accessibility testing - W3C Wiki: The spirit of the law.

Unfortunately, many people reading such guidance misunderstand what a genuine text equivalent for a spacer and decorative elements should be, and produce markup like this:

<img alt="fancy border" src="fancy-border.gif" border="0">

In fact, since these images convey no new information and have no functionality, the right text equivalent for those images would be an empty string (alt=""), which causes the screenreader to just skip over the alt attribute and not read it out. It is very annoying for a screenreader user to have to listen to text such as "fancy border" read out over and over again, when it does not provide them with any useful information.

[Stef_retired]

That certainly makes sense,  @Su_UT ‌! I was thinking more along the lines of making sure that the alt text isn't something obscure like 040506004.jpg.

[Su_UT]

I totally agree, stefaniesanders.  Appropriate alt text is definitely a must.  

I am sharing “The spirit of the law” info, because based on the previous accessibility info I had (e.g., Accessibility within Canvas), I always thought that every image has to have alt text provided. To me, it is a very helpful finding that an empty string is ok, when appropriate, so that the screenreader won’t have to “read the same title twice”, as kylecage mentioned.

Here is another relevant resource: Provide a text alternative for images where appropriate.

(Sorry if this is off topic...) 

[tswann2]

Are you expecting faculty to edit a required heading or is this just an optional resource?  I disagree with your comment that most folks are comfortable with graphic editing software. I think most are not. Our faculty tend to add no graphic if it requires editing.  It would look so much better if there was a way to suppress the page title. Alt tag takes care of screen readers so way are we stuck with the title? Otherwise I think you should use the graphic. The days of coding by non-technical folks should be past unless there were a way to make it a fill in the blank.  It's a nice design.

[kona]

Our faculty tend to add no graphic if it requires editing.

This is our experience as well.

[kylecage]

I think the idea is that the page banners would match the page titles, so if Faculty are using this template as is, they wouldn't need to change the text in the banners. My thinking is that you get a better quality image if you use Photoshop to export the page banners as PNG files. What I meant is that I feel like more faculty are probably familiar with using SOME kind of photo editing software, not necessarily Photoshop, to create their own course banners from scratch as opposed to how many would be familiar with manipulating HTML code. 

[Su_UT]

I agree. I provide page banners as PNG files in my course template for online instructors.  

[kylecage]

Hi Jian,

Do you have a screenshot you could share? I'd love to see what you're using.

KC

[Su_UT]

kylecage, here is one example of my banners.

Su

[kylecage]

Hi Jian,

Is there a way to make these banner image files responsive somehow? Mine are not - see screencast attached.

This video is currently being processed. Please try again in a few minutes.

[kmeeusen]

Hi kylecage

Yes, yes there is. Open the HTML Editor, and change the width of the image from pixels to percentages. For example, instead of "width=600px", change to "width=100%". Then that banner will size to 100% of the available screen size.

I hope this helps,

Kelley

[kylecage]

Awesome! Thanks, Kelley! Sometimes the px to % thing evades my memory. I also realized this morning that the banner images display fine in the Canvas app. See screenshot. 

[kmeeusen]

Hi kylecage

Per accessibility standards, you should never use an image to convey information. Screen-reader tech will just identify it as an image, and not be able to read the text within the image. For a vision disabled person, a picture is not worth a thousand words, only the words are.

 @Su_UT   is correct - add ALT Text with the equivalent info, or use HTML.

I use a branded banners for all of our school's profession development courses, and built them using HTML, then just copy and revise as appropriate wherever needed.

KLM

[kylecage]

Hi Kelley,

We aren't using the images to convey information. They are simply page banners to add some pizazz, the alt text is the same as the page title. 

Do you have an example of the branded banner(s) that you created? That would be awesome. 

Kyle

[kmeeusen]

Kyle:

Don't blame me, our PR department determined the look, I just converted to HTML..........

HTML for Front Page Banner:

<table style="background-color: #502d7f; border-color: #502d7f; width: 100%; height: 220px;" cellspacing="4" cellpadding="4">
<tbody>
<tr style="text-align: center;">
<td style="width: 30%; padding: 10px;"><img src="https://cptc.instructure.com/courses/1416280/files/75356490/download" alt="cptc-logo-white.png" width="199" height="85" data-api-endpoint="https://cptc.instructure.com/api/v1/courses/1416280/files/75356490" data-api-returntype="File" /></td>
<td style="width: 40%; padding: 10px;">
<p style="text-align: center;"><span style="font-size: 24pt; color: #bed600;">CPTC Professional Development Series</span></p>
<p> </p>
<p style="text-align: center;"><span style="font-size: 24pt; color: #bed600;">Accessibility 101: Principles of Inclusive Design<br /></span></p>
</td>
<td style="width: 30%; padding: 10px;"><img src="https://cptc.instructure.com/courses/1416280/files/75356489/download" alt="Disability_Icon_grid.png" data-api-endpoint="https://cptc.instructure.com/api/v1/courses/1416280/files/75356489" data-api-returntype="File" /></td>
</tr>
</tbody>
</table>

Oops, missed a couple lines of code on the first copy/paste.............. Good now.

Kelley

[Su_UT]

kylecage, 

Check out the set of banners in this course: Designing and Teaching for Impact in Online Courses.

The course packet is downloadable through Canvas Commons. (Search for "Designing and Teaching for Impact in Online Courses")

Su

[kmeeusen]

Now those are nice,  @Su_UT 

You have a much better PR department, or perhaps they are less hands-on!

KLM

[Su_UT]

 @kmeeusen , I didn't make those. Found them at (HE) Designing and Teaching for Impact in Online Courses - Canvas Network | Free online courses | MO.... I just saved them. They look really nice. 

Su

[kmeeusen]

They really are nice! And any ID worth his salt is too busy to be above taking advantage of ready-made content.

I've got to work up some better examples, and visit our PR department for some negotiating.

Kelley

[snugent]

I created a page template for instructors. The header is linear table (just one column with three rows). The first row holds the college's logo with alt text. The second and third rows are editable text that instructors can change the text easily without switching to HTML view. I edited the code so the background colors display our official colors and text color is adjusted for optional contrast. Yea it isn't exactly how you should use tables but since the table is linear with no additional columns it should accessible. 

[kmeeusen]

Great use of tables, snugent !

Since it is only one column, it is also accessible.

Kelley

[rhudy]

Thank you for sharing, snugent! That banner has a nice, clean look and I'm now stealing your idea and running - who knows how many I'll create before I land on the "perfect" one? I'm very new to Canvas, so it's great to see from you how simple it is to create something like this in the html editor that faculty can edit easily with just the rich text editor. Especially with the single column, this seems about as indestructible as any templated banner I might be able to create.

[jwelchans]

Hello Ellen and snugent‌ - I love this 1 column table idea you've shared.

Would it be possible to get a screenshot of the HTML for the table?  I played around with it myself but didn't get the same nice results that you have. (Probably b/c I don't know what I'm doing.)

My main two questions were:

How do you get the cells to hold their formatting (text size, background color, text color) when the text is editted?

How do you get the background color to fill the full cell?

Thank you x3!!!

[snugent]

Here is the HTML code. The table rows have an embedded style attached. 

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="background-color: #fff; font-family: 'Avenir LT Std 45 Book', Arial, Calibri;">
<td><img src="https://lakeland.instructure.com/courses/790163/files/58610248/preview" alt="lakeland-logo.png" data-api-endpoint="https://lakeland.instructure.com/api/v1/courses/790163/files/58610248" data-api-returntype="File" /></td>
</tr>
<tr style="background-color: #000; font-family: 'Avenir LT Std 45 Book', Arial, Calibri; color: #fff; text-align: right; font-weight: bold; font-size: medium;">
<td>SEMESTER YEAR</td>
</tr>
<tr style="background-color: #be2227; font-family: 'Avenir LT Std 45 Book', Arial, Calibri; color: #fff; text-align: right; font-weight: bold; font-size: medium;">
<td>TEM-101-123</td>
</tr>
</tbody>
</table>‍‍‍‍‍‍‍‍‍‍‍‍‍

[jwelchans]

Success!  Thank you!

[aaron_bahmer]

These look very nice, but accessibility guidelines suggest to *not* use a table for layout purposes. Try building just using <div> tags instead. Here's some info about the accessibility issue: WebAIM: Creating Accessible Tables - Layout Tables

[jwelchans]

Thanks for passing on the suggestion Aaron.

The intent is to build a template that can be shared with anyone, that will allow for text editing while retaining some branding look & feel.  >90% of our audience, if I would mention <div> tags, would walk out the door. 

The only info going into this table would be the course name, instructor name or something along those lines - pieces of information that are readily accessible at other places on the page.

Thanks.

[aaron_bahmer]

Jake, I have some of those employees at my school as well.

In either instance, creating the table or div version of this, I assume you are including place-holder text. As long as users are careful replacing that text, they will easily edit the contents without disturbing the divs, or even knowing they are there. Good luck!

[rniolon]

I'm a faculty who is not scared of div tags... However, I find html editing in Canvas to be unexpectedly frustrating sometimes.

Last semester, I tried several ways of showing a background image with text on top, including using a div, and the process was just borked no matter how I tried to do it. I tried again this semester and found that if you use background-image: url() and insert a url ~without~ single quotes, Canvas will add the single quotes around the url for you. After saving the page, the image will show up just as it should. However... if you go back to edit the html and save the page again, Canvas will strip out the entire background-image: url() code (without warning you).

I know I ought to use divs for for this sort of thing... but glitches like this do not make it easy.

Tables on the other hand... just work as you expect them to.

[rniolon]

1) I like the code banners - they are attractive, and easy to edit with the options inside canvas.

2) I agree on not editing images. Some of us have little experience with such software. Many of us are quite familiar with it, but our favorite software/the software we know best may be at home and not on the school computer (which may only have the default paint for windows). That means you have to come back to the image editing when you get home. I would rather being able to do it at once and mark out that task...

Just my thoughts...