 Calimera everyone. I hope you had your lunch and you're ready for a new portion of knowledge today Whoo, thanks for joining me today here at World Camp Europe 2023 I Cannot express with words how excited I am to be here and also how nervous I am to be here because it's my first time speaking at World Camp Europe so Cheer up a bit to lower the pressure Much appreciated. Thank you so much. Well, oh Maybe we should start the presentation from the first slide if possible Let me just quickly go backwards. Sorry about that It's a spoiler alert. So keep your eyes closed Don't watch don't watch. We'll go through each of the slides alright So today I want to share with you how we can elevate WordPress in order to have truly customized and they were made websites and Before we start I would like to share a few words about myself. I promise. I'm not gonna bore you So I built my first website WordPress website back in 2016 and it was about the dental studio I was visiting back then and I was thinking all right. These people are providing tremendous service and somehow I wanted to showcase it in a web experience that is going to attract of course new class and so on and so forth and Because of my lack of experience with WordPress back then I've used pre-built team and it surfaced purpose The website came out and it was fine and what has changed since then till now. I'm gonna review in the next slides During the years I've established my own web agency, but what excites me the most and what makes my heart sink is Sharing knowledge and this is why we are here today, too I've created an initiative called the one D which is all about sharing knowledge and Opening the doors to web development and more specifically WordPress websites development. I Have two personalities as well I started as a front-end developer back in 2013-14 but it took me no more than like four years to realize that what stands under the hood also fascinates me so I basically rolled up my sleeves and dive deeper into the back end world development and Working in the web industry and having the privilege to work in this industry Give me the opportunity to have first-hand experience on how technology impacts our daily life So you might wonder what we're going to talk about today, right? Well, you see in our digital era websites have become cornerstones for brands and businesses and The demand for they were made experiences has skyrocketed pretty much So in order to accomplish this purpose and to provide Clients and brands with unique websites We need to dig deeper and to work with technologies and strategies Which can separate our products or they product eventually from cookie cutter designs and overloaded teams and Of course, let's first identify the problem well How many of you have? Experienced some sort of deja vu while scrolling the internet and seeing pretty much the same screens Raise the hand, right so many of you Well, of course There are what of techniques that can't be just dismissed But there is always a way to provide Spice of uniqueness and just just something that will make your website Remarkable and memorizable for all the visitors that have been on it And instead of just talking I've gathered some examples for you And you might be surprised to find out that more of 30 percent of all WordPress websites Have been built on top of five or let's say six WordPress teams of course these teams have wild range of elements and Different patterns and layouts, but still as you can see We have pretty much a header Standard header we have this big bright background images most often they might be videos as well Then we have some a catching title and of course called action because we want our visitors and our users to take some action on our website and You might wonder how this might be a problem or ish. Well Let's take a moment to shift our perspective from clients point of view For clients Their digital presence is not about just having a website a simple website with their domain and some basic information and so on their digital presence represents their values and their unique identity and Often this abundance leads them to let's say issues when it comes to pre-built teams that It might overloads them with so many functionalities that that they actually do not need or With functionalities that different teams do not offer On the other hand we as developers We want to improve our skills to have our stack filled with different technologies and libraries such as react Such as view such as WebGL. How many of you heard of WebGL? Oh, wow, that's perfect. Thank you Great, so, you know when building a WordPress website combining it with WebGL or Promoting this to the client might be like what what do you mean? It is just a WordPress website So anyways, if we can make any conclusion here is that clients wants to have their website unique But most importantly, they also wanted to be easy to maintain to add new content to Extend its content and so on and so forth Developers wants to work with new technologies and to improve this themselves constantly Well as every problem out there This one has a solution to and WordPress actually can be the solution how Well In the next part of our talk actually I would like to introduce you to some technologies different libraries and different approaches that can enable you to break free from this Repetitive designs and this repetitive functionalities And by saying that I would like to start with the front end. Well by definition front end It's combining three main aspects motion interaction and user interface and by motion what we understand by motion is Having the sense of Touching something or to see how the elements come into the page or how they flew through the page or what it happens When you rewalt the page, right? Then by interaction We can say that it's like when a visitor clicks on a button What would happen is the button is going to change its background or to shrink or to expand or When the user submits a form, let's say for example, what would happen then is going to redirect them to thank you page Is it going to stay in a synchronously reload the page? What will happen and that's but not least is user interface And when we are talking about user interface We are taking all the fonts all the colors Even the tone of voice of the website is going to be more like friendly or it's going to be more like Corporative and all the images as well. So combining these three aspects We can have really customized and they were made experience for the brand or for the clan Or even for ourselves if we are building like a portfolio website example so With humans like to sense the reality Through our senses. Well, what do I mean by that? Well, we like to touch things, right? We like to smell things. We like to feel the comfort and We like to see beautiful things in front of us So the first thing a visitor see when opening your website is How does it look? What typography does it have? What colors does it have and so on and so forth and Speaking of typography. I would like to start with two Yet super simple but super powerful tools and those are colors and typography Well, actually I'm gonna show you an example here As you can see here in this example, we have big bright titles on top of provocative and contrasting background and what creates this an emotion and Once the emotion is created It leads to engagement and that's the main goal of our website no matter what the content is right We want users to feel engaged and to come back onto our website The next thing I want to point out and Actually, I have a question for you in one sentence Can somebody tell me what is storytelling one sentence? Any volunteers? Okay. I'll show you a quick example Yeah, oh How to reverse it? Yes Communicating value. Yes. Ah, yes, you're absolutely right well Thank you so much. I Just me get back to my example here So in this it's a website actually in This website you can see the history of cinematography in just about few scrolls You can see first it was black and white then they added colors Then we have even more special effects like on the matrix We have different variations of television and so on and so forth and all of these centuries of cinematography have been represented by few scrolls and If we have to make any conclusion here that will be like In our age, we're overwhelmed of information, you know We're scrolling constantly through different fields of social media website and so on so The power of scrolling telling it's a new terminology in web development and it's here to stay I've often seen so many websites Adopting this approach and even me as a developer Sometimes the only way I am able to represent the story is by using scrolling telling So the visitor needs to understand what the purpose of this website is and what the content of this website is Just about two three scrolls quickly. Just leave them with impression give them something that will engage them and As but not least make them come back the third aspect I want to talk with you is fluidity well nowadays Websites are all about fluidity, you know this animation that flows from right from flows from left from top from up from everywhere so It's the way how you are opening a new screen after another screen and you are serving the content that is on the website And I have just an example for you here as well You can see how we are guiding users attention through the titles through the images, of course, it's a speed-up one, but still get the impression and Now Almost my favorite part almost how we can take these ideas. Let's let's call them ideas and implement them into an actual code into a actual Front-end which is going to do all of these things if we choose to do to choose to use them well here I Have prepared a quick video for you and I would really ask you to pay attention on it because it consists of four websites Each one of who is built on top of WordPress. So these are WordPress websites and yet they are super creative and Here you can see the example with the big bold titles. Of course, it's not necessary to use this We're not designers anyways, but just as an example How using typography and colors can actually make the difference and you can memorize that website Videos are also here to stay and it's a fabulous way to quickly Introduce the content of the website super quickly and to leave the user with lasting compression that they're Find out more information about the website super quickly again. All right And you might actually started to wonder what are these technologies that we're talking about so much and how we can use them I'm gonna review in just a few seconds and Actually before Share with you this Libraries, let's call them libraries because they they are actually libraries If somebody wants to share a library after that or even during the talk or in the QI session, please be my guest so let's move forward and See these technologies that we can use to enhance and to level up our WordPress website Well, one of my favorite here is Barbara. Yes, maybe this is why I put it on top It's a JavaScript library which allows us to go through pages without reloading actually the page Which makes first Transitions between pages merge more faster and it makes Less HTTP requests, which again leads to faster user experience also combined with other libraries can lead to super interactive screen openings Next one is WebGL, which I already know that you're super familiar with it It's an JavaScript API which allows us the developers to create 2d and even 3d interactions I'm pretty sure even for those who are not super familiar You have seen it into let's say Google Maps is using WebGL to to create this Canvas Another library I would like to mention is 3js, which is again JavaScript library using WebGL to perform different types of interactions Just up by green soak is actually my favorite and I often use it to create Small interactions and also interactions that that are engaged with scrolling So imagine as we talked few minutes earlier about scrolling telling when user scrolls and scrolls You can review different elements and you can hide them beautifully so you can create really a whole spectacle using it last but not least It's Lenny scroll which is of course there are many Libraries like locomotive scroll and you can find out more and you can suggest also Which are making the scrolling experience smooth and nice So you are not interrupted by shifting screens all the time, but you have this smooth experience All right, and now since we have this Beautifully packed up front-end with all the functionalities with all the libraries that we have incorporated mindfully It's time to bring this piece of art into a WordPress. Well, how to do that? I'm gonna start by Talking a little bit about creating Custom WordPress team which leads me to another question. How many of you have created? Fully custom WordPress team from scratch That's great. I love to know my audience a bit better Well, you may know and for those of you who don't who don't know that in order to work properly WordPress team needs to essential files and those are style.css and index.php But since we are going to create Custom-made and Tailor-made WordPress team that is going to serve to the front-end that we have already created We're going to need a bit more files in here Of course, we have header.php, footer.php which are going to be Multiplied and used throughout the website But first before we dive into the coding part We need to do one thing and that thing is to make ourselves super clear About the content structure What do I mean by that? Well Actually, I'm gonna tell you a story of my own experience Before a couple of months. I was working on a project which was about it was a website built for America's biggest payment providing a provider's expert and We have the front-end all packed up We have all these beautiful interactions animations and each page was unique in its own way So we have truly achieved this goal to provide the visitors of this website with remarkable experience So me and the team we have decided that since it's going to be Truly unique page each page is going to be truly unique. We're going to use page templates, right? and we have Almost build up everything and we were like, I know maybe two weeks before launch date and Client calls us and says okay But we want to be able to tweak around the sections to move one in on top of the other or to Completely erase any of the sections And you might wonder well WordPress can actually do that It's all about tweaking and connecting and playing with books, but since we're creating a Truly customized team here. We are relying on the user experience and On the order that each one of the sections appears in order to provide really Engaging storytelling Anyways, we have start from scratch and we've built it. I'm gonna mention how and what we did in few minutes But first I'd like to start with Custom post types I assume that lots of you are familiar with custom post types in here. Yes, raise a hand Alright So for those of you who don't know custom post type Well, actually, I'll use an example who commerce products can be called custom post type. It's a way of Organizing content and creating its own Way to be reached like posts like pages like products in WooCommerce and so on so using custom post type can custom post types can really Elevate the content managing when it comes to because when you hand over the projects The client needs to know how to edit all of this content To give you an example a friend of mine, which is cooking blogger Wanted a website and I was like, of course, we're gonna build a website for you. So we've built the website and It was all about recipes because cooking blogger. Well, I've created a custom post type called recipes and I labeled it With several custom taxonomies Which complements really well custom post types in order to Organize again the content and to make it easier to filter it afterwards. So for example in her book She had a page called recipes and she has a filter inside of it and visitors Were able to filter through dish type through time for preparation, which is important also by Needed ingredients and so on and so forth you you get the idea here that once you have set Yourself clear about the content and you know what WordPress Elements you are going to use in order to combine all of this front end then you can start actually building it and To go even a step further. I would like to mention a few words about Gutenberg. Well Again with this audience, I'm pretty sure that you are familiar with Gutenberg since it's since Version 5 correct me if I'm wrong is the default WordPress editor well, of course in it in WordPress core, you can see a lot of pre-built Gutenberg books But if we want to relate to this topic or how we can create customized experience Well, we can actually grab each one of website sections And turn it into a Gutenberg book and it was exactly what we did for this company I've told you that in the last minute they said though, but we want to swipe sections or to erase them or to add to To equal sections on top of another and so on and so forth. So By creating custom Gutenberg's book you can implement your front end or your front end sections in a way That could be like Lego or like puzzle for the clients to pick the pieces together and Of course as almost everything in programming Gutenberg's book can be created in several different ways I'm not gonna fall into the technical details because we don't have that much time But if anyone is interested on how we can create custom Gutenberg's book feel free to catch up with me after the talk And since we have knowledge on how to create custom post type and Whether we are going to use custom taxonomies that are going to complement this and or extend this custom post type We already know that we might use Gutenberg box and to implement our beautifully created front end into the Gutenberg box It's time to create page templates and singles file single files Well single files each custom post type has its dedicated single template Which is responsible for the layout of this custom post type to make it clear Let's imagine that you have a standard WordPress team And you have your blog posts But then you add a new custom post type and the layout for this custom post type Let's call it projects for example It's pretty much the same as the blog posts, but you don't want this you want inside of your Custom post type for projects to showcase your recent work to add some screenshots to add some videos and These are elements that are not represent into the normal blog posts. Well, in this way You can create single PHP file that is going to be dedicated only for the project custom post type and if you have wondered How with all of these libraries and heavy front end we can still have pretty much faster page experience Well, not only by using Gutenberg, but I'm gonna give you this as a quick example. Well Gutenberg If you decide to have custom books All the scripts and all the styles for this custom walk is going to be welded only if the walk is Present on the page. So no matter if you have like library of a hundred books And if on a several or a certain on a certain story page, you have three books Well, you're gonna load the scripts and the styles only for those three books and of course Yes, because speed matters and you don't have all of this crazy HTML markup that's pretty much maybe each of the team builders Walt on the page and by this I want to wrap it up super quickly and to actually tell you that Creating uniqueness and creativity can be done by WordPress and the only thing that Can stop you might be your imagination or your skills But skills are something that you can gain anytime so dedicate time if you want to have Bit more creative and tailor-made experience So thank you so much for listening All right, everyone. Thank you. Thank you, Peter. So we have The questions and answers section and if you have any questions, please raise up your hand. Okay. I'm counting one What the mic please okay? Someone is gonna get the mic to you to ask your questions Please we're gonna be taking one question This is the first person, okay? We're gonna be taking one question per person, please You can always catch up with me after talk after the talk Is it on okay? I have a quick question. How does any of this work with accessibility like if a person has accessibility issues, how do they use like the long Scroll-telling site that you need to scroll you need to be able to see it. Yes. Yes Thank you for the question. It's a really important question because we need to make sure that web is accessible for everyone, right? When we are building the front end of our websites, we can use best practices like adding data attributes So we can ensure that screen readers know knows exactly where the user is So it could be buttons It could be sections or it could it could be titles on the anchors So user knows exactly where they are and what they are going to open if they click on this So it could be implemented directly into our front end and it's To say that way it's in the front-end garden to be done before starting with the team. I hope that answers your question Okay, next person, please Hi, thank you for your talk I'm assuming that you're presenting some kind of design to the client before you start actually start building Yes, how do you design or how do you present? Moving designs to the client. What workflow do you use for that? Yes? Thank you for a question. It's also a really good one Well, you know with this modern technology is like even for example using Figma You can present interactions or you can use Adobe's products as well to make a Quick preview on how is it going to look at the very end? Of course Not every client and not every website is suitable for huge animations You need to talk this with the client as well And you need to see which is their target audience at first and this is the most important thing And then it's all about testing showing and communicating Thank you so much for the question. All right Next person, please Hello, and first of all, sorry if you mentioned this and I didn't catch up but What you mentioned building custom blocks on Gutenberg and my question is all your front-end applications run in a React app or do you also create custom blocks that render PHP and you use The PHP to show the front-end while the blocks are created in in the react native WordPress. Yes, it's also a very good question. And as I mentioned, there are always more than one way to do so The question is speaking itself So again, it depends on the project scope and on the technologies We would like to evolve into this project. It could be done by native react blocks using a native Gutenberg blocks using react And we can start building up the front-end according to the blocks that we are going to render at the very end But it also and it happened in my experience as well to receive already built front-end that it's not meant to be Sliced into Gutenberg blocks. So that way I use the second approach that you have mentioned And you can do this by using for example advanced custom fields even it's also an option to create books with advanced custom fields So again, depends on the scope and depends on If you are starting from scratch from the discovery phase or if you're receiving some really really Beautifully assembled front-end and you need to quickly decide what you're how you're going to implement it into WordPress Thank you All right, anybody else Okay Hello, okay Hi, hello Is this design approach effective on smaller screens as well, or is it more targeted on larger screens? Also very good question. Well again, it depends on the target audience But of course We are trying and I believe it's the best to try to keep as much as you can But again keeping in mind that too many animations and interactions can be really overwhelming into a smaller screen so even It could be a way to just Complement the desktop website with smaller interactions and or even I have seen and even in my experience I have built such solutions if the animation or in the or the interaction is too complicated you just Guides the user even to rotate the screen either to open it on a desktop It really depends again on the project and what the client or the person you are building this project wants to achieve with it Thank you Thank you Okay Hello, hello Do you have recommendation for a tool that designer can use To present animation to developer select developer can look animation see the timing easing and everything else that We developers need to write in CSS and we cannot guess it. Yes. Thank you. Thank you, too You just described a day of my life I believe it's a pain in the you know When talking with designer talking with the developer or developer talking with the designer because in my experience designers When they see the final implementation of their ideas they were like But I was not imagining Imagining it like this. What did you did when I'm like, okay, but you haven't shown me any examples or you haven't shown me anything so To answer the proper your question Maybe it's it's a way of communication and it's a way of combining different tools such as Figma as I mentioned before I'm not a designer But I'm pretty sure that there are many much more Tools that designers can use in order to provide Information as clear as possible because even even using the reference websites Even this is an option to to say if the designer has seen something Imagines it in a certain way on our website. It's an option to just show you the Reference website and you can communicate over the idea and how it's going to be implemented No Okay, unfortunately next person Hi, hi, I work for a big publisher. We have mainly big news websites who need to be very Scannable and I would say they are all pretty boring. Have you ever Found something that can make a website scannable Yet make it creative because I find it very hard to make creative news websites where everything is just a cart Maybe with a background or a carousel All right get your question. Well, remember when I spoke about colors and typography. These are really simple tools They're not overloaded with huge interactions But you can really make a difference and you can guide readers' attentions for headings different Font sizes you can use different colors also to engage you can make it even a bit further with Small easings and small transitions each time when the user opens up a new page and you and use they want to read But tweak tweak with the details if you don't have the scene for astonishing Interactions tweak with the details because it's in the details Thank you. Thank you. Yeah Any more questions? Okay, have one Thank you very much for the talk. Thank you. I have a question about Focus if you things move you were talking about animation and transitions and We all know if something moves the people look to the things you that move so What do you do with clients that see oh We know we can animate things and they want to animate or transition things That shouldn't get the focus because it's not the content but some Fancy images like that. So they are There the client user is looking at the wrong things because they do not Should look at beautiful pictures. They should see and read the content. Yes indeed. Well Again, it's more like when the designer and the client are talking about the Final result they want to achieve and on which elements they want to focus users attention zone because of course we can Overdo it with lots of animations and interactions that only are going that they're going only to Overwhelm the user and will make them exit the website But when used right? interactions can navigate users attention and to make them like Focus on the things they we want them to focus on for example like if you Open let's say some e-commerce website You see how the art to cart button is in different color is in different size It might use even different typography just to stand out just to be different and of course for a e-commerce website That's the main goal. We want visitors to became clients to purchase something and to finalize their order. So it's about Getting clear idea on what is the main result that we want to achieve when a visitor opens up the website. I Hope that answers your question. All right. Thank you That's the last question we can take Time is almost up If you have other questions later, you could reach out to the speaker and be around Ask her directly. I'm sure you have a more engaging conversation that time. All right. Thank you everyone for being here