How to Create Compelling Landing Pages That Work

In the state of communication, there is a pretty visible change, a cultural shift.

Attention spans are getting shorter, and that 140-character tweet is now getting ahead of the long-form. The 10-second Snapchat is getting popular. Sure, all of these things have a downside, but their impact is hard not to be noticed.

In terms of web design, this is all about the landing page. Shorter attention spans mean that when today’s visitor gets to your website, you have just a couple of seconds before they already have an impression, and that impression may not always be good.

What’s actually a landing page?

A landing page is the page which encourages your visitor to do whatever your website wants him to do. It is a landing page design which only has one goal.

For example, you may want to display a product for sale, or to get him through some specific sales funnel.

Creating a compelling landing page

You’re getting traffic, but there is something due to which your other numbers seem to be pretty stationary.

Do you throw up your hands and get to a decision that your marketing is wrong? Don’t rush it. First, take a look at what users do when they go through your ads. If your landing page isn’t good, you might land a big user on it, but keeping him there will be tough.

Your goal isn’t to get visitors. It’s to get them to take action when they get to your website. To get a landing page that converts, you want to make things easy and compelling.

How does the landing page work?

You can use a landing page for a variety of purposes, but it only has one function, and that is to trigger a response. And that response should either be take action or leave.

If you’re a good salesman, you already know that “maybe” isn’t really an option. Leaving the table with “I’ll have to sleep on it” or “Maybe” isn’t a good choice. It’s either a “Yes” or “No”, and that is exactly what a good landing page should get you. A “Yes” or a “No”.

A few design strategies that will help you build a good landing page:

Judge the book by its cover

Yes, this is the complete opposite of “Don’t judge a book by its cover”. However, that is exactly what most of your online users will be doing.

Your landing page is more or less the equivalent of a book cover. It might be a striking visual and a single line of text, but these two elements should convey what your product is about, and build anticipation with the user.

The microsite and its power

A landing page should be everything to all visitors. However, a microsite can give a highly targeted audience a specific subset of information.

A multi-page user experience can deliver campaign-specific, or topic-specific content, rich content. A microsite is the perfect solution for a complex solution or product, and it’s very effective with “upper funnel” keywords and converting them.

Make sure your headlines connect with visitors

The headline is the first thing your users read when they get through to your promotion. This is why this is your best chance of making an impression. Below are a few things that might help:

• Keep the message consistent with your promotional e-mail, so prospects instantly know they’re at the right place.
• Tell them exactly what they get, and state your offer’s biggest benefit.
• Be clear, not cute. Clarity trumps persuasion.
• Create a sense of urgency, for example, a deadline. This always helps with the response.

Have your landing page include “power words”

Your customer’s voice in your landing page gives you power.

Combine this with “power words”, and your pages will be almost unstoppable. Using “power words” is about structuring your landing page in a way that will appeal to the emotions of your users, and not just about careful phrasing and choosing certain words.

Sharpen your hook

If you do end up with a lot of copy, your hook’s quality is what determines whether your users hang around to get the longer message, or not.

A lot of copy isn’t really recommended, but in certain situations, it is necessary, and the hook should get your visitors closer, so they convert.

Create a voice, and reveal an important aspect of the story. If you do the same with your landing page, it makes it much easier to differentiate your brand from the competition.

The hook doesn’t have to be a written one, and it is much more than a witty opener.

The goal is for your landing page and all its elements to establish a voice for your brand.

A good hook will convey your position to the visitors’ minds in a much more powerful way than any claim can. There is, after all, a reason why first impressions are so important.

A really good source of inspiration is represented by startup websites. Successful startups tend to do it right. And they don’t stop until they get better and better results. This is why they often change their landing page along with all the elements in them.

Have a video on your landing page

If you want to get a complex idea through to your visitors, and not have them get overwhelmed with text, video is the way to go.

Video is a great way to reinforce your branding and messaging, and it is very powerful when used in the correct way.

Progressive Conversion

Progressive conversion will recognize and admit that users may need more than a single interaction with you before they convert.

This can be done either across multiple visits or in a single session.

Create a moment, and hold it

Unlike a novel, where you actually have time to build up everything, a short story relies on emphasizing a revealing moment. You have a short story with your landing page, use the same mindset.

Instead of trying to explain everything into details, use your visuals and text to focus on that one moment, one idea, that your service or product should be associated with. It might be a very important benefit, or a piece of user experience, it is up to you.

Keep “eye-tracking” in mind

The layout of your landing page is important. It should use subheadings, white space and your graphics to lead the user’s eye to what you have to offer. Below are a few tips on this:

• Varying font sizes get attention – the biggest fonts are usually read first
• Use two or three colors to highlight the important text, not more
• The design is best kept simple – use one column, not two or three

Constraints stimulate creativity

The fact that every visitor comes with a short attention span isn’t really that damaging.

Any designer will tell you that more constraints get more creativity in order to find a solution, and the same applies here as well.

When you have to present your brand with a combination of key visuals and a little copy, you will think hard about your unique selling proposition, and make sure your brand is presented in a focused fashion, with things that help you stand out.

