When our v7 instance loads, for a heart-beat we see a light-grey widget outline which quickly fills in with content. It looks as though the canvas accommodates 4 vertical columns on the landing homepage and 3 on subsequent area homepages due to the side navigation consuming a column.
When I added the Twitter widget I noticed that while it looks good on my 1280x1024 monitor it doesn't fully display on my 1024x768 monitor (employee standard). I could have guessed a few times and probably come up with a good size, but knowing the widget sizes and understanding how they work is pretty important so I thought I'd put in some due diligence.
To help me figure out common widget sizes, specifically for the smaller widgets, I typically create free text widgets that include a simple 100% x 100% table with a colored background. Then I take a screenshot of what I'm looking at and use Paint to figure out the dimensions. With v7 I've run into an issue embedding a table into the free text widget so I did the next best thing - inserted a square red image! I initially used a 1278x990 image, but later scaled it down to 280x280 because of issues I was running into with spacing issues caused by the image being rectangle.
Note: These test were done in IE10.0. I found that using Firefox altered the widget sizes slightly (2px difference at both sizes w/o a title).
The next test I ran was to determine the impact of resizing on the content of an image. For this I used a 1k x 1k image of horizontal and vertical lines. The result is that the image appears to automatically resize based upon width. Because the widget sizes are fixed and images are aligned to the top, the bottom of the image is cut off.
What does this all mean?
If you are going to use an image in a free-text widget you would be advisedto not include a title since the title seems to have priority and the image is secondary. Additionally, titles can wrap depending upon the resolution the page is viewed at which can cause a fairly significant difference in the amount of image height that displays.
What happened to the Twitter widget?
In the end I settled on a Twitter defined widget size of 275px (height) which displays the full widget at 1280x1024 and enough of it at 1024x768.
0 comments:
Post a Comment