Jan & Feb 2020 Edition - Troy School District

Graphic Element Only: Blogger Jan-Feb 2020

Have a Unique Top to Share or Just Want to Comment on How We're Doing

January Topics & Tips

Reviewing Home Page Standards

HAPPY ANNIVERSARY!

It's been 6+ months since our initial Launch and the start of a new year - how time flies. Following tradition, it's good timing to take a step back and review, as we welcome the new year in.

Seven Sections:

Header
State Data
Masthead
Calendar
News
Spotlight
Footer

(Note: Some pages differ slightly due to approved display changes/additions)

REMINDER:

It's important to remember that our Home Pages were designed to provide the end-user a "snapshot" or "highlight" of news and other important events. Along with that, we purposefully built each page with unique sections to display these items and provide a uniformity across each home page. When items are deleted or added to the homepage, it puts a wrinkle in that uniformity. Let's Review.

Home Page Standards

HOME PAGE

As we celebrate the 6th month anniversary of our Launch to Finalsite, it's a great time to review our Home Page Standards. This information can also be found in your Webmaster's Guidebook.

As always, If you have any questions regarding the Home Page Standards or anything regarding your site, please contact a District Web Admin - Melissa, Kerry or Linda.

Home Page Panels

Header

The Header is comprised of the school logo, name, location description and navigation menus, along with design elements. Webmasters have access to edit the MENU, PARENTS and STUDENTS lists. The district manages the template and the population of the STAFF and SCHOOLS menus. All other items are managed by District Admin.

Note: Some sites have additional or different navigation menus, per approval, that they manage.

Header copied from Smith Middle School site.

STATE DATA

Masthead

The Masthead is comprised of 2 main elements:

Flyout Navigation Menus
Slideshow Panel

Webmasters have access to edit the Quicklinks Flyout and the Slideshow panel. Prospective Families Flyout is managed by District Admin. The Slideshow panel can be comprised of images and videos. At least 1 image or video should be displayed, at all times. Use the drone shot of your building as a placeholder, if you do not have images. SINGLE images or videos can be added via the Edit Gear, from a Resources Folder. If you use more than 1 item, they need to be added to a Gallery Folder to be viewed as a SLIDESHOW.

It's recommended that all images and videos fall within the set standard size to keep consistency and the Flyout menus from falling off the masthead.

Image/Video Standard Size: 1440px x 640px

Add text, titles and links to each image/video by adding text to the Description area of the Resource and adjusting the controls in the Formatting or Controls in the Resource edit panel.

Please do not edit the flyout menus on the masthead or move them about the page. They have embedded script to expand and collapse from their location.

Note: Some sites have additional or changed flyouts, per approval.

Masthead copied from Hamilton Elementary site.

Adding a Description

To add images and/or video:

Click on the Edit Gear for the Masthead
Create a Gallery, if using a grouping of images and/or videos. *Single items can be used, if placed in a Gallery Folder or from a Resource Folder.
Browse for the Resource or Gallery.
To add a Title, link or text, you'll open the Resource and add it to the Description field. To turn it on in the Masthead, expand the All settings and click the Description box and Display Resource selected to Title.

Adjusting Additional Element Settings

Calendar

The Calendar is managed through the Calendar Manager or imported iCal (Google Calendar). At minimum, the Troy School District-Wide Calendar must be displayed, if you do not have a school calendar.

To link a Calendar to display, click the Edit Element gear and select the calendar.
Calendar event details (Time, Location , Summary, etc...) can be turned on/off per the Edit gear.
TIP: If event descriptions appear too long, turn Truncate ON to "shorten" titles.
The Troy District Calendar must be set to display during the summer on your school homepage, as most school calendars do not have events scheduled.

How to Build and Manage Calendars will be an upcoming Blogger topic - Stay Tuned!

Calendar copied from Boulan Park Middle School site.

News

News & Announcements (Posts)

The News & Announcements panel displays Board Posts that are built and managed in the Posts Module.

There are 18 image slots available for posts to display on the home page. These are accessed via arrows and/or dots that can be turned off/on in the Edit Element gear. Dots are added at the bottom of the panel and arrows on both sides of the "View All News" design sub-title link at the top of the panel. You must have at least 3 posts added to your page, at all times.
Each Post is made up of the following elements:
- Title (Preview on the Hover-Over)
- Body copy (to be used for 1 paragraph or less)
- Summary (used if there is more than 1 paragraph of text)
- Publish Date ( Featured and Expire dates can also be set)
- Thumbnail Image (use the recommended image size so that images are not cut-off or appear distorted)

Image Size recommendations: 380px x 285px

News copied from Martell Elementary site.

Spotlight

SPOTLIGHT

The Spotlight Panel is made up of several common elements:

