Hi all! Big thanks to everyone who attended the DU Live that we hosted on April 29th. If you missed it, you can catch it here on demand.
There were a couple of Q&A questions that we didn’t get to, so we’ll answer them below. Feel free to also use this thread to ask any other questions that you’ve thought up!
| Question | Answer |
|---|---|
| Can we get access to the slide deck and the links to the resources? | Happy to share the resources! Those should all be linked in the description of the DU Live, and down below this Q&A table as well; let me know if I missed any. (Would also love to see any other design/HTML/CSS resources that other Docebo admins have liked – drop them in the discussion below!) |
| Can you share the HTML and CSS for the Docebo University landing page? | I’ll link a version of it it here. Read the notes carefully as it can be a slightly quirky page to work with. :) |
| When I had AI create html/css and added the css to the branding area, there are times it doesn't work correctly... particularly with animations and interactions. It works on other sites, but not in docebo. Is that a limitation? | Animations are a bit of an edge case. Docebo pages don’t allow JQuery or Javascript – it gets stripped out automatically – and LLMs will sometimes mix those languages into the CSS to create animations. We don’t do a ton of animations in DU, so I’m not an expert on it, but I know some of our customers have gotten some cool things to work. If you have a specific example, post it below (or in another thread and tag us) and we can try to put our heads together. |
| How does the new menu structure impact CSS and HTML...I heard CSS doesn’t work anymore... | It’ll be really specific to your platform’s customizations, so it’s hard to say! In DU we found that the transition was relatively painless; most of our CSS carried over without too many issues. The one thing we ran into was that it changed the format for the external login page; we’re working on a guide on how to fix that and should have that info out soon. |
| I’ve been told that CSS does not work with html on pages - is this because my account is not on elevate? | Hm! CSS should work on all account types. If you’re talking about inline CSS – like CSS written within the HTML in an HTML page widget – that would be stripped out by the platform. If that’s the issue, all you need to do is use HTML classes/IDs and then select them in the CSS that you put into the Branding and Design page (formerly Branding, Look, and Feel.) |
| Currently CSS is already in one spot for all pages. Is it going to be a separate CSS for every page? | If your CSS for all your pages is already in one place, it sounds like you have a design system already going, even if it hasn’t been defined that way! We used to use a ton of page-specific CSS with #doc-page-[pagenumber] selectors. That gave us a lot of flexibility between pages but wasn’t great for efficiency. |
| Can you use CSS or a "hat" to change the 3 dots learners have to click to change their ILT session enrollment? | This has me stumped! Since this is on a built-in page you would need to find the right selector for the icon within the existing HTML. There is a way to select that icon in CSS (right click on the icon → Inspect tool → hover over the HTML until you find the right one), but I think the selector class I found might be a generic one that would change ALL ellipsis icons across you entire platform. I’m always a bit hamfisted with CSS selectors, though, so it may be worth having a web developer from your org take a look at it? Or maybe Community crowdsourcing would work here? |
| With codepen.io, how do the live updates work? Can you view potential page changes before saving to the platform? | Yep! We use CodePen as a testing tool and to preview what it might look like in the LMS. You can write whatever HTML and CSS you want in there and it won’t communicate with your Docebo platform, so it’s great for running experiments or just learning more about HTML and CSS. Our workflow for custom HTML widgets is basically:
|
| Will Docebo fix the breadcrumbing issues that happen today? Also recommendation: the wireframing from Figma should be something that Docebo has for admins. | Great questions! We’ve heard a bit of talk about the breadcrumbing, but I don’t know a ton about the specifics of the issue or what Product might be up to in that space. It’s worth contacting Support directly for more detailed info. You can also submit the wireframing idea to the Ideas Portal. |
| What advice do you have for a mobile friendly design? 80% of our learners are using mobile devices to take and access content. | Love this question! Most pre-built widgets should work well natively. For custom HTML (or heavily customized pre-built widgets), I lean a lot on the @media-query feature in CSS. You can do a lot with it, from changing the sizes of titles and fonts to re-organizing any widths, margins, or custom grid systems to fit on small screens. Beyond that I just try to test a lot and take notice of what I like or dislike on other mobile site layouts. Being conscious of button sizes and legibility in different situations (i.e. with work gloves on, out in the field under the sun, etc.) can go a long way. Let me know if this would be a useful guide! |
| I'm really curious about the 80's vibe to your color scheme (as an 80's girl, I'm getting roller rinks and Caboodles). Can you share what the design process was that resulted in the color scheme? | We’re also big fans! Most of that concept came from our main Docebo brand team, but we’ve had a lot of fun implementing their ideas within DU. (Check out the main docebo.com website if you haven’t seen it recently – they’ve been getting wild with the neon over there as well.) If people are interested, we might be able to get a guide or a talk from the Brand team on what this process looked like from their perspective? |
Resources list from the deck:
Additional Resources (Docebo Specific):
Building a Sequential Learning Experience
Building a Milestone Ladder with Gamification
Milestone Ladder Widget (HTML and CSS)
Building Custom HTML Widgets with ChatGPT
General HTML & CSS Resources:
W3Schools (general documentation from the World Wide Web Consortium)
EdX course - HTML and CSS Fundamentals (developed by W3Schools; can audit for free)
General Design Resources:
Figma's Guide to How to Build a Design System
eBook: How to Measure Design System ROI
The Vignelli Canon (classic Italian design treatise that we get a kick out of)
Google’s UX Certificate program (good UX overview and info on conducting user research in the first few sections)
Design Empathy and Contextual Awareness
Dribbble (for general inspiration)
I think those were all of the unanswered questions from the live Q&A, but feel free to add any other questions or thoughts you might have for us!