mobile optimization training - greenorbithelp.intranetdashboard.com › services › training ›...

Mobile Optimization Training

www.intranetdashboard.com


www.intranetdashboard.com

Table of Contents

Key

Log on to the Front End1

2 Front End Fundamental Concepts

3 Log on to the Admin

4 Admin Fundamental Concepts

Admin Superuser Tasks5

6 Security

7 Creating the Layout for your Display Modes: Layout Manager

8 Creating / Editing Display Modes

Controlling Intranet Structure: Layout Manager Templates9

10

11

Creating Pages for your Display Modes: iD CMS

12

Controlling Intranet Structure: iD CMS Templates

Mobile Tips

13 Key Actions for Administrators

Glossary Webliography


www.intranetdashboard.com 1|

Open a new browser window, enter the intranet URL.

The intranet URL is

When this page loads I will:

Enter my details.

Authenticate automatically.

My username and password are:

Same as my computer username/password.

Different to my computer username/password.

It is

Force login screen at: http://yourintranet/cfr/user/login.aspx(Useful to know when logging in at another computer)

This is the Front End Interface for Front End (Website) Users.

Home SiteThe initial landing point for all usersof the intranet.

ApplicationsEach application performs aseparate function. Someapplications maintain intranetSTRUCTURE (e.g. LayoutManager, Nav Editor). Someapplications add CONTENT(e.g. News, iD CMS).

SubsiteAn independent ‘micro-site’ that hasits own structure, content andapplications.

The login screen will appear if you’re notauthenticated.

Home and subsites are comprised of the same elements: a specific URL, layout, navigation and applications.

Search

Breadcrumb Bar

Layout Manager controls where each element in this structure sits

User Details

Logo

Vertical Navigation Quick Links

Horizontal Navigation

Each image in this handout is numbered. Eachnumber relates to the item indicated in theleft column.

1Log on to the Front End

2Front End Fundamental Concepts

11

2

3

3

2

2

URLEvery item has its own URL.Every News article, folder,document, image and page. iDURLs follow generally the formatof: Intranet>subsite>application>folder>item.

Breadcrumb BarIdentifies the user’s current locationwithin the site. Another form ofnavigation.

Layout ManagerDefines the structure for the locationof your content.

Navigation - Nav EditorA Horizontal Nav directs usersto core areas of the intranet(typically, subsites). A VerticalNav directs users to vital contentwithin a subsite.

User DetailsThe logged-in user’s details. You canalso access personal notifications andonline forms here.

iD ThemeThe look and feel of your intranet;colors and fonts.

Each image in this handout is numbered.Each number relates to the itemindicated in the left column.

Welcome Screen Displays theiD Version #Necessary for logging iD Supportqueries.

Help SiteMenu-driven access tostep-by-step guides, videos andtechnical documents at:http://help.intranetdashboard.com.

SubsitesAlphabetical listing, stored inSubsite Groups. You will only seethe subsites you have access to.

Access the Admin by appending theintranet URL with ‘/admin’.

The Application Explorer is divided intotwo core areas: ‘Applications’ and‘Administration’.

Applications= Subsite Structure & Content

Administration= System Wide Changes



3Log on to the Admin

4Admin Fundamental Concepts

AFTER you’ve logged into the Front End.

Open a new browser window.

The URL of the Admin is

Requires a separate username and password (see next page for details).

This is the intranet subsystem: For Site Administrators and ContentPublishers only.

4

1

4

5

5Application Explorer DividedInto TWO Core Areas

1: Applications: Day-to-day subsitemanagement andcontent maintenance.

2: Administration: System-wide changes,managing users,configuration settings,reporting functions.

Authenticate

Front End

Admin

URL

Subsite

BreadcrumbBar /Breadcrumbs

The intranet checks you have a valid account.

The area of the intranet that allstaff have access to.

The area of the intranet only selectedadministrators have access to.

A web address that takes you to apage, a document, an image etc.

A micro-site within the intranet.

Shows the user’s position in thehierarchy of the intranet andrelation to Home.

Logging On

GettingStartedGuide

iD Help Site

