Brightspace Daylight Visual Design. Getting Started Guide

Transcription

1 Getting Started Guide

2 Contents Contents DOCUMENT CHANGE HISTORY...4 WHY DID D2L VISUALLY REDESIGN THE BRIGHTSPACE PLATFORM?...5 SETTING CONFIGURATION VARIABLES AND PERMISSIONS FOR THE DAYLIGHT EXPERIENCE...6 TURNING ON AND TURNING OFF THE DAYLIGHT EXPERIENCE...6 ABOUT ACCESSIBILITY IN THE DAYLIGHT EXPERIENCE...7 WHAT OBJECTS AND ELEMENTS ARE INCLUDED IN THE VISUAL REDESIGN?...8 About style sheets in the Daylight Experience...9 About fonts in the Daylight Experience...9 About icons in the Daylight Experience...10 About interface controls in the Daylight Experience...10 Using responsive button groups in the Daylight Experience...11 About colors in the Daylight Experience...11 ABOUT THE DAYLIGHT EXPERIENCE NAVBAR...11 Applying logos on department and course level navbars...12 About the Home icon on the navigation bar...12 Applying an org unit name to a navbar...13 Changing the color strip in the navbar...13 CHANGES TO HOMEPAGES AND WIDGETS IN THE BRIGHTSPACE DAYLIGHT EXPERIENCE...13 About the My Courses widget in the Daylight Experience...13 Using images on the My Courses widget...14 Adding an image from the My Courses widget to a course template...15 Displaying the course code in the My Courses widget...15 USING THE DAYLIGHT EXPERIENCE WITH MOBILE DEVICES AND NARROW DISPLAYS...16 Responsive navbars and homepages...17 Responsive Table of Contents...18 Responsive tables by D2L Corporation. All rights reserved. 2

3 Contents Responsive display on content viewer...19 Responsive display of Insert Stuff and Add a File dialogs...19 ABOUT CUSTOM SOLUTIONS IN THE DAYLIGHT EXPERIENCE...22 ABOUT D2L by D2L Corporation. All rights reserved. 3

4 Document change history Document change history This version of the document replaces all previous versions. The following table describes the most recent changes to this document. Revision Date Summary of Changes May 4, 2017 Added the Responsive display of Insert Stuff and Add a File dialogs topic. March 2, 2017 Updates to transition from early release content to generally available product information. Added new topics: Applying logos on department and course level navbars; Changing the color strip in the navbar; Applying an org unit name to a navbar; About the Home icon on the navigation bar. February 2, 2017 Updated the Using images on the My Courses widget topic to include information about image availability to import, export, and copy. Added new topics: Adding an image from the My Courses widget to a course template, and Displaying the course code in the My Courses widget. January 5, 2017 Added content to the Responsive tables topic. Added new topics: Using responsive button groups in the Daylight Experience; Responsive display on content viewer. November 3, 2016 Added new topics, including Responsive tables, Responsive Table of Contents, Responsive navigation bars and home screens, About Images in the Daylight Experience, and Using images on the My Courses home page. Renamed the Responsive Layout topic to Using the Daylight Experience with mobile devices and narrow displays, and moved content to the Responsive navigation bars and home screens topic. August 4, 2016 Added content to the About the Daylight Experience navigation bar topic for the More menu by D2L Corporation. All rights reserved. 4

