cancel
Showing results for 
Search instead for 
Did you mean: 
asizemore
Community Participant

Perfect Size for Graphics on Canvas Homepage?

Jump to solution

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. 

1 Solution

Accepted Solutions
matthew_taylor1
Community Member

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?

View solution in original post

0 Kudos
12 Replies
MattHanes
Community Champion

I have notes written down on my desk that say that the maximum page width is 1102 pixels. I'm not sure where I got that value but it's been working for me. Hope that helps!

kroeninm
Community Champion

For Banners on our homepages, we use a 10:2 ratio (i.e. 1000x200px).  We could go smaller but since we use photos in our banners, this has been a good balance of quality of the imagery and file size.  In the past I typically thought 800x600 was a common screen size but I'm not a designer Smiley Happy.  When I download from Pixabay or Flickr, I aim for around 600px, as that usually has the quality of imagery retained with a smaller file size.

But the px's aren't as important as the way images are inserted into Canvas I've found.  The students we serve use all types of screens: desktop, small laptop, mobile devices, phones etc. and so when I insert a graphic/image I insert using a percentage of the page as the width instead of pixels (banners are usually 100% width, visual imagery probably 30%).  If you use pixels and someone has a smaller screen, it may not shrink, may require scrolling, or perhaps even skew and be unbalanced on the page.

So though we have certain typical sizes we use in designing images, when I insert the images, I always ensure the image is based on a % width versus pixels so that it will resize along with the page to best fit the student's browser of choice and keep perspective.

- Melanie

asizemore
Community Participant

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. 

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

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

asizemore
Community Participant

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.  

jonesn16
Community Champion

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:

230325_lit1.PNG

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

230326_lit 2.PNG

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. 

Bobby2
Community Coach
Community Coach

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

benjamin_rodrig
Community Contributor

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