Bubble Webinar 3 - Responsive Design

good morning from New York and welcome to bubble webinars getting started responsive design my name is Neerja and I'm a Technical Account Manager at bubble I'm excited to walk you through the platform and show you how to use responsive design while building your app so thank you for joining me today before we get started let's discuss what is responsive design responsive design is an approach to web design that makes pages look good on a variety of devices page width and device orientation today we'll be diving into the fundamentals of making a page responsive across desktop tablet and phone using Airbnb as design patterns as a guide this webinar will be recorded and we will email you a link after the session so you can always rewatch at your convenience for the method of this webinar I'm going to be switching between a meeting roadmap so we can keep track of our progress Airbnb is website and we test app you build together in bubble the roadmap will have some text for your future reference but don't worry about caching at all as most of our focus will be on the test app we'll also have a Q&A open where you can ask questions we will leave some time at the end to cover top questions so with that let's begin the topics we'll cover today include popular brands UI patterns and style guides responsive tools in bubble and chrome properties for width margins and alignment and combining components to build a responsive page so the first few topics of new cover are UI patterns and style guides so your question would be what is a UI pattern a UI pattern are visual solutions to common usability problems patterns include guidelines for themes components and usability so these are really important when you want to start out with your research process and how to design your app you obviously have your top you know brands in mind when you're designing your app something that you're a big fans of and one to copy and adapt it to your own use so I have three examples here that I'll quickly walk you through so the first one is the human interface guidelines by Apple I'm just gonna plug the other ones as well material designed by Google and also a pattern library so starting out with the human interface guidelines this is Apple's guideline on how to design your app when you sell on the iOS App Store it includes information of other themes it can include information about their visual design animation basic things like icons and images so Apple is quite prescriptive on the creating a unified experience for your users regardless of which company is selling their app through the iOS App Store similarly Google also has something called material design where it walks you through things like typography also like colors and gives you a few guidelines on using color palettes for usability and what that says about your brand well this is not limited to Android Marketplace it's definitely more popular amongst Android apps so these are definitely things that you can look at when you're trying to figure out like what works for your app and then the last thing I want to show you is this site that looks at the different UI patterns across you know Khan axé the focus is on like iOS apps but you can adapt this to whichever platform the deity using those for example Robin Hood is a financial app and then a really cool one is read the runway where you can look at different screens that a user would see while interacting with this app so this kind of gives the inspiration of what you can build in your app and then what is the flow of users clicking through things what is the experience that they get through what color schemes you can see it's a mixture of predictability and also like excitement and this is some this is a good starting point for when you're building your own app and then let us also look at something called style guides and that is more personalized than a UI pattern because a style guide is a company's branding guidelines it can include details regarding the company's values or recent case studies in addition to the UI patterns that we just covered so the one that we're going to focus on in this session is Airbnb so let's start with that if you could wear it complain about no sound is that still an issue okay great because I believe it's working for Chrome um okay so if some of you are not able to hear sound or lace on is coming on and off like we'll have a video recording at the end that can definitely help okay so moving on to era B&Bs design guide looking at through these different like resources on this page you can see that they're driven by their values they also want to be a bit unconventional and then you there are different articles that are available for your perusal the talks about different aspects of their design and how they applied it to like different locations and target markets so this is a great way for you to like see how two companies think about their brand and then turn it into their design to give users a very specific experience in a certain location or for a specific purpose so while they're actually like looking at the Airbnb example I want to focus on one page which is their host page this is a page geared towards people who want to host on Airbnb and the page mostly walks you through the pros of hosting on Airbnb how much you can earn as well as like how Airbnb helps you earn more and in our case care of some very concerns so there's a lot going on this page that I'll walk it through but one of the main tools that you'll use in looking at external websites and adapting it to your your app is something called chrome dev tools chrome dev tools is a loose collection of features for developers out of which like one feature called device mode is extremely useful here's some information based on your LS how you can access this I'm going to show you one right now and so on a Mac you can do command option J and that pulls up something that looks like this you can see a few options on the top and then you can also see something here called device toggle device toolbar if I click on it it looks normal without this console which I can close out of but if I enable the toggle then it gives me a few options right here again and so the options right here is such a laptop here because this simulates the viewport of a laptop but you can also change the device to something like an iPhone 10 and I'll show you here something that looks like your iPhones viewport you can also change it to something like an iPad I will show you an eye pads vertical orientation viewport and then you can also change it to landscape mode where it's wider and it's obviously the content reorients itself to fit that wider space and then while we're looking at the chrome dev tools we can also like inspect certain parts of airbnb design where for example you're looking at this button you can click on it and inspect and here I've had this let me change this to a bottom orientation and then I can have a little more space to show you what I'm showing so if you click on different elements right here and you click inspect it'll show you that here this is a button type and then if you click on computer it will give you some information on the dimensions so this is a lot there's a lot of information to process bubble makes this much more simpler so once we head into the bubble example you'll see what all this means so we're going to interpret part of airbnb s design and try to adapt it into a page that we design in bubble and part of that we're going to be using a few different properties I'm not going to walk you through all of these right now but we'll walk it walk through it once we're going through the examples in our and so what we're going to be doing is adapting parts of Airbnb host page and implementing navigation bars a background image with an overlay some paragraphs tables and links within those table cells that will adapt to each device size so before we head in I just want to check in again it seems a few of you are still reporting audio issues have those been resolved okay so heading back to the Airbnb host page let's walk through a few different segments of this page so on the top you have something that is a floating bar on desktop view because you give the as you continue to scroll you still see this little banner on the top and then you have a few different sections and at the bottom there's there's a static footer there's nothing floating at the bottom and so the header includes a few things like the page links the logo and a button to get started the next you see a background image with a form where you can see okay on a host for a private rule with a certain number of guests how much money can I earn and then the next section gives you like two paragraphs of text this includes more text but in like three blocks rather than two and I hear this will be an image with a quote and this image and code combination will appear again if you scroll to the bottom right here and here you can see this includes the same three blocks that are that we saw on the top and without like the number items numbers right here and then if you scroll all the way to the bottom you'll see a few different links where if you like click on one of this links you will see a pop-up with this setup right here and then you can say X out of it and that closes the pop-up and at the bottom the usual footer that's across pretty much every single brand so this is our desktop view now if you see this on a mobile view this is going to change and so let me move back to site layout and then I'm gonna see this on an iPad and let me change the orientation to an iPad portrait and let me zoom in a little further so you can see what this looks like okay so on an iPad there's no more header on the top you don't see it so you just see the picture that we had after the header on the desktop and then the little square like we had here where you had this form to search how much when you can earn that becomes a full on group underneath and then you can see where you had these two on the same line these two paragraphs they're stacked and there's a stacking stuff structured repeated across the page and then where you have the links the links rather than forming in two columns you see it all in one column and when you click on the length is the same pop-up we'll see this behavior change once we change it to phone and so when you scrolled you saw something where the header just appeared at a certain position on the page so this is interesting on the desktop size you had a continuous header it just remained in place but when you are on a mobile device the header appears only after a certain position it's after you passed the picture so this is something we're going to try and recreate in our own app and then let's look at phone as well so on iPhone 10 we have the same thing with the tablet where we don't have a header on the top until we scroll and then we see a header and then you separately also see a footer at the bottom and it is interesting because the footer is basically the part of our desktop is the right out of the header of our desktop and that becomes a footer on our iPhone 10 and so you can see that this page looks very slightly different across devices but it's to make sure that you have a consistent user experience and that the content fits the viewport available and so here back in our links section when you click on this it takes up the full viewport so it's not like a centered papa because creating a centered pop-up in a very small viewport would would be hard to read so to be user-friendly it takes up this full space and blocks out the rest of the background so these are some of the main differences between device sizes for the same page in air B&B and we're going to be building this in our app so to kind of give you a preview we're going to be implementing our nav bars where we will create floating headers and footers based on the device and we'll have our background images you'll have a forum either taking up a right spot or like spanning the whole page then you'll have paragraphs that will remain on one row or could be stacked then we have tables that can be either two columns or one column and then links that can either have a centered pop-up or take up the full viewport okay so with that let's just start with our app and I have an app right here you can see a blank page but I set up a few things before the session where I kind of looked at Airbnb style guide in greater depth and I saw that they have a certain font size specification they have a certain color scheme for different buttons and I try to like mimic that so that you know we can kind of get a closer experience to the host page while building our own page and that's something that you can do as though if you like of a certain brand just dig into their style guide and see what patterns you can see so that you can adapt it for your own app ok so back on our blank page to start with we're just gonna set it up this is really basic stuff we're gonna draw a few different groups we're gonna add you colors to differentiate it and then you'll see what we're going to use them for so just try that when I make the page not fix with because I want the patient be able to expand and contract based on the device and then the width we can leave it as looks like that 980 and the height I'm gonna call it 15 a 2 you can choose a size that works for you I just want some convenient numbers and then let's call that post okay and then let's draw a few groups so we're not going to drawing about five groups and I'll tell you what those are for so let's change the first group size to width let's make it full read off the page and then let's make this height they teach you and align it to the top left of this page and then I'm going to add four more but they'll be larger than this initial one I'm just gonna put that underneath so this one I'm going to make it about let's see five hundred and then another one underneath lock that in place I'm gonna make that 400 this one can be 500 as well and you can see what I'm doing it's a little boring but if you help us understand understand things much better let's make this about 100 and lock that in place all right so now I'm going to give them a few different colors so that we know what we're doing we can do the header of white and let's make this thing [Music] okay all right so we have a few different groups here and question about what do you mean by locking the group in place so basically bubble will allow you to draw a group and then if you wanted to kind of just match up with another group on the edge you can kind of press down and like drag it up and it will show you like a locking symbol of the edges where you know that it's exactly coinciding with the boy or another group that allows you to like design more neatly okay answer for the first one this is actually where we're gonna have a floating header and you see what I mean let's just preview it to see what this page looks like I'm gonna remove the debugger so at the moment you can just see like a few different bands coinciding with what we just built and there's nothing there but we're gonna add content the first part is where we're gonna have a floating header which either shows up for desktop consistently or gets hidden for mobile so what we're going to do is for the first group we're gonna say this element is Plus this elements height when hidden and we're going to add a condition on when this collapses so before we do that let's just start drawing our floating groups so you can start again at the top of the page and here let's make this our 980 which is the full page and the height we can make is 82 and then let's are floating header we also want a floating footer so so you know this is a header because it vertically floats relative to the top we can be get us left and the floating the index is above elements because you wanted to stay above all the other elements so I'm just gonna copy this over and like take this down to the bottom of our page which would be around 1,500 because its height is 82 so if I scroll all the way to the bottom it's right here I'm gonna just add a solid color so that we can see what it is okay so that's how you know you have a floating footer and this is your floating header it's over footer we need to update this vertically float relative to the bottom and so when you preview you can see there's your floating header and then there's also your floating let's remove the debugger because the debugger can actually influence your page height so there's your floating header and your floating footer and one thing we're floating header is it might let's bring you to front to be safe and let's give it a more distinct color because to make sure we have this floating on the top yep we do okay so it retains on scroll and the floating further details on the scroll and then now let's look at adding page links just let me hide our Airbnb so an Airbnb you can see there's a logo there are a few page links and then that's not a call to action right here which we want to copy and back here we can in our editor let's just add a place for the logo and I'm going to choose an image and then just draw a small space for icon um let's make a little smaller and then I'm going to Center this vertically and so the parent is the floating group and then it currently doesn't have an image I have an assets folder where I'm going to download it from and upload it from and then that is this one okay and then I'm going to add a few links to represent the pages and so let's just call this page 1 and I'm going to update this with something that's closer to Airbnb font size and then let's enter this vertically as well and I'm just a copy a few more so that we have actually three different links let's just make it look more distinct okay so let us distribute this so that it's more evenly spaced and then we can group them because we're looking at it as a as one thing that behaves together so one of the rule of thumbs and bubble is that you should group things that behave together and you can set responsive settings for that group so that you can have consistent behavior and alignment and movement for those certain elements that are grouped together so let's actually make this a little closer for a little and then comparing the aramean we also need this call to action so we're going to add a few more text elements so let's add one right here which says monthly potential and then I'm going to choose a style so it's header and let's make that a little smaller and then vertically Center it and then we need something that is there for the numbers which are enlarged here an airbnb so let's just add another text element which contains an number so let's just choose five out of them and then you need something a little larger so choose is that too big only nah okay and then finally we also need a button which I'm going to get from my style guide so that is this button to get started and I'm gonna paste it over here okay so now if I preview let's see what happens you can see these are really spread out there are a few things wrong first of all each of these elements have too much space between them and we kind of lose our view of what should be left aligned and what should be right aligned and that's something that we need to fix in this part of your bubble that is called responsive mode and this is where all the magic happens and so this takes you to the next rule in bubble is that when you have a group actually we should have grouped all these three together because for the header they work similarly and the responsive viewer gives you a few options first of all you'll see device sizes right here that will simulate a your page by device size it's kind of what we saw in the chrome dev tools but this is actually much cooler and then you'll see hidden elements and paid States we'll come to that in a bit but going to our original width there was 980 pixels we can see that you have this page right here and when you expand it it starts losing shape and when you contracted it starts loose and everything starts getting stuck there's not enough space so that's something we need to fix so first thing we want to do is let's make the logo will be fixed with because we don't want the logo to get huge if the page gets larger and it's left aligned which is correct because it always stays on the left side of the page and then this linked section we also want this left aligned and for this larger group for the call-to-action you want this right aligned so at least let's make sure that the alignment stayed correct as we expand and contract and that seems to be the case now we need to like take care of the spacing between elements and for that we need to set minimum widths and maximum widths so here you can see the current current minimum width is 20% that's probably too small we can't allow it to get too small so let's see whether we have any flexibility like how much is this before page 3 falls below and it's about 90 percent so you can you can set this full group to be minimum width of 90 percent that it can get no smaller than 90 percent of its original size so that when you contract it doesn't go it doesn't get stacked and then for our 4 thing on the right we probably should make this fixed width because there is not a lot of place for it to expand so we want consistent behavior there's actually one more thing that's wrong here is that there's actually too much space here so we might actually need to specify a max width as well so let's make the max with just 100% so there doesn't get much larger but it has a little space it has a 10% space to kind of contract and beyond that it won't so let's test that and now we get a little more even behavior for the header so when you preview you can see that your page looks aligned and spaced correctly and using our chrome dev tools let us see what it looks on our iPad size so fairly decent well you can see the alignment and spacing looks ok but when you get into your iPhone size it kind of like stacks which we don't want we want a smarter layout because we know that in Airbnb for our phone size you don't really have a header on the top so we need to set a few rules so back in this we actually need to move a few things off to the floating footer when the page size contracts and make a part of this header hide when the page goes below a certain page width so a key concept here is break lines for simplicity's sake we'll just look at two brief points we look at an 800 pixel break point and we look at a 400 pixel break point let's say 800 is so our original Earth is 980 and then once you actually start shrinking the page you can see that this was highlighted that means our getting into the tablet portrait mode and then when you shrink it even further you can see that your phone in portrait mode was activated so we're just gonna say that the tablet is around 800 pixels and the phone is around 400 pixels so all our behavior will be like for 800 page width and 400 page width and desktop is obviously what we're starting out with designing so let us start by setting up a hiding rule that when look very similar to Airbnb that on that on an 800 pixel page width you're not going to see a floating when you see a floating header you're not gonna see that call-to-action button that call-to-action button will actually move over or look up here in the floating footer on desktop you don't have a floating footer but on tablet and phone you do have a floating footer the scroll to position thing we're gonna do it in a little bit and so back on our page let us add a hiding rule and say hide on the parent width is less than or equal to 800 and to the parent in this case is the floating floating header which spans the entire page width so we don't have to do any extra math for that and just say save so what you can see is that when you shrink the page that disappears and that's exactly the behavior that you want but if that disappears you needed to appear in the footer so let us just go back to our UI builder and like copy this thing over to our floating footer okay so let me make sure it is aligned and then we can vertically Center this okay so there's our seventeen pixels here you can see it shows you the spacing and then the same here okay so we're good for the floating footer to start with but we actually need to see something so it looks like the floating footer is always visible but we don't want it always visible we only want visible when it is when the page width is 800 or less so we need to add a condition for the floating further in general like not just this group just the entire floating footer so for this you have to actually go back to the UI UI builder tab and then we can add a conditional that says when current page Rick use greater than 800 this element is not visible and so let's test that so on our iPad we don't actually see we don't see that because it's actually less than 800 but on a laptop you can see that this monthly potential is on the top there's actually make sure that the floating footer includes our buttons you might have to add one more thing and let's make sure this does not have any conditionals a left over from the floating header because I might other no problem yeah we need to remove that and so when you retest here on our chrome dev tools there you go there are this appears with the monthly potential at the bottom okay so we have at least our tablet mode fixed where we can see the floating header from the desktop break into floating footer as well and then hide this group here and show the group here we need to now adapter for phone because on the phone it still looks a little different than what air BnB foam size looks like so if I look at air BnB s iphone view you can see that the monthly present potential actually got stacked on the left so when you go back to our editor you might actually so you have a few choices like one you can create like a really complex logic to make this left aligned but then the easiest method is actually to create a separate group right here and and make sure that they stack rather than falling all in one row so what we're gonna do is since this has slightly different behavior when it's on phone we need to pull this out of the parent group and so on the UI builder we can ungroup this you can just like click these different elements and ungroup these elements and we can group these almonds together and then let's make sure it is still correct in our responsive view not quite because we need to potentially make this fixed width and the same for the button we still see a little complexity right here that is not exactly what we want so let us undo that we can fix that a little later so for now let us just stick with this one large group that behaves the same because this gives a smoother behavior on phone laptop and and as well as your tablet so let us head on to the next section where we want an image in air BnB we have this image with this little square form so let us try and change this to a background of an image so for background style instead of a color we're going to choose a image and then we're going to upload and background image where there's the setting here where we can see crop the image to for the element size so that make sure that your image is not distorted on responsive mode and that's kind of something that you can play around are there are a few other images image options listed here where there's more information you can see that in the reference if you hover over it and that's okay if your image is too small anyone like a patterned tiled view that's something that you can do but for this we're just going to keep crop the image to fit the element size and then on top of it we need this little thing that looks like a form on how much money you can earn so for that let's just draw a group we want created coats because they'll take some time so instead let's just add a few text boxes and I'm going to get some lorem ipsum to enter into that so for those just title works and let's make this more consistent so let's choose a subheading size and for this a body size and let's choose some lorem ipsum from here actually a lot of content I'm going to shrink this a bit more okay so this is not really meant to like be an entire form but it is kind of representative so let's see what this looks like in responsive and you can immediately see if there's something wrong here and we're gonna be able to fix that very soon so the first thing I want to do is that we want to make sure it doesn't go beyond its current width so we need to set the minimum width to actually be 99% so that ring you're reducing the page width we at least retain that size then there's one more thing that when you actually move it along like you can see an airbnb where on this remote device G so like when you are on desktop it actually spans the full page when you are on phone it also expands the entire page and that's something that we want to do like in some places where there's space it'll it's a little square on top of an image and where there's not enough space it takes up the whole page width so that's something that we will try and recreate by adding a group on top of which this will sit so let's head back into the UI builder and add a group on top so or in about go right here okay let's add a transparent group that actually spans the entire page so it has to be let's make that no color and the edge of the page and the entire page width let's make sure it's actually tall enough for our little box right here it should be and then let's just move that into into that Google's locker into place so it's kind of right aligned and then let's Center it vertically within that group and then so what we want is to set a few rules based on that group so when we squeeze the page we have an option to collapse margins when the container with is a certain page width and so for that let's make that 300 which is our table break point and so when we do that you can see that this actually spans the entire page and so you can get something that is closer to air B&B behavior and so when you have a form right here when you have a space it will it'll be a little square and when there's less space it can take up the full page so this part is done and then the next thing we want to look at is a text heavy portion of their pattern which is like this where you have these different paragraphs very similar to another spot where you have these different paragraphs and when you are on a phone the stacks so we want we want to either spread or stack based on how much space there is so back in our responsive back in our own app editor we're gonna like first draw up these paragraphs and then we're going to like set up some stacking action so let us just draw we can actually copy this over you can make it a little bigger so this can be about 50 I turn 40 and we can make this with also a 50 that's too big and then we want to group this because they need to move together so let us Kreuk this into a bigger group and for that bigger group let's actually add a little space at the bottom so let's make this height um just good give it like a little bit of extra space so that you can see that there's a title then there's a text box and between the title and this text box is some space and underneath the text box is some additional space you'll see why this is useful in a bit so if you call me Oh is over create like a second paragraph you'll see that there are two blocks of text right here and we can combine these because these need to be centered on the page so let us group this again and for this larger group let us centre it horizontally and let us enter it vertically and then let us see in a responsive viewer what happens in the page shrinks so so far so good like it's becoming narrower and narrower but after certain points becoming too narrow like it stacks it stacks finally right here but it could have stacked a little sooner because we see an Airbnb it's dog starting with a tablet size so we need to like set some behavior that allows it to stack and make sure that these text boxes have a minimum width that we're okay with that is reader friendly and so the reason why it actually takes so long to stack is because of bubbles behavior of keeping margins constant so bubble will try to preserve margins based on your alignment until it hits a fixed block which could be like your minimum width or maximum width so going back to our original width let us do a few things so first let's make sure it has Center aligned because we wanted to squeeze from the left and the right we don't have a preference like we don't want to squeeze only on one side and then we can add a add some logic for a minimum width where if you look at our tablet and portrait let us actually choose a size that makes it stop so for a minimum width we have 20 but let's see what happens if you set this as 50 nothing ah that's why okay hold on we were trying to set a larger group of what we actually need to set it for are these smaller blocks so for these smaller blocks let us make sure at tablet that it is taking up most of the space and stacking so now we can see some kind of a stacking behavior let us repeat that for this box as well and so here we had it at 87% let's do that here as well so this stack already in table but let's see this is actually too much for like the phone for phone it looks okay we probably can produce the margins a little bit more so it is completely based on your preference what you would like to do so let's actually see this in our chrome dev tools and so on phone you can see a little extra margin which we can like fix but for the most part it is resized and centered the way we want to let's also confirm on our iPad size still stacked and centered and then on our laptop size we can see that it's all in one row because it has enough space to be on one row and then we can come up with a similar pattern for our list right here which gives you a pop up which is these links that we had mentioned earlier in the session where if you like click this you get a centered pop-up but on a phone when you click this it takes out the full viewport so let us see if you have some time to do that so I'm gonna draw a repeating group right here and then let me give it a fixed number of cells I can say the rows can be 3 and the columns can be 2 and then for type of content I already have some data types mentioned in in in the apps so let us just search on that so can get a few like test questions but here let's make this a little smaller because it needs to fit a title as well on the top and let us enter this horizontally and then let's add a text element and we can make this much bigger and we can Center this horizontally and vertically and so let us actually see in our responsive view what that looks like so it looks pretty bad on phone but it looks normal on your laptop size on your tablet size also it looks kind of okay so for our phone size we probably need this to shrinks so we need only one column we can probably do that even starting with our tablet where we can set see what is what if the maximum width that is required to take up a full page and so for that on repeating groups we have this specific setting called current so minimum width equals 100 pixels so you can decide that based on your container so if I know that on a phone the container size is 375 pixels so that's kind of how big this needs to be for the repeating group in general so so now you can see that it actually takes up the full width of your phone rather than trying to squeeze into different columns and your repeating group so let us see on our chrome dev tools well that looks like so this is our laptop view where we can see questions listen here in two columns and then we change it to our iPad and it's now on one column just like we wanted and on our iPhone it is also still on one column so I don't think we're gonna have enough time to go over the pop-up example so I want to like head over to your questions so let me know in the chat if you have any questions that I can answer in the time that we I loved we can send out an email after this that'll include links to our recorded session any other questions just put it into the chat and I'll try to get to them early there and you probably need follow-up sessions to complete this example but one thing I want to show you before I end the session is a few resources so definitely look at our manual which includes a section on responsive pages there's also like a more granular view which I showed you when you hover over specific like checkboxes in the property editor it and they'll give you more information on it from the reference and there's also a cool video online that can help you and also the forum the forum is a great resource while you're building your own app so thank you so much for joining and you probably need a few more sessions but you know do reach out to us if you have any questions you

Channel: Bubble

Views: 14,660

Keywords: Bubble, Tutorial, Webinar, Web App, Responsive, Web Design

Id: qZUFCmAaGik

Length: 56min 47sec (3407 seconds)

Published: Mon Dec 17 2018