5 Why did D2L visually redesign the Brightspace platform? Why did D2L visually redesign the Brightspace platform? When clients first use the Brightspace platform, D2L wants to provide a more positive experience, no matter what type of device clients use. Because the visual appeal of applications has a significant impact on the opinions of evaluators and users, D2L is offering a balance between flexibility for customizations and ensuring an improved and more consistent user experience for all users. The Brightspace Daylight Experience is a visual redesign that instills confidence in the Brightspace platform as a modern, effective, and integrated learning platform. With Daylight, D2L is creating a single responsive platform for all devices - desktop, tablet, or mobile device. Eventually, all D2L products will reflect the new design. Some products, such as Brightspace Assignment Grader for Android, already feature the new design. Brightspace Pulse, Brightspace Insights, Brightspace Capture, and Brightspace Learning Environment are in the process of being updated to use the new design. Customizations, Game-Based Learning, Brightspace Story Builder, and the Awards tool are visually impacted by this redesign. In some cases, clients might be required to make additional updates to their custom designs; however, there is no regression or changes in functionality. The objective is to improve the visual design of the Brightspace platform in several key ways The user interface should be easy and not intimidating to get started. The interface should give prominence to learning activities. There should be a balance between continuing to support pedagogical flexibility and limiting visual design flexibility. There is support for universal access on mobile devices and for users with disabilities by D2L Corporation. All rights reserved. 5

6 Setting configuration variables and permissions for the Daylight Experience Setting configuration variables and permissions for the Daylight Experience The following configuration variables and permissions that have an effect on your implementation of the Brightspace Daylight Experience: Type Name Default Value Description Configuration variable d2l.system.brightspacedaylightex perience System: off Org: on Use this configuration variable to turn on or turn off the Brightspace Daylight Experience. The Org value overrides the system value for the current org. Configuration variable d2l.tools.content.fontface System: verdana The value of this variable indicates the default font face for new content topics created with the HTML Editor tool. If you do not set a value, the content topics display with the browser default font face. If you want the font of new content topics to appear in a consistent font with the Brightspace Daylight Experience, set the value to Lato for the org unit. Permission See Course Info You must have the See Course Info permission if you want to see the Course Offering information page as a menu option in the My Courses context menu. Permission Change Course Image You must have the Change Course Image to change the image for courses displayed in the My Courses widget. Turning on and turning off the Daylight Experience You can turn on the Brightspace Daylight Experience visual design using the d2l.system.brightspacedaylightexperience configuration variable. The Brightspace Daylight Experience features are now optimized for production environments when using the Google Chrome or Apple Safari browsers. The core tools and workflows in Brightspace Learning Environment have been 2017 by D2L Corporation. All rights reserved. 6

7 About Accessibility in the Daylight Experience tested extensively on these two browsers. In the coming months, D2L will continue to make updates across the product suite that reflect Brightspace Daylight Experience design and will continue to optimize the Brightspace Daylight Experience in other browser environments. Turning on Brightspace Daylight Experience does not modify your content or other settings in your Brightspace Learning Environment instance. All workflows and features in the Brightspace Daylight Experience are available on all supported browsers; however, D2L is continuing to optimize performance and improve page load times on browsers other than Chrome and Safari. If you prefer the old design or you have made organization-specific changes to your interface that you want to retain, you are not required to turn on the configuration variable. If you turn on the Brightspace Daylight Experience to do some testing, you can turn off the configuration setting to restore your site to the original look and feel. About Accessibility in the Daylight Experience Accessibility is a requirement of all D2L projects. Brightspace products have equal and inclusive learning opportunities and comply with WCAG AA accessibility benchmarks. D2L Project Management reviews and documents any exceptions, and shares those exceptions in the VPAT documentation. In Brightspace Daylight Experience, the simplified navigation and formatting, and the responsive navigation for tablets, mobile devices, and other narrow screen displays adhere to and enhance the accessibility benchmarks D2L sets for users requiring assistive devices. D2L has created responsive, accessible content templates that are free to use under a Creative Commons license. Use these templates to create responsive HTML content for your courses by D2L Corporation. All rights reserved. 7

8 What objects and elements are included in the visual redesign? What objects and elements are included in the visual redesign? There are significant visual changes at the platform level that extend across the product to all features and tools. Figure 1: Daylight design styles featured on a laptop display 2017 by D2L Corporation. All rights reserved. 8