Learn how to log on to your intranet:http://help.intranetdashboard.com/gettingstarted/theplatform/login.html

The essentials of getting yourintranet up and running:http://help.intranetdashboard.com/gettingstarted/theplatform/overview.html

Step-by-step guides, videos andtechnical documentation:http://help.intranetdashboard.com

Display Modes are available to Superusers only.

Display ModesTailor how intranet content displays on different screen sizes. Desktop, Tablet and Phone Display Modes will be set as defaultin your iD installation, these will be automatically applied whena user views the intranet on a particular device.

Display Modes tailor how intranet contentdisplays on mobile devices.

Layout Manager and iD CMS are the two key applications used to tailor your layouts/pages for Display Modes. ie. Desktop,Tablet and Phone.

You need to set security on both applications before you can customize the layouts and pages for a specific Display Mode.

Security determines who can contribute to a layout:

Full Control security user can manage the layout as well as underlying template.Editor security user can manage the layout only.

Security determines who can contribute to a page:

Full Control security user can manage subsite folders, pages and underlying templates.Editor security user can manage the folder structure and pages.



5Admin Superuser Tasks: Utilities > Display Modes

6Security

7

7

6

6

The following diagram shows the actions that can be taken by users at each Security Level:

Only Superusers canaccess Display Modes

Full Control Editor Contributor Creator Read Only Deny Access

Read Content

Create/Edit/Delete own content

Create/Edit all content

Create/Edit/Delete all content

Approve all content

Set security

DisplayModes

Tailor how intranet content displayson different screen sizes.

DisplayModes

LayoutManagerSecurity

iD CMSSecurity

Relates to tailoring of layouts andpages for your mobile devices.http://help.intranetdashboard.com/systemadmin/Utilities/displaymodes/ManageDisplayModes.html

Relates to Front End access. Formore on Layout Manager Security.http://help.intranetdashboard.com/systemadmin/Security/LayoutManager.html

For more on iD CMS Security:http://help.intranetdashboard.com/systemadmin/Security/iDCMS.html

Use Layout Manager to build the structure of your subsite for thedifferent Display Modes; Desktop, Tablet and Phone.

The application is comprised of Layouts and Templates.

Build a Layout for Desktop, Tablet and Phone for every subsiteyou are responsible for.

The structure defines where content ‘components’ are placed.

Look for the Editing Toolbar at the top of the subsite homepage to start. (Can’t see the toolbar? Check your security)

When in Edit Mode use the Currently Editing option to switchbetween Display Modes. From here you can start to customizethe layout for your Desktop, Tablet and Phone.



7Creating the Layout for your Display Modes: Layout Manager

8Creating / Editing Display Mode

9Controlling Intranet Structure: Layout Manager Templates

A template controls the underlying structure of a layout for theDisplay Modes; Desktop, Tablet and Phone.

For each display mode within iD, a template can be configured to suityour site content and display appropriately on different screen sizes.

Default suite of templates for different structures is availablewithin your installation.

For best practice insert a Collapsible Cell for the Phone Display Mode.

The Layout editing toolbar is available from thehome page of each subsite.

8

Configure templates to suit the Display Modes.10

10

8

8

Click theCurrentlyEditingDrop DownMenu

1 Choose theDisplayMode youwish toedit

2

It is effectively one site that we’remaintaining for desktop, tabletsand phone. The content andcomponents are the samebetween each view however wejust have templates that controleach display mode view

Desktop

1

5

2 3 4

Tablet

1

5

2

43

Mobile

1

5

2

4

3

LayoutTemplates

Layouts

Relates to customizing the Display Modes for the existing templates or create a new template:http://help.intranetdashboard.com/applications/Mobile/overview.htmlhttp://help.intranetdashboard.com/applications/layout_mgr/Templates/CreatingEditingTemplates.html

Relates to creating Layouts:http://help.intranetdashboard.com/applications/layout_mgr/Layouts/CreatingEditingLayouts.html

Use iD CMS to present content pages in different Display Modes;Desktop, Tablet and Phone.

Similar to the concept of Layout Manager, however iD CMS isused to create page content, not subsite structure.

Templates set how a page can be structured. The structuredefines where content components are placed.

