 Good afternoon or good morning depending where you are my name is Simon Shackleton director of district CMS and doghouse agency We are pleased to be sponsoring today's session titled improving the content editor experience in Drupal Here at doghouse was spent a long time improving Drupal's admin UI for our district CMS distribution Looking through through looking through sorry through simplifying content authoring workflows admin usability and visually updating components where possible. It's a general ongoing business activity. So personally today, I'm looking forward to the session Today runs throughout 45 minutes consisting of 30 minute presentation and we should have about 10 minutes for Q&A afterwards Please add questions to live Q&A during the session and Vlad will address these afterwards So jumping straight in it's my pleasure to introduce Vladimir Rudikov known as Vlad He is an absolute stalwart of Drupal community for many many years He helps maintain over Drupal, sorry over 30 Drupal modules, which is an astonishing amount Plus he's a maintainer of Drupal So bootstrap four and five Drupal themes Provides free quarterly Drupal community training sessions and runs a monthly Brisbane Drupal meet-up as a GitLab hero This year he's running a series of Drupal GitLab collaboration workshops with the next one scheduled for September He's a founder of Tomato Elephant Studio in Brisbane. What a resume Vlad if I could afford you I would definitely hire you without further ado, mate. I'll hand you over to Vlad. Thank you, mate Thank you, Simon and It's a big honor to be presented by the house they do a lot of for a community. They do a lot of for Drupal in Asia Pacific and Australia and I really want to thank them and all the sponsors who actually came out this year and sponsored the event in Current times we are all Kind of looking away to you know bring the best of the of the both worlds in terms of not being able to see each Other face-to-face and also trying to organize something as engaging as possible. I think great effort on behalf of all the sponsors and all the volunteers, so thank you very much for them and also thank you for everyone who Jump in to see this session So you can actually put the questions inside the Q&A window on your screen and Feel free to we will address them in the end of the session So you already heard enough about me, but I just wanted to Clarify one thing I am still a Drupal site builder. I started working with Drupal Number of years ago as a site builder and still is the obviously the size and the scale of the projects increased dramatically But my day-to-day work is still even when I'm an architect I'm a Drupal site builder and that's the perspective. I'm gonna talk about it today Okay, so today session is a 30-minute session So we'll cut at 30 minutes wherever we are and then we'll go on to Q&A So again, feel free to put your questions in they will be read in the end of the session Or you can pin me later in in one-to-one chat. I'm happy to hang around and chat about the topic But today we're gonna talk about the state of the web in 2021 We're gonna talk about web challenges that we are facing as a web builders We're gonna talk about Drupal theming in 2021 I was gonna talk about Drupal Bootstrap 5 theme And the way forward the way I see it and what we need to do So let's talk about state of the web Back in december 2018. I was given a presentation called To Drupal or not to Drupal a closer look at wix and wordpress I took a wix which is a platform for building a website within your browser mostly for brochure websites, but then again That was almost three years ago and then I look at the wordpress which was on a brink. I think releasing version major version 5 so also wordpress was again number one content management system And there is a video there. I'm not gonna Go deep into this session. It's available. But there are a few Outcomes of this session that I kind of highlight number one Wix was great for prototyping so our advice and that's exactly what I did for with tomato elephant studio website and Drupal campfire and bay website I built them in wix kept them in wix for about a year and then eventually migrated them into Drupal to content editing back then was The best using wordpress especially when it comes to a media management And handling the images and media files. We all know Drupal made a big leap in this area in the last three years So Things really shifted and I also concluded that the some more intricate functionality wise like web forms Drupal was the best and in my opinion still is so something that was a bit more complex and more tricky You can see why just following this presentation. But this is Want to want to highlight before I go into the stats So this screenshot I made in december 2018 just before the presentation and we can see the Drupal See it's right at the number three just behind the php Two other php content management system wordpress which sits at 52 percent and jumella which was sitting at about 5.3 percent and Drupal sitting at 4.1 percent And then you can see there were magento which is a e-commerce and Shopify and then there was wix and square space And few others on the way. So just keep that statistics in mind and let's roll back to today, which is the august 2021 There's a bit of a different View of the world and if you follow these statistics, it was kind of interesting to see since the beginning of 2020 how things changed Oh, let's have a look what we actually currently have here if you can't find Drupal It's actually right on the last line, which is number nine still in top 10 Pretty good. You can see the numbers change significantly So let's see which alternatives pop up on this list in the last To almost three years so wordpress still number one, but WordPress infrastructure grew So big that the author of the whatcms.org Decided to actually split it into a multiple thing. So there is a standalone WooCommerce offering Which is a commerce offering for wordpress. There is WP Baker and Elementor which are specific site builders which are currently Environment inside the wordpress where you can put in so wordpress as you can see takes four out of nine positions And really really dominates the market So jumlah still sits at number two and you can actually see it gained Almost a percent from In three years, which is good to see and actually congratulation to jumlah. They just did one major release jumlah for a couple of days ago So still sits strong Me personally, I know there was not many mentioning of jumlah these days, but again as a Content management system of choice is still going strong according to the statistics So then we're getting our Then we're getting our Software as a service cloud offerings, which is wix and square space Now those things you cannot download to your machine. You cannot move between the hostings. You have to use the hosting provide and Then you jump into your browser as we will do today and you'll Modify your content and you modify your structure And of course there are commerce offering, which is a WooCommerce part of the Wordpress environment and Shopify, which is another software service offering that became really really popular in the last two years As we see a lot of shift from face-to-face sales to online sales In Australia particularly Shopify is responsible for a lot of Small shops Moving towards the platform to sell their goods I can see that from personal experience Okay, so after looking at the statistics the goal for today's session is How to bring site builder back to Drupal Dries mentioned it today In an opening note and he said we're losing the low end of the market and we will see it was Drupal seven I guess more prominently We are losing these single site builders or as they used to be called mom and pop shops We've been losing them since Drupal eight was introduced because it was much more complex much more enterprise oriented system But back to the goal of the session is how we can get this particular site builder who maybe doesn't have enough knowledge of Writing PHP code tweak it in place and bring them back into Drupal So web challenges web challenges in 2021 what your average Site builder does these days so it probably gonna be related something to the pandemic that's currently happening around the world here's a screenshot of the Twitter feed of the local Queensland government and doing the Daily statistics, right? So this is an image that will placed on social medias to just provide the information about that and we see that Everywhere, even if we go back to our you know Single site builder a lot of them had to put the COVID updates Not necessarily straight away, but there was Something where they would go or we need to know that the shop is closed Or we need to let know that the hours have changed or we need to know that our supply Stock is lost something like that. So I I thought well, I'll go straight to the government. I'm looking at those statistics daily So maybe how easy we can do something like that in Drupal, right? So first we need to replicate the report like let's keep the content management system agnostic and I pick up the tool that I usually go to which is a booster five One the most popular Front and framework in the world containing batch of elements you can use from layout to a specific form builders I pick up the report that I found on twitter And then I basically went and say, okay So what do I need to do in Drupal? I have our Create basic page For So I need to know the html to insert html. Maybe it looks something like that. So that took me a bit of time To put it together something that looked relatively similar and now it's no longer an image, but the content put the numbers in Copy html as we do in uh, we see we get it there Make sure I can see How it looks in which you would get it there before publishing it and save it so uh other states provide uh different types and different styles of statistics and uh, again, exactly what I should Show you before I'll do it now as well with the live demo So let's say I want to create a basic page Here's my example two I'm a which week editor set up I had to go and find my content Which are very brilliant. So here you you can probably see the stats. So copy my html copy paste it here And I'm using the theme that actually allows the theme Theme uh Styles inside the whizzy editor so I can see how it looks Uh, I can highlight I can change the number if I really want to So modify the content inside it And then go and save it So here's our node with the statistics provided with something I've prepared before right So something easy, but again took me a while to go and uh with the knowledge of uh Bootstrap framework with the knowledge of styles and tools They have actually go and create it Create the report something like this all like this as I show you before Then copy pasted it uh into Drupal now one of the issues with Drupal is that We need to know a lot of things before we would be able to do that out of the box So in many cases, we need to know what a content type is possibly a menu system or how to work with the menu system Or URL route and system how to pre we need to know the basic concept of publishing which is again not a big thing But you need to know them We need to know about text formats. So actually Working with Drupal, you know that you go and copy some examples of the web Even if you have css and javascript Text format might strip all the divs you use all the classes you use or id's you use stuff like that You also need to know the concept of fields once we go Beyond something like title and a body Which again Can be very tricky especially when you sell someone Drupal for a basic editing saying here's how easy it is to do so And let's ask ourselves a question in 2021. How easy is to build a simple website? So I pick up Two examples one is the google sites and another one is wix So I'll actually going to go and jump into google sites if it's not going to work Then I have some screenshots available here So if we're talking about a band like Drupal south Let's jump here now straight away once you go to google sites you see the You can see the number of templates available In Drupal it might represent themes but again even with themes you need to have a certain knowledge where here I start using google sites the new version of google sites maybe a couple weeks ago I can see I can create blank event portfolio help center project team again. Nothing stopping us from Nothing is stopping us from Having something like that in Drupal have a preset clicking on the event Let's say we want to put the website for Drupal south's conferences click on the event Go to the editor put the dates conference name Get the idea so and off we go We're actually building the website already you can see there are few things that We are lacking in Drupal. That's already there fundamentally like an image in a background Or like a preset content or maybe a built-in menu We have it. We just didn't put it together and present it nicely to To a site builder to someone who possibly might be struggling with the idea of putting that page all together You can see there is also Few things available. Yes, and address was talking about it today a lot of this content in static content So you cannot easily there is integration with Database like google shits, but you cannot easily like bring the images and stuff like we do it in Drupal Wrap it up in a view And off we go But if I would be talking to an audience who have no idea what view is block is They would probably look at me like it's just too complex. I'll go and make my You know stuff who is not working these days use google sites and put together manual Schedule of the event change the image and off we go Uh schedule is already here Again something simple like that can be easily provided with one click and we would be able just to go and uh Edit the schedule List the speakers again a simple list nothing to outside the box, but Really really great tool to bring this side builder back saying here. I go with one click I gave you four pages. You've already can start editing Your next Drupal camp event word camp event Tumla event. Why not? It's already there. You just need to go Do these three things and You can build this stuff in so I think one of the most fundamental Tools to give to a site builder is actually have some presets Okay, so this one pretty well skipping all the Websites and now talking about another tool called wix So again wix site. I mentioned them before I built Drupal camp iron bay website on the wix we can look at that or we'll just go through the creation process here as well again, because we have a limited time and we only have Now time to Drupal quickly show you what wix allows you to do. So they actually give you categories And then you can either let wix Create website for you. I'll go and edit the specific template again. They give you event templates Here's the conference. I'll click edit would be very similar interface to google sites and Then we can go and start putting the dates in start putting the Conference name in for example here. We can go edit x a No And nice and classy editor. Obviously, this is a proprietary company getting paid to do that So very fancy looking editor But saying that nothing stops us to provide in something like this as a preset Very similar thing conference speakers past events, right things that are pretty much built in for the conference website out there So now to put it together though Yet again, we are facing the fact that the fields view modes blocks use and other concepts that Drupal Developers are familiar with are not necessarily there to Be given to site builders saying okay, you need to know those things to put together presenters and sessions and Make sure that the sessions look differently and it all looks nice So that's another further of actually getting these site builders back to Drupal And now let's shift our focus to Drupal Drupal theming in 2021. Where are we at? Where are we going? And what are we doing? So if we'll look at the themes interface of Drupal, there are two Two things that's been there for a while, but they were labeled experimental just because the pure amount of work to actually move Them to Drupal and one of them is Olivero, which is nice Looking theme responsive ice a couple of projects I worked on use this as a Out of the box theme and it was pretty happy with it. Nice interface Again works for the mobile devices and a clar clar is great experimental Replacement for the seventh theme which is again more toggled for devices So there is a lot of work happening there and you know contributing to those projects We basically bring in the best For Drupal devs as well as with something like Olivero bringing back Bringing something for site builders because out of the box, they won't have Bartik They will have Olivero something that you can sell to the client as I like to talk Now about the Drupal bootstrap and where I see it's going to tackle those issues I talked before so Drupal Booster 5 it's a booster 5 theme with the building library And it's not the only theme that's available for Drupal Using booster 5 things on the bottom of the booster 5 page I have other things that I use in either booster 3 or booster 4 And there is about half a dozen of them so you can go and check it out but by building booster 4 and experiencing gaining like thousands of Usages and feedback from people. I realized we need something a bit more simpler. So I'll just go into the back end of Bootstrap Oh, you know So booster 5 was enabled here and if I'll go to the settings of bootstrap 5 I can see a number of things already here a number of things we're working on to tackle So I'm gonna close everything here I'm gonna talk about those things So We have a few elements that we Use for all the themes but a few things that I think are great The stuff we brought in into booster 4 and booster 5 theme. So the first one is a style guide. This is a adopted style guide from Bootstrap, but once we actually recompile the theme. So this is for developers once we recompile the theme We can actually run an accessibility checker on all the elements that basically bootstrap gives from tables to Images Contrast ratios color of the buttons all the elements Including the form verification Including the alerts Including the badges all other elements We can actually run accessibility on this page while recompiling the sus and css and Check if accessibility is passing or not and maybe we need to change one color that really helped and with booster 5 We also not only have Left to right also have right to left cheat sheet, which we can have a look and see how it's Done in the parts of the world where they use um Right to left So the next thing is uh been there for a while and not only in bootstrap 4 theme but Bootstrap thing which was an inspiration for some of the elements here. We can control different elements how controllable Do you want to fix Width content or the full width content? Do you want to apply a specific bootstrap themes like a light or dark theme? So that's already available in the body options navigation bar options You can change it from dark to light with a few interface clicks same as a footer. We can apply a specific styles there Now the new work that we're working on Uh, uh, it's a text format and ck editor something that was one click You would be able to do exactly what I did before just creating these styles and We will provide one click Ability to create a particular Text formats and that's what we're working now block class integration. So when we actually go on the front page of the Drupal south's Demo that I created you can see that some menus for example sitting on top of the search This all can be easily done with block class module and align it properly So we're building integration where we can highlight straight out of interface uh All the blocks that are available and move them around using bootstrap classes Again something that we're currently working on and the demo is in progress But that will allow people from just point and click and change the way they display specific blocks Now the probably the one thing I was talking about is creating content with one click. So It's already in the dev branch of the theme. You can actually go and uh download it and see three buttons And you can either create the example something like that where it would go and create a basic page Check your Text style that it's correct Or you can actually go and create one of the examples and the goal for the next month is actually to bring All the examples that bootstrap provide into Drupal. So with one click you can create something like that So columns with icons Sitting there with the images and with icon grid. So one click you have a basic page And you can go from there and eventually this will grow into something that's As I said before something very similar to wix or to the google sites And there is also ability to create a sub theme from a user interface Which we are it's already working on already great feedback about actually building sub themes But again something more for developers rather than content creators. So this is a plan for bootstrap five theme now uh the way forward The last thing I wanted to touch on is Few developments are happening In Drupal world. So obviously Drupal 10 is out in less than a year about in 10 months time Which possibly would bring the ck editor five something that will enhance our ability to control and place the particular elements On the page and i'm looking forward to that So those initiatives are happening right now And i'll tell you in a second how to actually join them and help them or you can join Booster five and help us to do so there is a friday contribution sprint that's coming in Tomorrow so you can join in I will be there like just mucking around and adding working on those things that they mentioned today Drupal slack official Drupal slack google how to get there if you're not there and Bootstrap channel is where we hanging around talking about all things bootstrap so bootstrap five theme issue queue on Drupal.org And we're also planning a september mentoring For free probably one or two hours every week starting second week of september keeping out of Drupal Brisbane Meetups we're going to announce it there and of course on the groups Drupal.org so Dries mentioned today About the bootstrap. So he said we're great for developers, but we're also great for less technical people And I completely agree with that. I think Drupal is a great tool but I think we can do better and as we saw before the competition as such if we can call them a competition, uh, actually ramping up that aspect of the spectrum where we single site builders or store owners or shop owners who are actually trying to get and maybe Help their business to get somewhere Looking for this extra help to be able to, you know, maybe spin off the website by themselves That's pretty much my presentation about how the state of triple interfaces and how we Can improve them. Do we have any questions? Thanks, but it was great and obviously very timing with Drupals, sorry Dries's Talk this morning, which unfortunately I missed I've just had a couple of questions come in, which I haven't read so I might just start off with a question from me mate so I just want to talk about Drupal's competition. So Um, historically, it's been WordPress and Juniper sort of pre-enterprise sort of era We then saw SharePoint's Site called Adobe Circus or 2013. Is it safe to say It's Wixxon Squarespace right now or or do you think they are never going to compete at an enterprise level? Uh, thanks for the question Simon, uh, I think We don't really have a competition from the perspective of the what we have on our hands and Dries mentioned before but also all of those systems basically do cheap away from Drupal user base beat enterprise systems like Adobe that's really expanding now in Australia or Wixxon Squarespace they took as you saw the numbers before that took a significant chunk Just because how easy it is to build the websites for them. I think We need to embrace the change and just Use them and as an inspiration sometimes when the client comes to us and don't know what to do especially from the Anonymous user or front ender perspective I would just send them to Wixxon and I don't consider that a competition. I actually Teach them how to use Wixxon as a prototyping tool And I'm looking forward to have a bit more time to actually investigate a bit more WordPress and the Squarespace and see what they offer that we might Take and use so personally again. Yes and no, but I think they're more of a You know the environment we're in rather than the full-on competition that we have to eliminate Yeah, it's funny. I think a great some our sort of favorite client here at doghouse is My mother's pottery website and she's staring down She's staring down the you know Drupal 7 upgrade and you know It's cheaper more efficient for us to move her over to Wixx than actually sort of move her to z9 Which isn't a bad thing at the same time I've had a couple questions come through first ones from Ian Humble. I believe he's the growth manager at district cms So must be a good question There's this referencing panthin back in 2012 We're offering one click website installations The question is why do you think Drupal community hasn't put more effort into one click installations to generate interest in the Drupal system Hi, Ian. By the way, thanks for the question I'm keep thinking about it Every day, I think partially the answer is the ever-growing and blooming DevOps DevOps and Category of developers I guess where everyone wants to spin off their version of things in The version of things in aws azure google cloud you name it digital ocean Everyone is a hosting company these days, but on the other hand we already have one click spin-offs Pantheon does it aqua does it platform sh does it we need more of those And uh back in the day when I was doing an interview to go and work for aqueous I think they called digital gardens or something where they had Exactly weeks and that was year 2012 Uh Yeah, we seemed like as a community we seem to steer away From those simple things. So what I was talking about is more how we can improve things on Drupal site, but it's obviously a whole other infrastructure issue where how we can also fight $10 a month WordPress websites where these big companies like gold daddy come in and they just buy you on the price They actually support full-on WordPress at about 10 bucks And I know the price is a you know comparison and don't quote me on that But I'm just saying what I see on the WordPress website Saying that that gave a lot of boost to WordPress one click installation companies and again, we are Environment where we like to you know open new business and go for it and the opportunity is right there For me personally, I'm I don't see myself Going into a hosting business, but for all The warps strategist there who thinking about being Interpreneral and opening their own company. I think it's a great opportunity to jump on the market and Be in the competition the more hosting company will get the everyone Like will benefit more from it Thanks, man. I think it's going to change the landscape Especially for you know, some of these smaller dribble shops that rely on these less complex builds Historically, you know, I think we'll find a lot of those are moving to South space cms is such as wicks and and square space and so forth So later another question from Amy eastwood. What are the major differences between bootstrap 4 and 5? I have the whole presentation about it and it's posted on Drupal tomato elephant studio youtube channel from brisbane meetup and it covers a lot of Differences between them. I think one of the biggest differences Is there's no longer j query support. So you don't need to have a j query library to build on a bootstrap all JavaScript elements were rebuilt in pure They were rebuilt in pure Uh JavaScript, sorry just I had a brain freeze One of the biggest pushes for me Is they actually became fully of gag to Compatible so if you run of gag to this is accessibility checker that checks your website accessibility on bootstrap 4 Some of the primary colors they use they were still not fully accessible There was a big push of actually making it accessible and you can see there's a growth in In accessibility push which I really like because a lot of front end frameworks that spin off these days ignore Two things testing and accessibility and I think bootstrap being you know Significantly more mature than a lot of front end system. That's a great job on accessibility without you needing to do anything This is south and the south of the people testing the interface elements for accessibility the number three Change to Bootstrap 5 is actually Mobile first so the most of the elements are mobile first Even if your client doesn't realize probably more than 50 percent of their Audience are coming from mobile and actually having the framework that out of the box squeezes on element and using the Modes to actually being able to use and see on the device is a great tool and I think those three things are where bootstrap 5 really shines Oops, so I was on mute there. Thanks Matt That's all for the questions that we have Um guys can sort of drop in the questions into the q&a Not the discussion forum as well if anyone has a last question. We've got a few minutes left Made another question for me. So I guess, um, what is the future of dribble theme? Sort of front end wise are we sort of staring down the headless enterprise path? Or do you think we'll go back to that sort of the way back to solar side builders The reality is The themes, uh, we really lost a lot of theme builders with Drupal 8 That's the reality like I'm not going to go into why and re-scour Some things of that. So we did lose a lot of deaths as well and I can see them who used to contribute to the themes When Drupal 7 was on a peak to now Um It's very different and new themes are coming out But they either very niche themes or themes trying to solve one or two issues I guess With the bootstrap 5 theme. I wanted to give more power to the people who click through the interface That's my goal with the bootstrap 4 and now bootstrap 5 theme. But at the same time, uh, something that Give me as a developer opportunity to Quickly bootstrap something. Uh, I tried. Uh, I tried other things and they're great. They're big great things like radix But for me, they were overkill in some space. That's why I started bootstrap 5 theme. So I think we just need more people to build in more themes like and get back to the level of well, at least, you know, pre Drupal 8 they don't have to be a great theme. So we just need to have a variety at the moment Uh From the top of my head, I can name maybe three or four themes that You know popping up here and there and actually start becoming prominent in the community saying that, uh, the work that's being done, uh, on Drupal 10 And uh, two themes that I mentioned, which is olivero and claro and Drupal 10 would also have a template Uh, they would have a starter kit so rather than, uh Theme that you can't see that provides a lot of stuff. There would be a starter here, which you can build things is Matt glennon, who is one of the Drupal developers. He also mentioned there is a template builder And template editor he built And I put the link under this presentation to his tweet. He is looking at the moment for sponsorship He does a lot of development on php stem But he also built this, uh, Drupal uh template builder, which basically Takes a template tweak template Opens it in the browser. You can edit the code save it and it would save it into your thing great concept and the talks About it will happen for years now. So I think, uh In terms of the theme development we shifted towards a bit more robust a bit more developer oriented But I think now using those great innovations. We need to start building up and bringing The amounts in so a bit more themes to choose from Fantastic, I think we'll wrap it up there. Matt. We have, uh, approximately one minute left. So perfect timing Matt, thank you very much. It's obviously a timely, timely subject I know these presentations take a lot of time to put together and you're a very very busy man Um, so next up we have lighting talks, uh, and round table sessions which start in approximately one minute So again, thanks Matt, uh, to you and thanks everyone for joining See you Thanks Simon. Thanks everyone