A.K.A. When adding a thumbnail to a news or event item, what size should it be?

Short answer:

Shorter than 394 pixels, roughly 6:5 aspect ratio. 4:3 ratio is OK.

Long answer:

Facebook timeline image width is 470 pixels.* Max image height is 394 pixels.

Images taller than 394px will have awkward white space added on the right.

The aspect ratio is an odd 235:197, or roughly 6:5. 4:3 ratio is fine also.

* Much smaller thumbnail images will be cropped and resized to a ~156x156 square beside the title. It looks like this, except if the thumbnail is not square it will also cut off the sides:

Not only is the resolution blurry, this format gets almost no clicks as a Facebook share and should be avoided.

THE PROBLEM

The mouse wheel cannot scroll on one or more pages of a client's site, but only in one browser: Internet Explorer.

THE CAUSE

There is an IE-only stabilizing script on some sites that is misfiring.

THE SOLUTION

It's a quick bug fix for the front end developer team. Assign it to them in Wrike.

THE PROBLEM

When clicking and dragging to resize an image in the WYSIWYG editor, the image won't resize proportionally. Instead, it stretches or squishes the image.

Or the image appears to be sized proportionally on desktop, but at mobile responsive widths the image appears squished or stretched.

THE CAUSE

The image has both a height and width set, which conflicts with responsive design!

Even if the height and width are set proportionally in desktop view (for example when click-drag resizing in Firefox), the mobile view is forced to squish the image's width inward while leaving height the same.

THE SOLUTION

First, do not click and drag to resize an image.

Second, only set an image width, not a height. The browser will then apply the height automatically.

Here is a quick method:

1. Click the image
2. Click the image "Width" box below the WYSIWYG editor

3. Change "Width" to another number (in pixels), then press tab. The image will resize proportionally.
4. Repeat steps 2 and 3 until the image is the desired size

Important: Do not touch the "Height" attribute, as setting a height will cause the image to stretch and squish. If the height has already been set on an image, you can unset it by deleting the number in the "Height" box and pressing tab.

THE PROBLEM

The bottom of a Forms & Surveys Tool form shows this:

THE CAUSE

When this error displays at the bottom of a form, it means the domain needs to be registered with Google to use Google reCAPTCHA. Vision typically does this at launch. It is not a bug, per se, but often it means the client has multiple domains or a new domain while we have only registered one of them with Google.

Example case:

• www.clientdomain.gov/form works
• www.clientdomain.ca.us/form has error

THE SOLUTION

Explain that Google reCAPTCHA is registered by domain, and give the client two options:

1) Set up redirects so that all traffic to their secondary domains reroutes to their primary domain (e.g. user types in www.ci.wilmington.de.us and gets redirected to www.wilmingtonde.gov). This will also solve this problem as well as prevent problems with confusing search results and analytics. (For subsites this will not work; use option 2.)

2) Request a list of all domains that point to their site, including subsites if they have them. Then add those domains to the client's entry on https://www.google.com/recaptcha/admin (if the client's website doesn't have an entry yet, it can be created there). You can also request @Lyman to do this if you provide him with the list of domains.

THE PROBLEM

You have a Facility Directory page displaying both the map and list widgets. When a facility link is clicked, however, the detail view pages shows two of the same facility!

THE CAUSE

A widget setting in the Facility Directory Map widget controls whether the page loads all widgets or just one instance.

THE SOLUTION

1. Request that a SysAdmin edit Widget Builder for the Facility Directory Map widget in use. Have them check this option to display:
   
   
   • Load Detail View in Current Page (same page + record ID)
2. Once that is done, edit the facility directory page, and set that widget option to "No"

THE PROBLEM

When a user clicks the unsubscribe link from an eNotification, they receive a Page Not Found error like this:

Oops, the page did not load...

We've encountered an error while trying to load this page,
http://www.clientdomain.gov/page/advanced-components/redirect-helper/-rfn-SubscribeDeleteResultPage/-delsubResult-deleted.

The user may or may not get unsubscribed when this happens.

THE CAUSE

There are three possible causes:

1. The redirect helper system variable does not point to the right page

2. The redirect helper page does not exist or has been deleted

3. The redirect helper page exists but has been expired or otherwise made unavailable (but the user will be successfully unsubscribed)

