6 Mobile Section Layouts and Examples You Must See

Designing websites and mobile can be Really difficult especially because it Seems like there's only maybe one or two Different layout options and so all of The websites feel pretty much the same And so in this video I'm going to share With you a couple different things that You can do to really improve your mobile Website designs and also make your Website stand out and feel super custom So let's dive into it so the first thing That I want to talk about is making sure That your sections are really distinct And it's easy for the users to determine Which section of your website they're in And so in my examples here I've got a Bad example on the left and you can see That this is something that's really Common right we've got these sections That just repeat over and over and over Again we've got the image the header the Subtext the image header and subtext Typically speaking it's just on a white Background which is not a bad thing but It starts to just all blend together and So what I found really improves a mobile Design is utilizing different ways to Separate and distinguish the different Sections so in these three examples here You can see that I've got a div block That has a different background color or You can just go for a complete Background color change altogether and Add a little bit of spacing between

These sections don't feel like you have To compress so much together Because people on mobile are used to Scrolling and so don't overdo it really Separate these things out make sure that They're distinct and that they feel Different from one another and it's Going to be a lot easier for people to Make their way through the content of Your website another thing you can do Right here is just add some sort of Simple break between those sections Whether it's a line or whatever you Decide to use an icon this is a really Great way to just break things up and Make them look really really clean so an Example that I really really like of This that I've got here on my phone is Butter dot us and this is kind of a fun Quirky website I really like the colors Of this but as I scroll down you're Going to see that their individual Sections have these different background Colors you've got the header which is Just one word that says plan and then as You scroll through you can see exactly What's going on within that section And then I scroll down it's got the next One which is run and it's a completely Different brand color again with the Image header and subtext and then the Call to action and then if I continue to Scroll down it's going to jump to an Even third different brand color for

Recap and so doing things like this just Makes it feel like it's not just a big Long document of text and a couple Images right it really makes it feel Unique and personable and people are Going to be far more likely to stay on Your site if it looks like this All right so coming back to our examples So the next thing that I want to talk About is working within the viewport now We did talk about people trying to Compress too much into a mobile layout But I also see things on the reverse Side where people stretch things out way Too large the images are too large the Font sizes are too large and you have to Scroll multiple times just to get Through a single section and so what you Want to do is think in terms of the Viewport and how can I get at least the Majority of my section or idea in in a Single viewport because if people have To scroll multiple times to get through One idea or one piece of content it's Going to be difficult for them to track Your messaging and so you can see here That I've got a bad example of a massive Image and then the header and then the Text is starting to Trail off and it Gives people that feeling that they need To zoom out more that they're like too Up close to really see everything that's Going on and we don't want people to Feel like that so you can see in this

Good example I've Shrunk the image image I've Shrunk the header just slightly so It can be on two lines and then you can See now that they're able to see at the Same time the subtext and the call to Action and so this isn't a hard and fast Rule there are times where you're going To have to do multiple Scrolls but Thinking in terms of what is seen inside A single viewport is really going to Help you direct the attention of the User a couple ideas that I put down here Is don't be afraid to give everything Room to breathe again don't try to Compress everything too much but do it Tastefully and then the other thing is Shrink text if you have to it doesn't Have to be as big as you think and so a General rule of thumb is 16 pixel body Copy and 25 pixel regular H2 headers and Then your H1s and things in your hero Section you can blow those up more if You would like but don't try to make Things too big sometimes smaller is Better alright so the next example that We got here is using drop downs wisely Drop downs can be a fantastic way to Save space and allow a user to choose What they want to learn or read however If you overuse them it's going to feel Like everything is hidden from the user And it's going to cause frustration so My bad example here is a big long list Of multiple drop downs and this is

Something that you should not see unless You're in like an FAQ section right Where you've got multiple questions and People only want to select the ones they Want to read but I'm talking about using These in a section in the middle of a Website and so a good example here is Having the header and then tops I would Say only use two to three drop downs and Then do different things to show the User which drop down they're reading and So I always like to have one drop down Open right off the bat to show the user Hey this is a drop down this is how this Works you can also have icons to Indicate this is the one that is open And these other ones have not yet been Opened and you can also do different Things with colors and opacities just to Show them which one is in an active or a Drop down state now in this bad example You can see that there was no indicator To even show them that these were drop Downs and again that can cause a lot of Frustration and it can make things Confusing when all they're seeing is Headers and they don't know that they're Supposed to interact with them so there Are a couple really cool examples of This the first one is on webflow's Actual website and so as I pull this up I'm going to scroll down there's way too Many cool things on this site but I Really enjoy this drop down here because

