[techtalk] Tech-Talk: WEB AUTHORING – Making Videos, Maps & Images, Responsive

Mon Aug 26 10:57:55 PDT 2019

Do your videos play well on mobile?
[http://r20.rs6.net/on.jsp?ca=dcab9379-948b-4b77-ba75-a78c748276fa&a=1100778316270&c=980e0ed0-0713-11e6-a7b7-d4ae528ed502&ch=981cb4d0-0713-11e6-a7b7-d4ae528ed502]

[http://files.constantcontact.com/ee1208b4001/34916cb2-412f-43fa-8294-1f7ecb0e9a3d.png]

 This Week's Topic: WEB AUTHORING
1. VIDEO ... Making Video, Maps & Images, Responsive ... for Mobile
2. ARTICLE ... Making Video, Maps & Images, Responsive ... for Mobile
3. COMMUNICATING ... Getting the reader more involved

[web design]<http://r20.rs6.net/tn.jsp?f=001Mfvl4PbJriYGFPOL6_0jF7OLTK3Xq-SP5MOEQicbLplKJl6AN4pvYMhGz1nCRM1e8dchdqzxYHuCyX3UprFizOvwo46vDu2qy1oQ4b07ql9rbvY3ti3Yhts6AJ4CguNbfcBj3oTnPje0SL5nGpsFXACpJHylQcGHS1jqyucmMJSMw5ubhChql0kK8TKQMjC5tkb6zZMp3kM=&c=7gdmzlkpakSihsQUT3yN5BQQBaCn8tXv1xLpLUZycw5dKfVfrR9G8w==&ch=F7GiGGsZ6T1tQK0I9LOkojl1tzm5PIRSteQqriMBcnOWp3U5nRDuOw==>

Photo by Joe Pizzio<http://r20.rs6.net/tn.jsp?f=001Mfvl4PbJriYGFPOL6_0jF7OLTK3Xq-SP5MOEQicbLplKJl6AN4pvYMhGz1nCRM1epjiXXcLan17JRPN1erioe9rjkvHTZRfAJkIb8d-qlM9rNigB5Nb5-pbtYo6zn9p7f3EM5s3k0AlK-YgnZnNlWro9bh7CV4LtpRai6xvQ1T02tpi5ZVenmPDaqNs1vWs3KAixYEyDGfgHR6sr_sVNI6gkr0yI-Kbku2MIUZc7fLwJyIeDD4Yu1S6ZouvMobsm&c=7gdmzlkpakSihsQUT3yN5BQQBaCn8tXv1xLpLUZycw5dKfVfrR9G8w==&ch=F7GiGGsZ6T1tQK0I9LOkojl1tzm5PIRSteQqriMBcnOWp3U5nRDuOw==> on Unsplash<http://r20.rs6.net/tn.jsp?f=001Mfvl4PbJriYGFPOL6_0jF7OLTK3Xq-SP5MOEQicbLplKJl6AN4pvYMhGz1nCRM1eSLLS5Thsd_rEFb28m6XhQgTK6ucl-ry_8FoVV1GKSlcEy5HKJkEpRhufRGxgCEZU6sh3usluNt45jJlIr5DoV7txh-H98wdUD2aUjBpVDz9B1_oG0S6hp12viRTT0yluiCZ5UfvY3Mzox-lUJZU3nzzShrGGbbdss3rqAcJpl55LUosD2obARkwQOBugWOPE95B06JVDVNsvl-YzYxTixw==&c=7gdmzlkpakSihsQUT3yN5BQQBaCn8tXv1xLpLUZycw5dKfVfrR9G8w==&ch=F7GiGGsZ6T1tQK0I9LOkojl1tzm5PIRSteQqriMBcnOWp3U5nRDuOw==>

Brought To You By State Library of Oregon

[State of Oregon]

Visit Tech-Talk.com Database<http://r20.rs6.net/tn.jsp?f=001Mfvl4PbJriYGFPOL6_0jF7OLTK3Xq-SP5MOEQicbLplKJl6AN4pvYBwBRN5E-m-c78-Qm_StrcAvZ4OSz7ccih6iDgb8hscoWBEo3PbtsA1NLtmt1A0D8z2aH1TnXUt2zQLkyuhObY7uZ8QsWYRWe5-LhaDTkf6O&c=7gdmzlkpakSihsQUT3yN5BQQBaCn8tXv1xLpLUZycw5dKfVfrR9G8w==&ch=F7GiGGsZ6T1tQK0I9LOkojl1tzm5PIRSteQqriMBcnOWp3U5nRDuOw==>

Username: ORLIBTECH
Password: ORLIBTECH

Questions about Tech-Talk?
darci.hanning at state.or.us<mailto:darci.hanning at state.or.us>

WEB AUTHORING - Making Videos, Maps & Images, Responsive... for Mobile
Intermediate

[map]

I am adding a map to a website page using the code Google provided to embed it. However, when I look at the map on my smartphone, it is cut off on the right. I can't see the whole thing!

Why is only part of the map showing?

You'd think that the code would be designed to be responsive! When an image, video, or map (in this case) is responsive, it means that it is designed to size appropriately when viewed on all types of devices: desktops, laptops, tablets and smartphones.

Websites are now designed to be responsive as a whole, but sometimes the embedded objects like images, forms, videos … are not.

No matter if you have some experience in web design, or you are more of a novice that adds content to pages for events or blogs, we’ve found an easy little web tool that transforms media to display responsively on all types and sizes of devices. (Yes, it's free and easy.)

With EmbedResponsively.com, you plug-in embed code from other sources (like YouTube or Google) and it provides alternate responsive code for you to add to your page or post. No matter which type of media (images, video, maps) the code it provides will make what you have re-size appropriately on any mobile device.

Let’s Take a Look

Many types of embed code you get from online sources have a fixed width and height in the code. This locks in the dimensions for all sizes of screens. Embed Responsively modifies the code for you.

For example, you may need to put a map of a location of an event on your website registration page. Normally you would think that you could just copy the embed code to use.

However, we put a location in a Google Map, clicked "Share" and from the Embed a map tab, copied the HTML code to add to our website page.

Google Map page:

[Google map]

When viewed on a standard size monitor, our map looked fine. But when looking at it on a smartphone, the map was cut off on the right side.

Then we copied the same code and ran it through EmbedResponsively.com<http://r20.rs6.net/tn.jsp?f=001Mfvl4PbJriYGFPOL6_0jF7OLTK3Xq-SP5MOEQicbLplKJl6AN4pvYMhGz1nCRM1epg5qZhiUUsX8XM4IyFtqkX7TzfGUfk9-9Im4UP7VxdX7_P5NOZIE7Si52GaILS3q8ERNioYYCLg1SBk-uDeYyQ==&c=7gdmzlkpakSihsQUT3yN5BQQBaCn8tXv1xLpLUZycw5dKfVfrR9G8w==&ch=F7GiGGsZ6T1tQK0I9LOkojl1tzm5PIRSteQqriMBcnOWp3U5nRDuOw==>. The map sized appropriately on both a desktop monitor and a smartphone.

In the image below you see the Google map viewed on a smartphone that is cut off on the right.

[cut off map]

In this smartphone screenshot, you see the map using the Embed Responsively code. It fits the size of the screen and looks much better to the viewer.

[Google map]

How it Works

We like web tools that are free and easy to use from anywhere (without additional software to download), and http://embedresponsively.com<http://r20.rs6.net/tn.jsp?f=001Mfvl4PbJriYGFPOL6_0jF7OLTK3Xq-SP5MOEQicbLplKJl6AN4pvYMhGz1nCRM1epg5qZhiUUsX8XM4IyFtqkX7TzfGUfk9-9Im4UP7VxdX7_P5NOZIE7Si52GaILS3q8ERNioYYCLg1SBk-uDeYyQ==&c=7gdmzlkpakSihsQUT3yN5BQQBaCn8tXv1xLpLUZycw5dKfVfrR9G8w==&ch=F7GiGGsZ6T1tQK0I9LOkojl1tzm5PIRSteQqriMBcnOWp3U5nRDuOw==> certainly is. In fact, the site is so simple, it's just one page... without any fluff.

What kind of media sources can you use with this tool? It supports:

·     YouTube
·     Vimeo
·     Dailymotion
·     Google Maps
·     Getty Images

·     Scribd
·     SoundCloud
·     Storify
·     Twitter

For all other media types there is a Generic iFrame option.

When you need to create responsive code in one of these types of media:

·     Copy the embed code (or link – it tells you in Embed Responsively what is needed).
·     Go to http://embedresponsively.com<http://r20.rs6.net/tn.jsp?f=001Mfvl4PbJriYGFPOL6_0jF7OLTK3Xq-SP5MOEQicbLplKJl6AN4pvYMhGz1nCRM1epg5qZhiUUsX8XM4IyFtqkX7TzfGUfk9-9Im4UP7VxdX7_P5NOZIE7Si52GaILS3q8ERNioYYCLg1SBk-uDeYyQ==&c=7gdmzlkpakSihsQUT3yN5BQQBaCn8tXv1xLpLUZycw5dKfVfrR9G8w==&ch=F7GiGGsZ6T1tQK0I9LOkojl1tzm5PIRSteQqriMBcnOWp3U5nRDuOw==>
·     Pick the tab for the appropriate media type.
·     Copy the embed code (or link) into the bar and click the blue Embed button.

In the image below, we're continuing our Google Map example.

[embed]

·     Then copy the new embed code provided to add to your website page or post.

[embed code]

TIP: Be sure to view the new media on multiple sizes of devices to make sure it displays as expected.

[other example]

Another Example

We copied the YouTube embed code for a video to a website page and then looked at it on a smartphone. Again, the video was cut off (top image to the right).

However, with Embed Responsively, we were able to display the video so that it fit the screen on smaller devices (lower image on the right).

[http://files.constantcontact.com/ee1208b4001/f8f1ecc8-4884-4c21-8ed0-cf647e6db944.png]

Communication: Writing
Getting the reader more involved

No matter what you are writing, you want the reader to be as involved as possible, right?

Let's show you a few techniques we use to keep the material interesting ... so you "get it" and keep going. Here are the editing changes we made from our first draft to the final, concentrating on you, the reader.

First Draft

I was adding a map to a website page using the code Google provided to embed it. However, when I looked at it on my smartphone, it was cut off on the right. I couldn't see the whole thing. Why is only part of the map showing?

You'd think that the code would be designed to be responsive. When an image, video, or map (in this case) is responsive, it means that it is designed to size appropriately when viewed on all types of devices: desktops, laptops, tablets and smartphones.

Guidelines for Changes We Made

·     When telling a story, we often use first person, present tense (even though the events are past). It gives more energy and excitement.

·     Be sure people know what every pronoun is referring to. If it's not clear, use the word itself. e.g. "When I look at it..." What is "it"? In this case, "it" is the "map".

·     Don't be afraid to use an exclamation point occasionally. (Not too much.) It adds emotion.

·     Sprinkle in short sentences to vary the rhythm and to re-gain attention.

·     Use bold, but not too much. Sometimes by highlighting the beginning of a sentence to get them started ... other times, the complete sentence to arouse their curiosity.

Better Version ... Do You Notice The Difference?

I am adding a map to a website page using the code Google provided to embed it. However, when I look at the image on my smartphone, it is cut off on the right. I can't see the whole thing!

Why is only part of the map showing?

You'd think that the code would be designed to be responsive! When an image, video, or map (in this case) is responsive, it means that it is designed to size appropriately when viewed on all types of devices: desktops, laptops, tablets and smartphones.

Answer Key ... Edits Shown in Red

I am adding a map to a website page using the code Google provided to embed it. However, when I look at the image on my smartphone, it is cut off on the right. I can't see the whole thing!

Why is only part of the map showing?

You'd think that the code would be designed to be responsive! When an image, video, or map (in this case) is responsive, it means that it is designed to size appropriately when viewed on all types of devices: desktops, laptops, tablets and smartphones.

[http://files.constantcontact.com/ee1208b4001/b13a7a6a-7445-4d8e-b741-4b475385ef5b.png]<http://r20.rs6.net/tn.jsp?f=001Mfvl4PbJriYGFPOL6_0jF7OLTK3Xq-SP5MOEQicbLplKJl6AN4pvYHbSXYuqdfHt9hkUH4xPEM6TBs39kASZlsdDCkRHr-jOlIRYSfDfPeaUIT3mqnYJIO_bOp9-dPCtXYkSa1WLvSr8GC547YeDg7MFqMblG9Ya&c=7gdmzlkpakSihsQUT3yN5BQQBaCn8tXv1xLpLUZycw5dKfVfrR9G8w==&ch=F7GiGGsZ6T1tQK0I9LOkojl1tzm5PIRSteQqriMBcnOWp3U5nRDuOw==>

[Ask a question]<http://r20.rs6.net/tn.jsp?f=001Mfvl4PbJriYGFPOL6_0jF7OLTK3Xq-SP5MOEQicbLplKJl6AN4pvYP4CzQwMxvRtC7N_Mlairf3MpDsLWMMptpVFFjyOJvj-5XxKiKUsttRltnTaR_xz_T8gbgF807NagRNujlUuR1I07avpodDsGMdYhkthyWsh0SlelpKhNcI=&c=7gdmzlkpakSihsQUT3yN5BQQBaCn8tXv1xLpLUZycw5dKfVfrR9G8w==&ch=F7GiGGsZ6T1tQK0I9LOkojl1tzm5PIRSteQqriMBcnOWp3U5nRDuOw==>

Copyright 1996-2019 Shared Results International. Published weekly. Do not forward this issue of Tech-Talk.com without prior permission from Shared Results International. Distribution is limited by contract. Forwarding it to unauthorized recipients constitutes copyright infringement.
For information on site licenses or how to include additional recipients, email darci.hanning at state.or.us<mailto:darci.hanning at state.or.us>.

The Tech-Talk e-newsletter for Oregon library staff is distributed weekly via the Libs-OR and TechTalk mailing lists. Please do not forward. Know someone who might be interested in receiving a copy but they’re not on Libs-OR? Have them contact darci.hanning at state.or.us<mailto:darci.hanning at state.or.us> or visit http://listsmart.osl.state.or.us/mailman/listinfo/techtalk to subscribe to just the Tech-Talk newsletter!

Tech-Talk is a paid subscription service for staff of Oregon libraries and is supported in whole by the Institute of Museum and Library Services (IMLS) through the Library Services and Technology Act (LSTA), administered by the State Library of Oregon.

Cheers,
Darci Hanning, MLIS
Public Library Consultant / CE Coordinator
darci.hanning at state.or.us<mailto:darci.hanning at state.or.us> | 503-378-2527| www.oregon.gov/library<https://www.oregon.gov/library>
Follow us: Facebook<http://fb.me/StateLibraryOR> | Twitter<https://twitter.com/StateLibraryOR> | Tumblr<http://www.statelibraryor.tumblr.com/> | Pinterest<https://pinterest.com/statelibraryor/>

[cid:image005.png at 01D31C27.4B9FEA30]

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://omls.oregon.gov/pipermail/techtalk/attachments/20190826/d62b42d0/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image001.png
Type: image/png
Size: 15548 bytes
Desc: image001.png
URL: <https://omls.oregon.gov/pipermail/techtalk/attachments/20190826/d62b42d0/attachment.png>