Working in Your Accounts
In order to work most effectively with the images on your Guides, Tim will need to login to your accounts which, as an admin, he can do. Be forewarned, however, that you will receive an email from Springshare informing you of this fact. Here’s a sample of that message, so you’ll know what to expect.
OK, so you can't read it at this size (click to enlarge). Let's just leave it that Tim will edit judiciously and not lay waste to what you have written in your Guides. And he likely will be consulting with you on specific questions as he works on your Guides.
Making Images Responsive
The problem: In this context, “responsive” means that the images will remain undistorted and will align properly with other parts of the content no matter what the size of screen someone is using. What looks fine on a standard monitor may not look so good on a tablet or phone.
The image on the right looks fine on a standard monitor. Scrunch it down to the approximate size of a phone screen, though, and it doesn’t look so good; see below.
The problem arose from the fact that Tim imported the image into LibGuides in a much larger size than what he wanted it to have on the page, and then resized it in the Image Properties box until if fit the way he wanted. See the image on the left for an example of what happens to the image on a small screen.
The Solution: as described in the counter-example in the screenshot on the right, please import your images in the approximate size that you want to have them appear on a standard monitor. For future reference, then, leave the Width and Height parameters BLANK.
Megan has set up the Style Sheet for LibGuides so that, if you do this, the images will resize automatically to fit without distortion on smaller screens.
To give you an idea of how much space you have to work with, the left sidebar column in our design has about 220 pixels of width available; the main content area has about 750.
Tables and Their Alternatives
HTML Tables are supposed to be used for, uh, tabular data, not simply as a means of achieving particular layout designs such as columns. When we developed the model for the "Contact" pages, we (which is to say Tim) mistakenly used HTML Tables to create the three-column effect, which many authors have emulated on their Guides. This also does not fare well on small screens, since these Tables have specified widths, which will overflow the borders of smaller screens.
Megan has devised a method to achieve the same layout using HTML <div> tags instead of Tables. While it is fairly easy to change from one to the other, it is also easy to get confused and possibly break something.
For this reason, if no one objects, Tim will make appropriate these changes to your Contact pages. He will also check on possible image-size problems while I’m visiting your Guides, along with checking to be sure that any embedded videos are responsive.
For the future, if you need to use tables in your guides, talk with Tim or Megan about how to do that so the tables work on all screen sizes.