Category Archives: Web Design

10 Websites That Can Make Your Business Fail

A website for your business is no longer a luxury — it’s a necessity. But, just because you invested in a website doesn’t mean that it’s effective in connecting with your customers and ultimately improving your sales. While there could be numerous reasons why your website isn’t effective, here are 10 of the most common explanations for website fails.

1. It’s not mobile friendly

This shouldn’t come as a surprise to most of us, but for the first time ever mobile and tablet usage surpassed desktop usage. As the mobile revolution continues to grow around the world, this trend toward “on the go digital,” will continue. In other words, internet consumption is moving away desktops and in to the portable devices territory. This means that your business’s website has to be optimized for mobile users.

Unfortunately, there are still lots of websites that aren’t mobile-friendly. This is just bad for business since it can lead to penalties from the Big G (Google), decrease conversation rates and deliver your customers a poor experience.

To make sure that your site is ready for mobile users, make sure that you use a responsive design, have large buttons and due your due-diligence on a/b testing, keep your layout simple and again, test it using tools like Google’s Search Console Mobile Friendly Test.

2. Contains too much jargon

I understand that you’re an expert in your field and that you want to demonstrate your knowledge and authority. But unless you’re talking to directly to your fellow industry experts, your average customer isn’t going to understand the technical language or industry jargon that you use to describe your business throughout your website.

Avoid the jargon and use simple and straight-forward language that your customers can easily understand.

3. Lacks content

Your customers have a problem. And they’re turning to your website to help them solve said-problem. That’s why your website needs to contain fresh and valuable content that answers real-life questions.

Remember, that doesn’t mean that they’re searching for your exact business. For example, our blog contains useful information for freelancers and small business owners. If a person is searching for advice on invoicing and processing payments, they could also land on our site because that’s the type of content we’ve been producing, as well.

In short, start a blog and keep writing awesome content. This will also help boost your SEO and content marketing efforts.

4. Hides essential information

Besides looking for information that will make their lives better, if customers are looking for your specific business, they want to easily locate information like:

  • The address of your business. If you have a brick and mortar business, include a map link.
  • Contact information, specifically a phone number and email address.
  • Social media plugins.
  • Hours, pricing and an “about us” page.

You’d be surprised at how many businesses still don’t have this information on their websites. And, if you’re like me, you may tend to stay from those types of businesses over security or legitimate concerns.

And, there’s really no excuse for forgetting this information. These additions are easy-to-integrate onto your site and usually free as well.

5. Loads too slowly

Customers expect a website to load quickly. In fact, 47 percent of consumers expect a website to load in just 2 seconds or less. And, that’s important to remember because an astounding 79 percent of shoppers who don’t enjoy their website experience less likely to ever return to that site again, nor buy from that site again.

You can test the speed of your site using tools like Pingdom and GTmetrix. These tools provide insights and advice on how to speed your site-up too.

6. Doesn’t have clear calls-to-action

You don’t want to leave your visitors in the dark by making them guess what you want them to do next on your site. So, give them clear instructions by creating a call to action button or hyperlinked text that is front and center.

HubSpot has 31 call-to-action examples that you should review if you need some inspiration. For instance, Dropbox has a blue “Sign up for free,” call-to-action button that stands out from the rest of the page.

Remember, without these buttons, your potential customers won’t move forward with the services or resources that you’re offering. When that happens, you won’t get those all-important business conversions.

7. It’s outdated

Webpages that are maintained and have a current design build trust and credibility. That doesn’t mean that you need to update your site every month. But, if it’s been years since you’ve had a major website design overhaul, then it’s time to find something more contemporary. The last thing that you want is to have a site that looks like a Geocities page from the late 90s.

8. It’s annoying and cluttered

Believe it or not, that are still businesses that insist on having websites that have music or videos play automatically once your enter the site. Even worse, these sites are also full of banner ads, bright colors and flashy text. These sites are just plain annoying and end-up slowing the page down because it’s so cluttered.

So, how many people are going to ever click on that site again at work — or anywhere else?

Keep in mind that a bulk of your visitors are browsing your site on mobile devices too. This means that you’re site should be clean and organized. Keep information to a minimum and use sub-headings, bullet lists and graphic elements so that visitors can digest this info in smaller chunks.

9. Shopping cart or payment platform is broken

Unless you’re relying on a third party payment gateway or shopping cart, then it’s your responsibility to frequently check to make sure that everything is working properly. You won’t be able to make a sale or receive a payment if your cart or payment processor is busted.

10. You don’t guide users to different pages

A lot of businesses send all their traffic to their website’s homepage, as opposed to relevant links that their customers actually want to land-on. This could be because service pages and other pages of the site are just an afterthought when designing a website. But, the fact of the matter is that the home page isn’t as important to general web traffic and the overall design.

Instead, start creating specific landing pages for the various types of potential customers you encounter and where they are in the sales funnel.

10 Steps to Create a Engaged Digital Experience

In order to be effective, websites need to be multifunctional in design. They need to be built like a house: protecting against the elements, providing a comfortable living space with ample storage, meeting basic needs, etc. Your website should be designed to improve user acquisition, lift engagement and help you retain customers.

It’s science and psychology combined with art. Your team should focus on several different elements to create an interactive experience that directly engages the target audience. Here are 10 steps to follow while refining the user’s online experience.

1. Focus on user types, not buyer personas

Buyer personas are primarily designed to align marketing messages and ad copy. To create the ideal user experience, you don’t need to know what “customer Lisa” specifically likes or what her pain points are. However, you do need to know the user types you’re targeting and how they browse and shop, which devices they use, and how they find and use your products. Create your experience around those user type segments rather than buyer personas.

2. Create simple experiences

Customers should feel engaged immediately. Keep your interface clean and simple and embrace white space. This invites them to explore your site on their own rather than forcing them to find what they’re looking for among cluttered designs with too many options vying for their attention.

3. Design like Fisher-Price

When you’re refining the user experience, aim for something that feels like you’re interacting with oversized Fisher-Price toys. This means creating large elements with simplified designs, clear copy that even a child could understand and actionable, concise directions (and calls-to-action).

This kind of experience works perfectly on any device, especially on mobile where larger elements make for easier navigation.

4. Design for limited real estate

