Division of Student Affairs

Advanced Web Editor Training

Topics of Discussion:

1. Image Optimization- Photoshop Tutorial

2. Mobile Responsivity

3. Advanced Linking- Relative Links

4. Accessibility: JAWS, PDFs & Images

5. Iframes

6. Webforms Advanced

7. New Theme- Buttons, Grids, Hero Block, Video Block, tabs and submenu

8. New Modules & Security Updates

9. H5P Interactive Content- accordion, timeline and hotspot

10. New Department Layouts and Looking Forward

Resource Links:

DSA Web how-to’s: https://studentaffairs.unt.edu/docs

Online file system: https://studentaffairs.unt.edu/imce

Project Request Form:https://studentaffairs.unt.edu/the-division/marketing-and-

communications

Image Optimization Standards:

o https://developers.google.com/web/fundamentals/performance/optimizing-content-

efficiency/image-optimization

o https://www.abetterlemonadestand.com/optimizing-images-for-web/

o https://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips

Photoshop Cropping Tutorial:

o Basic: https://www.youtube.com/watch?v=Ev2w1dkB6lE

o Advanced: https://www.youtube.com/watch?v=61yEOZsFL34

o Image Optimization: https://events.drupal.org/seattle2019/sessions/make-your-

website-faster-saving-images-correctly

Stock Photography: Identity Guide, Pexles.com, Flickr, Other Websites

Responsive Design: https://www.youtube.com/watch?v=bW2FZOtEOqQ

Accessibility-https://www.w3.org/WAI/fundamentals/accessibility-intro/

Drupal Website- www.drupal.org

New Foundation Theme Website- https://foundation.zurb.com/sites/docs/v/5.5.3/

Foundation Grid- https://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html

Kitchen Sink - https://foundation.zurb.com/sites/docs/v/5.5.3/components/kitchen_sink.html

WEB TRAINING PAGE: https://studentaffairs.unt.edu/web-training-page

Image Optimization:

Minimizing the data before uploading to the web, not cropping the orientation of the photo. The data

needs to be 500-1000KB (Kilobytes) for web, which is on the high side. Most cameras & camera phones

take photos that are 3-20MG (Megabytes). (1000KB=1MG) This will help load time on all devices and

storages space on our database. For easiest data cropping, utilize “save for web” option or adjust your

presets by lower percentages and resolution at 72px to crop.

Image Optimization for web: https://events.drupal.org/seattle2019/sessions/make-your-

website-faster-saving-images-correctly

Advanced Photoshop Cropping Tutorial for Web:

https://www.youtube.com/watch?v=61yEOZsFL34

Step by Step Photoshop Optimization "How-To":

https://www.abetterlemonadestand.com/optimizing-images-for-web/

Optimizing Photos for DSA Web:

1. Open photo from source.

2. Utilize Photoshop presets and/or percentages and resize data.

3. Save in shared drive with DESCRIPTIVE short title, check data size by properties.

4. Upload to IMCE to your department/program folder.

Mobile Responsivity:

A responsive website reacts to its environment – whether it’s mobile, tablet or desktop – and changes the

browsing experience to reflect the size and capabilities of that environment. It’s a bit like water changing

shape when it’s poured from a jug into a glass or bowl. A responsive site has more or less the same

functionality and content across all platforms, but appearance and layout may vary. For example, menus

and buttons may look different and text/images may increase or decrease in size.

What is Responsive Design? https://www.youtube.com/watch?v=bW2FZOtEOqQ

Drupal 7 Responsivity Tools: https://www.drupal.org/docs/7/mobile/responsive-web-design

Chrome F12 Developer Tool: https://developers.google.com/web/tools/chrome-devtools/device-mode/

*Utilize grids on pages and percentages with images for best results.

Advanced Linking:

Relative Links vs. Absolute Links

We prefer to use “relative” links when linking to our internal pages. This is better for analytic purposes to

gather where the click is coming from. Also it is better when we update page titles or themes.

When linking, under “link info” type the relative link in the url and “other” with show up.

