Quick Bytes Live! Podcast

#20:  The New Google Sites, Canvas update, and Tech Finds

(recorded July 18, 2017)
Karen and Amy talk over the features and limitations of The New Google Sites, as well as answer a listener question about Canvas. We also share our Tech Finds of the week.
 Links from this episode:
Be sure to subscribe and let us know your feedback!

Subscribe via iTunes
Subscribe via RSS








Earlier this year, the New Google Sites was enabled for our University domain. They are pretty different from what we are used to, and in some cases that is a good thing!

To refresh all of our memories on why we love having Google Sites in the world:

Google Sites' strength is in its collaboration. Multiple people can be in charge of it. You can setup a site for a committee you're on, and everybody can add and maintain stuff. It is common for committee and project work. Below you'll see an example of using it for education--a great way to set it apart from the main website as a self-contained chunk of curriculum. ("Self Contained Chunk" is a very technical term!)

Here are two GREAT examples of pages made with the new Google Sites:

(the first one is just a screenshot since it's only supposed to be for Master Gardeners and you possibly aren't one of those)

Master Gardener "Flowers for Pollinators" teaching package resource site:



OMGosh. SO PRETTY!! And there are embedded google docs and presentations all over the place. It looks great.

Here's the new Google Site for Extension's big web re-design project:


You can see on both of these how you can add a little branding. I show that in the video below too.

Old Google Sites was very unique looking

Just Tell Me What's Different Already!

  • Less distinctively weird looking. More modern.
  • Looks good on mobile
  • Add anything from Google apps (Google Docs, Sheets, Slides, Forms, Charts, Videos, or Images, Calendars, Maps, and YouTube videos). All of these show a preview of the file, with the full content viewable after a visitor selects the file. The Old Google Sites did something similar but it's just nicer now.
  • You can drag content around and it snaps into place
  • You can publish just to your organization (umn.edu) or the world. The World! Mwahahaha!
  • You can customize the url (a bit)
  • If you want super granular permissioning (like picking what specific people can see specifically), it is possible in the Old Google Sites but I haven't found a way to do that in New Google Sites
  • As far as I can tell, you can't convert an Old Google Site to a New Google Site.


In which I demo making a site in less than 5 minutes





The University’s z.umn.edu URL-shortening service recently added some great new features that you should know about! Back in March 2016, our article How to Shorten a Link (URL) and Track It described what z.umn.edu is and why you would use it. Today I want to highlight what is new in Z and share a short video that shows you how to use the new features.

Transfer Ownership

You now have the ability to transfer ownership of your links to someone else. This feature is great if you are leaving your position or if you no longer need to manage the z-link for a project, event, document, survey, website, etc.
  1. Under My Z-Links, select one or more URLs
  2. Click Give to a different user
  3. Enter the name or Internet ID of the person you want to transfer to
NOTE: The person you are transferring to must accept it. You can revoke access until they accept.

Organize and Share Collections

You can group your URLs into collections to organize them (e.g. projects, events, documents). Collections can be shared with other users to edit, view stats and add URL’s.

Create a collection:
  1. Under My Collections, click Add New Collection
  2. Enter a name and description and click Create Collection
Share a collection:
  1. Under My Collections, click the under the actions column and select Members
  2. Enter a name or Internet ID and click Add member
Transfer a URL to a collection:
  1. Under My Z-Links, find the URL you want to transfer
  2. Under the Collections column drop-down, select a collection

Departmental Accounts

You can use a departmental account to log into z.umn.edu to create and manage URLs. You can also share collections with departmental accounts.

Tweet

As soon as you create a URL, you can click the Tweet button to quickly share the URL via Twitter.

QR Code

A custom QR code is automatically created with any new z-link. When you create a new URL, you can click the QR Code button to download a QR image to your computer. 
Existing links:
  1. Click the under the actions column
  2. Select Share and QR code
  3. The QR code image is downloaded to your computer

Stats

You can still view statistics about your URLs by clicking the under the actions column and selecting stats. The page layout has changed a bit and they’ve added a place to manage the collection for your link, and buttons to tweet and create a QR code.































Quick Bytes Live! Podcast

Ann Fandrey and IT Goldy, ready for podcasting

#19:  Don't Call my Slides PRETTY

(recorded June 19, 2017)
We welcome the lovely Ann Fandrey, Academic Technologist at UMN, on the show to talk about her research and recommendations in academic slide design. She talks about bullets, clip art, stock photos, charts, conceal and reveal, and lots more about how and when to use these tools. 
 Links from this episode:

Be sure to subscribe and let us know your feedback!

Subscribe via iTunes
Subscribe via RSS


Do you need a slide? flowchart, as described verbally in the podcast


Image uploaded from iOS.jpg
Ann Fandrey, Academic Technologist, U of MN College of Liberal Arts
Last week at the Innovate! Teaching with Technology conference in Morris, I attended a workshop about academic slide design led by Ann Fandrey, Academic Technologist in the UMN College of Liberal Arts. Ann’s interactive session provided lots of examples, research, practical tips and a space to discuss challenges people have with visual design.

Below are a few of my takeaways from this workshop. Be sure to also listen to the Extension Quick Bytes podcast discussion we had with Ann this week!

We aren't born with visual literacy skills. 

  • Analyze lots of examples
  • Practice making visuals
  • Practice collaborative critique with other people and iterating your own designs. 

Try to be intentional with your design.

You should have a reason for every slide and for every element on each slide.

People cannot listen and read at the same time.

When you are doing a live presentation, people are watching and listening to you. If you show slides that are too text-heavy, you force your audience to divide their attention between reading your slides and listening to you.

Do you need a slide?