Look for the Editing Toolbar at the top of the browser tostart. (Can’t see the toolbar? Check your security.)

When in Edit Mode use the Currently Editing dropdown toswitch between Display Modes.

From here you can start to customize the page for yourDesktop, Tablet and Phone.

iD CMS editing toolbar.

9



10Controlling Intranet Structure: iD CMS

A template controls the underlying structure of a iD CMS pagefor the Display Modes; Desktop, Tablet and Phone.

For each display mode within iD, a template can be configuredto suit your page content and display appropriately on differentscreen sizes.

11Controlling Intranet Structure: iD CMS Templates

11

12

11

Choose the Display Mode you wish to edit.12

iD CMSTemplates

iD CMSPages

Relates to customizing the Display Modes for the existing templates or create a new template:http://help.intranetdashboard.com/applications/Mobile/overview.htmlhttp://help.intranetdashboard.com/applications/iDCMS/Templates/CreatingEditingTemplates.html

Relates to creating Pages:http://help.intranetdashboard.com/applications/iDCMS/Pages/CreatingEditingPages.html

Full Navigation View on Desktop.

All applications and components are responsive and theirdisplay will automatically alter when viewed on smallerdevices. The following components are key whencreating Mobile Display Mode:

Navigation The navigation will display in:

Full view.

Modified or featured view (”More” drop-down list).

In a reduced vertical menu.

News News will display in an accordion style, ie. articles willdisplay in a collapsed or expanded view.

Quick LinksTop 5 links are displayed with additional links accessedvia “View More”.

Image Component Images will automatically resize based on your screen size.Banner dimensions are not required as images areautomatically responsive.

Formatted Text Component

ImagesEnsure “Show Auto Resize” option is checked wheninserting an image to allow for responsive images.

Section HeadersGroup large paragraphs of text in an expanded orcollapsible view.

TablesRecommended that template cells are used wherepossible as this works best with responsive designfor tables. When a table is required insert a separateFormatted Text component to display this table.



12Mobile Tips

13

Modified or featured Navigation view onsmaller screen sizes such as a Tablet.

14

Reduced Navigation menu in vertical view formobile devices.

15

News displayed in accordion style on Phoneview.

16

Quick Links display top 5 links on Phone view.17

Insert Image – Auto Resize option to ensureimage responsiveness in Phone view.

18

Insert Section Header – group largeparagraphs of text in an expanded orcollapsible view.

19

19

13

14

15

16

17

18



13Key Actions for Administrators

Receive training1

Log on to the Front Endhttp://help.intranetdashboard.com/gettingstarted/ThePlatform/Login.html

2

Log on to the Adminhttp://help.intranetdashboard.com/gettingstarted/ThePlatform/TheAdmin.html

3

4Customize the Display Modes based on your requirementshttp://help.intranetdashboard.com/systemadmin/Utilities/displaymodes/ManageDisplayModes.html

7Layouts: Create the Layouts for the Display Modes and Publish to Livehttp://help.intranetdashboard.com/applications/layout_mgr/Layouts/CreatingEditingLayouts.html

9iD CMS Pages: Create the Pages for the Display Modes and Publish to Livehttp://help.intranetdashboard.com/applications/iDCMS/Pages/CreatingEditingPages.html

5Set Front End Security on the Layout Manager and iD CMS for your Administrators

http://help.intranetdashboard.com/systemadmin/Security/LayoutManager.html

http://help.intranetdashboard.com/systemadmin/Security/iDCMS.html

6

Layout Templates: Customize the Display Modes for the existing templates orcreate a new template

http://help.intranetdashboard.com/applications/Mobile/overview.html

http://help.intranetdashboard.com/applications/layout_mgr/Templates/CreatingEditingTemplates.html

8

iD CMS Templates: Customize the Display Modes for the existing templates orcreate a new template

http://help.intranetdashboard.com/applications/Mobile/overview.html

http://help.intranetdashboard.com/applications/iDCMS/Templates/CreatingEditingTemplates.html

A checklist of the key actions to perform after reading this document.

mobile optimization training - greenorbithelp.intranetdashboard.com › services › training ›...

Documents