Any time you’re creating a user experience, you should ask yourself if this is how you’d want it to function on mobile. How would it look on a smartphone versus a tablet? If you’re designing on a desktop, you have to carefully consider how it might translate in a mobile setting.

You can guarantee a better experience by designing for mobile users first, ensuring compatibility and a more engaging experience overall.

5. Don’t trust your feelings

Never assume that your user experience has reached perfection simply because you personally think it looks great and it did well when you put it through its paces in a test environment. How you or your team views the experience might be wildly different from a customer who sees it for the first time.

Always test the experience with outsiders. There are a number ofservices that test your user experience with actual consumers. Their comments, responses and activity are recorded during the interaction with your site and/or app so you can review feedback and make necessary changes.

6. Mix up your content

People are engaged in a variety of ways, and some respond better to certain types of content than others. Through testing, you can find the right balance between deeply engaging video or animations, images and written content on your product pages and blogs.

Continue to refine, diversify and test your content with audiences to see how variations in your content change engagement levels. You may discover that static images are less effective, but animation and live video win with your target audience.

7. Make the copy sing

You’d be hard-pressed to develop an engaging user experience that didn’t utilize copy in some way. Whether you use minimal copy or long-form content, you need to make sure it’s compelling and hooks the user to stay engaged.

Every word should serve a purpose by moving prospects through the experience toward a conversion.

8. Integrate social

Make it easy for your audience to promote products, contribute content (like reviews and thoughts) and interact with other customers within your funnel. Amazon does this through Q&A segments as well as comment sections. Social proof goes a long way toward improving engagement and conversions with prospective customers.

9. Personalize the experience

Make customers feel valuable by directly asking them for feedback while they’re on your site. Rather than slapping customers with an opt-in while they’re trying to leave, consider creating an exit intent survey that asks them to answer a couple short questions on the experience. Use these customer insights to further improve the UX of your site.

10. Offer customization

Customization in any form is a large part of personalizing the user experience to make it more engaging for each customer. This could involve allowing a user to customize the visual experience of the site (such as layout options and dashboard elements within an online community) to customizing the products they purchase. It allows the user to own their part of the experience with your brand, which will encourage them to return to “their space” in the future.

How to Manage the White Space in Mobile Responsive Layout

White space is a crucial design tool whether you realize it or not. Many designers adjust page elements until they “look good”. Most often this leads to a natural balance of white space between page sections just from gut instinct.

But when you get into responsive design this subject gets a bit tricky. White space needs to be adjusted at different breakpoints to create a seamless experience for all users.

This can be done with many different techniques and I’d like to cover the best ones here. All modern websites should be fully responsive so it’s no question that responsive design is important. The only question is how to handle white space so that all users have an awesome experience.

Rearranging The Navigation

Naturally the first thing every designer considers is how to handle the navigation menu.

If a site has dozens of links you really don’t have many options. You could use a select input field or a hidden menu with the three-bar hamburger icon.

Here’s an example where the top navigation doesn’t even resize. Once your browser window hits a certain breakpoint the links automatically hide into a menu and get replaced with a hamburger icon.

But pay attention to the extra whitespace added between each link. This is a common technique and generally a great idea to space out links for finger taps on mobile.

Most websites rearrange their navigation a few times before finally settling on the three-bar icon. For example Dorigati uses a full-width navigation menu which eventually breaks down into a grid system.

Then at the 960px breakpoint the entire layout shifts from a top header to a sidebar navigation. The logo and links all rearrange themselves into the new sidebar.

Once you go even smaller the nav links eventually move back to the top with a hidden hamburger menu. It’s a very complex solution but it provides a more natural experience for different browser resolutions.

And remember if the navigation is small enough then you won’t even need the hamburger. It’s generally a good idea to avoid hidden menus when possible, so a solution like Regent College would be perfect for sites with smaller menus.

All links are still visible but they get rearranged into different widths. Font sizes get reduced and eventually the links are crammed together.

As long as visitors can still browse the site and tap on the right links then you can squeeze them together as much as needed.

Shift From Horizontal To Vertical

White space on a desktop layout moves across and down the page.

But when you’re dealing with smaller devices you should be more concerned with vertical space. This defines the pace of content and it’s the natural “flow” for smartphones & tablets with resolutions that are longer than wider.

On Jisc you’ll notice there are many horizontally-oriented page sections. Once you resize the page all these little block elements drop beneath each other.

One page section would ideally span the entire width of a 320px smartphone screen. But the responsive layout needs more vertical negative space between elements to create that vertical flow.

The idea of negative space is powerful in web design. You need that space to break up sections of the page and to let blocks of text breathe. Nobody enjoys reading a wall of text.

This is true with corporate websites and with blogs like Mashable. When you’re on a desktop the entire homepage spans 3-4 columns of content.

But responsive users need to get a simplified version of one really long column.

All the other columns can either drop beneath the main column, or they can be hidden from the responsive page. Each site has a different solution.

But when you’re shifting white space for mobile you always need to think vertically.

The horizontal should be controlled by one element at a time. You should instead focus on how much space you need between elements and between other sections of the page.

Font Sizes & Spacing

Some designs can get by with the same traditional font sizes. But if you have oversized headers or tiny paragraph text then you’ll need to adjust sizes at specific breakpoints.

There’s a lot you can do with responsive typography beyond the typical sizing properties. You can also adjust line height, letter spacing, color, and the margins between two blocks of text.

The Next Web’s desktop layout has a lot of white space between the header and the top navigation. But their mobile responsive layout shortens this space dramatically.

Meanwhile the header text is also reduced in size while spacing out the paragraphs a bit.

You’ll have to trust your gut when it comes to mobile typography. Try to feel out what would look best and try to achieve that.

Also consider how your site behaves on mobile screens. Agra Culture has a series of image blocks that display text on hover.

But since mobile users can’t hover the text is automatically displayed past a certain breakpoint. It seems like a small consideration but it makes a big impact in the mobile experience.

White space increases between page sections giving the illusion of crafty content areas.

This same effect can be seen on Cartoon Network’s page where they have a top navigation with icons.

Past a certain breakpoint the CN logo shrinks down along with the main links. You’ll notice links that had icons will shrink down and completely lose the icons on smaller screens.

