– So in this video, we're gonna talk about four
modern website design tips that you can take back to your team to really optimize and
improve your website so that you get more sales, more leads, more conversions on a daily basis. Let's jump in and check it out. (bright music) Tip number one is to
design for mobile first and cross-check desktop second. A lot of us design websites
looking at a big screen, and we want it to be so
beautiful on this big canvas. And the problem is, 80
to 90%, if not more, of our traffic is actually viewing and using our website
on their mobile device which is a screen about that big. And so we need to do is we need
to be designing the website on the mobile size screen first. Make sure it's really,
really good on mobile before you ever cross-check it on desktop.
So as you're designing your website, be checking it on mobile and
then checking it on desktop, not the other way around, which is what most people do. You need to start with mobile because that's where people are gonna be experiencing your brand, and that's where you need to
have a pinpoint perfect website on mobile size screens. Tip number two is to keep
your content short and sweet.
Less is more. Try to keep your headlines
on mobile screens to where there are only
one or two lines wrapping. So it's one line or maybe wraps to two. Try to limit your headline to that. And then on your paragraph-based content, try to limit it to three to
four lines, four to five at max. So simplify. A lot of times we get wordy and we feel like we need to
overexplain, and we don't. People like punchy, simple,
sweet content, right? Keep it very short and brief. Highlight the key point and move on. Don't overelaborate. If you have a nice site
that's beautiful on mobile, it needs to have short and sweet content. Because as soon as the
content gets long and wordy, pretty soon you got a tidal wave of text on a mobile size screen,
and you don't want that.
So even if it looks like
it's not a lot of content on the desktop screen, it's going to look a lot
different on the mobile screen. And that's why it's important to check your site on mobile first and then cross-check on desktop second. By doing so, it'll keep you in the habit of keeping your content short and sweet because that's the only
way to keep it tight on a mobile size screen to where the headlines
only wrap one or two lines and the paragraph content
only wraps four to five. Tip number three is to embrace open space. Make sure that you have healthy margins between all of your rows of content.
People on mobile size screens
like room to place their thumb and tab through and scroll
through your website with their fingers and
that kind of a thing. And they just need room to breathe. So don't stack your content
one point after the next, one row of content with very
little margin between the next. Try to have a lot of open
space so it's breathable, it feels clean and people
can consume your information without being inundated by the next point. This is critical on mobile because it just keeps everything on the screen short, sweet and simple and to the point of
driving home the message you're trying to drive home.
And tip number four, last
tip, is to have large buttons that are easy to identify
clear call to action. Maybe that button is a bright color or different color on your
site that really stands out. Make it a clickable friendly
button with somebody on a tap. So on a mobile device, they can easily tap it with their thumb, maybe tap it with their
finger, makes it very simple. They don't have to try to
pinpoint click that thing with their finger. That's very hard to do on a mobile device. So have very clear buttons
that are easy to see and identify what the next step is, how to take action, good call to action, and make it very easy to click.
This is gonna drive keys to success. All right, so with those four points, let me bring it all together with you, and let me walk through some live examples that are doing these things well and also highlight some of the areas maybe they could do even better. So here's the site recently designed by one of our designers at Marketing 360. Beautiful website. And you can see here, we have a view of what it would look
like on a mobile device, as well as a desktop device. So as you can see here,
there's a lot of margin, so there's a lot of open space, very airy. You can see here on the mobile device that the headlines are only
spanning one or two lines, very clear, and you have a large button
that's easy to click. So pretty nice job right there. And then over here, you can see that these
main call to action buttons that allow the user to dive deeper into the area of interest are very large, easy to see, easy to click, and they're all stacked nicely on mobile.
On desktop it looks good too, so it works well there, but more importantly
on mobile it's stacked, it's very clear, very efficient. Nice job on that front. Down here you see they're using
a video here in the middle. This is a lot of open space, very simple, you can see the content, super minimal. There's an easy button there to identify. I can click and watch
a video to learn more. And videos are a great way where you can explain a lot
more your products and services without actually adding all of that written content to your site and having just tidal waves of text.
So leverage video for
those types of things. That's a good way to do that. Over here, you can see again, the headlines one or two lines, nice work. And then the paragraph content, you can see here is four to
five lines, that's great. And then there's an easy to
click button, a nice image, a lot of air to this design. It's very simple, it's very clean. Overall, this is well done. This is a well done design because it looks really,
really nice on mobile, but it also looks really good on desktop, but more importantly, in my opinion, it looks even better on mobile, which is exactly where you wanna be.
So here's another design and this is similar to to the last design in the sense that there's
a lot of open space. There's a lot of margin,
looks really good. You can see here on mobile that the main headline only
wraps two lines, well done. And then there's a very clear and large call to action button
that you just can't miss. That's perfect. Nice looking image here. It looks really nice on mobile. Over here, you can see on mobile, there's some additional content here with these customized nutrition plans. The one thing here I would say, this is getting a little bit long in terms of the paragraph content. So this should be shortened
by two or three lines, and then that would look a lot better.
But you can see here, this is already looking
like too much content. The user's intimidated by this. They probably don't
wanna read all of this. So simplify it down so
that it's interesting and it's shorter and it's sweeter. This would be another area here, that on the desktop version,
that's too much content. That would be a lot of content on mobile.
That should be shortened up. You can always have a button maybe to read more or something. The inner pages of your
website can have more content. The homepage and your
primary landing pages just need to really be more concise. This here I really like how
they have this directional cue that's really pointing
you to the next step. 12-Week Body Transformation Program, it's driving you to that headline, making you wanna read it. You can see this headline here. This is three lines, but
it's not a lot of words, so that works. I think that's still solid. The font size is what's really creating the three lines here, not
so much the amount of text.
And then you can see all these additional call to action boxes. They're all pretty solid too. You can see there's only
three lines of content. Very nicely done. Now this testimonial here at the bottom, this is too much content. So you can see on the mobile device, that's just a wall of text. Nobody's gonna wanna read all of that. And so pull out the main points here, and maybe even have an expansion link if you want to read more. But on the visual display,
try to keep it shorter. Pull out the top four
or five lines of content that are really hitting the point home and just display that so that you don't have this
tall wall of texts like this. But other than that, this is a really nicely
done design as well.
And then here's the last example, same type of stuff happening here. So lots of airy space, very
short and sweet content. We're wrapping two lines
here on the main headline and even then, the font size is very large so this is very clear, concise, very short description line, nice work. And then the call to action
button's a different color. That really stands out,
that's nicely done. And then on mobile, you can see that these main
call to action boxes are large and they're all stacked. So lots of air here, easy to see, super easy to click and
tap with your finger to get into the next page. And as we scroll down here,
you can see here, again, good clean content, not a lot of text so it's easy to read and
understand what's happening.
This text here is
getting a little bit long in this section here in the middle. You could see that's probably two lines
longer than necessary. If you could thin this down to three lines of content
ideally for this area, that would be very nice
and easy to consume and read by the visitor of the website. And then the rest of the
site looks pretty solid. So, overall, really good design. These are three great examples
that we just walked through that really hit on all these points that we've been talking about and have maybe just a few areas
that they could tighten up. So I encourage you to do
this test with your website. Pull it up on the mobile
phone that you have there and go through it. And just analyze how you're doing, how you're performing. What are areas that you can improve based on this conversation today? And hopefully there's one or two things that you can improve that are gonna ultimately drive you one or two more sales a week, one or two more leads a day, whatever it is, hopefully
the results improve and this video was helpful in that regard.
So leave a comment if you haven't. Like the video if you liked it. And share it with your friends. And thanks for watching
and happy marketing..