9 What objects and elements are included in the visual redesign? Figure 2: Daylight design styles featured on a tablet and mobile device narrow display About style sheets in the Daylight Experience When Brightspace Daylight Experience is turned on, administrators can use the page-level CSS to change existing custom widgets or platform-level CSS to change fonts, controls, and colors. However, in some cases limited adjustments may be required in the HTML to improve the layout or address minor visual issues. About fonts in the Daylight Experience To ensure a consistent and attractive appearance in text-heavy tools, such as Announcements and Discussions, the Brightspace Daylight Experience automatically applies the Lato font to user-authored content. The Lato font appears on consistent line heights, margins, and other styling to present a more consistent appearance overall. The Lato font is not automatically applied in user-authored topics in Content. In Content, users can author independent HTML documents that are embedded in an iframe. These independent documents allow full control over style and 2017 by D2L Corporation. All rights reserved. 9

10 What objects and elements are included in the visual redesign? content in a secure fashion. The Content settings provide the same list of fonts available in the HTML editor. If the course instructor doesn't set a default font in the Content settings, drafted content uses the default font specified at the organization level configuration in the d2l.tools.content.fontface configuration variable. If you do not set a configuration variable, the font adheres to the default font for the user's browser. Custom widgets are also unaffected by the font change. Many custom widgets do not use an iframe and do not apply their own font styles. About icons in the Daylight Experience The changes to icons in the Brightspace Daylight Experience redesign are visual changes only and do not support multiple icon packs for different verticals or clients. The new icons are used sparingly and consistently. There are three sizes of icons, each used for a specific purpose. To help instructors and course designers to create great visual experiences for their learners, the My Courses widget course tiles now include an instructor-chosen photograph. D2L provides an image library of over 3000 images, or instructors and course designers can upload their own image. About interface controls in the Daylight Experience Brightspace Daylight Experience provides many aesthetic improvements to the user interface, including: New interface controls such as drop-down lists, radio buttons, check boxes, buttons, links, menus, tables, and forms. Required fields and validation when required fields are not completed. Inline text to help you complete a field, and highlighting for text fields that have the focus, contain an error, or are not available. Dialog windows for desktop, tablet, and mobile screens. Breadcrumb navigation markers by D2L Corporation. All rights reserved. 10

11 What objects and elements are included in the visual redesign? Using responsive button groups in the Daylight Experience Responsive button groups become more collapsed as your display becomes increasingly narrow. When the browser window is narrow, long lists of action buttons now collapse into a More Actions drop-down button. On extremely narrow screens, the text inside a button might wrap over two lines and the More Actions button may collapse down to an ellipsis button. If menu buttons are collapsed into a More Actions drop-down button, the menu options are displayed when you hover over the menu button entry in the list. If there is already a More Actions drop-down, the collapsed action buttons become standalone actions on the same level as other actions on the existing drop-down. Figure 3: Narrow browser windows display a More Actions button, and in extremely narrow displays, the More Actions button collapses down to an ellipsis button. Throughout the Brightspace Learning Environment, the responsive button groups are being included as a way to provide a cleaner display. In the coming months, more tools and features in Brightspace Learning Environment will include this style of button groups. About colors in the Daylight Experience The Brightspace Daylight Experience introduces a new color palette that is applied consistently across components and pages in the Brightspace platform. The color palette is available in the Brightspace Valence User Interface (VUI), a shared set of libraries and components that can evolve as the Brightspace suite of products grows by D2L Corporation. All rights reserved. 11

