Adding Components
We’ve got a good start on our course, but it’s missing something (you know, besides real content). Let’s add a graphic! The Graphic component is the tool for the job and we’re going to add one of those in this section.
Adapt content can be organized straight down the page, one Article/Block/Component at a time. You can also arrange components within a block into two columns.
So let’s jump on that. We want My Text Component to be in the left column, so locate the Left arrow just above the component title.
When you click the icon, My Text Component will shrink to fill only half the work area of the Block, and a new Add New Component button will appear to the right. Click that button now!
A large, scrollable list of components will slide-out from the right of the window. Egads that’s a lot of components! How ever will we ever find the Graphic component!?
Seriously, this list will grow over time as new components are created, so scrolling through the list to find what you want might be a little annoying when you’re in a hurry. To solve that, there is a search box at the top of the dialog that can be used to filter the list of components.
Type “Graphic” into the filter field. That list should drop from 20+ components to four or five. Much better!
Now click the Graphic component. A button appears that’s titled Add to right.
Click that one and Adapt will drop in the new Graphic component to the right of the existing Text component.
Back in the work area, double-click the Graphic component (which should have the helpful title New component) to open it’s editor.
That Stuff in the Sidebar
On many of the Editors you’ll notice the sidebar changes to a list of the sections in the current editor along with an on/off widget (and if you didn’t, well, now you know).
4.5 Clicking on one of these items will hide that section. Clicking it again will restore the previous view. It can be useful if you’re looking for something in a specific section.
Let’s fill out this form and get a graphic into our course.
Start by giving the graphic a Title, say “First Graphic”. Then click the “X” icon to the right of the Display Title to remove the visible title from the course itself. Don’t add any text in the Body or Instruction fields.
The last 3 fields are the meat of the graphic’s details, and they can be a little confusing for anyone not familiar with building responsive content.
Adapt provides four fields for graphics: Alternative Text, Large, Small & Attribution.
Alternative text and Attribution are just what they sound like: The alternative text for the image and attribution text if the image you’re using requires it (such as with an “editorial license” or “cc-by” ).
Large image is the image that will be displayed on larger devices like desktop computers and some larger tablets. The Small image will be displayed on smaller devices like most tablets and phones.
With both the Large & Small, there will initially be two buttons Select an asset and Select an external asset.
Clicking Select an external asset will display a text field where you can paste in a URL to an image somewhere else on the web.
Clicking Select an asset will open the Media Library that will allow you to select or upload an image for use in your course.
Do Not Use “Select an external asset“
There is a fairly good chance that the image will not be displayed (due to the same-origin security policy imposed by most browsers). There’s also the likelihood that the owner of the image might remove it at some point in the future.
Worse (and frankly a little frightening) it’s common practice for sites to gather your user’s metadata when the image is loaded, including information about their current session. Some image formats can even allow injection and execution of malicious code.
Since (ahem) we aren’t going to be using an external asset, click Select an asset to open the Media Library.
Like it’s name implies, this screen is primarily a scrollable list of images you can use in your course. This library can get pretty big, so at the top of the page you’ll find a search box that will search the titles and descriptions of any images previously uploaded.
Just to the right of this is a button to Add a tag to your search. Clicking this button will reveal a drop-down list of tags. Click a tag to restrict your search to only images that have that tag. You can select as many tags as you like. To remove a tag from your search, click Add a tag again, then click the previously selected tag (again) to deselect it.
Clear out any tags you may have selected, and enter “super-awesome” in the search field. This should narrow down the result to two images: cat.jpg and cat_sm.jpg. Click cat.jpg. The right sidebar will display information about the image.
Pay special attention to the Size which is the file size of the image (or, how much data the learner must download to see it) and the Dimensions which will tell you how large the image is at full size.
Click Done in the upper right corner of the screen to set the image. Repeat the process on your own with the Small image, this time selecting cat_sm.jpg.
On image size optimization…
Image optimization is the dark art of selecting an image that is the perfect size for its container, then compressing an image to be as tiny as possible.
Many seasoned developers have issues with this and the topic is not something you can learn in a little guide like this.
A general rule of thumb is that a large image should be under 100K and a small image should be in the 5 to 40K range. Even our super-massive “banner” images top-out at around 110K for a production site.
Images falling outsize this range should be seriously questioned. If you find yourself in this situation with an image you want to use, contact one of the development team. If we can’t help, we’ll get you in touch with an artist who can.
Now that we have our images set, add some Alternative Text. “Kitty planting her flag.” should be descriptive enough so enter that in the field. We don’t need an attribution line for this image, so leave it blank.
Image accessibility
Adapt isn’t magic and images are one of the places where accessibility is entirely in your hands. Here’s a few general rules:
Images need alternative text. The exceptions are rare and technical enough you probably won’t run into it when building a course.
End you alternative text with a period. This causes the screen reader to pause slightly before continuing on to other content.
Be succinct. Just get the idea across, quickly. If you find you need a colon, semicolon, em-dash, a break, or more than one period, it’s bad alt-text.
Avoid using quotes. alt-text is an HTML attribute, which requires quotes for formatting. Adapt will escape your quote and the screen reader will say “andamp” instead of “quote”.
Don’t use the phrases like “image of” or “graphic of”. The screen readers do this for you.
Avoid text in images. Screen readers can’t read it. Adapt (and any other responsive system) will resize your images to best fit the screen so the text could be muddy, pixelated or completely unreadable.
Click Save and then click Preview Course to view the updated course!
Pretty awesome huh? You can see kitty in all her cat-ly magnificence! But if you’ve been paying attention to the details of the image we used (and I have to since I’m writing this) you may have noticed a bit of a problem.
When we were choosing a Large image we picked the larger “cat.jpg” but when viewing the course, the Graphic component is only using half the screen. At its largest on the desktop, that’s only 446px wide (I measured), but the image we’re using is 1000px wide! That’s over twice as wide as it needs to be. So the user has to download an image that’s 90K. That’s probably too big, huh?
Let’s fix it. Double click on the Graphic component First Graphic and locate the Large field. First click the Remove Asset button to get rid of that huge image, then click Select an asset and search then select the “cat_sm.jpg”. Don’t click Done yet! Instead, click the button next to it Autofill.
It won’t be obvious what happened initially, but Autofill will place the same image in both the Large and Small image fields for you. Useful when you want the same image in both places.
Save and Preview Course!
Wait, that’s not good. Now she’s a little tiny cat in a great big box. That’s not what we were after at all! Turns out, the cat_sm.jpg is only 288px wide, so it’s just floating there in a great big sea of nothing, looking awkward.
We’ll leave kitty as she is for now. However, if this were a course you want to deliver to your learners, the next step would be to upload an image that’s the right size for the Graphic Component. Let’s take a look at the image upload form.
If you’re working ahead: Don’t upload an image. Adapt doesn’t allow you to remove an image once uploaded. It does this to protect any other users or courses that may be using them.
Open up the Graphic Component again, locate the Large field and Remove asset then click Select an asset again. In the upper left corner of the screen, locate the Upload an Image button and click it to reveal a drop-down form for uploading an image.
This form seems pretty simple: You can click the Choose file button to select a file from your hard drive, supply a title and description and add tags to the image.
As a team, you may want to discuss tags and image names for your organization. Adapt imposes no formal scheme on you; It’s up to you to decide what’s best. Be sure to read the component detail pages for additional details on image sizes used in Adapt.
Since we’re not uploading a new image, let’s go back to the original kitty image. Click the “X” (or close) icon on the image upload form. With that out of the way, locate “cat.jpg” (searching for “super-awesome” again) in the list of images, and Autofill so it’s used in both the Small and Large fields. Save, Preview Course and be happy.
Something you’ll come to terms with when using images in courses is that there is often no perfect image or image size that satisfies every condition. We’re using a 90K image when what we need is probably a 50K image that’s closer to the 446px. However, in the grand scheme of things 40K isn’t the end of the world for a single image. It’s good like this.
But in larger courses with 50-100 images, 40K per image is over 4MB total. That’s 20 seconds to a minute over a mediocre cell network, and that’s just bits of images the user doesn’t need.
A minute is forever on a cell phone. How long are you willing to wait while watching a spinning loading icon before you can take the course you didn’t want to take in the first place?
Spoiler alert: Google already researched it: 53% of visits to mobile sites are abandoned after 3 seconds.
Image sizes
All of the components in Adapt have image size requirements. Most fall in with the max width of 446px for half-screen images and 984px wide for full-width images, but there are variations. Some components (such as Cards) have image height maximums and recommended aspect ratios.
Welcome to the only truly difficult part of Adapt.
In order to help with this, each component has a detail page within this guide. These pages have a nice graphic with the image dimensions and a downloadable Photoshop template you can use to setup your images.
We don’t need no stinkin’ Photochop!
Sorry, friend, you probably do. Photoshop is the industry standard for image manipulation. It’s got a bit of a learning curve but it’ll make sizing, cropping and compressing your images a lot simpler.
Luckily, OU employees have free access to Adobe Creative Suite as a perk of employment. If you don’t have it installed, ask your IT folks for help getting it set up.
Don’t know Photoshop? OU employees also have free access to Lynda.com. They have a lot of great Photoshop training that’ll get you up and running fast.
We’ve added an image and got it working in preview. Before we continue with the rest of the course, let’s talk about the other components available in Adapt.