Example:

Relative: /career-center

A relative link takes advantage of the fact that the server knows where the current document is. Thus, if

we want to link to another document in the same directory, we don't need to write out the full URL. All

we need to use is the name of the file.

Absolute: https://studentaffairs.unt.edu/career-center

An absolute link defines the location of the document in total including the protocol required to get the

document, the server to get it from, the directory it is located in and then the name of the document

itself.

How to Link an Image

Optimize Image & Save with descriptive title.

Image Info:

o Browse server & upload image to correct folder

o Add alternative Text

o Adjust width by percentage

Link:

o Browse Server and link to image so it will open larger, or link to a “relative” url for

internal or absolute url for external url.

o Target: Open in New Window

Advanced:

o Long description url to explain the url for screen readers instead of reading the long link.

How to Link Text

Link Info:

o Link Type: URL, Email or Anchor

o Relative Links <other>

Target: Open in New Window

Advanced:

o Advisory Title to shorten url for accessibility

o Stylesheet Classes to add button options

How to set Anchor Link

Set Anchor in page content by using the (flag) button

Link Info:

o Link Type: Anchor

o Anchor Properties: Create name of anchor

o Create side nav menu with links

o Link side nav link to anchor in link info, link type.

o Select correct anchor name.

Accessibility:

Accessibility Resources:

Intro to Accessibility: https://www.youtube.com/watch?v=hufMi9LZX2I &

https://www.w3.org/WAI/fundamentals/accessibility-intro/

Website Evaluation Tool: wave.webaim.org

Accessibility Examples: https://www.w3.org/standards/webdesign/accessibility

Contrast Checker: https://webaim.org/resources/contrastchecker/

JAWS Keyboard Shortcuts: https://webaim.org/resources/shortcuts/jaws

Images

Titles: Good practice to save the web optimized photo with a descriptive,

simple title before uploading to the IMCE.

Ex:

Correct Title for Web: yellow tulips

Incorrect Title: IMG00645_5412_Tulip.jpg

Alt Tags: Same as “correct” title, ore even more descriptive. Don’t put “photo” the screen reader says

“Image” after the alt tag text. Remember to be descriptive- instead of just “flowers” think of what you see

in the photo.

Captions: Important on all images and photos, even if you have information in the body of the page

Links: Advanced Option- Set Advisory Title, this will explain what the link goes to instead of what is linked.

For example: If you have the number 30 linked to our 30 department programs, you would want it to say

“30 department programs” instead of “30 link” For this case, you would just need to put “department

programs” in the advisory title. It will read” “30 department programs”

3 ways to be accessible when linking:

Descriptive Image Title

Alt Tags

Advisory Title or Shorten URL

PDFS

Save as an Accessible PDF before uploading. This is to create the best results for screen readers and/or

browsers to be able to read the PDF correctly.

(Go over accessible vs. non-accessible pdf on training page.)

Adobe Acrobat Accessibility Checker How-To: https://helpx.adobe.com/acrobat/using/create-verify-pdf-

accessibility.html

**Utilize Webforms instead of PDFS forms if possible, they are not that accessible. Show example.

Screen Readers

Quick Tips:

Use Alt tags for all images, even within blocks and views. Also, good practice to double check all

images in pages when editing. Make sure the image title, alt tag, and caption are all different.

Think about navigating the page with the “tab” button. Do you have too many sub-tabs? Do you

have all of the information on your screen for easy access without navigating through the menu?

JAWS- We will be going over a department page in JAWS so that you can hear how it sounds for screen

readers.

Mobile Options- There are also mobile accessibility settings that you can view a website on with your

phone. Check your settings options and try to navigate your page.

Web Aim

We will be going over a department page with web-aim to talk about what each error means and how to

update them.

Iframe:

Video can be added to a page in one of two ways: using a YouTube link or using a video file (reduced size mp4s only) which must first be uploaded to the IMCE file system. To add video to a page, click on the Iframe (world) icon. In the pop-up window, under URL input either the