You can see that it has a different Color for the header and the background Color to show you which one is an active State but as you click the different Drop downs it's going to display a Different animated video above it now This also follows my rule of working Within the viewport this would get Really really confusing if As you click these drop downs it was Changing an image or a video but that Image or video was off of the viewport And or in other words you couldn't see That something was changing and this can Be really really again frustrating for The user but the way that webflow does This makes it work really really well The other example that I want to show You is on the Gusto or Gusto website and I'm going to scroll down to the drop Down sections here and I love what They've done with this drop down section Because the first one you can see is Already in an active state right and It's got this loading bar that goes Across the top to show you how long You're going to be on that and then it's Going to drop you down to the next one And by doing this automatically it does Kind of keep things moving and it Alleviates a lot of the confusion but Also you can click on these And it's going to stop that auto timer To change these and then again you can

Just kind of flip through them and it Does a really good job of kind of Keeping everything within the viewport And I also like how they've broken up Text with these check boxes so it Doesn't just feel like it's revealing a Big block of text all right so back to Our next example use intuitive sliders This is very similar to the drop downs We want to make sure that sliders are Really obvious and apparent and so People know what they're supposed to do So in my first examples of course this First one it has no indication that You're supposed to slide right and so Nobody's going to understand this and There's nothing worse than sliding down With your thumb on a mobile website and All of a sudden there's some left to Right movement when they're not Expecting it and so at the very least You should add these little dots down Below that show you that like hey here's Some slides here that you should go Through but that still to me just Doesn't do quite enough to show the user What they're supposed to do so in a few Of our good examples we've still got got Those dots down below we've got an Indicator showing that we're on the First slide and we've got our second Slide that is subtly peaking in from the Right side now you might think that that Looks strange but users actually really

Like seeing that hey there's more Content and they're naturally going to Pull that into the viewport with their Thumb the other thing you can do if you Don't want to show something trailing Off the side is just add big Arrow Buttons or even buttons that say next And previous again this just makes it Super obvious and it ensures that the User doesn't have to think about what to Do and the final one here is just a Different variation of an indicator down Below and as you slide this little box Is going to slide along showing you Which slide you're on and then again We've got a little Peak here on the Right side showing that there are more Slides to come so make sure that you use Sliders in an intuitive way so people Don't have to think and if you want to Look for really good examples of these The first one that I've got here is Intercom and as I pull this up I'm going To scroll down and their first example Of a scroller is just their their dots At the bottom one of which the first one Has a blue Highlight showing which one Is active and then they've got big Arrows on the side which are really easy To click and then it's going to change The images and it's going to change the Text and the call to action down below The other example that I really like is On pipe.com and I actually really like

This website it feels super futuristic And so if you want to check this out I Would highly recommend spending a few Minutes and just looking through it but Here on their case studies they do a Great job of having the second slide Peeking in from the right side so you Just intuitively start to pull those Across and I think that these cards look Really nice and again so there is a Really clean way to to make sliders work On a mobile phone you don't want to Overuse them but if you do it Tastefully Maybe once or twice per page tops it's Going to make it a lot easier to get More content in without all of the Scrolling all right so let's head down To our next one which is simplify images Or just use videos and this is really Obvious right videos are more engaging Especially if they're videos where you Don't have to click on a play button to Get them to play if they just feel like They're animated images right but let's Just say that you don't have any sort of Fancy animated videos or images what I Would recommend you do is at least Simplify your imagery and so here's an Example of actually this is a a plug-in That I just launched called semflow and You can see that the images there's a Lot going on in these images and so Having this on a mobile phone just isn't Going to make a whole lot of sense right

It's just really small and detailed and So what I would recommend is simplifying Those images and having a specific file Or image for mobile and you can see here That I've just simplified it I've zoomed It in you might add a little bit of Spacing or padding between elements blow Up font sizes if they're in words in the Images but but by doing this it's just Going to make it way easier for people To see what's going on people on a Mobile phone are gonna have a really Hard time seeing really small detailed Images so the other example I have here Is let's say that you have a big wide Image this is probably an image that you Would maybe use as a background for a Hero section but don't be afraid to Remove that background hero image and Then just use it as an image you of Course are going to want to zoom in on Whatever the focus is of that image like You can see here I've zoomed in on this Guy holding his little megaphone but by Doing things like this it's just going To feel like the mobile experience is Custom and it's not just a desktop Website that's been squeezed into a Mobile phone so one of the examples that I love for using these types of animated Graphics or assets is worksome.com and As you scroll down you're going to see That every one of these kind of products Showcase

Graphics are animated and so you're Going to be able to show a lot more of Your product or business if you have These types of things as I scroll down You'll see the next one it pops up it Starts to move around it interacts the Numbers change the graphs change and Again just adding a little bit of life To your assets is going to go a long way For your site users all right so if You're looking for more instruction on How to design great section layouts I've Got a bunch of videos on this and so I'm Going to put them here on the side go Ahead and click those there are ones on Desktop there's one on hero sections It's going to make things much easier For you on your next web design project And if you like this video please hit The like button down below thanks for Watching and we'll catch you in the next Video