Slides that try to do 3 things at once (teleprompter, speaker notes, and visual aids) end up doing none of them well. To decide whether you need a slide, ask yourself whether your slide is meant to
  1. Clarify
  2. Help them retain information
  3. Sustain interest
Look at this awesome decision tree!

Photo of a PowerPoint slide titled "Do you need a slide?". It includes a graphic of a decision tree about needing a slide or not.

Bullet points may still be the most efficient design choice.

For example, use bullets only when:
  • You want people to recall items from memory
  • Items map directly to your learning objectives
  • You need a list
TIP: use progressive disclosure: conceal parts of your slide and reveal them when you want to talk about them.

Use assertion evidence technique.

People remember more when you put your main point (short sentence at the top) and use an image to prove it in the body. Don’t assume everyone can see/read the slide or understand the use of an image. Here is one of Ann's before/after examples:

Before:
Poorly designed slide example with the title "Buffer strips" and several long sentences bulleted.
Fandrey, A. 2017. Academic Slide Design: Visual Communication for Teaching and Learning. Mpls: Scale + Fine
After:
Redesigned slide with an aerial photo of a field with large text and an arrow showing Buffer strips improve soil, water and air quality.
Fandrey, A. 2017. Academic Slide Design: Visual Communication for Teaching and Learning. Mpls: Scale + Fine

Use a style guide.

A style guide is a set of micro-agreements you make (with yourself) at the start of the slide design process. Making these decisions with colors, fonts, animations, pointers, alignment, shapes (use round or hard edges), etc., helps you stay consistent within slides. Consisten slides create a more cohesive deck, which makes it easier to learn from your slides and adds up to your professional credibility.

Other tips.

  • White space is the best tool to focus attention 
  • The big thing or the bright thing on your slide get looked at first 
  • Eyes follow lines. Lines divide content

My notes barely scratch the surface of this workshop but I highly recommend you check out Ann Fandrey’s book Academic Slide Design: Visual Communication for Teaching and Learning. that was just published in April 2017!  It will be available in mid July at the UMN library and of course available to purchase online on Amazon. It is full of examples, tips and an excellent resource. Thank you Ann for a great workshop, podcast conversation and sharing this great information!


Quick Bytes Live! Podcast

Kari Robideau and her pal, IT Goldy

#18:  Remember these 7 things in your teaching webinars 

(recorded June 5, 2017)
This podcast is a special edition with an extended discussion of the criteria for good webinars, not to mention our special guest! Don't miss it! Amy, Karen, Alison, and special guest Kari Robideau (live from Moorehead, MN) go over the seven components of the Delivering High Quality Webinars "rubric." We also talk about how you could evaluate your own webinar performance. Spoiler alert, one way is watching your own webinars! Eww!
 Links from this episode:
Be sure to subscribe and let us know your feedback!

Subscribe via iTunes
Subscribe via RSS


What is digital accessibility? 

According to whatis.com, digital accessibility is the ability for a website, mobile application, or electronic document to be easily navigated and understood by a wide range of users, including those users who have visual, auditory, motor or cognitive disabilities. People who have disabilities navigate websites using technology that helps them understand the content on the page. For example, a blind person uses a screen reader that will read the content to them; a person with no use of their hands may use a head pointer; and people who have difficulty typing may use text input software.

Example of a Screen Reader

** In this Quick Byte, I will only be discussing website accessibility.

Who does it affect? 

Disabilities affect a large part of the population – 15-20%. These can be temporary disabilities such as a broken arm or eye surgery; permanent disabilities such as deafness or blindness; or it could be an invisible disability such as ADHD or dyslexia. All of these types of disabilities will affect the way a person interacts with the web.

What can content editors do? 

When adding content to the web, be mindful of the people who use our websites. Here are some basic rules to follow:

Content

When writing content, be clear and concise. Scan-able content is very important for people who have trouble reading. Use headers, shorter paragraphs, lists, and plain language.

Headers

The header HTML (ex: H1, H2, H3, etc.) is not just used for looks. Screen readers will scan the page for all the headers and read them back to the user. Think of using headers as the outline of the page. They should always go in numerical order, do not skip headers and go from H2 to H4. Here's an example of what it should look like:

H1
     H2
          H3
               H4
     H2
          H3
     H2

Lastly, only include one H1 on each page. The H1 should be the topic of the entire page.

Images 

Images on websites can be used to add context to content or they can just be decoration on the page. Someone who is blind cannot see these images which is why alternative (alt) text is important. Alt text are words used to describe what the image is displaying. These words appear in the code, but not on the page. When a screen reader comes across an image, it will read this text to the user.

The only images that need alt text are the ones that add context to the associated content. If they’re used as a decorative addition, only include alt=”” in the code and the screen reader will pass right by it. If the blank alt="" is not included, the screen reader will read the image's file name back to the user.

diagram for when to use alt text on images

Photo Source: Adrian Roselli from his Selfish Accessibility presentation at MinneWebCon 2017. 

Links

Many times, links are denoted with a different color. This may not work for someone who has trouble seeing color differences. Adding an underline or a specific icon to the link helps all users understand that they can click on the words and be taken somewhere else. The underline should be included in the style sheet by the web designer or developer, so this isn’t something a content editor should have to worry about.

Example of what a colorblind person sees on our site with underlines (left) and without (right).
Screen shot of U of M Extension webpage with underlined links Screen shot of U of M Extension webpage without underlined links
When writing words that will become links, remember to be descriptive. Do not use ‘learn more’, ‘read more’, or ‘click here’. Screen readers can scan a page for all the links and read them back to the user. ‘Click more’ does not tell the user where they will go. Instead, you could use ‘learn about Extension’ and add the link to the whole phrase.


Summary

Creating websites that are accessible to all people takes work from everyone on the team. The more you consider how all users of a website are navigating around, the more people you will be able to serve.