Monday, November 11, 2013

Interact-Interact v7 Widget Sizes

-- this is obsolete after the 7.2 launch which includes an increase amount of widget size options --

I'm just getting my feet wet with the responsive framework of Interact-Intranet v7 and the widget design challenges that go along with that. 

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.

Click the image for a larger view


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. 

Click the image for a larger view



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.

Click the image for a larger view

What does this all mean?

If you are going to use an image in a free-text widget you would be advised
to 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.
Click the image for a larger view