Perfect Size for Graphics on Canvas Homepage?

[asizemore]

Is there a "perfect size" for graphics on a homepage? I have our college's web designers coming up with custom graphics for our homepages and I haven't found a solid answer on the best size to make the graphics. 

[matthew_taylor1 · Accepted solution]

I've found that Canvas seems to dynamically add a max-width size to images based on the width of the browser window when you open a page. This means when you change the browser window size, even if an image is set to scale to 100% width, it caps at a lower width.

Has anyone found a way around this problem?

[knoxd]

This was a really helpful thread.  I am trying to help our teachers out by creating some templates that they can borrow and personalize.  In regards to "buttons" on the pages, does anyone have an approximate size they recommend that fits with the ration of the page banner?

[sharon_kitching]

Similar to Ben, We set up banner images with the 100% width rule, cropped to a long thin format. One of the academics at uni made a "banner build' that grabs images from Upsplash and edits them into the correct ratio to download and insert as a banner. It gives a bit of consistency over look and feel. 

[benjamin_rodrig]

This is a really good post with some great info.

Of all the well designed pages I've seen in Canvas, there are some similarities when it comes to banner images.

• Generally medium to high resolution (over 1200 px wide natively).
• Cropped to an aspect ratio of about 10:1.5 for Pages and 10:1 for Assignments and Discussions.
• In the RCE's HTML editor - these are set to a 100% width.

They look really good in the composition of the page, scale nicely, and are not obtrusive to the item text.

Best regards,

-Ben

[Bobby2]

Brilliant. This is such an important question. Thanks for asking  @asizemore 

[jonesn16]

tl;dr Its hard to get a full graphic color bleed in your design, so past a certain size making the image larger does nothing.

I have found Canvas does a weird job with scaling images. For example, I had styled a home page for a course about information literacy that leaned heavily on "the information highway" metaphor for the internet. To support the theme I created a road sign button for each week. Behind that I wanted a static image of a map. I needed the map to be a separate image from the road sign buttons, that way the buttons could move and cascade down the page as the width of the browser shrunk or expanded. Here's what it looks like right now:

As you get to the bottom of the page, you'll notice the map ends, and some buttons go into the normal white background:

I tried to make the map so big that it wouldn't fit in the space provided by the content editor, assuring that regardless of how narrow the browser got, the road sign buttons will always have a map background.  But its not possible. From what I can tell, Canvas will scale down any image along whichever axis is closest to fitting within the browser window, and will then allow the image to "go off the edges" along the other axis. 

[asizemore]

Hello all - So I happened to notice during a Cidilabs training today that when using the homepage creator in Design Tools, Canvas shows a max size option of 1100x313px.

While I am still taking  @kmeeusen ‌  and  @kroeninm 's advice on sizing width via percentages, this may help end the mystery on pixels for length for my purposes of editing and customizing home pages! Hope this helps everyone.  

[adriennefan_arr]

 @christopher_ma1 ‌ - perhaps something to note for our modules.

[kmeeusen]

Hi  @kroeninm 

I have been using percentages for a couple years now, and testing shows that they do scale nicely.

 @asizemore  Use percentages for the width, but continue to use pixels for the length. This gives you better control since there is no fixed length to a Canvas Page, or at least not one I have ever exceeded. I suspect, I can't create one that is 147 light years long to really test this, but you can play with that if you have some spare time:-)

Kelley

[asizemore]

Thank you so much - sizing by percentage instead of pixels and more importantly the rationale behind is extremely helpful as I hadn't begun to consider that before.