The technical aspect is very easy nowadays, and you can go with “less is more”. Therefore, you have a lot more time and freedom to brainstorm what really matters, which is your brand and how you can represent it as quickly, and as simply, as possible.

Why you shouldn’t neglect a high quality landing page

Digital marketing isn’t something simple, and when you want to figure out how to build an e-mail list, understanding how to design a landing page should be one of your priorities.

There are a lot of strategies that online business people have available for assistance with marketing. However, whichever methods you opt for, a high quality landing page is always a given.

A landing page will get you that e-mail list, and it will also drive leads and sell your products online. Why? Because their one and only goal is getting the visitor to do a single action, and nothing more.

The post How to Create Compelling Landing Pages That Work appeared first on Web Design Blog | Magazine for Designers.

via http://ift.tt/2xQadV3

Responsive Web Design Articles, Tutorials & Guides

Because the showcase of responsive website designs proved pretty popular, we decided to revisit the topic and look at some super handy responsive web design articles, tutorials, and guides that will help you get started with @media queries in order to create your own responsive or adaptive web designs. The resources in this collection have been hand picked as the best the web currently has to offer.

Recap: What is responsive web design?

Creating a website that is responsive essentially means the design of that particular website will ‘respond’ according to the medium that is being used to view it. We’re probably all familiar with the battle of designing fluid websites for various browsers back in the days of table based design, in these modern times we also have a range of devices such as smartphones and tablets which all add different resolutions and even orientations into the mix.
A responsive web design will usually use CSS @media queries to style the page according to specific rules, such as min-width. Check out the recent showcase of responsive web designs to see how some of the best designers are styling their content for various resolutions and devices.

Responsive web design articles

Responsive Web Design: What It Is and How To Use It

This in-depth overview of responsive web design over on Smashing Magazine is probably the best place to go to get the basics on what responsive web design is and how it can be used. The post talks about the theory gives plenty of handy code samples and lists a useful showcase of responsive web design.

Intro to Media Queries

This article will tell you everything you need to know about Media Queries using illustrations and explained examples. Check out this articles and find out more about how to use them in a responsive web design.

Adaptive layouts with media queries

Creativebloq offers some insightful info on the history of responsive or adaptive website designs and the introduction of the media query module along with tips on how to implement such features yourself. The post uses Simon Collison’s beautiful website as an example and focuses on design for iPhone and iPad in particular.

A List Apart: Responsive Web Design

If there’s one place on the web you should go to get the full ‘low-down’ on any web related topic, A List Apart is that place. Needless to say, this article on A List Apart digs deep into the theory of responsive web design and gives technical code examples from a custom build demo website.

Understanding the Elements of Responsive Web Design

Six Revisions takes a look at what responsive web design actually is and helps us understand the individual factors that make a website truly responsive. The articles talk about flexible grids, scalable images and media queries with a conclusion asking if we’re really ready for responsive web design as a solution to our cross browser and cross device problem.

Responsive web design tutorials

Setting The Viewport

Viewports are important in responsive web design tutorials. At the beginning, web pages were built so they could a computer screen but now that we use, more and more, tablets and smartphones to surf the internet we have to rethink the way we design pages.

Responsive Web Design – Grid-View

Pages are actually divided into columns which is why understanding Grid Views is important. Have a look at this tutorial and learn how to build a responsive grid view.

Responsive Web Design – Images

Learn how to make your images scalable so that they could resize depending on the device you’re using.

Responsive Web Design – Videos

Now that you’ve learned how to make pictures scalable to fit any screen, you might want to learn doing the same for videos.

Responsive Web Design – Media Queries

A media query is a CSS technique introduced in CSS3 and this great, step by step tutorial, will teach you everything about it, from adding breakpoints where some parts of the design will behave differently, to changing the layout of a page depending on the orientation of the browser.

How to use CSS3 Orientation Media Queries

1stWebDesigner has some fun with CSS3 media queries to show what kind of effects can be produced. See how the orientation media query, in particular, can be used to change the color of an image based on the orientation of the device or browser.

Responsive Web Design – Frameworks

Find out what different frameworks are and how you could use them for making a responsive website.

Responsive Email Design

What about responsive web design when it comes to email newsletter campaigns? Campaign Monitor is on the ball with this blog post giving a guide into responsive email design. In this guide, you’ll learn about the principles of designing for mobile and also cover the fundamentals of designing and building a mobile-friendly email, plus its benefits and some neat tips and techniques.

Responsive Web Design Tutorial

This a very detailed tutorial about responsive web design and will teach you some tricks to code it up in no time.

The post Responsive Web Design Articles, Tutorials & Guides appeared first on Line25.

Source: http://ift.tt/2wKfUHe

10+ Incredible Examples of Responsive Web Design

With more people surfing the web from their mobile devices, designers and developers have been trying to figure out the best way to cater to visitors on both mobile devices and computers. When internet capable phones first began gaining popularity the method was to have two separate sites, a mobile site and a “full” site. But that would limit the mobile viewers’ experience because the site would be so basic it would cause you to wonder if it was coded by chisel and stone. That was then, now everyone is jumping on the “Responsive Web Design” bandwagon and finding it to be a rather happy median.