12 About the Daylight Experience navbar About the Daylight Experience navbar Some of the information that the Brightspace platform uses to configure the Brightspace Daylight Experience navbar are set in the Navigation and Themes admin tool. You need a unique navbar for each logo/title configuration and for each unique navbar link configuration. When you enable the Brightspace Daylight Experience for your organization, the new navbar has several defining features: Font - The font sizes for links, background images, and navbar icons are now set by default and cannot be changed. Widget title bars and borders - Styles are now set by default and can no longer be adjusted. Logo - The logo on the navbar comes from the Left Logo field in the active navbar's current theme. Color Strip - There is a color strip across the top of the screen in the Daylight navbar. This color is taken from the background color in your minibar settings. Links - A single link area ensures a straightforward navigation model. Brightspace Daylight Experience overrides any custom link behaviors such as hover states. Links that appear in the Daylight navbar come from the current active navbar in the following order: bottom-left link area, bottom-right link area, top-left link area, and top-right link area. More Actions menu - When there are space limitations due to a large number of links or a narrow display, the More menu appears as the last item link on the navbar. Working menus - The course selector, Admin Tools, notification menus, and Personal Menu are fully migrated to the Brightspace Daylight Experience styles. Responsive layout - At a certain resolution, the navbar condenses to offer links in a mobile sidebar menu, and the size and padding is reduced. Applying logos on department and course level navbars Clients can apply navbar logos at all org unit levels using the active navbar and theme. This feature allows organizations to showcase different logos at the org, department, course, and custom org unit level. The logo is pulled from the Left Logo field in the active navbar's current theme. Logos should be a maximum size of 260 pixels (width) by 60 pixels (height) for use on the Org navbar. Logos are reduced to two thirds (2/3) size when an org unit name is included in the course navbar and on mobile displays. D2L recommends that you use an SVG image to ensure that the logo image can scale to the appropriate size in the display. To change the navbar logo 1. In Navigation and Themes, select the current theme. 2. Change the left logo by D2L Corporation. All rights reserved. 12

13 Changes to homepages and widgets in the Brightspace Daylight Experience About the Home icon on the navigation bar The appearance of a home icon depends on whether the navbar contains a logo, and the content on the org unit level. In some cases, schools or departments at the org level want to feature their logo, but also retain access to My Home. The Home icon ( ) and logo adhere to the following rules: If there is no logo, a Home icon displays on the navbar. If a logo is set that has a different destination than My Home, the Home icon and logo both display on the navbar. If a logo is set and the destination is My Home, only the logo displays on the navbar. Applying an org unit name to a navbar In addition to the logo, you can configure the org unit name to appear, except on the org navbar (which always hides the name), and course navbar (which always shows the name). To include the org unit name in the navbar: 1. From the In the Admin Tools menu, click Navigation and Themes. 2. Click Themes. 3. Click the current theme. 4. In the Name field, enter the org unit name. Changing the color strip in the navbar The color of the strip across the top of the screen is taken from the color background in your minibar settings. It is good practice to use a color that is WCAG compliant to ensure the best possible color contrast with white text. To change the color theme: 1. From the homepage, from the In the Admin Tools menu, click Minibar Settings. 2. Select a new background color. Changes to homepages and widgets in the Brightspace Daylight Experience In the Brightspace Daylight Experience, you can no longer set background colors or images for a homepage or select a color for widget headers. These limits ensure that information is not lost when the display resizes for tablet, mobile 2017 by D2L Corporation. All rights reserved. 13

14 Changes to homepages and widgets in the Brightspace Daylight Experience device, or other narrow displays. It also ensures that the Brightspace Learning Environment continues to provide a clean backdrop for announcement items, content, and other custom widget material. To ensure that the Brightspace Daylight Experience is able to optimally resize for narrow displays, D2L recommends that you update your Brightspace Learning Environment to a one or two column homepage layout with your primary content on the left. When the display area collapses to a single column on mobile devices, the content in the secondary column appears beneath the left, primary content. If you do not want to lose the image in your widget header, you can create a banner image widget below the navbar or add an image widget in your secondary column to customize the display. About the My Courses widget in the Daylight Experience The My Courses widget has been redesigned to provide a more engaging experience for end users. Course now have associated images and learners can access their favorite courses by pinning them to the top of their course list. In the mobile view, widgets now stack on top of each other, and the My Courses widget offers many new options to instructors. The My Courses widget is not dependent on the Brightspace Daylight Experience configuration variable; however, the new styles and features do require the Brightspace Daylight Experience configuration variable to be turned on. Using images on the My Courses widget In the My Courses widget on your homepage, all courses display a default image assigned from the curated image library. You can also select an image that is more representative of the course from the library provided by D2L, or add your own image for the course tile. Any images that you include with the My Courses widget are available to include in the course components that you export, copy, or import. To change the default image, do the following: 1. Navigate to your homepage by doing one of the following: If your My Course widget appears on the My Home page, click the My Home button. If your My Course widget appears somewhere else, navigate to the location of the widget. 2. Hover over the course image and click the More Options menu. If you are using assistive technology or keyboardonly navigation, press Tab to access the More Options button and press Enter to view the menu items by D2L Corporation. All rights reserved. 14