YouTube link or, if using a file, the path to the file. Specify the width and height (by percentage) and click OK.

You can also use Iframes for interactive maps from google and social media feeds like twitter.

We now have a “video block” option that I can setup for your department, but you can basically get the same feel with embedding it into your page. If you are interested in having a video display elsewhere like for your Hero Image Block, let’s discuss!

Webforms:

**We are moving to a new system for webforms in the future called E-forms.

These will be much more secure than our current forms and we are allowed to ask

sensitive information that is currently restricted with drupal and FERPA

regulations. I am currently still in testing for these and creating some intake forms

for a few departments. If you are interested in getting these started for your site

soon, please let me know.

https://studentaffairs.unt.edu/about-us/staff/staff-resources/ambassador-program

Drupal Webforms

Moving forward these forms can still be created, but please make note that you might

have to create them twice when we move to the new system. For e-commerce, a new

system is also coming soon with Nelnet so webforms might be going away completely

and everything will be setup directly through Nelnet e-commerce.

Through Drupal, you have the ability to create fillable webforms for receiving data. These

are a great way to get information without having to create a pdf form, or have someone

save and email or print a document.

Webforms can be viewed by accessing the results via website table or individual

submissions can be emailed directly to you or a department email.

No FERPA sensitive data allowed on webforms such as ID#s, Birthdays, Gender etc.

Training Webform Example: https://studentaffairs.unt.edu/forms/test-webform-training

Back to the Basics- Creating the Form:

Add title.

Add component label- can type any title here.

Add type- Textfield, Email etc.

Mark if required.

Click Add to go in more detail.

Types in Detail:

o Commerce Product- Specific departments are setup for this, typically we handle

all ecommerce forms and products.

o Date- Selectable date input.

o Email- Important in most forms so that you have a contact method, can send

confirmation messages here.

o Fieldset- Create a separate section.

o File- Option for user to upload a file.

o Grid- Table view.

o Hidden- Hidden from view, admin can see it.

o Markup- Text like the body area for info.

o Number- Selectable number input.

o Page break- Breaks the page up to another page.

o Select Options- Yes, No, Other, or ecommerce options (safe-key|Readable

Option)

o Textarea- Fillable text paragraph.

o Textfield- Small text entry.

o Time- Selectable time input.

Conditionals

o If this option is selected-> this happens etc.

o Utilize these for hidden fields to have information or options show up when a

certain selection is chosen.

Emails- can input what email the submissions will be sent to, can also send to user.

Form Settings

o Can send confirmation message.

o Can re-direct to a different page.

o Cart/checkout for ecommerce forms.

o Put in user’s email in the “from” section so that you may easily respond to the

user.

CAPTCHA- we now have the ability to add a security question to save from spamming, let

me know if you need this enabled on your webforms.

New Theme:

Hero Standard Blocks

These are used for the department hero section on your home page. They include a photo,

department title, teaser info about the department, and can include buttons if interested that

link to important sections of your page.

If you would like any changes to the content already there or if you would like to add

buttons please email dsaweb@unt.edu.

Alert Flags

Looking to add these soon, can be used for closures, notifications or scheduling appointments.

If you are interested in these please send your requests to dsaweb@unt.edu.

Nivo Slider

Researching adding these to each department home page. They will need to be updated

occasionally by your department content editors. If you are interested please send slide photo

and information to dsaweb@unt.edu.

Basic Page

You now have the ability to create “basic” pages that have some manual css options and

advanced layout options. If you would like access to these for specific pages, please let me

know.

DSA Department Page

This page has your department’s contact info and a new image. We have included “special

programs & initiatives” here so that students can find them easily. Our focus groups showed

that students did not understand why they were separated and just wanted to find the resources

they need.

Programs & Services Page

This page has your department’s programs listed. If you have any new programs please make

sure we list them there by creating a program/service subpage for you. We are interested in

sorting these in other ways than just be categories. Any ideas? CLS does a good job with their

photos for these programs. If you do not have someone in your office that can do graphic