Each Image/Video container in this section has been sized to fit and display a SINGLE resource of your choice. These containers are meant to provide a glimpse into your school and highlight weekly, monthly or yearly achievements or events.
Images/videos can be edited and added via the Edit Element Gear. Galleries of multiple resources (slideshows, etc) CANNOT be added. To view a gallery of resources, have your image link to a site page.
Although you have access as a page editor, DO NOT delete the video/image containers, replace the resources. Do not delete the Twitter feed from this section.
If you have mistakenly deleted element any homepage elements or Spotlight containers, please contact Melissa, for support.
TIP: Use the larger containers for video elements and the smaller ones for images.
The recommended image sizes, per container are listed below. Video should reduce correctly for the larger containers with some cut-off outside the container. Smaller containers will adjust and cut-off video, per the container size. Although these are suggested sizes, other sizes can be used in the containers. Images will adjust to the container size by cropping or stretching. It is not recommended using photos or videos above 385px in height, as it extends the Spotlight container beyond normal responsive viewer standards.

Image Size recommendations (Small containers): 325px x 285px

Image Size Recommendations (Larger containers) 525px x 285px

Spotlight copied from Larson Middle School site.

Footer

As with the Header, the Footer has a lot of identifying information, including the District OneTroy tagline, school name and contact information. Also included is, webmaster contact info, school logo, and social media links. Most of these items are set on the main template and managed by the district, but, you have edit/managing access to the Social Media Links. Each Social Media Link is pre-set with the icon, you just need to add the link.

Note: The blue circle-guy icon (lower right) is the Audio Eye icon and evaluates our site for accessibility issues, such as, Alt Text, Color, Title, etc. problems. Audio Eye will be discussed in a future Blogger issue.

Note: Some sites have additional or different navigation menus, per approval, that they manage.

Footer copied from Wattles Elementary site.

Customizing Tabs & Accordions

Accordions and Tabs are a wonderful way to display and organize a large amount of content on a single interior page. You are only bound by the size of the container or page as to how many accordions or tabs you can apply. And, you can switch between the two in the Layout Edit setting next to the Edit Gear of your element. Note: You can lose content, if you have accordions within accordions and your switch to tabs. First, add an Accordion or Tabs element to the page or banner. You'll find them in the “Layout” section of the elements menu.

Each tab or accordion is named "New Panel" and will have to be renamed. To add Tabs or Accordions to an existing set, just click the “Add Panel” or “Add Tab” button. To edit a panel's title, click the corresponding panel settings icon. Note: Each panel has a settings icon, and the tabs or accordion element itself has its own settings icon.

Once your tab or panel has been created, you can customize it by adding content within. Expand or click on the panel/tab and add your elements. New panels/tabs have create a Content element within, this can be used or deleted.

How to Link to a Panel/Tab Rather Than Entire Page

With so much content on one page, you may find you want to link to a specific panel rather than the page itself. Each panel has a built-in anchor link that you can use to automatically expand a particular panel on the page.

To find this link, visit the live version of the page with the Tabs or Accordion element. Right-click on the panel title and select “Copy Link Address” (Chrome), “Copy Link” (Safari), “Copy Link Location” (Firefox), or its equivalent in your browser of choice. On the Add Link menu, paste the link into the URL field.

Note: This link will not work for Tabs or Accordion elements that are inside of other Tabs or Accordion elements. Only panels that are initially displayed on the page when it is loaded will respond to the anchor link.

Reminder: Page Load Speeds

As with all of our pages, it's always a good idea to keep in mind the end-user. Not all users have updated video cards or a ton of memory. So, some pages, especially those with a lot of content can create lag times. The same for content that you put inside a Tabs or Accordion. These elements will load when the page loads, even though they are hidden inside the panel/tab and not immediately visible when the page is loaded! Basically, if you add it to the page, no matter if it is visible or not, it all loads at the same time when the browser requests the page load. This can slow page load speeds. Just something to keep in mind. If you have a lot of content (videos, HD photo galleries) on a page, you may want to think about creating additional sub-pages.

JUST FOR FUN - ADDING VOICE-OVER CHARACTERS

Just for fun - try adding a voice-over character to your site to read the birthday's for the month or announce a special event. Voki is just one of the many that offer a few free characters.

Once you've created your online character, embed it using an "iframe" script.

Here's the one I used for the Voki Blogger Bear. Feel free to copy this one and change the portions that fit your use.

Make sure you set your iframe to allow full screen, so you can change the size
Add a border by changing the 0 to a number (this number represents how many px = pixels wide the border will be)
Set your height and width (same as with border, this is represented in pixels)
You'll have to go to Voki to select your character and add a voice. Change the URL in the iframe below to embed your character or request an embed code to add.
Have Fun!

<div><iframe allowfullscreen="" frameborder="0" height="500" src="https://www.voki.com/site/pickup?scid=15951101&chsm=da0bc4bad2cb35cd96bfe9f6a38c1df6" width="500"></iframe></div>

February Topics & Tips

Stay Tuned - Exciting things to come