Vision Insight
Home MenuInsight Style Guide
To maintain a consistent organization and look-and-feel for users, content authors should start from the same playbook.
Branding, Colors and Fonts
Insight has been designed to automatically use Vision's branding and colors, so no special color matching is generally needed. But if you need specific colors and logo rules please refer to the Vision branding style guide.
Image Dimensions
While there is no maximum height for rotating image banners, keep all images within one banner the same height for the cleanest look.
Avoid using grainy or low-resolution images. Recommended file formats are PNG for screenshots and JPG for photos.
If wrapping text around an image, keep the image less than 300 pixels wide and add at least 10 pixels of space between image and text.
Homepage Buttons
241 x 198
Homepage Rotation
512 x 411
Basic page (with side nav)
Body max content width: 763px
Body image rotate width: 755px
Side nav max content width: 188px
One column page (no side nav)
Max content width: 984px
Image rotate width: 1024px
3 column page (unequal columns)
Body max content width: 511px
Body image rotate width: 511px
Side nav max content width: 188px
Right column max content width: 195px
Right column image rotate width: 228px
3 equal column page
Max content width: 311px
Image rotate width: 311px
Staff Directory photo
400 x 400 (recommended)
Content Format
Unless otherwise indicated, text- and image-based content that can readily exist on webpages generally should be made into a page.
If the content is regularly shared with clients (e.g. project implementation phases), ideally both document and page versions should exist, with the page linking to the document.
Spreadsheets and presentation files generally do not lend themselves to webpage format and can be uploaded to Document Central and linked to instead of adapted to a page.
Jargon
If your audience includes departments who do not work with your team often, attempt to explain department-specific jargon or technical terms in common language other departments can understand.
Web-safe Characters
Certain characters such as slanted quotation marks (“”) or m-dashes (—) from Microsoft Word translate poorly to webpages and sometimes fail to render on certain devices.
If you€»ve ever seen strange characters☐like in the middle of a sentence☐the editor€»s text=
may have been pasted from another program like Microsoft Word. Don€»t let it happen to youÅ
For a better reader experience, minimize copying and pasting from Word if possible, or try to replace those characters with their web-safe versions:
Invalid Character |
Looks like | Replace with |
Looks like |
Slanted quotation marks |
“” |
Quotation marks |
"" |
Slanted apostrophes |
’ |
Apostrophes |
' |
m-dashes |
— |
Two hyphens |
-- |
n-dashes |
– |
Hyphens |
- |
One-character ellipses |
… |
Three periods |
... |