15 Changes to homepages and widgets in the Brightspace Daylight Experience 3. Select Change Image or press Enter. 4. Search or browse the list of available images. 5. Hover over the image you want to use and click Use this image. If you are using assistive technology or keyboardonly navigation, press Enter to select the image. Adding an image from the My Courses widget to a course template You cannot directly add an image to a course template, however, you can import an image from an existing course into the course template. After you have created a course that includes the image you want to use, you can use the Copy Components function to add the image to your course template. 1. Do one of the following: Create a new template, and select Add Components to the new template. In the Manage Courses tool, on the Find Course Templates tab, find the existing template where you want to add the My Courses widget image. Click Course Admin > Import/Export/Copy Components by D2L Corporation. All rights reserved. 15

16 Using the Daylight Experience with mobile devices and narrow displays 2. In the Copy Components from another Org Unit section, select the course and image that you want to add to the template. Click Select Components. 3. On the Choose Components to Copy page, select the Course Image checkbox. 4. Click Continue. 5. Select Import Components and click Start. 6. Upload the course package containing the image you want to add to the template. 7. Select Advanced Options. 8. On the Select Components to Import page, select Course Image. 9. Click Continue. Displaying the course code in the My Courses widget The My Courses widget can display the course code below the course name if you select the Show Course Code option in the widget settings. 1. On the My Home or Course Home page, navigate to the My Courses widget. 2. From the My Courses context menu, select Customize this widget. 3. Select Show Course Code. 4. Click Save. Using the Daylight Experience with mobile devices and narrow displays The Brightspace Daylight Experience is designed to scale for smaller viewing areas on tablets, mobile devices, or narrow viewing area displays. To ensure that you are prepared for the best experience, review the following best practices for responsive displays: Ensure that any custom content templates created by your interactive learning teams and instructional designers are also responsive to smaller display sizes. Ensure that your homepage uses a one or two column layout by D2L Corporation. All rights reserved. 16

17 Using the Daylight Experience with mobile devices and narrow displays Responsive navbars and homepages The new layout of the Brightspace Daylight Experience navbar and homepages scale appropriately for smaller screens. At a certain resolution, the homepage layout reduces to a single column layout so users do not need to scroll horizontally on devices with smaller screens. In the single column layout, the padding and size shrink, the font size decreases, and an overflow menu appears that contains all of the links that previously resided in the top right corner of the screen, such as Settings, Print, and Help. Figure 4: On a tablet or mobile screen, the overflow menu contains the links that previously appeared in the top right corner of the full-size screen, including Settings, Print, and so on by D2L Corporation. All rights reserved. 17

18 Using the Daylight Experience with mobile devices and narrow displays Responsive Table of Contents The Content landing page containing the Table of Contents is now responsive to tablet or mobile device screens. The Table of Contents sidebar appears at the top of the mobile page, with the main page contents below it. When you are using search, the sidebar is hidden so that you can read the results below the search field. When you clear the search, the sidebar is visible again. Figure 5: The Table of Contents of the Content tool, when viewed on a mobile device, appears above the main content area 2017 by D2L Corporation. All rights reserved. 18