THE SOLUTION

1. Only SysAdmin has access to the "Submission Redirect Helper Page" system variable, but you can see what page is being directed to on the broken link error page and track it down using that.

2. If the page path truly doesn't exist, create a new Redirect Helper page (page template with "Redirect" widget should exist already), then ask a SysAdmin to update the "Submission Redirect Helper Page" system variable.

3. If the Redirect Helper page or any of its parent pages are expired, unexpire the page(s).

1. Edit your content area and choose a photo from the image library.
2. Resize your image and right click to enter the image properties.
3. Copy the image URL. Click ok.
4. Open up the hyperlink manager and paste the image URL into the URL field.
5. Save and publish. Now when we click the image from the front end, it opens full size in a lightbox!

Fun fact: You can tell the Adobe Reader browser plugin how you want it to display your PDF. Here is how to control the default zoom and starting page number.

Say you have a PDF:
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf

Add #zoom=100 to default the user's zoom to 100%:
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#zoom=100

Then suppose you want users to automatically start on page 5. Add &page=5 to the end of that:
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#zoom=100&page=5

Please note this will only affect users who open PDF's in their browser with the Adobe plugin. So this will affect most but not all website visitors.

THE GOAL

A page where a non-member visitor can enter a code in order to see certain content, with no manual user verification required on the client's end. As long as someone has the code they may access the content.

THE SOLUTION

With the Form Tool, create a form with only a "Text Information" block with the intended content. Use the following Form Settings:

• Footer progress display: Do not show progress
• Resume progress: Resume not allowed
• Disable question numbering: checked
• Previous page navigation: unchecked
• Form Security: Add New Security Add-In: Password Protection

Place that form on a Form Detail page. To hide form elements such as CAPTCHA, submit button, and password error, place the following CSS in the content area of the page (not the form):

<style>
.validation-summary-errors, .recaptcha_container, .form_submit_footer {
    display: none;
}
</style>

Voila! That's it.

Here is an example on Insight (not visible to clients): Password-protected Content (without Extranet)

First ensure an SSL certificate has been purchased and installed for this client. (The client will pay for the SSL certificate—more info here.)

Once SSL is installed, enabling it site-wide is quick and easy and should not noticeably impact page load times.

To enable SSL site-wide:

Configurations >> SSL Settings >> Select All >> Save

1. View page source (Ctrl+U)
2. Find (Ctrl+F) this: "nid:" (or copy/paste below)

   nid:

3. The numbers after the colon are the navID

To reset one site's cache in Chrome:

1. Launch Google Chrome and click on the Menu on the top right corner and click on Settings
2. Scroll to the bottom and click on "Advanced"
3. Under the "Privacy and security" section, click on "Content settings"
4. Click "Cookies", then "See all cookies and site data." It opens a new window with a list showing all stored cookies and cache
5. Type your URL in the "Search cookies" text box in the top right corner. The list is filtered showing only data from the searched domain
6. Click the "Remove All Shown" button

To reset one site's cache in Firefox:

1. Press Ctrl+H to open the History sidebar
2. In the History search, enter your URL
3. Hover over the result(s) below until a tooltip appears beginning with your URL (it may be the first entry or could be further down)
4. Right-click that result and choose "Forget About This Site"

By default, a favicon does not show on an iPhone home screen when users bookmark a site. However, if you supply our front end developers with a 114x114 square of the client's desired icon logo, they can turn it into a favicon and an iOS home screen icon.

Alternatively, you can supply the necessary files to front end devs by uploading the image to these sites and downloading the ZIP files they output:

• http://www.iconogen.com
• http://www.iconifier.net

As of 7/20/2017, we only make use of these icons on a site (no special Windows, IE/Edge, Android, or other app icons):

• Main/apple-touch-icon.png
• Main/apple-touch-icon-57x57-precomposed.png
• Main/apple-touch-icon-72x72-precomposed.png
• Main/apple-touch-icon-114x114-precomposed.png
• Main/favicon.ico

If you have access to the Google Analytics account, getting web traffic data for a department's pages is easy!

Following this example screenshot: http://screencast.com/t/0YuyLE4V