It is true that graphics can improve navigation. But there’s only so much space on mobile and you have to be judicious.

When restyling type always consider horizontal and vertical space issues. Mobile users deserve a workable solution even if the page has to be lengthened considerably just to hold everything.

Restyling Images

One other consideration is the use of widescreen images. Since most monitors are widescreen the web has adapted to include images that are typically wider than taller.

Mobile responsive sites either have to shrink these images down or rearrange them to fit properly.

UPP Broadgate Park has an interesting solution where the top header image resizes to fit vertically. The image slideshow is built to fit the full width of the screen, but any screen smaller than 500px gets a lengthened image.

This adds a tremendous amount of vertical space into the page which can be good if you’re looking for that.

I’ll admit this is a tough strategy to pull off. You need to know your image sizes and the focal points of each image to properly resize them.

But if you’re willing to put in the effort it will ultimately lead to a greater experience.

In other scenarios you might choose to hide longer images and completely remove them from the mobile experience. The Golden Isles website uses this technique on the top header slideshow.

All other images on the page get rearranged into single columns with added white space. But since the carousel doesn’t add much to the user experience it can be hidden for mobile users.

Consider how you want to handle images and how much space you need between them. A thumbnail gallery might be closer together than a slideshow or a featured stock photo.

Each scenario is different so be willing to try different strategies to see what works best.

Wrapping Up

White space is a crucial aspect of web design and it plays a big role in content flow for responsive websites. Most designers can estimate white space values by eye, but it helps to understand why you’re adding whitespace into a design.

If you think of any related trends or tips for crafting responsive white space feel free to drop a comment below.

Use of Web Design For Billing Forms

Each ecommerce site has its own checkout flow moving the user from a shopping cart to the final purchase. This differs based on what the user is buying and their intentions, but finalizing payment is always the toughest part.

Your billing fields need to really keep visitors engaged and encourage them to complete the checkout process. I’d like to share some usability tips you can follow to improve your billing form designs and increase user checkout conversions.

Clarify Intent

Your goal is to design forms that encourage users to buy. So you want to make this process as simple as possible, especially at the billing phase where money is on the line.

There is no single way to clarify an entire billing form. You just need to keep each field clear and concise, never let the user feel confused or unsure of their decision to check out.

Here are some techniques you should keep in mind that work well:

  • Larger typography
  • Labels instead of placeholders(or both)
  • Extra padding between fields
  • Custom tabindex for easier navigation

Also add plenty of icons to demonstrate visuals where needed. The Threadless checkout page offers a great example.

The credit card icons make it crystal clear what the user is selecting as a payment method. The same goes for icons lower in the field which clarify the location of CVV numbers.

Do everything in your power to let the user know exactly what they’re doing at each stage of the billing form. There should be no ambiguous terms, no unclear directions, and plenty of tooltips/icons to answer any questions along the way.

Custom Input Spacing

Some data requires a certain text format like phone numbers and credit cards. This spacing can be dynamically generated on-the-fly using JavaScript and it’s one of the best techniques you can add to your website.

Custom spacing lets users know they’re on the right track when filling out form fields.

You can do this with zip codes where the form automatically tabs onto the next field once the user enters the proper digits for a zip code. Same with phone numbers where you can auto-style the digits to match a phone number. You can see this on eBay’s checkout form.

But the most useful is the credit card 4-digit spacing format. Credit card numbers are long and they’re easy to screw up. An incorrect CC number also means the order will completely backfire.

This custom CC spacing in your billing field makes it that much easier for customers to enter their numbers and double-check that they’re correct. You can find a nice example on the BodyBuilding checkout screen which also includes error messages when you have an invalid entry.

There are tons of free plugins you can use to create the auto-formatted text. Most run on jQuery but you can find some vanilla JS solutions too.

Simplify The Action

Some checkout forms are longer than others so the process always feels different for every website. This can be confusing for many visitors and it’s one reason why ecommerce stalled for so long in the early 2000s.

But regardless of your form’s length there are two ways to design around this:

  • Smaller forms should try to keep everything on one page for simplicity
  • Larger billing forms should break into steps with breadcrumbs

For example, the smaller billing form on SEMrush is fantastic. Very quick to use, easy to read and everything you need to know is clearly visible on the page.

But I don’t mind a longer checkout process so long as it has breadcrumbs. These offer a clear indicator of how far the user has traveled into the checkout process and how much longer they have before completion.

This confidence makes it easier for someone to commit to the billing form at each step. If they have no idea when the checkout process ends they might get confused, anxious, or just annoyed and leave.

Breadcrumbs are huge and I absolutely recommend adding them to larger billing forms. The Wiggle checkout uses clear breadcrumbs at the top of each form page.

Smaller & larger billing forms can work well just varying different techniques. Be willing to try both!

Run some A/B split tests and see which style performs better. You might be surprised at the results.

Recap The Purchase

Once the user enters their billing information it can be tough to hit that final “submit” button. Hesitation is the death of conversion.

By recapping the purchase order you give customers a final peace of mind. They can see everything at once from the items they’re purchasing to the total fees(plus processing) and even the delivery date if applicable.

GitHub’s pro upgrade billing field recaps the purchase all on one page. It clarifies how often you’ll be billed, what the final fee is, and when you can expect the next fee. Most fields are filled out from your profile so if you have an account this process is very quick.

Another example is Amazon, the mother of all ecommerce shops.

Once you enter all your details like shipping address & payment info, one final screen recaps the whole order to make sure you really understand what you’re purchasing.

This reduces returns for wrong items and helps the customer feel confident when they press that “purchase” button.

Recapping the order can be tough on a smaller billing form. But just be openly transparent with your customers and share as much detail as possible.

Wrapping Up

Your site’s billing form is the only thing standing between a potential customer and a paying customer. That’s why form optimization is so important.

I hope these trends can help you craft usable and encouraging billing forms that’ll bring more revenue to your shop and all of your clients. Optimization is an ongoing process but if you’re constantly testing new ideas you’ll always be ahead of the competition.

Designing Forms for Upgrading Content Registration Taking People’s Attention

The best email opt-in forms use a lead magnet to draw attention and gather emails. You can spend weeks tweaking a signup form but the biggest factor is usually the content offer.