I like sites that maintain their appearance, at least to some degree, all the way down the resolution latter. But I also understand that specific industries and target audiences come in to play. In some industries, a person may only be viewing a site from their mobile device to find that companies contact info. In those instances, it is probably best that’s what they get from your mobile sized home page as soon as it loads, you can always include links at the bottom to everything else. I would encourage you to help your clients figure out what’s best for them, and keep all monitor sizes and internet browsing devices in mind as you’re developing your next project.

Responsive web design refers to a site that is developed to degrade nicely across multiple screen sizes and resolutions, from the largest Mac display down to the minutest mobile device. It also works wonders on frame size, square or widescreen, as well as window size, as not everyone prefers their browser to be full screen. There are three key factors to developing a responsive website, flexible layouts, flexible images, and media queries. Let’s take a look at 10 excellent examples of responsive web design.

Sony

Sony is a big brand that has embraced responsive web design. You’ll notice there’s not much of a difference between the widescreen and traditional square screen versions other than everything looks a little more compact on the square screen. But if you start with it out wide and squeeze your browser window in, you’ll notice that the main image actually resizes itself to a smaller version. It resizes itself again once you get down towards mobile device width as well.

Gravitate Design

It’s no surprise that a design studio such as Gravitate Design features a responsive website design on their own site. Whether you are a freelancer or a large design studio, you always want your website to display the full extent of your design prowess and knowledge. I really like Gravitate’s site not only because it’s responsive but because it’s very clean and simple. Their color palette compliments itself nicely and they didn’t go overboard on shadowing, borders or putting all their content in boxes.

Spark Box

Spark Box is another web design studio that knows a good thing when they see it and doesn’t hesitate to implement it on their own site. One thing I really like about their website is how they use the width when they have it, but gracefully adjust when they don’t have it. Their little text blurb to the right of the monitor icons on the home page is a great example. It doesn’t look out of place aligned to the right in widescreen mode, nor does it look out of place centered underneath in square mode and mobile mode.

Food Sense

Food Sense is another great example of responsive web design. They use the width when they have it, but when they don’t they adjust without losing any of the clean look or flow to the site. The only unfortunate thing about the site is that once you leave their widescreen parameters you lose their latest tweet and Facebook plug that’s on the side column under the navigation. They still have links to both social networks in the footer, so it’s not a huge deal. But still would have been nice to see those features appear elsewhere in the skinnier designs.

Warface

Warface is the real deal.  It’s creative, extremely fluid and if you stretch and squeeze the width you’ll notice that it’s not one flat image, but in fact, several stacked on top of each other.

Clean Air Challenge

Last week I talked about sites with parallax scrolling and this Clean Air Challenge site just barely missed making my list. The site itself isn’t totally parallax scrolling, just the clouds in the background are. However, the site is an excellent example of responsive web design. Another aspect of this site that I liked was that the only images that you lose once you hit the mobile sized version of the site is the repeat of the main navigation icons that appear in the footer.

Sasquatch Music Festival

Sasquatch is an annual music festival in my neck of the woods featuring some big name artists. When I came across their site and saw that it’s as fun to look at as the bands they book are to listen to, I was quite excited. This site sticks out from a lot of the others for me because of all the colors, images, icons and overall sense of style it has to offer. A lot of the responsive websites I come across seem to be heavy on text, light on imagery, and only two or three colors throughout the site.

Andersson-Wise

Andersson-Wise is an Austin, Texas based architect and design firm.  Antialiasing jQuery scripts help this site maintain its responsiveness, regardless of how big your display is, this site will keep up.  A very simple, modern, clean and classy look, perfect for an architect and design firm.

The Cacao Trail

I can only imagine that The Cacao Trail website is almost as enjoyable to navigate as the actual trail is. You lose the main image on this site as soon as you go from widescreen down to a more traditional sized monitor, which I don’t mind as the image doesn’t really do too much for me and it would certainly save you a lot of load time on a mobile device. I do like how the main navigation links enlarge once you hit the mobile sized version, it can get to be a bit of an annoyance trying to touch tiny words to navigate a site on your touch screen mobile device.

Alsacreations

Alsacreations took another interesting approach to their responsive web design. Rather than worrying about keeping all aspects and elements of their site intact between different resolutions, they simply focused on what was important and dropped the bells and whistles. From widescreen to square they dropped their image slider, then from square to mobile, they dropped all elements except their “About” blurb and their email form while including links to everything else.

Yoke

Yoke is a fluid site thanks to a bit of javascript and its WordPress platform.  A well organized and structured layout keeps all of the animations and imagery from giving the site a cluttered look but keeps the site looking fun and creative.

Spigot

Spigot Design is yet another design firm who showcase their responsive abilities on their own website.  The overall look and layout of the site is very clean, almost minimalist, but a decent amount of color and creativity provide a nice balance and accent where it’s needed.

The post 10+ Incredible Examples of Responsive Web Design appeared first on Web Design Blog | Magazine for Designers.

via http://ift.tt/2wR8jXa