19 Using the Daylight Experience with mobile devices and narrow displays Responsive tables The Brightspace Daylight Experience design provides a responsive layout for large tables when the viewing area is limited. Some tables are too wide to display in a viewing area because of the smaller available area on a tablet or mobile device screen, or because a user has sized their display window to a narrow width. There are visual cues that there is additional content beyond the current viewing area. The user can use a swipe gesture or click a button to view additional content. The visual cues are also navigable by screen readers so that users with visual impairment using assistive technology are aware that there is more information. The Brightspace Daylight Experience design extends to search and result count, paging controls, and inline filters. Responsive display on content viewer The Content Viewer that Brightspace Learning Environment uses to display content topics such as Microsoft Word documents or HTML documents uses an iframe. The content frame is now wider so that the content remains the focal point of the page. The iframe is surrounded by other controls such as the topic title, context menu, iterator buttons, or tabs. A smaller screen, such as a tablet or mobile device now display the content viewer and surrounding controls appropriately. Responsive display of Insert Stuff and Add a File dialogs To increase a learners' ability to complete core workflows and improve the ease with which learners can submit files on tablets or mobile devices, several of the components of the Insert Stuff dialog are responsive, including: My Computer Insert Link Enter Embed Code 2017 by D2L Corporation. All rights reserved. 19

20 Using the Daylight Experience with mobile devices and narrow displays The Add a File dialog (used in Assignments) is also responsive. Figure 6: Responsive mobile view of the Insert Stuff dialog box 2017 by D2L Corporation. All rights reserved. 20

21 About custom solutions in the Daylight Experience Figure 7: Responsive mobile view of the Insert Link dialog box About custom solutions in the Daylight Experience Most of the changes for Brightspace Daylight Experience are stylistic, and should not affect custom solutions. In some cases, some additional alignment work may be required. Courses with a specific tool as their homepage retain this capability. New customization efforts are completed with the Brightspace Daylight Experience styles applied because they are built on the same infrastructure as D2L core tools. Most older customizations do not require changes to the custom user interface to take advantage of the visual redesign changes. In rare cases, some additional customization work might be required to update the interface to the Brightspace Daylight Experience. If your instance of Brightspace Learning Environment has shared orgs with custom login logic, and you have built specific custom org units and homepages with custom branding, turning on the Brightspace Daylight Experience configuration variable updates your interface to the new look and feel. Custom logic should not be affected; however, 2017 by D2L Corporation. All rights reserved. 21

22 About custom solutions in the Daylight Experience the branding capabilities of the Brightspace Daylight Experience means that you will notice a significant change to the appearance of your landing page by D2L Corporation. All rights reserved. 22

23 About D2L About D2L A global leader in EdTech, D2L is the creator of Brightspace, the world s first integrated learning platform. The company partners with thought-leading organizations to improve learning through data-driven technology that helps deliver a personalized experience to every learner, regardless of geography or ability. D2L s open and extensible platform is used by more than 1,100 clients and almost 15 million individual learners in higher education, K 12, healthcare, government, and the enterprise sector including Fortune 1000 companies. The company has operations in the United States, Canada, Europe, Australia, Brazil, and Singapore. ( ( Contact Us Phone: Toll Free: (Worldwide) (North America) (United Kingdom and Europe) (New Zealand) (Australia) (Brazil) Fax: Twitter: Web: ( ( D2L Corporation. The D2L family of companies includes D2L Corporation, D2L Ltd, D2L Australia Pty Ltd, D2L Europe Ltd, D2L Asia Pte Ltd, and D2L Brasil Soluções de Tecnologia para Educação Ltda. Brightspace, D2L, and other marks ("D2L marks") are trademarks of D2L Corporation, registered in the U.S. and other countries. Please visit d2l.com/trademarks for a list of other D2L marks by D2L Corporation. All rights reserved. 23

24 Apple and Safari are trademarks of Apple Inc., registered in the U.S. and other countries. Creative Commons is a registered trademark of Creative Commons Corporation in the United States and/or other countries. About D2L 2017 by D2L Corporation. All rights reserved. 24