There’s a special type of lead magnet called a content upgrade which gets placed on a relevant piece of content. This usually converts much higher and it’s a great way to add value to your subscribers.

In this post I’ll explain the basics of an e-mail opt-in content upgrade, how you can design one yourself, and some examples you can study to get the ball rolling.

Intro To Content Upgrades

The idea behind a content upgrade is simple: you offer something valuable to visitors in exchange for their email.

This valuable item could be a free PDF guide, icon set, photography pack, or really anything. But this technique works best on specific posts where your free resource actually upgrades the existing content.

So for example, if you write a post about “best icon design styles” you might add a small opt-in form at the bottom of the article offering a freebie icon set. When the user enters their e-mail to sign up they get a link to download the icon pack & they get added to your list.

This resource is relevant to the content and valuable to the reader. It’s a fantastic example and just one of many you could run.

Backlink expert Brian Dean has this tactic scattered on many of his Backlinko posts and they work well. He suggests thinking outside the typical “norms” you see in most blogs.

Try to offer genuine value to your readers and make it almost impossible for them to pass over your freebie.

No matter what you offer the end result is always the same. You want to add more subscribers to your email list. And the way you’re trying to gain those subscribers is always through some type of content upgrade.

You just need to decide what sort of upgrade you can push that’ll encourage more signups. That’s the secret sauce to any great content upgrade field.

What To Offer

If you’re stuck for ideas you should find posts that get the most traffic and design around those.

Dig through your analytics and find your top performing pages. Think about what sort of resource(s) you could offer on that page that might convert.

One thing people don’t want is something unrelated to the content. If people land on your post about React.js they probably don’t want a PDF on the 10 upcoming design trends for this year.

Instead they might want a PDF on React.js trends, or the best learning resources, or maybe a look over the history of React.js as a PDF/infographic.

The sky’s the limit on what you can offer. Just make sure it’s fairly short and genuinely relevant to the content.

Here are some ideas to get you started:

  • A small how-to or PDF guide
  • Free resources like photos, icons, code snippets
  • Extra tips/tricks on the subject
  • Behind-the-scenes tips from experts in the industry
  • A detailed “getting started” guide or case study

Picking a resource to offer is just the first step, but it’s an important one. If the freebie sucks then you haven’t really upgraded your content at all!

This example is a post about floating sidebars in web design. The author has a content upgrade with a swipe file of copy, code, and resources for anyone building floating sidebars. This relates directly to the post and it probably wasn’t too difficult to compile these resources either.

Don’t spend too much time thinking up ideas but make sure you settle on one you like. From there you can develop the resource and edit your blog post with an opt-in form.

And if you’re really stuck on ideas then read through this article to get the juices flowing.

Marketing Your Upgrade

How you showcase the upgrade is yet another crucial aspect of the opn-in form. You might be offering the coolest PDF guide in the world. But if nobody knows what it is then why would they want it?

Written copy sells and it’s always something you need to consider. Sometimes you can get away with smaller text-based forms or simple CTA buttons. The only way to know is through A/B testing so try a lot of different styles to see what works.

And try adding multiple opt-in fields within the post. You could have one near the beginning, another fixed in the middle, and one at the very end of the article. This way readers continually see what you’re offering and hopefully it draws their attention.

The example above from Authority Hacker doesn’t use any special graphics or previews. It just has large text with bright colors to grab your attention.

This is certainly a way to go if you can’t find any graphics to use. But you might see better results if you can get screenshots from your resource added to the form.

A much simpler example can be seen at the bottom of this post by Wishpond. It just has a blue CTA button with a bit of white text.

Each piece of content has a unique target audience so you’ll want to design your opt-ins for those readers. There isn’t really a “right” way to do this.

I recommend studying your favorite blogs and keep a sharp eye for these content upgrades. They’re hard to miss and the ones you do miss probably aren’t that good.

Read their copy and see how they push their upgrade. Does it make you want to sign up? Is there incentive?

This Forbes post just has a simple text link near the bottom of the article. No button, no graphics, nothing. Just a link pushing an e-book on the billionaire’s secrets of wealth, a very magnetic link which ultimately leads to this lander.

Follow whatever marketing strategies work best for your resource. Be willing to test and don’t get stuck with one specific method.

The more marketing techniques you try the more likely you are to find one that converts well.

Visuals Sell

Along with amazing sales copy you should also try adding visuals to the top-in form.

These can be simple graphics, mockups, photographs, or pretty much anything that represents your freebie. It doesn’t matter what you’re giving away as long as it’s clearly noticeable.

Take for example this opt-in field in the sidebar of Michael Hyatt’s website.

It specifically targets the headline of the post by promoting a free e-book on shaving 10 hours off your workweek. The book cover mockup is placed into the form to draw attention.

You can find tons of free ebook mockup PSDs in Google which you can modify for your opt-in field. Just take the front cover design and paste it onto these skewed mockups. A gorgeous eye-catching visual ready in minutes.

But visuals aren’t just pictures or graphics. You also want to think about your opt-in field colors, fonts, and related aesthetics like spacing.

According to Brian Dean’s post a yellow opt-in box near the top works very well. This color draws attention and if you’re offering something cool it will get people interested.

But just because one visual technique works on Brian’s blog doesn’t mean it’ll work for you.

Testing is the name of the game so don’t get discouraged if you can’t find a winning design right away. Just be consistent and keep trying.

A great content upgrade doesn’t always sell itself so you’ll need to push for growth. But it also doesn’t take much to get people interested. Place yourself in the shoes of a typical visitor and design your opt-in form with the goal of getting their attention.

Moving Forward

Content upgrades should become a staple for any site with a newsletter. They do take patience to set up and you’ll need to put in effort creating a valuable asset.

But if you already have a large blog with a sizable audience then you’ll have content ready to optimize. Hopefully the tips & examples in this post can get you started on the right foot.

Proper Tips for Designing Newsletter Layouts

Newsletters still offer the best way to reach your audience directly and increase sales. But if you’ve never managed an email list before this can be an intimidating process.

Once you have a list you’ll need to send out emails that connect with subscribers and offer real value. This means great content and great design all wrapped up in a pretty bow.

Let’s dig into the UX side of email design to consider what makes an email engaging. This goes far beyond a great headline and once you know how to design emails you’ll see incredible results with your open rates.