1. Choose the intended date range on the top right
2. On the left, click "Behavior >> Site Content >> All Pages"
3. If you want one department's analytics, there is a search filter in the bottom data frame: enter the department page path and hit Enter
4. If you want to export this department page traffic data, that option is near the top

1. Login to Box.com (support agents use support@visioninternet.com)

2. Click to enter the Vision Client Upload folder

3. On the right side of this folder, click Invite People

4. Enter the client's email address

5. Change Invitee Permissions to "Uploader"

6. Click Send Invites

We'll need to select from two possible styles for Translate and decide where on the page it should go (typically a spot in the header or footer) so we can tell our developers.

Option A) Google's dropdown menu
looks like this before click: https://www.screencast.com/t/DskAJO9l
--> looks like this when clicked: https://www.screencast.com/t/UMk4gR5vUMeh
--> will show whatever language is clicked by the visitor

Option B) Text link in header or footer
text could say "Translate" or "Español" or similar
--> when clicked, translates to a language pre-selected by the client (e.g. Spanish) but then offers options to change that language
example: "Translate" at the top of Loveland, CO http://www.cityofloveland.org

Good news! There are often ways to find past versions of a page if you have the URL of the page you are trying to recover.

One way is to search on the Internet Archive Wayback Machine for previous versions of the page at
https://web.archive.org

Another way is to search for the page URL on Google, then click the small arrow next to the address to access an older "Cached" version of the page. Example screenshot:

Take this link below and change the YELLOW HIGHLIGHTS to the client's website domain and the NavID number of the target page:

http://WWW.CLIENTDOMAIN.COM/Sys/Sso/Login?ReturnUrl=%2F%3Fnavid%3DNAVID_NUMBER

This is now the URL they should use wherever they have member group login links.

Short answer:

Break all links to the page and tell Google to reindex. Google may take up to 1-2 weeks to reindex.

Long answer:

1. Remove all links to the page. If a public-facing page links to the hidden link, Google will always find and index it.
2. Break the link. If the page linking to the hidden link is not under your control (i.e. on another website), make the URL go nowhere.
   
   • If it is a page they don't want to delete, move it and update its friendly URL.
   • If it is a document, it must be deleted.
3. Tell Google to reindex using Google Search Console (a.k.a. Google Webmaster Tools). (Steps how to be added later or to another FAQ.)

Sometimes user-entered Javascript will render a page uneditable in the CMS back end. If this happens, there is no need to get a developer involved. You or the client can reset the page, dumping all of its contents, by swapping its page template temporarily.

BEFORE ANYTHING ELSE: Back up the page content! (Copy the HTML, not the design view.)

If you can't edit the page to copy its content, a technical way to grab the content is to view source and search (Ctrl+F) "content_area" to locate <div> tags with user-entered content. You will need to pore though HTML to figure out what user code is between the <div> and </div> tags.

To reset or empty a page's content:

1. Go to the back end Page list view under Site Content >> Pages
2. Find the page, and on its right hand options, choose "Swap Page Template"
3. Note the current page template -- you will need to set it back in a moment
4. Swap to any other page template
   *** YOU WILL LOSE ALL CONTENT ON THIS PAGE ***
5. Swap the page template back to the original one it was using

Then you should be able to edit the page again.

To find the largest documents taking up space:

1. Login to the CMS
2. Go to Document Central
3. Click the search bar and press Enter (leave it blank) to list all documents in the system
4. Click the File Size column header to sort by file size
5. Click the File Size column header a second time to sort largest-to-smallest

A shortcut is to go to this address:

[CLIENT DOMAIN]/Admin/Document/Search?size=0&folderid=2&cSubfolder=true&cScope=all&cSeperator=%2C&_=1476995174220&orderBy=FileSizeStr-desc

THE PROBLEM

When printing a PDF of an applicant's submitted job application:

• Formatting is stretched, too big, cut off, or has excessive blank space
• It uses too much paper
• It does not list submission date
• It does not list position applied for

THE CAUSE

The PDF export feature of the job applicant manager is under review for future enhancements, but there is no estimated date to resolve the above items.

THE SOLUTION

Don't use PDF export to print job applications. Instead, print the job application report email that is notified each time someone applies.

1. Do the following for all job postings:
   1. Under "Application Details" set "Notification Mode" to "Full Report"
   2. Under "Application Details" include an HR address within "Email Notification to"
   3. Ensure on the job application that any application answers meant to be printed are not marked as "Sensitive" (otherwise those answers will not be emailed)
