Live Webinar | Understanding & Building Responsive Sites | Editor X & Dribbble

hi guys i'd love to hear where you guys are all joining from i think we've got a really international bunch i saw some people coming from um someone from nigeria someone from the west coast long island new york portugal amazing israel thank you so much for staying up late if it's super late there we appreciate it it's my morning i know that it's um the editor x's team evening so um i appreciate you guys los angeles ohio detroit a lot of people from the us yeah man well welcome and i hope that you're excited for this interactive hands-on workshop with editorx it's going to be a really fun few hours of learning and creating responsive web design um so i've got a couple of housekeeping things to do first but we're so excited to be joined by gail erroz and edo for our um responsive web design workshop with editor x you guys are in the best hands here so um i've got a few housekeeping notes first firstly use this chat to get to know each other um you could share your the things that you create in the chat you can share your portfolios in the chat we really like to keep these sessions interactive and engaging so um use the chat to say hi we love to hear from you um this workshop's going to be broken down into firstly a presentation and talk by galley who's the head of product editor x and then um edo who's going to be doing a sort of live demo i'm going to be talking you through how to design responsive design on editor x and then you're going to be having the chance to actually create web designs for yourself and then ask loads of questions um and ask questions live to galeanido if you guys are watching on youtube we are going to be collecting your questions and asking them live as well so make sure you ask your questions on youtube and we'll get a chance to ask them here don't worry if you find yourself a bit lost or if you've got lots of questions when designing your website part of this workshop we're going to open out into different lounges and there are going to be eight different experts here to help you and so when you get to the chance to create your website jump into a lounge you could turn your microphone on you could and you could ask the experts any questions that you have we're really really excited to see what you create in this workshop um we'd love for you to share your web design creations on social media you could use any social media platform and tag editor x and dribble we'll be re-sharing and retweeting and reposting any designs that we find um on social media so make sure to share them at the end this workshop is going to be interactive like i said there might be a chance for you actually to come up onto stage and share your work and ask your questions if you want to come up onto stage with galley and ido you could raise your hands in the question and answer chat um it's in the question and answer panel of the chat excuse me that hand emoji signifies that you'd like to come up onto stage if we see your hand raised we'll bring you into the green room and we'll put you on stage and then you can potentially share your web design work um we're gonna have a lot of question and answer so if you do have a question put it in the question and answer tab there's an ability to upvote other people's questions so if you see a question that you like make sure you upvote it um and we'll make sure to ask the most uploaded questions so if you run into any tech issues or any trouble just dmrs we're here throughout the whole session to support you this workshop is being recorded and it's also on youtube so if you need to stretch your legs or grab a glass of water feel free i've got my wonderful colleague with me here today renee hi everyone renee from team dribble i'll be in the chat if you need anything and i hope you enjoy the session and a special thanks to our event platform partners welcome which this workshop's being held on and also editorex has been so gracious to give you guys as a thank you for joining us today a 50 discount to their year to a year of their premium plan so we'll link the discount in the chat um make sure that you grab that really exclusive offer for a year of premium okay so i would love to introduce galleries who is the head of product at editor x and wix adi before joining wix in 2015 gallery was a senior ux designer and later promoted to management of all ux consumer experiences galea has worked for globally renowned brands such as goldman sachs warner brothers and as a designer and visual communicator she's passionate passionate about translating technology into products that people could relate to and then after galley's done her presentation we've got the amazing ido hershevitz who is a web developer and editor x specialist based in tel aviv so edio can be found working alongside edit x's marketing team to create websites for their activities in addition to coding um he also specializes in responsive design so you guys are in the best hands for this live demo um edo is also an avid music producer and a musician when he isn't working so super excited to have these two experts you really are learning from the best in the industry with one of the best technologies in the industry so um thank you so much editor x for coming and running this free work for us guys i hope you guys have an amazing time dms if you need any help but let's get started hi everyone thank you so much madeline for that very nice introduction so i'm gadi and yes i'm from the editor x team and actually before transitioning into product i was a ux designer and i was managing ux and design teams so it's a real passion of mine now working on a platform that is serving designers and you know it's fun to be on the other side of things and thinking how you know i would want my product to be as a designer and actually i'm really curious who's here with us today so maybe we can open up a poll and you can share what's your profession i would love to hear so can we go ahead and do that that would be awesome thank you so i'm going to check out your answers later now what is editor x well it's a website building platform and we really wanted it to have the mental model of designers so we can create simple to really complex sites without code and it has a very powerful cms and a bunch of very cool features but i think one of its biggest strengths is that you can be very specific on how you want every component to behave and especially how it behaves responsively and i've been at wix for more than six years getting close to seven so i've seen a lot of websites i take a look on a daily basis at sites made by our users but also sites created on other platforms or created up from scratch and even on a quarterly basis that's when we actually do a very deep dive so because it helps us one of the best sources to kind of learn where where we should improve what things are being created from scratch because platforms today don't offer them and so on and i actually tried to count before coming here today and i've seen close to a million websites and what's very clear to me is that people do not make their site responsive many times even like the top brands and the top designers sin in that but what do i mean when i say responsive so i really want us to first align on it for a second and i'm a big history fan so i'm gonna take you on a trip back in time so we can understand kind of where the methodologies came from so let's go back 30 years ago um to the first website from 91 maybe some of you weren't even born yet i was sadly but you can see here that the site is already responsive and as you resize the screen the line's length is shortened and the content is also being pushed downwards but then um if we go a bit further on the timeline so we're now in 1994 and this uh this is the first yahoo website i took yao as an example because it was a very big player at the time and what's amazing to see is that the sites at the time did become much more complicated but there wasn't really the technology or the market need to support a responsive site um and uh what we can see now is that um a huge change and it's due to this earthquake that happened in 2007 the iphone came out and at the beginning there wasn't yet um companies didn't see yet the potential of using the medium so you see a lot of websites at the time still displaying their desktop version so here's the yao desktop version on the iphone but only a year later with sales rising and the need to supply a good experience for this rising star and for this a very different canvas size then these companies started making their sites uh work well on mobile and here you can see the yao site from 2008 just a year later and it's actually a separate site and it's called adaptive and what adaptive means is when you create um different versions of your site um in a fixed size to work well for different screen sizes and this is already of course an advancement but the thing is there are a few downsides here so the first one is that when you have a separate site um and separate versions every time you want to make an edit or add content update technology or whatever you have to do that for all the different versions and it can get kind of cumbersome and also you can kind of lose track of your changes especially when the designs are very different from from side to side many times and another thing is that adaptive design just cannot keep up with the amount of screens that are out there today there's an estimation that there's over 8 billion unique devices out there so that's pretty insane um and it means that in billion times of situations your site is not going to look as you intended and as a designer you work so hard to create the stunning side um but then most people are going to experience it um not not fitted exactly for their screen size and a fun fact if you actually created eight billion versions of your site and you went on to create to make an edit that should take you like a minute if you did it for all of your sites it's going to take you 15 000 years so that's probably not the best option out there and that's why a new way of thinking and a new methodology was needed and that methodology is actually responsive design and i'm gonna share with you this is the most straightforward definition i'm gonna let you read it for a second okay so um i like to think of it in a bit of a more visual and poetic way um when i'm working on a responsive side i like to think of it as you know having this one huge canvas where i just throw all of my content onto it and then as i resize it i kind of show hide elements i relay out them and it's a little bit like imagine instruments um on a song but instead of creating on a timeline you are creating on a width um and it's kind of as if imagine uh you kind of hiding and showing the drums they're always there but you won't necessarily hear them throughout the whole time and actually i would love to have another poll um i would love to understand what's your experience if you've ever created a responsive site before you've created them many times so it would be great if you if you could all share cool so we'll get that going um but the thing is um you know why is it so important so i shared what it is but um there's actually very important reasons to why you should be responsifying your site so these are the four that i thought were the most important the first one is all about conversion so um as you know as an e-commerce site for example if your pay now button is below the fold or is kind of out of the screen of the user you're going to lose sales another reason is that search engines today especially google prefers sites that were really well done on mobile so take that into account the third one is about stickiness so we want people visiting our site to stay as long as possible so if imagine you know your portfolio if a potential employer checks it out you want it for them to be very easy to navigate between your projects and get a really good experience for their screen and the last one is mobile so of course mobile is now the most popular screen there it depends on the country but in some countries it already surpassed um views than desktop and the i don't know if this has ever happened to you but it happens to me all the time i'm on instagram checking out my cool illustrator accounts or web designers and i click to see their site and then i go into their mobile site and i i can't kind of handle what's going on and i tell myself you know maybe i'll just check it out on desktop later and i never get around to do it so you want to make sure that it looks great on mobile and that it's super usable so we actually have a lot a lot of tools that can help you create a really great responsive website and i wanted to share with you today some of the tools that we have in editor x you will hear some common terms from web design as well so the first one is break points um so a breakpoint is basically a point where the viewport changes and you need to make changes in styling or layout so these breakpoints are kind of where us designers want to kind of interrupt the site and art direct and a very cool thing that we also have on editor x is that you can create custom breakpoints because the one we all know desktop tablet and mobile many times can be enough but sometimes you have a very complex site if you think of like the new york times or something with a lot of content you might need to deal with bigger screen sizes or many more breaks because of the content and actually if we look at this example it can be pretty easy to see so we have at the top the three common breakpoints desktop tablet and mobile and when we switch from tablet to mobile you see our layout switches from a two column to a one column um but the what about the whole tablet um breakpoint what's happening within that whole area because as we said you know if uh if this was a fixed size then they're gonna be many many uh tablet sizes that are not being served a really well designed site so for that we actually have fluidity and fluidity is super useful um it basically means um giving rules to components of how they resize and how they are positioned um and what is how much of the edge you're keeping from the side of the section and what's cool is that you can make it all relative all in percentage and actually if we look at the same example but now kind of put glasses and focus on the mobile on the sorry on the mobile version so let's go and see that okay so you can see here that the image is resizing and also everything around it is also resizing but with a really nice proportion because it was done in percentage but the thing is uh that when you're building a very complicated site it's much easier to kind of bundle all of your content into more constructed arrangements and for that it's very useful to use responsive layouts there are two very popular technologies used to layout the first one is a css grid and the second one is a flexbox in editor x we actually call it a layouter and each of them kind of has pros and cons because it really depends on the design you're trying to achieve some designs work better with a grid some work better with uh with a louder flexbox and you really know you've mastered this uh if you can play a game where you're being shown in design and you know off the bat like oh you should be using grid no you should be using a layouter so i really hope all of you get to that pro level and i'm going to dive a bit into the grid and into the layouter so the grid i like to call it the fancy layout because it's much more complex it's a two-dimensional grid-based layout and you can take any container a section and apply a grid to it and then you place the elements on top of it and you dock them to all these grid lines you have created and basically when the screen resizes they know because they are docked on to one of the lines if to get closer to that line if to resize towards that line and it just really helps dividing the big space into smaller spaces and it's really amazing for overlapping layouts and when you want to get really precise and you're working with like a very complex design another cool thing about the grid is that you can cro control every column and row how it resizes so there's like tons of unit types you're going to see some of this during the workshop if you don't you'll see how to use it and you can change that per breakpoint so i would say the grid is probably the most powerful tool for responsive design the second tool is a very popular it's the layouter and i call it the lazy layouter because it's uh it's much more simple than the grid um and the reason why it's so simple because it has a lot more constraints you could say it's one-dimensional and it does a lot of the work for you because when there's no more space it just wraps the content in a z path um so it looks great no matter what you do almost um so after sharing uh all these like tools um it can sound a bit overwhelming um so i gathered tips from our team i asked them like what would you want me to share you know what are the things that help you most so i took four that i thought were very very helpful and i'm going to share them with you right now so the first one is all about deconstructing your design so i'm sure each designer here has a different process and the process can also depend you know if on the project you're working on um you know i like to sometimes work from start with wireframes and then bring them to life sometimes i just like to use the canvas freely and not worry about you know the the construction you know just not stop the creative process and just run with it um so it the thing is though that no matter what process you use it is really important how you structure the site because when you structure it well it's just gonna make your work so much easier later on with other screen sizes so how do you kind of get from start to end um something that i suggest is first of all always look at your design and try to split it into sections it is much easier to grasp um the whole thing when you're you know when you're dealing with smaller chunks and then what each each one of these sections it's much easier to make a decision what tool to use if you want to use the grid the layouter so it just makes it much easier and we also have a feature where you can save a design you created so if you are in the mood to just you know freely design and not worry about it just go ahead and do that and then you can just save your design and use it as a reference and rebuilt it um now that you know kind of the end of the story it's much easier to do so actually these decisions will become really quickly um intuitive after you start playing around and again this is going to save you a lot of time if you reconstruct your design and really think through it the second tip is about overrides so like i mentioned before overrides are the changes you are making um in different breakpoints and editor x works in a cascading uh way so it means that you're making a design on desktop and then on smaller breakpoints you make specific decisions that are overriding the um the bigger break points um but the thing is it's really important to know what can be overwritten and what cannot be over in because whatever cannot be overrun is gonna affect all of your break points so i gathered a few examples to kind of bring bring that idea more in a more visual way so here we can see a site that has the very common case where you have on desktop or horizontal menu and then on mobile you have a hamburger menu so the thing is the gap here is too big between these two kind of designs so instead of trying to override you're actually going to use two separate components and then you're gonna hide on desktop the hamburger menu and on mobile you're gonna hide the horizontal menu because as we said it's just one canvas so actually if you try to delete on mobile the horizontal menu it's going to be lost everywhere it's not going to appear not on the desktop and not on any breakpoint because basically you removed it from the structure and structure is something that you cannot change per breakpoint it's not the designer layout it is the way your elements are actually being contained in one another so in this example you can see that i've moved that shop now button from being the child of the left container and now it is the child of the right container and when i do that it's actually going to be the same for all the different break points because you know this relationship is really important to how things resize because they affect each other many times when you make things in percentage that they are in percentage of the parent so this is actually something that can get a bit complicated and you will experience it throughout the workshop and it can create a lot of frustration if you are not aware of what can be changed and what cannot um you know you don't want to get into a situation where you're designing the whole desktop and making it just perfect and then moving into mobile and making a bunch of different changes in the structure just to go back to desktop and find out everything has moved around so kind of think of this complexity as well when you're restructuring your design the last example here about overriding is that it might have sounded till now like there isn't much you can override but actually you can go really far with overrides because you can change your whole layout and you can change all of the design properties so this is an example where on desktop my image is sitting on the right side of the text and the button and i used here on this sandy color um this really slick outline of a button but when we moved to mobile i wanted my image to become the background now you can see it's really hard to see the outline of the button so this is the perfect case for using overrides i would probably change the color to a white or something that would stand out and this will only apply on this on the break point that i'm doing this on the third third tip is all about walking through the break point so you might you know because it's one site it doesn't mean that each breakpoint is gonna be the same um when you think of desktop and mobile you know there's a very different types of best practices and optimizations you should be doing okay so for example on desktop especially today when you have like this huge imacs and whatever you're dealing with huge screens and you want to make sure that it's easy to consume a lot of content but also that the experience and moving the um you know the pointer between different like steps if it's a wizard whatever it is are it's super comfortable for a big desktop and when you think about mobile you want to make sure that you know it's comfortable to tap buttons with your fingers so you want to think of this size of your buttons on mobile or on tablet okay um and you know there's this kind of uh ongoing um conflict um if you should be starting on mobile and move to slowly to desktop or if you should do the opposite start from desktop and go into your mobile design i'm a fan of starting on desktop just because it's for me at least it's much easier to kind of um get everything out there and make like the most complicated uh you know the most complicated version of my site on desktop and then move on to mobile and start hiding elements as much as possible i kind of like to play this game of you know like marie can do style of does this bring me joy do i need this to kind of pass on the my message across on mobile and after all the work we have done i think the most important tip here is to test your site you know as we designers take a bigger role and more responsibility and ownership of the process using all these no code tools no code means that we are the ones who are debugging so i really suggest that you think about how you know the site at the end represents you and your professionalism so you want to make sure it is exactly how you intended it to be and i um i encounter on a daily basis and i'm sure all of you all these tiny little mistakes that you think you know that was so easy to avoid i i off the bat i thought of like three different ones that i keep seeing all the time one of course is that links that that are not working sometimes on mobile you know it doesn't reach the same url and stuff like that um another one that happens a lot is when you enter an e-commerce site maybe this has happened to you before but there's always a pop-up that suggests you to sign up to get a discount there's like numerous times where the close button was just like off my screen and i couldn't get out of the situation and i couldn't shop the site and um and the last one i thought of that i've al also seen a lot is when you are on an e-commerce site and you want to get to the footer to see like the return policy you you can't get there because the gallery is an endless scroll so you just keep scrolling and scrolling gets you in a pretty funny situation so i really recommend testing your site and not just not just that things are working but also that it looks great on as many screen sizes as you can get your hands on so just like reach out to your surroundings your colleagues to your um to your family wherever you you know friends wherever you can get a device so those were the four things and just to summarize so we talked about deconstructing your site it's going to be a really great payback at the end of the day the second one is all about controlling changes so you really want to learn and know what can be changed and what cannot so you are you know so everything goes by smoothly the third one is all about thinking about the medium you know really walk through it think about the experience there and the last one is all about testing don't forget to test your site i think you know that is the most important thing at the end um and that's it for me i hope this was useful um and helpful and we're going to move on to ida so let's let's start the webinar and i can't wait to see what you guys do thank you thank you so so much kelly that was absolutely amazing to hear from you and hear all your really experienced insights into responsive web design gallery is going to be back a bit later on to answer all of your questions you have we're going to be taking questions from youtube as well so if you have any questions for gray the head of product editor x be sure to put them in the question and answer tab and be sure to ask them on youtube now we're going to have a live demo on how to create responsive design from editor x web developer and responsive design expert ido hershevitz so um take it away edo hello to everyone joining us today my name is ido i'm a web developer and technical designer for editor x and thank you golly for that wonderful presentation so guys we're going to start the practical part now we're going to take the concepts that golly talked about and explore them in the short time that we have and by the end of this talk you will be able to implement the methods that um that will let you take a design concept and turn it into a real-life responsive website on editor x and immediately following this demo you're going to take it even a step further and build your own responsive design all right so let me just share my screen here all right so i thought of a way to demonstrate building a responsive design and immediately this project came to mind so this is a real world assignment that my team was given so this this actually demonstrates a real situation that we needed to tackle so we had to build this site which revolved around a video documentary series about the new wave of digital designers so this is the side um it has a header it has this hero with big typography section right after that we have this cool full-width video it takes the full width and full height of the screen it really gives like a really cool cinematic effect after that we're introducing uh the designers that are featured featured in the documentary series then there's a cta some more articles another cta and a footer all right so what are we going to cover today we're going to build firstly we're going to build a responsive fluid desktop design we're going to be building this introduction of the designer section next thing that we're going to do we're going to implement some hover interactions as you can see as i hover over this portfolio bit it makes this cool interaction here and after that we're going to redesign our site for tablet and mobile break points all right so this is the section that uh that we're going to build uh it has the designer's name it has a description and also a quote obviously the video itself which is the main part and uh the portfolio link um so when building from uh from a design we need to choose the best layouting tool for that particular design so editor x has a variety of tools that we can use we have css grid layouter which is based on flexbox technology golly talked about about these tools stack which is a great tool for vertical relationships between elements now as you can see um we have here three designers and let's just call these items all right so uh you see that the design and the layout for each item here is basically the same so we're going to use a tool called the repeater and it's going to let us use the same design and layout for each designer so in fact we're only going to need to design the item once and it will repeat two more times just with different content now of course the objective here is to create a responsive design so right off the bat you can see that if i just change my screen size here you see that everything is scaling perfectly proportional the images and texts are growing and shrinking in a proportional way and that's because we're using responsive size units we're not using fixed uh pixel uh scale we we're using percentage and responsive units we're also using text scaling which uh scales between the size of the fonts i'll talk about that in a bit what we can also see here is that when we get to a certain screen with we have a change in layout and design so we implement uh this behavior using breakpoints which let us define ranges of screen widths to work in all right i think i think it's time we'll dive into editor x i'm going to do a quick overview of the platform and then we can dive into the build all right so this is editor x this is the canvas that we're going to be working on let me just go to the page that i want yes um so we have these handles here that let us resize our canvas and let us go between all the widths that we want to check and all the break points that we want to design on and we can also use these breakpoint navigation buttons here in the top of the screen so i can go from desktop to tablet to mobile these can also be customizable and you can also add uh custom breakpoints up to six breakpoints here all right so i think first thing that we're uh i'm gonna show you is the add panel here so here you can add elements to your canvas uh the quick add panel has like the most common uh elements that we would that we would add but there's also an abundance of elements here in categories and you can check that out in your own time because it's really a lot and next up is the layers panel so the layers panel is basically the structure of our site so we see that our site here is our page is uh divided into section and each section has its own elements inside it it can be a container and a container can have elements inside it as well so this is basically uh the hierarchy of the site and here on the far right side we have the inspector panel let me just select an element here so basically the inspector is the heart of editor x it lets us choose an element and it will be represented here in the inspector panel and from here you can uh tweak all the sizing options uh positioning uh and of course you can do everything with drag and drop and move things around but if you want to really uh uh some things then you can do it uh through here uh there's also a design panel here uh lets you set background borders shadows uh things like that and if we're uh using a container then you have also the hover interactions uh panel and the inspector as well okay so let's start by adding a section so i'm going to go to this section here and you see these plus buttons that that appear here and i'll just click one of these buttons and add a blank section all right so you see it added a section here i'm just going to change the background color here real quick just add a color here all right so i think this is a as a beginning we'll we'll quickly explain uh sizing and docking in editor x so i'm just going to go to my add panel here and i'm going to add from my media i'm going to add an image here all right i'll just resize it a bit and when i add an element to a section then basically now this element is the child of the section and the section is its parent and if i look in the layers panel i can also see that you see the section here and there's an image here if i go to my inspector panel and into the layout tab then we see some properties here and we see that the width now is almost at 20 so it's 20 percent what that means is it's 20 from the width of its parent so if it's parent grows or shrinks in size then the image the child inside will also grow and shrinking i'll just show you that as i resize my screen you're seeing that the image is also resizing this is because it's relating to its direct parent which is the section so just as an example i want to quickly add a container into this section as well all right so now of course the container itself is also a direct child of the section but let's see what will happen if i drag this image in into the container so as i'm dragging the image into the container you see that it hasn't visually changed in size but if you look at the width here you'll see that it's now 58 and that's because it's not relating to the section anymore it's relating to the container itself and it takes up 58 of its width all right so another thing about sizing that i wanted to show here so basically you can also use a fixed size you don't have to use a responsive size if you don't want to this is flexible so i'm gonna just click fixed here and immediately you see that we have a width now of 460 pixels and a height of 270 pixels and you can guess now that if i resize my screen well actually the image is going to stay the same it's not going to change in size because it's in a fixed size all right so many people ask me well why why why would you want uh to use fixed sizes if you're building responsive uh responsive design well sometimes you would want an element to be in a fixed size and maybe have other elements be responsive around them another use case for this which you can also do is mix fluid uh units with fixed units so for example i can change the width of this image just by pushing the pick blue pixel uh button here and then i'm going to change now this to percentage and notice the width is now 30.5 percent but the height is still in pixels so what's going to happen when i resize the height is going to stay the same but the width is changing all right so now that we've we've understood uh sizing let's talk a bit about positioning we can take this image and just drag it around the section and when i drag it around you see these blue dotted lines that appear this is called auto docking and it happens as i move elements across the screen so what is docking anyway so we can see here that um this element this image is now docked to the bottom and to the left side of the section and docking is basically the relationship in position between a child element and its parent so we see that now it's docked 6.3 percent to the left and 52 pixels to the right to the bottom sorry so no matter how i change my screen size no matter what happens no matter even if i make my section taller it's still going to keep the same relationship in terms of position uh another thing that we can do with docking let me just make this a bit bigger and i'm going to dock this image now to both sides and let's say to the bottom all right and now we can define that the relationship between the image from both sides will be fixed let's say that i put in 100 pixels from the left and a hundred pixels on the right and let's just leave it at 47 pixels from the bottom so now when i resize you'll see that because it's docked 100 pixels from the left and right this will always keep the same the same behavior actually like you can imagine these as like these really steel bars that that can change uh of course you can set this uh in in percentages as well just convert this to percentage for a second so if i convert a 100 pixels in this particular width that i'm in it's going to be 6.6 it's still going to keep a relationship but now this relationship is in percentage all right so now that we've understood um positioning and sizing i think that we can start building all right so uh i have this section here and as i said we're going to use a tool called the repeater so let's just go to the add panel and add this repeater in and by default when i add it from the add panel it gives me a repeater with three repeater items and i can also manage these items and add more and as you can see the layout here is sort of like a card layout that's by default but the cool thing about the repeater is that i can change layouts between breakpoints so let's say um that i go now to tablet breakpoint and i see here that my repeater is still in a card layout but then i can go and change that and i can change this repeater into a list layout now so now on tablet it's going to be a list of cards one under the other as uh gali also mentioned uh in editor x we have uh the cascading rule and what the cascading rule means is that if i do a change uh in a certain breakpoint for example here in tablet then if it's a designer layout change it won't affect the break point above it will affect the current break point and the breakpoint below so if i go to mobile now you'll see that we still have this list here because this cascaded down from tablet and if i go back to desktop you'll see that it has not changed it's still here in in cards view and i can even go to mobile here and let's say that in mobile i want to change the layout again and i want uh this time i want the layout to be a slider and let me just add some margins here so we can see better and now if i preview this you'll see that in mobile i have this slider so now the user can potentially swipe swipe with his uh fingers to to change to go between the items all right let's go back to editing the site and let's go to desktop i'll just remove this repeater and add in another one because i don't want the changes that we made so i'm going to add in a repeater and actually we're going to use a repeater that has a list layout throughout throughout all the breakpoints so i'm going to change this to list and another thing that i'm gonna do we have this button here which is stretch i'm gonna hit it and basically what stretch does remember when we talked about docking before so when i when i use stretch it docks the elements to all sides of its parents at zero pixels so now the repeater is stretched across the section i'm going to remove uh uh the vertical margins that i have here and now i'm going to go to the inspector panel i selected one of the items in my repeater i'm going to go to the inspector and i'm going to remove the background because i don't need a background for it and immediately when i change it in one repeater item you'll see the change applied in the two others as well because it's a repeater and it's a repeating uh layout and design all right next thing i'm going to do is i'm going to apply a layouting tool to this item and i'm going to use a grid so i'm selected on the item and i choose apply grid and editor x offers some templates but uh i'm going to actually use a custom grid here and this grid is going to be two columns and three rows and of course because i added a grid here uh in the first item then you'll see the grid in the second and third item as well uh next thing i'm going to do i'm going to add some padding uh to to my item so i want some space between the edge of the item and the content so i'm going to give it 2.5 percent from the left 6 from the top and 2.5 sorry 4.5 from the right i want a bigger padding here all right then you can see the padding represented uh with this uh green overlay so i just want to get into the grid for a minute so i'm going to adjust grid and then edit grid and we see here that we have three rows and two columns so i can just edit um the height of these rows and if i go in there i see for now that it's gotten a default value and it says minimum 117 pixels and maximum max content so basically what that means if there is no content inside my rows if there's nothing in in here then it will keep a minimum of 117 pixels if this was just max content and there was no content inside the row would simply collapse and we don't want that so we're giving it a minimum a minimum here all right and as for the columns you see that we have one fr and one fr so what fr means is basically um we have these columns and they're each taking one fraction of the width of this certain container and i actually want to change this because i want this column to be a bit wider and i'm going to this column and i'm going to say that it's going to be 1.2 fr all right and now that we fixed our grid we can start adding elements i'm going to add a title here i'm going to edit it change the color to white i'm going to add a font here of my choice i'm i'm gonna bring in uh the content that needs to be here just paste that in all right and actually i want to make this in caps i'm also going to set a font size so let's just start with a font size of 70 pixels and i'm going to go to the inspector panel and i'm going to dock just a quick explanation uh about the grid here uh something that i i did not mention so this grid here is is not a grid in the way that the designers typically use grid so so like in some design software you would use a grid to place elements or for for some snapping uh of elements to the grid or as guides and in editor x the grid is a layouting tool and what it does it helps us divide a section or container into cells so now we have these cells here and in that way the elements that inhabit the cell now relate to the cell uh regarding size and position remember we talked about that before and but before it was to their parent container and now uh the the size and positioning is regarding to the cell so in that way we're taking a big container or section and dividing it to smaller layout um like layout cells all right so now uh this this text lives in this cell here it inhabits this cell and if i dock it i'm going to dock it to both sides i'm going to give it a 0 from the left 0 from the top and i'm going to give it um 10 percent from the right and i'm also going to give it a four percent margin uh from the bottom so when you give margin from the bottom uh without docking or margin without docking from any side it means that you're actually adding it's like if you're as if you're adding in an invisible uh like block here to this content it's creating another um content here that's pushing and you'll see that you see that as we go along all right so i think we're good here so let's see the behavior of this uh as i resize my canvas you'll see that the text here is not changing in size it's actually just um reaching a point where it's breaking into two lines uh and that's because uh it it's not wide enough uh to contain uh these two words at this certain uh font size that's cool that's a uh a real like cool responsive behavior it's all right but it's not what i'm going for what i'm gonna go for here is i want this this text to change uh to in scale so what i'm going to do first of all i want to change the line height here and i'm going to change that to one yeah that's better and then i'm going to go to the text and i'm going to click this scale text button here all right so now i can set two values for my font sizes and that way the text uh will vary between these two sizes i'm gonna do 10 to 100 all right so let's resize our screen again and see the effect of that and now you can see that my text is scaling down and it's scaling down and down and down and down until it reaches um mobile and in mobile it's it looks really small right but don't worry what we're gonna do is we we're gonna override uh this tech scale setting when we get to tablet and mobile so uh usually when i'm working and this is is like a good practice um i can see the breakpoints here i can see that like desktop is a thousand one pixels and up so i'm going to check how this looks at a thousand and one pixels like which is the limit of my breakpoint if i just manually uh entered 1001 here in this window and i can see that uh i'm happy with how it looks at a thousand and one and i can keep on editing all right next up we're going to add some lines here some decorative lines so let's just add a line here and again we're going to use docking we're going to dock it to both sides we're going to give it 0 from the left 0 from the top and 10 from the right that's the relationship that i want here i'm also going to change the line color to white and i'm going to change the line width um to 1. all right and i need another one of these lines so i'm just going to duplicate it using a command d and i'm going to bring it here and again i'm going to dock it on both sides and give it 10 um from the right nice now we can add our paragraph here and again i'm going to edit the text change it to the color that i want i'm going to give it a font that i want to use see where that is yes and also i'm going to make it italic i'll just copy in on the text that needs to be here right i'm also going to give it a text scale and this text scale is going to be 5 2 38 yes and again i'm going to dock it i can use uh just zero here i'm gonna give it four percent from the top four percent from the bottom and i'm gonna give it um ten percent to the right also i'm going to change the line height here as well make it more like condensed 1.3 is good all right so now we have this paragraph here and again because of the text scale we see that everything is still behaving proportionally proportionately and responsively what i'm going to do is i'm going to duplicate this paragraph again by pressing ctrl d and now we see that we have these two paragraphs on top of each other and they're both inhabiting the same grid cell i can drag and take and drag this paragraph into this cell but there's also another way that i can use we have uh in the inspector panel this grid area here so we can see now that um this paragraph is from column one to two and from row to the three and just a quick explanation when we say one to two we're referring to the line here that's on top and this is line two here so if this text lives here it lives in row one to two so i'm just going to move this paragraph to row three to four and again this time i'm going to dock it to the top and i'm going to give it zero margins from the top i'm going to give it eight eight percent uh from the top excuse me and i'm going to give it 28 margin from the bottom so immediately when i give it 28 remember when i told you that if i give a margin like without a docking it's just like adding uh content here it's like invisible uh content pushing the row height and because my row heights are set to minimum 170 pixels and maximum max content and now this content is pushing the row and i'm also going to set it here to 10 nice so now we have our text oh just we need to change on this text we need to change to 5 to 28 it needs to be smaller i need some different color here and of course there's some different text in here as well all right and now we can add in uh our video of course so i'm gonna go on to my add panel i'm gonna go to media and i'm gonna add here a single video player i'm just gonna drag it in and you see that as i placed it on top of these two cells it's now occupying row one to three all right so i'm just going to dock it to the top in the left and i'm going to give it a width of 100 and of course i'm going to change the video to the relevant video that i want to use add that to the page there you go all right i think the last thing here that we need to do uh we're going to cover now the part of the portfolio link where we're going to do a hover interaction all right so in order to create a hover interaction i first need to add a container so i'm going to go to the quick add add a container here now the reason that i need a container is that the way hover interactions are working editor x is that you apply the hover interaction to the container and then you do the changes on the elements that are child elements of that container so it's easier to see it than explain it i'm just going to change the width of this container to 45 percent and i'm going to apply a grid here of 2x2 that's nice um and now i'm going to add another text here i'll just make this docked to the top and left and i'm going to make it a hundred percent and then i'm going to change the color here again change the font to the font that i want to use and i'm going to change the text here to portfolio and i'm going to give it a scale text as well so scale text is going to be 5 to 50 here like that and what i'm going to do now is uh another trick that i'm going to show you with the grid i'm going to adjust the grid here i'm going to edit grid and then i'm going to turn this row i'm going to make it max content it now has a minimum of 100 pixels and a maximum of max content i want it to be max content uh and i'm also gonna change the column uh to max content and this is because uh the text itself is is growing and shrinking as we change the screen with so what i want to do i want the other elements in the grid to respond to that change so if i have an arrow which i will have here in a minute then if it needs to keep uh 10 pixels it will always be dependent on this max content column so let's just add that arrow here go to media where are you arrow there it is let's add it to the page there's my arrow and then i'm going to add it to this grid cell here and for the first time i'm going to use the align panel here so basically i can align this this arrow to the center and it's gonna be docked 10 pixels from the left and i want the width to be a little less let's say 24. all right next thing i'm going to do is i'm going to add an image in here add the image and i'm gonna make it smaller and i actually want this image uh to live here in this in these two cells so i'm gonna put it here again i'm gonna align to the top and to the left and you see now that it's inhabiting column one to three and row two to three so that's perfect for me i'm going to give it a zero margin from the left so now it's it's docked to the left of these two cells and here in the top uh docking i'm gonna do something different now so i'm gonna give a negative value here i'm gonna say minus eight percent and what that will do once i press press enter is it will make the element protrude out of the cell that's because i'm giving it a negative uh value cool and i'm going to change uh the width here to 90 percent and now we have these two uh elements uh these three elements actually overlapping each other and what i'm gonna do is just hit these three dots in the in the floating panel and i can just send this image to the back so i'm going to arrange and send to back and now uh the portfolio and the arrow are above the image all right so now that we have our uh elements ready here let's just do a quick check that everything is still behaving uh responsibly all right so uh what i see here is that we have like um a maximum uh content for this now actually what i need to do is dock this to the top all right i need to dock the whole container to the top and the left i'm gonna give it zero from the left and i'm gonna give it uh three percent from the top so we'll have some space here right let's check a thousand and one again all right we're almost there i'm just going to remove this minimum height here from the container and also i'm going to adjust this grid and i'm also going to make this row max content because now it's reaching 140 pixels and it's stuck there i don't want that 140 pixels i want the content inside the cell to determine the height of the row it's very important to me all right cool so now we're good in terms of layout so let's just go back uh and now we can apply the interaction here so i'm going to go to my inspector panel with my container with my parent container selected and then i'm going to go to interactions uh add a hover interaction and then a custom interaction here and here we're entering uh interaction mode and basically we can edit properties here and we can also use two states here one is the hover state that means how things are going to behave when i am hovered over this container and we're going to first edit the initial state that means we're setting uh like we're setting it like in sort of a reverse way we're first setting what happens when you're not hovered on the container so i'm going to set i'm going to select my image here i'm going to set the opacity here to 0 and then i'm going to select my arrow and i'm going to rotate it minus 90 degrees now you see it's rotated now when i come back uh to hover state you'll see that everything is as it was because i didn't change anything in hover state i want things to transition between initial and hover state another thing but i am going to do one change here i'm going to select the image itself and i want to give it a slight tilt like of minus 4 degrees so it will give a slight turn as it appears i can also edit the timing here uh of each animation i'm not going to touch that right now uh and you can also edit the time of each animation and also the behavior of the animations they're easing in and easing out of the animations all right so we're done here and now we can preview this uh i left the border of this container on purpose just to show you uh what happens when i go into the container so now as i preview the site you'll see that as i enter the container with my mouse we have this hover interaction here going how cool is that all right so i think that now we can definitely take this border off of this container go to the border in the design here change the width here to zero and let me just take a quick drink of water alright so now we can go to tablet oh before we go to tablet i'm sorry before we go to tablet you can see that our repeater items here they're already um they're laid out and designed but the content uh is different so just for the sake of time i'm not gonna insert the content here basically what i'm doing is changing the content for each element we're going to skip that and go to a version of this page where we already have the content inserted so i'm going to go here to after content and here's the content already on the page uh yeah we also added um sorry we also added this line here that uh divides between uh between the items all right but basically now if we go to tablet or we can see that the design is the same as we designed it in desktop so it cascaded down and now it's the same design but you see for yourself that it's not looking uh very good because everything is a little bit crowded nothing gets the real focus here so let's see what we can do to change that so i'm gonna go to the item and i'm gonna go to adjust grid and now editor x is offering me offering me some layouts here so it offers a two by three instead of a three by two layout uh uh um a six column layout which i don't know if that makes sense here and then i have this six row uh layout that i think i'm actually going to use so let's just click this and what happened here all right so what happened is uh it's made a six row red and it put the elements uh into their corresponding cells uh by order but this is not actually the order that i want because what editor x does it takes it from the top to the bottom and then to the left from left to right and it it arranges it like that but we can easily and quickly uh change the arrangement of these items uh inside the cells so i'm going to use my trusty grid area property here so let's for example let's choose this text here and we see now that it's from row one to two i'm going to change it from row two to three all right and we know that we want the video in the first row so i'm going to change that to row 1 2 2 and then we're going to take this paragraph here and change it to row 4 to 5 take this paragraph change it from row three to four and i'm gonna take this container i'm gonna send it one row above to row five to six like this and what else do we need to do here oh yeah we need to reposition these lines as well so we'll take the line that divides between the items and we'll put it in row um five two six as well and and and all right this line here as well needs to go uh one line down so it's going to go to roof oh sorry four to five and this line here is going to go um to row three to four all right so now everything is in the correct order that i want it to be what i'm going to do now first of all i'm going to change the padding here of this item and we set it at 2.56 and 4.5 and in tablet i want it to be 5.5 from on each side and we'll make it eight percent from the top all right so what we can do now um i'm going to adjust the grid of this item and as i said before i want uh the height of my rows in the same way as before i want the height of my rows to be determined by the content that's inside of them so what i'm going to do here so by default when i change the grid it gave it a minimum uh height of 200 pixels i'm going to change all my rows here to be max content and let's just change this as well changing this to max content and also these two rows i change to max content and we have an extra row here we can just delete it or we can just set that to max content as well and because there's no co content in it it will just collapse as you'll see in a second so i'm changing this one to max content as well and now this row isn't there all right so we're done with editing the grid uh now we can do overrides so golly talked about doing overrides to our design so we're going to do overrides to our elements so first of all we're going to go to our name text here and we're going to change it and in tablet i actually don't need it to be a scale text so i'm going to change it to a fixed size of 100 and i'm going to give it 35 pixels from the top and 35 pixels from the bottom i'm going to go to paragraph here and also give it 35 pixels and 35 pixels and i'm going to change the text size to 24. all right then i'm going to go to this paragraph and as you can see uh when we set this the margins for this paragraph before we set it at eight percent and 28 from the bottom and that's why again that's the way it's pushing uh this row and making it so high so i can just change that to 35 pixels and 35 pixels here let's just make it 10 from the right and also change the size here and it's going to be 16 pixels and i'm also going to change the font uh size uh here of this text i'm going to make it 40 and i'm going to make this arrow also at a fixed size of um let's say 30 by 30. like this i also uh want to make this whole container a bit wider in a tablet so i'm going to change the width of the container to 60 and i'm also going to give it a bottom margin because i wanted to push this this row on a bit so we'll have some space between the bottom uh and and this container i'm going to give it 70 pixels here um another thing that i want to change and that will apply again again if we go back to desktop now you'll see that nothing has changed in the way we designed desktop we didn't do any any changes to to desktop so another thing that i want to change here so we have interactions uh going on on desktop but i actually don't want to use interactions uh in tablet and mobile i just want the content to appear without me having to hover or tap it so i'm gonna go and uh to the interaction and edit that that thing on tablet and that will cascade down to mobile as well so i'm going to go to the initial and choose the image i'm going to bring it back to 100 percent opacity i'm actually gonna change it as well to minus four also in the initial because i want it to be tilted all the time and i'll go to my arrow as well and change it back to zero degrees and i think that's that's okay let's just preview this so now you can see that in in tablet it's the interaction is not happening and that's what i want and in desktop it still is happening as i hover over this container all right uh so i think let's just check uh i like to check as i said before in in desktop i like to check the edges of my break point so the the most uh uh the smallest point in in tablet is 751 and we see that that my design looks uh exactly as i want it to be at 751 viewport with and the highest point is 1000 here and it also looks good at 1 000. so i think we're good uh for tablet and i think we've we're almost reaching the end but we now have to uh design for mobile so let's just jump straight into the mobile and immediately you see that like maybe something's wrong here so why is this text protruding out well the reason is of course because we set uh the text to be a hundred pixels it's a hundred pixels here as well so because of the cascading rule so 100 pixels doesn't fit uh in in this uh 360 pixel width so i'm just going to change that i'm going to override that again here i'm going to change the text to 40 and i'm also going to change the margins here to 15 pixels and 15 pixels from the top and i'm going to do that to this text as well i'm going to change to 230 20 like so change the margins here as well and also to this text yeah well this actually needs to be it needs to be 20 here i just noticed that and it needs to be 16 on mobile all right now let's take care of this text as well i'm going to change the size here to be 28 and also change this arrow to be maybe 23 by 23 something like this and i want uh when i'm in 360 pixels i think i want this container to take the whole width of my my item so i'm going to change the width here to be 100 and now it's taking the container is taking the whole width uh i can change the margin here because i think it's it's a bit too big for mobile i'll change that to 50 pixels so now i'm looking at it at 360 pixel width and everything looks fine but as i said um i like to check the edges of my breakpoints so i'm going to go now to the highest point in mobile let's see what that is it's 750 pixels so i'm going to manually type in 750 here all right so i see immediately that something is is not not the way i like it because i didn't mean for i set this container to be a hundred percent that's right and it's and by it being 100 it's affecting everything inside so if the image is 90 from the container then it's getting too big here and it's almost the size of the video and let's see what we can do to fix that so for example uh let's go back to 360. i know what let's stay here at 750. so we'll see that if i select this container we see that it has a width of 100 percent but i can also set something that's called a max width and this is like a really cool way uh for us to actually mix between the fluid and the non-fluid behaviors because we can decide that this is going to be a hundred percent wide but i can also limit this with some fixed size so i'm going to say that the maximum width for this container is 400 pixels so when i press it you'll see that it shrunk to 400 pixels what that means is while it's at 360 width it can be a hundred percent of my my viewport width because my viewport width is small but as i grow my viewport with i can just see that at a certain point when it reaches 400 pixels it stops growing and now it makes everything proportional i mean 750 and it looks alright to me all right so guys i think i think that we're we're good here and that we're done uh with this with this workshop here so i just want to overview uh what we did so first thing that we did is we built a responsive design for the desktop breakpoint uh using a repeater and using a grid for the item itself and also we use the grid in this in this container here then we added some hover interactions to bring our design to life and then we worked on tablet and mobile breakpoints changing the layout and design and overriding and uh giving different behaviors to different uh viewports so okay so now it's time for the fun part where you guys get to build your own responsive design so let's just go over uh what we're going to build here um so this is the brief uh the goal here is to design uh one section uh containing an image a title a paragraph and a button across uh three break points uh it has to be of course uh fluid within the breakpoint itself like like we showed you and you can choose a layouting tool and and design your site uh first on desktop and then on tablet and mobile um and again make sure it's adaptive inside the breakpoints and and not just do overrides between the breakpoints we will now share a template with some sample elements so you'll be starting off a template and you can exchange them with your own content or you can use use ours and we also have some uh some great editor ex experts here with us um to help you and you can use us and ask us questions and get live feedback and uh i think we have about uh an hour or even more for this uh for this exercise but before that uh some some of uh some of our editor ex experts they're gonna show you some examples of uh what they got the same assignment basically as you're getting so they're going to show uh how they designed uh this brief right thank you thank you very much it was it was really a pleasure and talking to you today thank you golly thank you dribble and good luck guys thank you so much edo that was absolutely awesome to see you working so um so like knowledgeably and quickly through editor x and showing everyone how to do responsive designs on there um so this is the chance that you guys get to create your own responsive website so i've linked in the chat a link to templates so you could use that template to create your websites um we've got about an hour to do this the next 15 minutes we're going to be bringing some editor x experts up onto stage and they're going to be showing you what they've created they have exactly the same similar brief as you so um you can get some inspiration from them and then we're going to open the lounges and they're going to be eight different lounges with different experts in them and so you could pop into each lounge ask people questions ask the people from editor x questions um get help on getting your website designed and then we'll regroup back here and we'd love to see some of your work we'd love to have some of you up onto stage to see what you've created over this next hour or so so make sure you use the experts to ask all the important questions and um get help with your designs and then we'll after this we'll also be doing the q a so make sure to keep putting your questions in the q a tab and upload other people's questions if you like the look of someone else's question as well so um now i'd love to introduce jonathan savvy and anastasia the three editor x experts and they're going to be giving examples of the websites that they've designed responsibly as well guys so take it away if um one of you would like to share your screen in the green room and then we'll share it with the with the audience sure i'll start perfect oh that is mine actually but i'll do it okay hey guys uh so uh i took uh this brief and what i did is i created sort of like a a nice uh designed high designed uh menu here a full screen menu uh so first things first you know i'm just gonna walk you guys through the process of what i did in order to achieve this design but let's take a look and see what it looks like uh responsively so as i resize the screen here we get to the tablet version you can see how stuff starts to move around resize and then we get to the mobile so uh we'll just kind of go over what i did here how did i build this uh so that way you guys maybe uh get some ideas for your brief uh so first things first is like gali said when we started is you need to deconstruct the design so uh just to understand what we have here in this design is we have a um we can see here from the layers panel actually can understand the the actual hierarchy and you know all the you know relationships between the elements you can see that we have the header and we also have a section uh so there's there's only like two sections technically we have the header in the section and the header itself is actually overlapping the section so this overlap effect uh is actually available if you have a fixed header you can cause another uh section to overlap to overlap another section uh so you can see here i well here on my screen it says pin but it's the same thing as fixed and we have a toggle here for overlapping the next section so now we have one section on top of another um and i did mention before that this particular menu is a full screen so it's like full height that's taking up the entire height of my screen um so just to click into this section we can look on the right hand side i have for the height i have it set to 100 vh uh so this means it's 100 of the view per height so it's going to be taking up the screen no matter what screen size i'm looking at this at it's always going to take up the entire screen so it gives me kind of this full screen navigation experience okay so now let's try to understand what's going on with this section um so in the section itself i added a grid um mainly just because i have two siblings here i have this sibling here with the menu and i also have the image here so i wanted to find a way to separate them and kind of organize them in a nice way so grid is a great way to do this and then you know you don't need some complex grid to do this all i did is just split it between you know 50 50. um and this image in particular inside of the cell is docked absolutely to the center of the grid cell remember either mentioned that the um the actual uh relationship between the um the component that's inside the grid is actually related to the cell it's in not to the section in this case so it's a in the center of this of the of the actual grid cell uh and then we have the same thing for for this now this um it's actually a repeater with two items uh it looks like it's four but it's actually two items uh that we have here uh we have one item over here and another item over here let me just click on it from the layers panel it's easier uh so we have two items they have you can see that these two items have the same design and if i was to just you know move around just a bit you will see that the other one will also move around i'm just going to undo the change just to keep the design but you can see that basically we have a a design that is that is repeated across two items and we actually have a grid inside of this item that's doing the same thing as we have in this this section that we're just splitting it in half uh so it's very simple to do this uh then we have the actual this is where it gets a little bit more complex with the grid settings um where i wanted to have make sure that i have uh you know the right uh spacing and padding uh between the uh the text and the number and you know i wanted to make sure that i'm able to keep those gaps between them so i cr i added uh you know i created a a grid um it's actually you know if you look at it it's stuff that you guys were just taught we're using max content here to keep the you know the text the same size as the cell and then we have fr units in order to kind of um take up the remaining space uh and then when i resize the screen you can see that the text also resizes as well and this is just you know the tech scale that edo mentioned before the same thing i'm just resizing the screen uh pretty straightforward uh moving on here we we're moving to the tablet in the tablet you can see stuff kind of moved around this is just the overrides that we mentioned earlier you can override the design properties of the of the component including the size the position uh and also the grid layout as well you can see how now we don't have on the section anymore the 50 50. um i created a different grid just because i want to keep the image in a certain position on the bottom right i didn't want it to cover the text too much so i kept it on the bottom right that way just using the grid uh the grid uh container uh it's a really great way to just you know separate the the areas so that way you can keep everything in its place and then let's just go over to the mobile and the mobile it's a it's a more simplified design obviously because there's less real estate um and basically all i did is i just docked the repeater to the bottom and the image is on the top and it keeps its nice distance this way so this is my design um i hope to see you guys designs later i'm very excited for it amazing all right now um let's jump to my design right here okay so uh it's basically a tattoo artist website um i've started by organizing actually in the side styles uh my typography and colors that i want to use in this website i like to keep everything tidy i could use it on the flow but i love to keep everything uh arranged here on the side as well so i uploaded my font uh my colors right here um and connected all my elements that i want to be colored to these colors so if i go ahead and change this color suddenly i want this to be i don't know uh this is a greenish color over here i can apply and everything changes as well whatever i connect it so like this over here the logo the typography okay with the simple click of a button let's go back to normal red um now what i have here is basically a header which is in fixed position so if if you see i'm scrolling it stays on the top i have this section over here with a grid of three columns uh the left column is 100 pixels so it's a fixed size and we have these two columns split in uh in two with the stack on the left and the imagery on the right so they're they're going to be fluid when i resize my screen because they're set to fr units okay so that's a fraction of the width of my section so if we go ahead and resize the screen we see that uh they do scale down okay like this but this uh this stays 100 pixels on the left right here and on the bottom i have this footer with just a simple text uh now this logo over here on the top is docked to the left with 100 pixels as well which is the same size as this container on the right uh and this text in the footer is docked to the left and as well with 100 pixels okay so everything is tidy everything is aligned um and looks good on desktop if we go ahead and switch to tablet we see that there's a little bit of a change here oops let me just change this sorry i'm doing this on the flow to max content there we go i want the content to determine uh the size of this grid row over here so my stack actually has uh margins 100 pixels on top and bottom so this is what basically stretches my sections height the section side is set to auto that's how the stack is determinating determining sorry the the height of it and i did use some text scale over here so i set the text to scale as we scale down with our screen size as well from 25 to 80. we switched the grid the grid row to be uh rows only and not columns and everything is arranged nicely over here on tablet so we have the stack on top we have the image we switched this container to be horizontal and this uh this nice art right here as well and change the the color of the footer okay just change the opacity of the color actually from being uh this pink color i want it to be white here and if we go ahead on mobile we see that i chose to not display the logo itself we can see that in the layers panel so i have this vector art hidden if i switch this back on we can see it i chose not to display it i chose only to use this uh this text and change the the size of this header as well so it's a bit smaller than we have on desktop it's 100 pixels because it's mobile and everything is a little uh crowded in here change the text size as well to a smaller size right here on mobile kept the stack of course and uh changed the width to be fluid to eighty percent uh everything else has the same structure we still kept the rows right here i just changed a little bit the font sizes um yeah and now we see that it looks good on all screen sizes okay we can scale down let's go on tablet mobile oh and another thing you can also change the alignment don't forget of the text okay you cannot change the content but you can change the alignment of the text so on mobile i chose to align this to the to the center and that's it for me and the last example of how far you can take your brief is this one [Music] so here you can see that i wanted to keep it a pretty simple and i don't have a lot of elements in my design but it's always always nice to add some eye-catching elements so here you we have this nice interaction that's saying oh hey and this is how i achieved it i have a pretty simple a grid here as you can see this dotted line is a grid a one by two one column and two rows and i spread it my image to both of the rows you can see it here in grid area row one two three so now the image is taking all a all the place in my artboard this element is one to two it means that it takes only half of my artboard and the second part of my artboard a two to three a is a container and actually the container is something that allows me to develop that allows me to apply him to play in interactions that you can find here in cut in custom interactions and what i did is actually i am inserted two text books one of them is hey and the second one is the name of the designer and i what i did is in initial state i set it the second text of hey to opacity of zero you can see it right here um and actually in preview you can see that here we have this text of some milo a on 100 opacity and like this you have oh hey in 100 capacity and also the site is fully responsive you can see it here we are going to tab to tablet and what i did here is actually i wanted to change the layout only of the half of my artboard so what i did i have a container here so i apply the grid to this container it means that the the grid is appears now on mobile as well you can see it here but not on desktop because of our cascading rule it means that each change that you do verse on the lowest breakpoint but not on the highest breakpoint so actually um the good way to to do less work is say to make a tablet and mobile layouts a the same is what you can do is to a to apply the same layout but just adjust the sizes of your text or your images anywhere you have on your aim on your artboard on the um on the mobile so it keeps simple and then it takes much less effort from you so that's that's it and then good luck with your webby development and the we are we will be happy to see what you can do with a with our editor in them sounds really how it sounds savvy help me thank you so so much team that was amazing to see your different designs and what you created on editor x um so everyone in the audience these guys are going to be hopping over to the lounges the lounges are now open so if you wanted to chat to them or ask any questions or show them the designs that you have created to get some feedback um then definitely go to the lounges there's eight different rooms and you get a chance to put your camera on put your microphone on and design alongside these experts so um head over to the lounges now we're going to be doing um this sort of personal creation work web design creation work for the next 30 minutes so um make sure you utilize the lounges in the next 30 minutes edo and gallery will be here answering your questions so if you didn't want to um jump into the lounges then stay here and get some of your questions answered we'll meet back here um in half an hour and then we'll go through some of your designs that you've created we'd love to see some of you up on stage here and sharing your screen and sharing your designs um i put a link in the youtube channel but for all those watching on youtube live now it'll be great if you could come over to this link um to see us in the interactive workshop we'd love to have you so um yeah come on over you don't have to watch on youtube anymore come into this workshop link um thank you so much i think we will be putting the brief back up here for the next couple of minutes just so you know what the brief is um but then after that we will get galley and edo on stage to do some q a and be sure to enter the lounges with the experts to ask any questions you have all right hi again everybody um so i see that uh we have some questions here um [Music] um all right first thing is uh my first question is by david wasn't that why use a repeater and not just copy the original design and pass it into the other grid areas well when you're using a repeater so let's say that you've uh you've designed uh using a repeater and a repeater is is is for that purpose uh you will want to use it uh if you want a design that's going to change across all all the repeater items so let's say that you created these these repeater items and i don't know tomorrow you need to redesign uh redesign your website so it doesn't make sense to go and change it uh for each for each item so you can just change uh the designer layout for one item and that will apply uh for other uh for the other items as well another thing that i didn't talk about in the demo which is a huge um it's a huge thing to do with a repeater is that you connect you can connect a repeater to data so basically um we have a way to connect uh the repeater to data so each item is fed uh from a content uh manager uh like it's it can be like it looks like a table in editor x where you can put your images there your text there and if you're working for example with a client then he doesn't have to go inside the builder itself inside the editor itself uh to change the content or to do you can just go to the cms and uh change uh what he wants to change there and it will reflect in the repeater so that's that's a really cool uh application for that okay so juliette sydney asks uh the hover interaction uh did you take it off on tablet as as it wouldn't work on touch so no uh if uh if i would have left uh the hover interaction on tablet then it it definitely would work uh on tap as well it was just uh the choice that we made for this particular design but yes basically uh when you set a hover interaction in desktop on touch screens it will act in the same way when you tap that specific container all right someone's asking how do you control the tab index order of the web page so basically um you can maybe even just share my screen for for a minute so we have uh our layers panel here so uh the tab index uh goes actually um from bottom to top so let's see uh i have uh if you for for those of you who don't know what a tab index is uh like it's an an accessibility thing so when you uh when you you're using some users don't use a mouse or trackpad for for navigating uh websites they will use their keyboard and a tab takes them between uh the links that they can they can that they can navigate through they navigate by using the tab key on the keyboard so the way we do it is uh basically just uh um we arrange uh our content here uh in the layers panel you see the the most bottom element is the first so let's say that uh if i would have a container and i had um i don't know five buttons uh on top of each other so actually the bot the the most top uh button will be on on the bottom here this is the first one actually so i hope that answers the question thank you edo uh we have some questions coming in from youtube as well so if you guys are watching from youtube then make sure to either come into this session or ask your questions in the youtube comments um one of the ones that we have is can you add your own font and will this be visible to people visiting the site all right so the answer is yes you can add your own fonts [Music] for example uh this font that we're using here uh is actually i don't think it's a proprietary font that we we have uh it's it's it's an uploaded phone so i can just go here and go to upload fonts and here i can just either drag in the font in here or just uh use upload font and that will work and yes as as you see the the live version uh of the site if you uploaded uh fonts into the site the user will see him it will be downloaded uh along with with the site itself thank you another youtube user is asking how do they change the color of the text well that's that's pretty easy i actually did it throughout the whole demo uh just go to edit text and you can just pick uh from colors and i can even change uh colors in interaction remember i showed you that we have interactions just for the sake of the example i'm going to show it so we have custom interaction here and let's say that for example i want in the hover state to change the color of this a text here so let's say that i just want to change it to this shocking pink as i hover over the container and then you see as i hover the text changes as well hope that answers it good stuff thank you um so another question coming in i saw this in the q a tab and also someone asking on youtube can you show us how to do carousel images horizontally carousel images horizontally so basically we have a few solutions for this uh one of them is the uh pro gallery let's just see how we can do this just open a new page here just for the sake of this basically as well as a pro value you can use a repeater as well like i showed uh in the repeater uh where you can add a sliding uh sliding layout to the repeater but i think that we can use a pro gallery here let's just see yeah you have a pro gallery that you can use i just dragged it in and this is just a built-in thing that you can use and this is like the carousel here i'm just pressed on it all right yeah cool um so another question what are the most used sizes of breakpoints well first of all um i can say from from the work that we do for for our own sites we usually just use the default sizes that come in and that tends to be enough uh to cover uh all of the options um all the screen size options and if you do a good uh responsive design then then you will you will not need too many breakpoints but you can use like these sizes that are uh basically after some research someone got to these the numbers and and these numbers are the like common numbers of screen sizes that can be used but you can do it you can change like for example if i wanna uh different ranges here so i can go here to customize breakpoints and then i can just change uh changes to be like let's see 1200 and then we have three ranges here that uh it's 1200 and up and then 751 to 100 1200 and let's say that i want another breakpoint in mobile let's say i want two mobile breakpoints then i can add a breakpoint here and i can say maybe for 450 here and now i'll have a break point for 32 450 another mobile breakpoint here and i can go uh up to as much as six six break points on each page and when you're setting breakpoints an important thing to say you're setting them per page so that means like there's there's a i can have one page on my site which has three certain uh custom break points and then i can have another page of my on my site that has six break ones so it's really flexible uh in that way hope that answers that good stuff thank you for all your answers i just wanted to remind everyone that if they did want more personal help they could head over to the lounges we have eight lounges open and they're there with editor x experts and responsive design specialists so you could go into the lounge you could share your screen with the experts you could put your camera on and microphone on so if you have any specific questions or you need help with your web design go over to the lounges also people on youtube if you want to come into this event and come into the lounges follow the link that i put in the the comments of youtube we'd love to have you in here so i see that pavel is asking what is better to use a layouter or a css grid so these are two different tools one is based on css grid of course and the layouter is based on flex flexbox and what that enables you to do is it enables you to add uh elements um into a layout and you can set uh percentages of of the width of these elements and by doing that and you can also use like uh limiting with pixels then that will make your layout break so it will actually it might break even and break i mean in a good way not break your site but what i mean is that um it might even change between break points between uh not as you go to another break point um i'll try to get back back to you and and give a good example of that and when we're using a css grid it's basically um enables us to to work uh as i said uh in the demo in subdividing uh or containers or sections to different cells and these different cells can have different responsive size units cool um someone's asking here does anyone know if changing the orientation of mobile devices interact correctly according according to the design of the breakpoints all right so uh currently uh it's it's when you're rotating a device it's gonna um it's gonna relate to the to the pixel of the design uh in the landscape uh of the device in the landscape mode so let's say um [Music] that you have a breakpoint uh that goes from 751 to 1000 here so just a minute um so if i rotate a screen and it and the width of of this landscape like it falls uh above a thousand then it will show you like say if i have a a tablet that's maybe uh 800 pixels wide when it's in in portrait mode and then i i rotate the tablet and you will see it um now the width is like maybe 100 or 1000 something then it will change and you will see it as it is in the higher break point because it's in that range awesome stuff someone else coming out on youtube how do you add a menu item to the top navigation bar that'll be awesome if you could share your screen and show us yes no problem thank you [Music] just i think i'll just open uh a new editor window for this just to have a fresh fresh site load up in a second all right so of course uh right off the bat as a default when you open editor x there's already a menu here and now because this is a new site we only have the home page here but let's say for example that if i add some pages like let's say i'll add here an about page and i'll add a contact page so i can go to the menu i can manage the menu i'll say add new items i'll pick site pages and now i i can select the about and the contact pages as well and you see that they're automatically uh added to the menu now another thing that i didn't talk about um in in in my talk is master sections so master section uh basically uh we we can access them through here there's these are sections that can show on multiple pages uh changes uh you make uh to a master in one page will also apply to all the other pages in which this master section is appearing so for example here in this site let's just give give these names so we can we can see what we're talking about so we're now in the contact page and now we're gonna go to the about page just just for us to know where we're at and let's say that this is the home page all right so i'm on uh on the home page and this header is a master header so let's say that i'll just do something like really let's just add a shape here all right i'm going to take this shape and i'm going to add it to the master header the fact that this is a master means that it appears on multiple pages so now if i go to the about page you'll see that the change that i did here that the the shape that i brought into the header it's on on this page as well and that's a really good tool like for for again headers and footers are like the classic master sections but i don't know maybe you you're selling something on your side and you have a section that's a banner for for a certain sale and you want it to appear on multiple uh pages uh in your site then you can create that as a master section and then you can decide on which pages this master section will appear and regarding the menus um also you can see here that even in the default uh default editor when we go to tablet and mobile you'll see that this menu changes to a hamburger menu and this is actually if you look at the layers panel you'll see that the horizontal menu on the desktop is set to not display and the hamburger menu is displaying here so this is basically uh what golly talked about when she said that uh in some cases you will need to replace elements rather than overriding them so this this is exactly the case that she was talking about so we have uh a menu a horizontal menu that's displaying on desktop and here on desktop you see uh near the hamburger menu there's a not display icon but when i go to tablet and mobile you see that now the menu the horizontal menu is set to not display and the hamburger menu is displaying and i can actually uh go to this hamburger menu i can open the menu and i can edit the menu is the menu that opens is basically just a container i can edit uh everything uh that i want to do here and i can even add here elements that are not directly related uh to the menu itself let's say that i want to add like a maybe a social bar so i can take this social bar here and can lay it out maybe vertically like this and i also then i have a menu but then when i open the menu i also have a social bar in it so it's it's basically just a container that that can contain anything nice nice thank you for that detailed explanation um someone has got an interesting question here technically at the break point slash different layout wouldn't that be adaptive design not responsive design well when you're doing uh layout overrides then i wouldn't call it uh exactly adaptive design but as as as we explained like in in the demo and also golly said that we have things that we want to change between uh like in to the different break point ranges for example the way i changed the layout uh in in in tablet and but in desktop we saw that we have a responsive design because i set our values of things to be uh in percentage and because we used like responsive units and text scaling as well then the design was responsive it meant that it it kept like the same proportion as we resized the screen and then on tablet and mobile you can also we also have some responsive uh design like in the uh in the example uh that i showed let's just go to here so in mobile like in the example you see that uh we're using here are a responsive size on this on the width of this container so it's a hundred percent of the width um of the item but then i showed you that you can put a maximum width here if you want to limit the responsiveness great a bit of an update for everyone we're going to be closing the lounges in five minutes so make sure that you ask all your questions and share your designs with those lounges and the experts within the next five minutes we'll all then regroup here gallery will be coming back and we would love to see some of your designs that you've created um you could share your screen with ido and gallery and then they could give you some feedback and some sort of review review of your designs and we'll continue with the question and answer so you've got five minutes in the lounges until we all congregate back in this main lounge another question here how do you add content to a repeater i can i can just show that that's no problem that would be amazing thanks edo all right um so the way you can add content uh to repeater is pretty easy so you just add the repeater and just add it in here and let's say that i want to add an image to this repeater so i can just choose an image from the quick add panel and then i can maybe even stretch it like so to the repeater item and of course now we're seeing the same image because i added it in and it's repeating but i can change this i can go to this image and i can change the content let's say that i want to add this romantic walk in the sunset here and we can do that no problem and also um i don't know this wooden partition uh and if i want wanted to i can definitely add some text in here so maybe i will change the color it says add a title at each one of them but it can be i don't know on mountain it can be a couple and it could be i don't know would so that's that's how you add uh contact uh as i said before uh you can also use the content manager here i don't know if we'll have time to show it now but you add a content manager to your site i'll just do it as we go along and maybe we can make something happen here so we can uh basically uh create a collection here and i'll just choose a blank collection i'll call it items and i'm gonna create on that collection and let's just say the title is i'll add some titles like let's say mountain top misspell that mountain top let's add another one called loving couple and let's add another one my god uh and let's add another one called wooden right and then we can add here another field here to this collection this is pretty advanced but i just want to show you the power of what we can do here um so i make this field type an image and call this field image and now i can go to the collection here and to add these images here and let's say that i want an image of a mountain okay i'll update that and here i want these images here so i'll take this um couple image and this is going to be our wood wooden window all right so what i can do now now that i have this uh this content collection i can basically go to my repeater and i can say that i want to connect it to data and it's and i'm going to create something called a data set i'm going to add some items here and the item i'm going to choose the collection of the items and what i can do now is i can take this text and i can i can connect it to the field of text that i have in my collection and i can also take this image and connect it to uh the image in my collection and let's see if i preview this and then you see that the repeater has actually connected to data so just understand the power of this so if you hand off a website to a client and he has like a repeater with all sorts of data inside he can just go to the collection and update that he doesn't need to go into the editor he doesn't need to do any building he just has to input data into a table and the content on his side on his site will change and i think that's that's really awesome very cool so the lounges have now closed everyone should be back into this main room um i'll ask another question just as everyone's coming back into this room and then we'd love to dive into having some of the audience on stage and sharing what they've created within in this last um 45 minutes i know edo and galley would love to see your designs so one more question first and attendees if you'd like to come up on stage and share your work just raise your hand in the question and answer panel of the chat even if you don't have any work to share or you don't want to share your web designs you could come up onto stage and ask a question face to face with ido and galley like i am doing right now so um head over to the question and answer tab raise the hand emoji and we'll see you and we'll bring you up onto stage don't be shy okay another question here how do you add sub menu items all right so as a uh as i showed before uh you can also add uh submenu items let's see if i remember how to do it all right so i can just add a new item here and let's um i think it's submenu title yeah and let's call this just sub menu and then i think i can just you can just drag uh into the sub menu itself so now let's just preview this see what what's going on so as you can see as i'm hovering over the sub menu is here you can design it in different ways but that's the basic idea of it i dragged the contact page into a new sub menu cool thank you very much so um if anyone does want to come up on the stage like i said raise your hand in the question answer um tab we have um someone who had shared their work in the chat um i think the name is duba if you'd like to come up on the stage just raise your hand and we'd love to um review your work that you created a couple of days ago on editor x opening it now beautiful um maybe edo if you could open that link in the chat and um share your screen yeah i'm already on it perfect thank you this looks amazing actually so we have a website here uh um that's related to this book looks really nice and we have this uh kind of anime animation is this like a gif maybe and we have this really nice about section with a cta and some social uh this social bar here and let's see how this behaves uh in terms of responsiveness so as as we can see so immediately something that i can see here is uh some things uh the book image is a bit cutting off so that's probably uh because something with a proportion here is is uh probably needs to be set in a different way but uh all in all this this really looks amazing it's amazing work let's see what happens when we go to mobile beautiful so i can't pronounce your name but this is really really awesome work excellent hey how are you doing here i think you are asking me how to pronounce my name right it's kaustu nice to meet you castle yeah likewise beautiful side my friend yeah thanks a lot so i think you were saying that i noticed that there's an issue with the cover right i think that it it behaves a little weird when it's so what do you think i should do um can you share your editor window is that awesome maybe we can help him live yeah so let me just share my screen yeah can you see my screen right now yeah yeah so just go i just want i'm seeing it like pretty small let's see how i can you can change that maybe all right so all right so i see what's going on here uh i what your uh height here of of the image is set uh at a minimum height of 605 okay so basically the height is remaining the same but the width is changing and that makes the proportion of the image to be cut so what i would do uh i'd i'd change can you just try to change uh uh maybe undo that afterwards maybe i don't want to create any like something disturbing your site but change uh the minimum height to none okay and now uh in the image itself on the select the image again okay sorry about that okay and try going to the uh like the settings on on the floating menu on the image yeah uh no the the like uh gear wheel yeah and try to set try to do reset image yeah do that all right now try to resize your screen all right so now the image is not cutting off but because it's in another grid cell then then it's like getting further away uh from from the um so what you need to do go to the wider screen uh resolution again and now what what what i'm going to ask you to do go to the inspector panel and dock your image to the top okay now can you preview that now but don't go don't go all the way to tablet and mobile just stay stay for now yeah all right so in that in their desktop um we're looking better yeah i think i may have to rearrange the elements a little bit yes you need to tweak it a little bit but this is the general idea of what what you're what you're going to need to go for uh yeah all right that's very cool okay this was really helpful thanks i'll just stop sharing with you welcome nice you have some work very cool that was amazing just thank you yeah great that you um were able to sort of edit that live on the go i love to see that if anyone else wants to come up onto stage share their screen and get edo's expert feedback and help editing live then raise your hand in the question and answer tab um we've got a few questions in the question answer tab also um if you wanted to have a look at them you know and see if there's any there that you would like to call to oh wait i think i need to expand that again let's see amazing [Music] um i think i may be missing where the question that we an answer do you have anything specific that you want me to answer um there are some in this q a though uh is it possible that creating six breakout points would slow down your site um [Music] no i don't think that's that's that's supposed to be that's supposed to be in any issue um golly do you have something to say about that okay thanks for bringing me on um so actually we just um posted an article about tips that can just make your site more performant um so you can check it out it's in academy x or academy where you can actually learn a bunch of the stuff we showed today as well awesome um so luca in the chat has asked how do you make responsive tablets oh table sorry is that responsive tables i'm i'm not sure that i that i understand that maybe if you're looking for tables yeah if you could add some description um and if nobody else wants to come up onto stage to share your work and share your designs everything that you've created within the last three hours then we could wrap up a bit early here and give you guys some time back it's been an absolutely amazing two and a half hours of responsive web design so we'll just wait a couple more seconds to see whether anyone else wants to come up onto stage and raise the hand or if there's any other questions that you'd like to answer in the question and answer tab um says thanks thanks already okay it looks like people are um a bit camera shy and don't want to come up here with you either so um let's get gallo back up here hi guys thank you so so much for today it's been an absolutely incredible workshop i don't know whether you guys had anything that you wanted to um say to the audience at the end here well i just want to thank everybody for joining us today it was really fun it was so fun to see people are from so many different places um and join us and um also thank you though he's the master of this so very cool and i just wanted to say that um you can always use our academy like i mentioned before there are actually a bunch of lessons there um and walkthroughs and you can also always send us questions we'd love to hear what you're having maybe issues with or what new things you wish for us to work on so again thank you so much and thanks dribble thank you very much everyone it was really really really a pleasure to be here with you this morning this night depending on which time zone you are in was really fun thank you so much girly and ido and thank you to editor x for running this responsive design um workshop it was really incredible and i think that everyone found it extremely informative and he's left with a lot of inspiration and a lot of tips and tricks i linked um the link that you could use for a 50 discount for a year of the eduterex premium plan i'm linking it again now so make sure you go check that out and get your 50 discount is available for a whole year and um it's an exclusive especially for you guys as a thank you for coming to this workshop um i'll be sending an email after this with the recording to this event along with the link to the templates for you to continue creating your web designs and 50 discount code um it's it would be absolutely amazing to see the designs that you've created in this workshop and um i know editor x wanna see them and reshare them and repost them and retweet them so if and when you're sharing um your designs on social media please tag us at dribble we're gonna every single design that we get and please ta tag editor x they'd love to see your designs as well so cool creating something alongside these experts getting their feedback and then um sharing it with the world so i hope that you've learned a lot and i can't wait to see your designs on social media we do these workshops every two weeks so next week we've got in a couple of weeks time we've got one coming up with the principal designer of metalab he's going to be doing a creative ui design workshop so go to dribble.com forward slash learn to check that out we've also got a 3d modelling free workshop coming up in november so um it would be great to see you there as well a massive thank you for everyone who's joined on youtube and in this event thank you so much for your questions and thank you for um you know your interaction and your positivity in this event it's been absolutely awesome thank you so much to editor x and we can't wait to create alongside you again see you soon you

Channel: Editor X

Views: 2,192

Keywords: Editor X, responsive web design, responsive design, responsive, website builder, create a website, CSS, CSS grid, layout, graphic design, web design, web development, web design inspiration, CMS, ux, ux design process, web design agency, free responsive website templates, build websites for clients, breakpoint control, advanced web design, collaboration, teamwork, collaborative design, concurrent editing, webinar, dribbble

Id: wIx1RGn1j_Q

Length: 148min 55sec (8935 seconds)

Published: Sun Oct 31 2021