Single-Column Layouts

Emails need to be designed smaller because email readers like Outlook have more restrictions than web browsers. This means your average newsletter is rarely larger than 600px wide, so it’s best to use a 1-column layout or at most a 2-column layout.

When you plan your content it’s good to organize this into a single column format. Think about how you can organize your writing so it flows down the page and offers an easy reading experience.

Take for example the WistiaFest 2017 newsletter design. Each section of the design spans the entire width of the newsletter so content streams down straight in a clear linear fashion.

Slanted angles and custom graphics help loosen up the stiffness, but ultimately it’s still just a one column layout.

You’ll want to be conscious of how your content is organized and how readers will consume this content.

If you use alternating patterns with a 2-col design you can split your layout into two columns as well. Take for example this design from The Short List.

Each photo alternates in a grid structure alongside content and a CTA.

You can follow this same two-column strategy if your newsletter has enough content to match. Just make sure you leave plenty of room to read the information and to hopefully make your email responsive as well.

Include A Strong CTA

If you’re looking to increase engagement then you need a call to action.

This is a button or link that encourages the user to click and do something. This could get people to continue shopping on your store, or to read through your latest blog post, or to download your new ebook.

Regardless of what you send in your email it’s always good to include a CTA. And even if you’ve never designed a CTA before you can learn a lot by studying other examples.

Here’s a design by Postmades with a share $100 message across the whole email. The entire purpose of this email is to have people send a $100 free delivery credit to any one of their friends using a special code.

The CTA reads “Send $100” which is pretty clear.

When writing the button copy always stay focused and be quick. Emails are like a sign in a shop window; skimmed quickly and meant to lure people inside.

Another cool example is this design from American Airlines. The CTA “check in now” is pretty direct and there’s no confusion about the purpose of this email.

You can also try running two CTAs next to each other if you have a larger audience.

This works if you have a more general goal in mind with a large subscriber base. For example Adidas has two bright yellow CTAs in their email: men’s and women’s sneakers.

The goal is to get people onto the website and you’ll want to send them to a place where they might actually buy.

All of these ideas are just examples so use your own best judgement and see what type of CTA works best for your newsletter.

Images Above The Fold

Since emails are so basic you can’t really do a lot with CSS3. They also don’t have a navigation since you just want to get visitors right onto your website.

Images are great for immediately grabbing attention and selling an idea. That’s why I always recommend adding a highly-engaging image right above the fold near in the header of your newsletter.

This image could be a stock photo or a illustration/logo for your company’s brand. It could also be a product photo like this one from the iPhone 7 red launch.

Following in Apple’s traditional minimalist style it makes sense that their photo is very basic.

However this is all you need to grab attention if your product is interesting enough. The goal is to have just enough visual information to get people curious and to click your CTA.

This slightly different example from Of a Kind pushes specific products with real sales photos.

Great photography can always pre-sell whatever you want visitors engaging with. Sometimes that is literally selling something, but other times you’ll want to sell a blog post or maybe your social media profiles.

Use photos as engagement tools to grab attention and share information visually along with text.

Box & Grid Lists

If you get a lot of newsletters then you probably recognize the box/grid layout design.

It’s very common with emails because they have a few distinct traits:

  • Narrow page designs
  • Short copy
  • Meant to be consumed quickly

Subscribers typically open your newsletter with only a few minutes(or seconds) to spare. Organizing the content into a nice grid is the best way to showcase everything you’re promoting.

This holiday newsletter by Google is a fantastic example of the grid system promoting their products.

You’ll find a clean product image floating to the right along with a small headline and a CTA link on the left. Once the reader recognizes this pattern they’ll have an easier time skimming the document.

But you could also do fullscreen box sections like Bose while alternating colors for contrast.

When you design with boxes you’re trying to grab attention and clarify the purpose of your newsletter. High contrast colors have the same effect so they’re perfect if you can design such a layout.

Notice how the Bose newsletter also adds incredible photography into each box.

Combine all the techniques from this post into your design to further increase engagement.

You don’t have to look at these trends as separate items. They’re individual pieces that ultimately make up a great newsletter design.If you’ve never created a newsletter before then these tips will prove more than valuable in the design process. As long as you focus on simplicity and place the user experience first you’ll create a very engaging newsletter.

Difference between Design and User Experience

The design world is abuzz with the rise of online magazines. But the vast majority of these sites run on blogging platforms like WordPress, and they operate almost exactly like traditional weblogs.

So where does someone draw the line between a traditional blog and an online magazine? And if you’re thinking of launching a new blog/magazine how do you differentiate yourself?

Let’s delve into this subject from a designer’s perspective. The growth of online magazines means that more publications are going digital with plenty of opportunity for newcomers to get into the action.

Modern Online Publishing

Digital publications have such a wide audience that it almost makes more sense to go digital over print. Most people have digital e-readers and in this past year mobile use surpassed desktop for the first time ever.

But what makes an online publication seem more “authoritative” like a magazine? What differentiates between general blogs and online magazines like Time, Inc, and Forbes?

It seems like many factors are involved but this concept of “authority” is definitely a big one, both in design and content.

For example the TechCrunch wiki entry doesn’t describe the site as a blog at all. Yet if you go back far enough you’ll see it was called a blog when it first started.

The same can be said for Mashable which is now a huge online media publisher.

So what differentiates online publishing from “blogging”? The act of writing content and publishing online is widely considered blogging, but a “blog” carries the connotation of being:

  • Generally personal in nature(maybe 1 writer)
  • Small in audience and not much traffic
  • Not made specifically to earn money

I consider these ideas to be generally true, yet all 3 of these rules can be broken.

A blog could certainly hire writers, and blogs can have massive audiences and make good money. The creator of the Modest Man blog grew his audience and advertising base to reach $10k/mo and it still feels like a blog.

Not to mention Pinch of Yum calls itself a food blog, yet based on their income reports the blog is really a fulltime business.

This proves there shouldn’t be an inherent negative connotation with blogging. Online magazines just have larger publishing schedules and generally run more authoritative brands

This is the real crux of the discussion. I’d argue the real difference is in branding, style, and presentation. This can all be explained better using examples so let’s take a look at this blog/magazine divide to see where the line is.

Magazine-Style Theming