2. Print the email that is sent to the HR address

THE PROBLEM

1. webmaster and sysadmin logins do not work, yet you have confirmed the correct password
2. Online Reference pages are blank

THE CAUSE

The web server is not successfully connecting to the VMC (Virtual Management Console). This almost exclusively happens when the client hosts their own website and blocks remote connections to Vision's VMC server.

Sometimes the web server connects to VMC, but the connection settings are invalid. For example, if the web server restricts certain SSL ciphers, this can block the connection.

THE SOLUTION

1. Client IT will need to allow remote connections from their web server to 38.106.5.255 over ports 80 and 443.
2. Confirm what IP address(es) the client's web server would use when connecting to VMC, then request a Vision network administrator to allow that IP address to connect to VMC.

Vision's IP address ranges are as follows: 

38.106.4.0/24
38.106.5.0/24
38.98.19.178
38.98.19.179
38.98.19.180
38.98.19.181
204.197.206.242
38.140.63.218
38.106.38.0/24
135.84.124.0/24
173.203.0.0/24
209.61.148.0/24
161.47.51.85
161.47.51.86
161.47.51.87
161.47.141.86

Note: IP ending in .0/24 denotes the full range for the last octet, i.e. all addresses ending in .0 through .255

Updated 8/8/2018

Here is the list of exclusions:

*/advanced-components/*
*/feedback*
*/_gfx/*
*/*.css*
*/ftp/*
*/*.js*
*&ftitle=*
*ComponentArtScript*
*/*.ico*
*&returnURL*
*/WebResource*
*/search.aspx*
*item-*
*ascn*
*PhotoID*
*sortn*
*.js
*-alpha-*
/-selectview
/-selcat
/-seldept
/-curm
/-cury
*toggle=all*
*toggle-all*
*npage=*

Our system does allow adding meta keywords and descriptions to a page:

1. Edit the page
2. Click the Show All Options bar
3. Go to the Tags & Meta Data sub-tab

However, if you are considering using meta keywords, we should point out large search engines like Google began ignoring meta keywords before 2009 due to webmasters abusing them. So it may not be worth spending time on them.

This was Google's blog post announcing it: https://webmasters.googleblog.com/2009/09/google-does-not-use-keywords-meta-tag.html

We have been doing investigation and testing on this issue, and I have another way to look at this that may help.

When you open the document on the desktop you are using the full featured program (Word, Adobe Reader, etc). When the exact same file is accessed from a link on a site, most visitors view it in-browser and the this means IE, Chrome or Firefox is displaying the document. While this works fine most of the time, the browser sometimes does not get it 100% correct.

A notorious example was a PDF that used tabs instead of pages. No browser could open it due to the uncommon format but it opened easily with Adobe Reader. PDFs with fill-able forms also rarely work in-browser, and document links that use scripts frequently get blocked for security reasons by browsers.

We'll need to select from two possible styles for Translate and decide where on the page it should go (typically a spot in the header or footer) so we can tell our developers.

Option A) Google's dropdown menu
looks like this before click: https://www.screencast.com/t/DskAJO9l
--> looks like this when clicked: https://www.screencast.com/t/UMk4gR5vUMeh
--> will show whatever language is clicked by the visitor

Option B) Text link in header or footer
text could say "Translate" or "Español" or similar
--> when clicked, translates to a language pre-selected by the client (e.g. Spanish) but then offers options to change that language
example: "Translate" at the top of Loveland, CO http://www.cityofloveland.org

Hopefully I can shed some light to help explain the cost --

The cost covers coordinating our teams to:
* spec and interpret the request
* log into the site database
* update the graphic design on file
* replicate live site settings on our development copy of the site
* analyze and change code
* make changes responsive
* test that it displays properly in all supported browsers
* document changes
* secure your approval
* make any necessary revisions
* synchronize changes with our backup copy of your website
* make the changes live on your site

The great thing about our CMS is that it automates programming so coding expertise is generally unnecessary. However any changes to the overall structure or logic go through the development workflow above.

The website is the primary portal for public information, so accuracy is paramount. These steps ensure high quality, but they can take more time than is readily evident.