4 Modern Website Design Tips

Key Takeaways

so in this video we're going to 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 [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 is 80 to 90 percent 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 what 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 going to 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 over explain 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 over elaborate 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 title wave of text on a mobile-sized 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-sized 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-sized 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 a different color on your site that really stands out and make it a clickable friendly button with somebody on a tap so on a mobile device that can easily tap it with their thumb maybe tap it with their finger makes it very simple they don't have to like 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 going to 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 a 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 you know 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 about 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 you know 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 you know 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 want to be so here's another design this is similar to the 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 want to 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 home page 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 you know 12-week body transformation program it's driving you to that headline making you want to 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 you can see all these additional call to action boxes they're all pretty solid too you can see there's only like 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 going to want to read all of that and so pull out the main points here you know and maybe even have an expansion link if you want to read more but on the visual display try to keep it shorter you know keep this like 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 text 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 you know 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 is 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 can see that's you know probably two lines longer than necessary if you could thin this down to like 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 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 going to ultimately drive you one or two more sales a week one or two more leads a day you know whatever it is hopefully the results improve and this video was helpful in that regard so leave a comment if you have it like the video if you like it and share it with your friends and thanks for watching and happy marketing