If you want to be considered an online magazine then you’ll want a magazine theme.

This is a crucial aspect of running a site because looks do matter. Visitors judge your website in the blink of an eye, usually between 2-4 seconds. Your design should immediately let visitors know that you’re an authority on whatever subject you cover.

If you already have some authority then you can get by with simple designs like Craigslist.

But with millions of blogs already online you’re competing against an army of sites, many using very poor designs. If yours blends into the crowd then you stand no chance of ever breaking outside the label of a “generic blog”.

Take a look at Fast Company’s homepage and look at the diverse content styles. Many different thumbnails, headers, and column structures all work together creating a unique magazine look.

Following this pattern on your homepage is a good first step to appear more like a magazine. Even if you only update once or twice a month it’s better to look authoritative right away.

If you’re looking for examples to whet your inspiration these posts should get you started:

Authoritative Branding

To move beyond a simple blog you need to offer more than what most blogs offer. You need to create a brand around your website and publish more than just articles.

Look at the incredible rise of Smashing Magazine. Many would still call them “just a blog”.

But if you dig deeper you’ll notice it’s really a massive media company. They publish their own books and host their own conference.Smashing Magazine isn’t just a digital blog anymore. It’s a complete authoritative brand in the web design/dev space.

You certainly don’t need to push your blog this hard by launching a conference every year under your brand. There are much smaller projects you can tackle to build your site’s credibility.

These are 4 easy ones that seem to work well:

  • Offer print/digital magazine subscriptions
  • Start a dope podcast
  • Create a related newsletter(or a few!)
  • Setup your own ecommerce/dropshipping shop

The first point on that list may seem crazy. But it actually works well for the site Texas Monthly.Notice that site is basically a blog, yet it gives the impression of being a newspaper/magazine. Looks matter!They have an entire magazine archive where you can browse and subscribe to all their issues. This is one strategy that requires a lot of effort, but it also incentivizes readers to sign up to your site and ideally pay for the value.

This lets you create a true magazine presence while also monetizing your content. The toughest part is actually getting people to subscribe. But that’s just part of online publishing!

If you want to push beyond blogging try to find ways to expand outside your writing.

Content & Authorship

There’s usually a clear divide between the content you find on a blog and what you find on magazine sites.

Think about the type of content you’re publishing. Is it all personal opinions, quick posts, random thoughts or colloquial reviews? That’s usually the type of content you find on a blog. And that’s totally fine!

For example Malan Darras runs a personal blog covering his work in marketing, music, and just general life. It’s an awesome blog and it never needs to be anything more than that.

Understand your content goals and clarify these early on. A large magazine-style content site is not for everyone. It usually requires some level of journalistic integrity and a clear goal with content.

Magazines lean towards journalistic content because this is where they originally come from. Industry news in trade magazines, op-ed pieces, interviews, how-tos and a mix of related content all come together to form an entertaining magazine.But remember that longform content isn’t always the right goal either. Sometimes you just need to follow whatever you want to publish, even if it seems ridiculous.

Few people look to BuzzFeed for authoritative news but the site still earns well and it uses virality to its advantage.

One other point to mention is authorship. Since blogs are typically a solo effort you won’t always find multiple authors or custom author bios. However magazines typically hire writers or bring on guest writers, so adding bios to your posts can give this impression.An author bio doesn’t guarantee much authority. But it definitely helps!

If you can appear to be a larger site to most visitors then you’ll leave a lasting impression that goes beyond simple blogging.

Run It Like A Business

Tons of people launch blogs just for fun and maybe a little extra cash on the side.

But nobody launches a magazine for fun. Publishing is a business, and if you plan to launch one you have to treat it as such.

This isn’t something the user will see on your homepage directly. It’s subtle.

It’s the way you brand your site, your content guidelines, your newsletter layouts.

Online magazines operate like for-profit businesses with KPIs and clear goals. If you can run your blog like a business then it might scale large enough to actually become one.

Let The Labels Go

Remember that the goal of both blogs & magazines is to publish great content and share it with the world. The labels “blog” and “magazine” are still new to websites, and online magazines were basically non existent 10 years ago.

But there is most certainly a difference between blogs & online magazines. The line just isn’t very clear and it’s something we’ll discover more as time goes on.

I do hope this article clarifies some key points that can help anyone turn a blog from a simple WordPress site into an authoritative and trustworthy magazine brand. And if you have any other ideas or suggestions drop a line in the comments area below.

How to Implement Good Consistency in Web Design

There’s tremendous value in consistency of digital interfaces. People browsing the web encounter dozens of websites that all have different styles, yet most feature very similar page elements.

Most designers don’t even think about these features. Page headers, navigation menus, body copy, CTA buttons, the list seems endless.

By designing with consistency you’ll learn how to create interfaces that encourage typical user behaviors. Your layouts will build trust and teach users repeatable patterns that help them work through your site much quicker.

Design For User Expectations

Most users expect websites to work a certain way. It should scroll vertically, links should be clickable, and the navigation should be visible right from the first page load.

How you design these expectations is completely up to you. But when you’re designing for consistency you want to keep a clear uniform design across the entire layout.

For visual consistency on the web I think is a pristine example.

This site has many portals linking to their forums, their eCommerce shop, and their online help guides. All of these pages have the same design and the same navigation to keep them consistent with the entire site.

Users don’t want to think. They just want to act and get results. Consistent design helps this happen.

Do the thinking for your user to understand what they need. How would you design a blog page to encourage reading? What about an ecommerce shop to encourage checkouts?

Think about these questions yourself and apply them to your web projects. Which elements should be consistent on every page? This line of thinking always leads to solutions.

The homepage of Sketch is very consistent with certain user behaviors and expectations. The page has two CTAs: one for downloading a demo and one for buying the program.

But not everyone who visits the site wants either of those options. The top nav becomes the obvious next step.

Someone new to the site might care about features or how Sketch works. But an existing user might want to look into extensions or get support.

Add consistent elements with clear in goals. If you know what users expect to do on your site then you can design for those expectations.

One more point to consider is with redesigning a layout. The popular social news site Reddit has been online for well over 10 years. Over that time they have made a few changes, but generally the site looks very similar today as it did back in 2005.

