Mobile Optimization Training
www.intranetdashboard.com
Mobile Optimization Training
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
Mobile Optimization Training
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
Mobile Optimization Training
www.intranetdashboard.com 2|
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.
www.intranetdashboard.com 3|
Mobile Optimization Training
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.
www.intranetdashboard.com 4|
Mobile Optimization Training
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
www.intranetdashboard.com 5|
Mobile Optimization Training
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.
www.intranetdashboard.com 6|
Mobile Optimization Training
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
www.intranetdashboard.com 7|
Mobile Optimization Training
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.