design, we can work with Brady and develop a template for these in the future.

Buttons

Image Photo Buttons

We have been utilizing these more and have a template for them, let me know if you would like

the Photoshop template sent to you, or send requests of them to be made and installed on your

site to: dsaweb@unt.edu

New Theme Buttons

o “button success” is the green button

o “button success expand” is the expanded green button

o “button alert” is the red button

New Grids

Utilize these to create layouts on your pages. We have a new grid system with the new theme so some of

your pages might be in the old grid orientation. Use this for reference.

https://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html

Things to note:

1. Your grid should always equal 12.

2. Use “row” to put content in columns.

3. Grids are more responsive than tables so utilize them more than tables if you can.

4. You can put rows inside of rows.

OLD GRID:

<page-content>

<div class="grid-9 col-left">

</div>

<!--Right column menu-->

<div class="grid-3 col-right">

</div>

NEW GRID:

<page-content>

<div class="row">

<div class="large-8 columns">

<div class="small-12 columns">

</div>

</div>

<!--Right column menu-->

<div class="large-4 columns">

<div class="small-12 columns">

</div>

</div>

</div>

If you see that any of your pages are off this is how you can fix them.

Menus and Side Navigation

Main Menus

Menus are a bit different with the new theme. As some of you might have noticed, mostly the

color, but also some responsivity issues. For example; if you add too many sub-tabs that the

screen will not allow you to go down to view all of them. We have this problem currently with

our “Departments” tab. There is also an issue with mobile navigation especially on our site.

Because we have many different menus within one site, it is hard for a mobile device to detect

which menu to grab based on which page you are on. We have fixed most of this on the back

end, but once you start diving into pages with “side navigations” this is where it tend to get

tricky.

Side Nav Menu

With the old grid system we used a “side navigation” within our pages. Now we are looking to

remove most side navigations and re-build them within your page. If you already have them

built within your page, you can now remove them from the page and replace your grid with grid-

12 for the whole page. See this in the “New Grids” section.

Issues & Accessibility with Menus

Adding multiple subtabs, are also not as accessible as we would like, so the best bet is to have

your main menus built out and possibly full program page menus as well in the future.

New Modules & Security Updates:

Modules

For those of you with your own separate websites, there are a few things you should be notified

about when we are installing new modules and security updates. With the new theme and new

web farm, we have been rolling out new modules and new security updates in a different way.

There is a new workflow system called GIT that we push changes out through. Because of this

new system, our dev sites are not used as a “sandbox” site to play in anymore and are mostly

used for testing and pushing out updates through. Also, when new modules are installed it tends

to throw your site into “maintenance mode.” If any of you see this, please contact me

immediately.

Modules- look for new or updated modules here, they must be up to date and maintained for CWS to

install/update: https://www.drupal.org/project/project_module

Security Updates- you may see warnings while editing your site about available updates.

**For all new modules, security updates or a new sandbox site, please email dsaweb@unt.edu.

H5P Interactive Content:

Interactive content is a great way for adding some new elements to your page without having to know

code. If you are interested in having some of these added to your page please send a request through the

Project Request Form.

** Some interactive content isn’t very accessible. Always test and link to an accessible PDF.

Video Tutorials:

https://www.youtube.com/watch?v=lfBhGLc-6t8

https://www.youtube.com/watch?v=SR6tVWSiXU4

Hotspot

https://studentaffairs.unt.edu/about-us/office-of-the-vice-president/dsa-org-chart

Accordion

https://studentaffairs.unt.edu/content/mac-major

New Department Layouts & Looking Forward:

We would like to work closely with our individual departments to plan a new layout and

give a new look to the department home pages. We would love to have input to what

you are needing. Let’s discuss a plan or layout that will work for everyone!

Some suggestions so far are:

o Block for Student Testimonials or Spotlights

o Department Home page Slider for Announcements

o More Social Media Feeds, Instagram Feeds

o Expanded sections and sliding background images

o Video Block instead of Image Block for Home pages