If you’re making minor changes to improve performance and optimize the user experience that’s always welcome. But drastic abrupt changes to a design usually throw people off.

Consistency goes beyond keeping pages similar and usable. It can also mean staying consistent with redesigns if your site already works well.

Intuitive Navigation

Users should understand a lot about your site just from the header. This area should explain what the site does and what it’s about, not to mention the top navigation links.

A well-designed navigation isn’t enough. You’ll also want great copy to sell the pages and let visitors know exactly what’s on your site.

Nav text can be restyled in my ways including font size, writing style, and interface elements like hamburger menus for responsive navigations. The key is to stay consistent and keep these links easy to use.

The nav links on P’unk Avenue are quite unique and rather detailed. But they work well for this site because they help explain what’s on each page.

Their nav links feature descriptions on larger screens, but rely on the hamburger sliding menu with simple links for smaller screens. An excellent design style for anyone creating custom layouts with detailed aesthetics.

For larger nav menus you might have to add sub-menus or links in a larger list. The Guardian has a fine example of this on their website.

When you browse through any of the top categories you’ll get a sub-menu directly underneath. This can work like a breadcrumbs bar or sub-categories based on the primary link.

The consistent style and multi-link menus are great for big sites and blogs. As users get familiar with those links they’ll have an easier time browsing through content.

Repeat Layout Styles

This technique breeds consistency and it can work on multi-page sites or singular landing pages.

The goal is to re-use similar elements all throughout the page, but with different content & graphics.

By repeating certain styles you’re creating a theme on the site and building comfort with users. Consistency breeds familiarity and this is what you should be going for.

Notice the repeated patterns on the Webflow homepage that alternate between colors and different design styles.

Each section features a screenshot of the app listed alongside main site content. This style is beautiful and it’s one of the cleaner ways to craft a consistent design.

Note this style is predominantly found on the Webflow homepage but it could be repeated elsewhere. That’s why consistent elements are easier to use across the whole site.

But aside from page elements you can also repeat styles in your design. Take a look at Algolia for one example.

This site uses heavy diagonal lines between page sections along with darker background colors. Headers all have a small underline and the text all follows a similar size & thickness.

If you dig deeper into the site you’ll notice the box shadow effect is replicated throughout. This is a small touch but it’s one of the easiest ways to build visual consistency.

Try not to get too lost in repetitive page elements.

Instead think about how you can make the interface easier to use and what that might entail. Most of the time you clone what you’ve already done and keep using those patterns.

Keep Branding Consistent

Web branding is a deep topic and it’s more than a simple identity.

You also need to consider page colors, textures, typefaces, padding, and icons/elements related to the brand. There are no right or wrong ways to brand, just some ways that work better for some websites.

MailChimp does this by repeating their branded monkey friend everywhere. The site has a fixed top navigation which includes this logo on every page.

But you’ll also notice similar typeface designs and colors with similar text styles. This may seem like an obvious thing to do, but some designers underestimate how much this can impact branding.

An even better example is the Docker homepage with their cargo whale logo.

This creature finds its way into almost every part of the site. The header, the footer, and most content pages also feature illustrations of our Docker ocean friend.

You don’t need to create a mascot just to build consistency. It’s merely one more tool you have in your arsenal for digital branding.

If you study some of your favorite sites you may recognize subtleties you never noticed before. This is the best way to get ideas for creating consistent branding in your own projects.

Wrapping Up

As you browse the web you’ll notice consistency across nearly every site. But since each project is different you need to think about the user’s needs before designing anything.

The one thing you can guarantee is that every single user wants a consistent experience. And I hope these tips can get you thinking more about consistency in your everyday web design work.

Suggestions for Developers and Designers web design

If you’re a web designer or developer, it’s always smart to keep up with the latest website building trends. That doesn’t mean that you have to be caught up in the “innovation” rat race.  Even though innovative work, ideas, and technologies are what many clients are asking for.

There’s no need to chase after the newest and shiniest innovative technics. They can be a never-ending waste of your time and money. A simpler solution is to take advantage of innovative concepts and designs offered by others. You will find 10 examples of that described below.

All the Innovation You’ll Need is But a Single Click Away

Be Theme is the largest WordPress theme ever, and a Top Five ThemeForest best seller. Be’s 260+ pre-built websites make it easy for you to do quality work, and do it fast.

So, where does the innovative part come in? It’s build right into each of these professionally-designed pre-built websites. They come with a 1-click installer, so these innovative designs are yours at a touch of a button. This cool 40 second video shows you how easy it all is.

It’s a win-win situation for every type of client you’re likely to encounter.

Your eLearning clients will be delighted with your ability to produce such an innovative and easy to work with website for their eLearning platform, in such a short period of time. It’s responsive as well, which should make your client’s students happy and always eager to come back for more.

Here’s a theme that provides an excellent solution for a client who sells a handcrafted product. Be Craftbeer’s large image and neat JavaScript effects focus on the product, while the overall design structure and attention-getting buy buttons make this an ideal choice for many different small businesses.

Interior design or architecture clients often have trouble finding website designers/developers who truly understand their businesses. That won’t be the case if you use this pre-built website to show them a prototype of what you can do for them.

Creatives can be fussy. Designing a website for any craftsman or artist can have its own set of challenges; especially when it relates to producing an innovative design for a website. Be Artist’s customizability, use of parallax scrolling and JS portfolio filtering combine to present creative’s work in a unique, pleasing way.In today’s food-oriented culture, your catering industry clients are going to look to YOU to set them apart from the competition. That’s hardly a problem when you have Be Burger to work with. The large mouth-watering images, easy-to-order forms, and the overall structure of this pre-built website combine to make conversions happen.The clean, crisp images, eye-catching animations, and cool parallax effects that are interwoven in the various pages makes Be Sports Club the ideal vehicle for you to produce a website that health and fitness club clients will gladly stand in line for.

Be Hotel2 is designed to impress your clients in the travel and lodging industry. These are clients who expect a great deal, and this is THE pre-built website that allows you to make that happen. Perfectly structured, and with the focus on images, you can easily command a premium fee with this pre-built website.Be Restaurant gives you the capability of building a 5-star website for a 3 Michelin star restaurant or for the cozy bistro down the street. Producing an unusual website like this one with its special slider effect will make any client in this competitive industry a satisfied client indeed.

Tech startup owners thrive on innovation, and they will expect nothing less from you. With Be VPN at your fingertips, you won’t have to go on a lengthy search for cool, new ideas. This is the go-to website for this often somewhat fussy and demanding clientele. It’s clean, structured, corporate, and friendly.Be Car is the go-to elegantly designed pre-built website when your client is in the business of selling luxury cars with their clean lines and elegant interiors. The clever use of white space and stunning hero image will make you the toast of the town among this ofttimes pretentious clientele.

Ultimate Benefits of Jumping Off the So-Called “Innovation” Track

So, you’ve made a leap of faith, and jumped off the innovation track.

Now what?

For one thing, you can spend more time and effort focusing on your client’s real needs.

  • No more time spent scrolling through hundreds of themes. With Be Theme, you can deliver top-quality, innovative websites. This will lead to thrilled clients, repeat clients, and greater financial security.
  • You’ll leave the competition in the dust by delivering a custom website in less than 4 hours for your client. And you will do that no matter what industry or niche your client is in.
  • As the word of your expertise gets around, clients will seek you out. No more having to work with difficult clients to pay your bills.
  • You’ll find yourself creating amazing websites for two of the best types of clients – repeat clients, and referred clients.

And there you have it. 10 diverse client types with 10 innovative websites would seem to be a difficult challenge without Be. If you let Be Theme provide the innovative concepts to get you started, it could hardly be easier.

Be’s 260+ pre-built websites cover most of the niches you’re apt to be working with.  You can still look forward to new and different ones showing up each month.

Best and Finest Practices UX Website Design

User experience is an integral part of any website design and there is no doubt about that. However if there’s a single industry where user experience matters more than anything else is, of course, hospitality.

Hospitality is all about meeting and exceeding guest expectations and providing stellar guest experience from the very first touch point till the last.

And in the digital era that we live in, hotel website is quite often where the guest experience with a hotel starts. At least that’s what every hotel brand strives for: direct bookings. So as a hotel owner you want to make sure the user experience of your website is as good as the guest experience in the hotel itself.

To do so you need to understand why travelers visit your website in the first place. What are the main traveler intentions? Once you know the answer to this question, you will be able to meet traveler expectations with a matching, user-friendly website.

Understanding Traveler User Behavior

As a designer you will need a little bit more insights into hospitality industry and traveler behavior analysis to come up with a well-thought user experience flow that actually converts.

According to a study conducted by Google, on average 60% of travelers are turning to search engines first vs. hotel website for online trip planning.

This means that when users visit your hotel website they most probably have already done some sort of research and want to;

  1. Compare prices on your website versus online travel agencies, like and
  2. Get more information about the hotel, like extra services, more photos, videos.
  3. Check to see if there are any special deals or package offers for selected dates.
  4. Contact the hotel directly to arrange for custom requests or direct bookings.

Generally, these are the main guest intentions when visiting a hotel website.

Now let’s see how exactly we can design the user experience to cater to those needs.

1. Optimize Booking Flow for Conversions

This should be your mantra. Nothing else matters, not your aesthetics or taste, not even user’s taste. You might think this is not how user experience should work, but as long as the website converts well, you are doing the right thing. And that said there is no success formula for a hotel website.

However, there are some best practices you should consider.

FIrstly, the booking window should always be in a visible spot and be clear with less design and more usability.

Secondly, users need to be able to compare room types, rate types easily to make decisions quickly. We need to help them decide by clearly articulating rate differences and providing a good amount of visuals for room types.

Last but not least, ask as little information as possible upon check out. Make sure to provide a clear summary of the booking and optimize the checkout form according to numerous research and best practices.

2. Think Mobile First

There is no need to explain the importance of having a mobile ready website. But we should stress the benefits of thinking mobile first, which means designing for mobile screens first and then taking it all the way to the biggest screens possible.

This is especially important for travel industry where users make purchase/booking decisions on the go and there is a sense of urgency, which means you need to design for maximum usability rather than maximum functionality. Although it is best to provide the same functionality to mobile users as to the web users, but if you can’t, you might want to provide a link to view the full website.

3. Visual is Key

When it comes to hotel bookings, users crave high quality photos of every single corner of your hotel, including hotel grounds, indoor, exterior, all of the facilities and especially room photos. One of the reasons users check multiple websites before booking is to find the most accurate information about the hotel, better quality photos, videos to make a more informed decision.

As a part of flawless hotel user experience, it is important to create a visually compelling website. Keep in mind though that visually heavy website tend to load slowly which is a huge issue for mobile users.  According to Kissmetrics, “40% of people will abandon a site if it takes longer than three seconds to load.”

So be sure to implement all of the techniques for faster loading.

4. Provide better Customer Experience

User experience and customer experience in a traditional sense are closely related and can’t exist without one another. Your website UX can thus make or break your hotel’s overall guest experience. So it’s best to start providing exceptional level of customer service from the very first touchpoint which is quite often your website. This is one of the biggest advantages of a hotel brand website as opposed to aggregators like, Expedia, etc. These online travel agencies can never provide the personalized guest service on their website the way a hotel can.

First, make sure there are multiple ways to get in touch with your hotel on your website; landline phone number, skype, contact form for reservation related inquires and special requests, as well as a live chat.

Secondly, offer special add-on services, which are not available on any other sales channel. It can be as simple as a welcome drink, but you can also go all the way and offer all your paid services to be booked online, perhaps with a small discount.

These will make the user feel the difference when booking with a hotel directly.

5. Top It With Credibility and Social Proof

One of the most important factors affecting customer buying decisions is social proof, which comes in so many different forms: testimonials, reviews, video blogs, social following, etc. Hotel guests are no exception. In fact, according to Tripadvisor, “77% of travelers always reference reviews before booking travel accommodation”. But the tricky part here is the source of the reviews.

While this might not be the most aesthetically pleasing addition to your website design, but adding a tripadvisor reviews widget to your homepage or designated landing page is much more convincing than your own website reviews.

Final Thoughts

Building a strong hotel website is a challenge both in terms of marketing and in terms of UX design. It usually takes more than one iteration to end up with a functional, conversion-optimized and user-friendly website, so make sure to make data-backed decisions and always test with real users.