, ,

6 Places You’re Making a Fatal Website Design Mistakes

post image for 6 Places You're Making a Fatal Website Design Mistake

The Internet is a vast world of information. There are countless websites out there, so it’s natural that we all make mistakes and slip up occasionally. Check out this article about how When it comes to website design, how can you know for sure if your site is on the right track? The answer lies in checking for these six common fatal website design mistakes:

  1. Not having a clear call to action
  2. Not using enough white space
  3. Too many fonts on one page
  4. Poorly placed navigation buttons
  5. Using too much text in your design 
  6. Not making the website responsive for mobile devices

Check out this previous article

4 Step Process to Building a wordPress Website

Not having a clear call to action.

One of the essential things for any website is a clear call to action. A visitor should know what they are supposed to do when visiting your site, and it’s up to you as the designer or owner of that site to make sure this message comes across loud and clear with a prominent CTA button on any page you want your customer to land on.

But not all calls to action are equal. Most people spend so much time trying to craft the perfect message to promote their product or service, yet they fall short of winning. That is because the call to action needs to tell the reader what to do, and it needs to be motivating enough for the reader to take the action you want them to do. 

A general rule for a call to action is typically five to seven words, but that can vary. A call to action should concisely get the point across and not include unnecessary information such as how you found out about this article or what your opinion on it may be.

Here are five popular calls to action formulas used and are effective:

  1. Order your _______ today!
  2. Get started now!
  3. Start your free ________ now!
  4. Get your free _______ today!
  5. Try it free for ______!

Not using enough white space.

White space is essential to give the user a break from reading and makes it easier for them to skim your content. White space also helps with how readable text is, even when there are not many words per line.

A good rule of thumb is that you should use at least one more inch of white space than you have text on each page or screen.

White space, also known as negative space, can be described as an area on a webpage that has nothing but blank or empty background. White space allows for easier reading and skimming of your content because it gives users’ eyes a break from the constant text.

A trick that can help eliminate or break up large blocks of content is summarizing them and using them as bullet points.

Too many fonts on one page

Using too many fonts on one page can be distracting for the reader, and it is usually an indication that you are using this technique to make your text more interesting.

While there’s nothing wrong with changing font styles every so often, especially in larger chunks of content, too many fonts can be devastating. If you have too many different fonts on a single page or screen, then they may start competing against each other as well as from what people have initially been looking at when they came to your website. This will confuse readers in which case could result in them leaving without taking any action.

The best solution is to use a maximum of two fonts per webpage unless there is a good reason not to do so (such as conveying multiple moods). It would be best to remember that readability and consistency are most important for anyone looking at your website.

Bad website Navigation

Good website navigation is crucial for any site. Whether it’s a simple blog, an e-commerce store, or anything in between, your visitors need to be able to find the information they’re looking for as quickly and efficiently as possible.

Here are three quick ways to improve your navigation:

  1. Stay away from generic wording such as “services” and “products.” It is best to use descriptive words that describe the contents of the page. 
  2. Try to limit how many pages you have on the navigation bar. Having too many navigation tabs can overwhelm and distract them from the reason they went to your website in the first place.
  3. As creative and unique as you want to be, sometimes sticking with the nor can yield significant benefits. Sticking to a horizontal nave bar above the page is something that many people expect to see and is often the first place on the screen they look at while visiting. 

Also, when you have large blocks of content on a page without links anywhere nearby, then your visitor will spend time scanning back and forth until they finally find one that jumps out at them. This can lead people to get frustrated with your site because what should only take seconds ends up taking minutes – which means less traffic on your site overall.

Using too much text in your design 

For websites with a lot of text, the content can often be too dense and overwhelming. This is especially true for users on mobile devices who are scrolling through your website with their fingers rather than clicking to jump around. Your audience may not have time to read all that information in one sitting, so they’ll get frustrated when you don’t shorten your text or highlight essential words to help readers find the answers your reader is looking for. Try breaking up some of those long paragraphs into smaller chunks instead of packing it altogether if you want people to read through what’s there!

Not making the website responsive for mobile devices

More and more people are using their mobile devices to browse the web. Statista reported that as many as 54% of all Internet traffic is from a mobile device! 

But not everyone has access to, wants to be on their computer, or is on the go, so they can’t enjoy your site’s design on such a large screen. That means you’ll be excluding half of your audience if you don’t make sure that it looks good for any size device! You should test how your website works on different computers (desktops, laptops) with varying resolutions and monitor sizes; this will help ensure that the content gets delivered correctly no matter what kind of machine someone is viewing with.

Conclusion 

A website is an essential part of marketing your business. However, it can be challenging to know if you are on the right track with web design when there are so many websites out there. One way to ensure that your site looks great and functions well is by checking for these six common mistakes. Have you been making any of these website design mistakes? 

Subscribe

* indicates required

/0 Comments/by
, , ,

This is how to use Additional CSS Box in WordPress

featured image for how to use add css in the theme customizer

WHAT IS ADDITIONAL CSS BOX?

One of the features that make WordPress such an awesome framework is the Additional CSS Box located in the Customize menu. When using themes, there are some elements that cannot be changed and it can get frustrating because we all love to add a personal touch to our WordPress website. 

This blog, We will give you a brief lesson on

  • What do I need to Know
  • How to add CSS to the box
  • Guide through Dev Tools
  • What is !important

WHAT DO I NEED TO KNOW?

First off, If you know some CSS than congratulations! You can skip this part (link to section)

But if you do not know any CSS, then do not worry, this lesson will cover on only what you need to know.

CSS is a language used to design the frontend of the website, HTML is the bones and CSS is the physical features. And CSS uses a specific way to structure its code. for example:

.thisIsAClass { color: blue; }

Up above is the basic structure of the CSS code.  Down below show that CSS is created using three components. There is the selector, property, and value.

.thisIsAClass (selector) {
color (property): blue(value);
}

Not very intimidating right!

Thankfully, this concludes this part of the lesson. Straight forward and simple.

NOW LET’S MOVE ON TOO WORDPRESS

We are assuming that you practically know your way around WordPress.

So for this lesson, we will be using WordPress theme Twenty Nineteen as our sandbox. So first, let’s make our way to the Dashboard and select Appearance > Themes.

Wordpress dashboard showing the location of the themes page.

This will take you to the Themes page of WordPress and as you see we have the Theme Twenty Nineteen selected and activated

This is the Theme page in the WordPress Dashboard

Now here is a shortcut to the Homepage;

Hover over the Site Title, in this case. After you hover a drop-down menu will show “Visit Site”. Click on it and it will take you to the current or default Home Page.

Shortcut to the home page from the dashboard within WordPress.

Here you see the homepage. It is very basic but it will do.

We are going to first focus on the Hello World! heading of our WordPress website.

the homepage of WordPress Twenty Nineteen Theme

On the top of the page, you will see the Customize option. Click on the option to access the Customization Menu for the Website.

Image showing the location of the Customize option in the WordPress Menu bar

INTRODUCING THE CUSTOMIZATION MENU

This menu varies with different WordPress themes you will pick but all of them should have the Additional CSS tab. After clicking on the CSS tab, the Additional CSS Box will appear at the bottom.

Going back to the brief yet important example of how CSS works.

I bet your thinking “How do I know what selector to target?”

This is Google Dev Tools is the get to know tool for designers and developers because it can aid us in many situations. However, I’m going to use the Element inspect feature.

To access Dev Tools you must:

Mac: Command + Option + I

Windows:

Once Dev Tools is activated, be sure the Inspect Element icon is highlighted blue. While activated, you will be able to see all the elements that make the webpage look the way it does, from padding to margins, h1 to h6, and the div tags created. It’s pretty amazing to see.

This lesson we are going to change the color of the front black to blue.

So we dragged the pointer to the “Hello World” heading, after selecting the element, on the bottom of the page there is a line of selectors to choose from.

Once again don’t be intimidated, its best to start from the two or three selector groups from the right-hand side.

For example, there is:

header.entry-header h2.entry-title a

It is not shown but we first selected the group “h2.entry-title a” and there was no response. Afterward, we choose “header.entry-header” and the page title turned blue.

So in the Additional CSS Box, we entered the following code:

header.entry-header { color: blue; }

When finding the right selector to target. Enter the first selector you wish to try and if you get no response than keep the property and value entered and just change the selector.

We first entered:

h2.entry-title a {

color: blue;

}

(no response)

Afterward, we tried:

header.entry-header {

color: blue;

}

(color responded)

just changing the selector will save you time from entering and reentering the code in its entirety.

LET’S TRY ANOTHER

Now, we want to change the background of the website.

Repeating the steps from the previous section, we select the Inspect Elementfeature and select the header section (highlighted blue).

Now we try to find the selector to target the background which in this case is the following code:

main { background-color: black; } 

Then we change the font color from the previous code from black to white and we select the paragraph text of the section “div.entry-content” and change the font from black to white.

Which ultimately looks like this:

Understanding how the Additional CSS Box is very valuable to know. But you must also keep in mind that this is a simple page. When customizing your theme, you will run into some crazy looking selectors. Just keep in mind to be patient when learning how to customize.

Now there is one last thing to show.

THIS IS !IMPORTANT

The way WordPress CSS works is by a hierarchy. There are different ways to modify the CSS in WordPress, either through FTP, the Theme Editor, and the Additional CSS Box. The way we are showing you is the most recommended way to customize because it will prevent you from getting into a horrible situation. This will be explained late on a different blog.

but the reason I bring it up is that when you choose a theme and then introduce a page builder into the mixture, sometimes the hierarchy becomes scrambled so-to-speak.

Let’s say you want to trigger a selector but it is not changing. The !importantstatement gives that code priority over the hierarchy. but its always good practice to use it when needed because adding the statement can possibly through off other elements.

To use the !important statement, you simply add it to the right of the value and before the semicolon.

example:

div.entry-content { color: white !important; } 

Adding the !important to the value in the code will say this element is important and needs to be a top priority.

QUICK NOTE:

Its good practice to add comment statements above the css code that you create so that you can know what that code is for. It also helps for anyone who wants to change it later what css code does what in the website.

This what it should look like:

TL;DR

If you want to customize specific elements in your webpage that your theme will not offer, You can change it through the Additional CSS Box.

To get to the Additional CSS Box, go to the page that has an element that you want to change (e.g font, font size, color, background color, etc.) and activate the Customize option on the top of your page to the left.

The Customize menu will appear and at the bottom will be the Additional CSStab.

After selecting the Additional CSS tab, there will be an input area at the bottom.

Now, activate your Dev Tools and find the selector of the element. Input the selector {property: value; } of the element.

if you are not sure you picked the right selector or if there is a hierarchy issue with the element add the !important statement to the right of the value but before the semicolon.

ex

selector { property: value !important; } 

Once the element has changed, hit submit to save.

You dont have to go at it alone!

WordPress allows your website to come to life with a few CSS customization. If you want a website that is custom tailored to meet your business identity. fill out the contact form below. Your business deserves to make a great first impression to a world waiting to build a relationship with you.

contact me

/0 Comments/by
, ,

4 step process to building a WordPress website

Building a WordPress website for your business is not as easy as the task you think it is, right!? And to lead with that, it’s discouraging when a commercial claims that you can build one within an hour. You quickly start to think, “what is wrong with me?”

You no longer have to fear because I will go over the same process that I follow when I build websites for clients who own local restaurants or use their websites to showcase their success to a global audience. It is effortless to follow and will take out the overwhelming feeling because this template breaks everything into easy to consume chunks.

Broken down into four stages. There is:

  • Concept or Idea stage
  • Design and features
  • Development
  • Testing stage

Concept or Idea phase

In this phase, you want to accomplish the following,

What is your business?

This question is fundamental but essential to keep in mind when you go about designing your website.

Do you have a niche in a specific industry?

Niches are essential to have, especially if the industry your in is highly competitive. But keep in mind, if you don’t have a niche because you have not found one yet, that is ok. As you start to grow your business and gain more insight, you can always come back and add more to your website. Just keep going.

What pages are you going to need, and why will you need them?

Wasting time on pages, you may not need is not the best way to spend your time. Typically, every website will have the homepage, about page, services page, portfolio page, and contact page. Simple is better; if you like the one-page style website versus a multi-page style, do it.

Content for each page/section?

After you figure out what pages you need, it’s time to create each of these pages’ content. Each page has a purpose so create content for that purpose. You might feel pressured to have some long-form content (around 1500 words), but this is unnecessary. Your only goal for content should be to the point, make it easy to skim through, and make it sound as you are speaking to them.

What images are you going to need?

Keep in mind that you will not have all the images you will use, but it is still better to gather the photos because once you start to build your website, going back and forth between your photos, stock photos, and your web page is going to get exhausting. If you are looking for free stock photos, Unsplash and Pexels are some of the best places to start. If you have a Canva account, that is the right place, but some of the stock photos they allow you to use are from Unsplash.

What are the color palette, font & heading style, and graphics look like?

It is a great idea to know your style guide before starting. As I said before, coming up with these things at the moment will make you overwhelmed. What you should have is

  • Font style
  • paragraph:
  • H1-H6: You can use the same font for H1-H6 if you want to keep it simple. Some choose to use 1-2 different font styles to add character, but it is unnecessary. It would be best if you had a different font style between the P and H tags. 
  • Primary color: use coolors.co if you need help deciding on colors. I use this tool all the time when I am building a style guide. 
  • secondary color
  • accent color

Have these figured out will save you a lot of time and fewer headaches while building your website.

Design and features

Here comes the fun part! I know your thinking, “I have no idea how to design a website… I don’t have a creative bone in my body”.

Luckily enough, other web designers have already figured out how to design your website. No really.

With the first phase done. Here is the next thing that you do. Grab a few sheets of paper and label each page with the pages you need.

Now go to google and copy your competitors.

When I’m in this phase and working on a client’s site getting inspiration, I usually pick 3-4 websites. Most of the time, they are competitors, but other times, it may be a website from a different industry.

but the questions that I keep in mind are:
What stands out?

  • What do I like about the page layout?
  • Do I like the structure of the font and photos? 
  • Do I like the arrangement of the sections on the page?
  • Are the headlines too big, or is the font too small?
  • Do I like the header or the footer? 

Answer these questions in your head as you look through the different pages that you need for yourself. Somebody designed these webpages for a specific reason. Certain elements capture your attention for the cause of relaying a message. And when you are on a tight budget and don’t have enough funds to hire a designer, dissecting what your competitor’s web design agency has done will help you figure out what may work and what does not.

When your done examining, start to draw a mockup of what you would like your pages to look like. Rule of thumb, support pages will not need as much design effort as the homepage or sales pages. Let me remind you not to focus on any animation at the moment. All we are doing is building the skeleton of your web page.

Image of a mockup design for ALMA

With your web page mockups, you can label what sections, images, or text will have animation. The animation typically provides a sense of the “Look at this” type of feeling. Having animation where it does not make sense will distract your potential customer.

Development

Here we go.

I often hear a very common question: “What is a good theme for me to use?” 

Answers vary depending on your industry, and different site builders such as Squarespace, Wix, etc., will have different themes that come with their builders. 

But I work with WordPress.

The greatest thing about WordPress now is that Page builders such as Elementor (my go-to page builder), DIVI, WP Bakery, etc., are now using their own designated themes. WordPress has become much more user-friendly because you no longer have to buy a theme and then buy a page builder, required plugins, and so on. 

I recommend that you head this direction because the page builder designated theme will have different layouts tailored to your industry. 

Whether you decide to pick a theme template or you decide to create your webpage from scratch, You now have your mockups to help guide you to the design that you want, or if the template you choose does not have a section you need, then look back and create the section that you need. Whatever the case, you will be thankful that you have something to reference versus doing design work on the spur of the moment. 

If you decide to use your mockup and build from scratch, the process I tend to follow is 

  • Use global settings for the elements in the style guide created in the first phase of your project. 
  • Build the layout (place the content you need in the designated sections first. e.g., Images, text, background images)
  • Space and size everything out (use padding, margins, and whitespace to create space between the elements) 
  • add the animation to the elements that need it, add animation to specific elements used throughout the website, and use global settings. 
  • then add the functions (plugin short-codes, Button links, etc.) 

Plugins

The other thing I would like to explain briefly is about plugins. 

Another great thing about WordPress is that it allows you to accomplish what you plan to do with your website. Plugins are what provide the functions need for you to achieve this. However, You should always be cautious about what plugins you use. 

Over the years, and countless plugins tried, I have come up with a list of plugins that I tend to favor. But whenever I need to look for a plugin that I have never used but needed the function, there are two things that I look at. 

  • Stars and how many reviews
  • The last time the plugin developers updated the code.
  • Look at the plugin’s code.

I am assuming that you may not know anything about code, and that is fine because stars and reviews and plugin updates are essential.

To use as an example, you may see a plugin with five stars and 40 reviews and compare it to another plugin with 4.5 stars and 1500 reviews. I would usually favor the second choice because they have built a reputation within the WordPress community, but as I said, that is what I would do. There have been reputable plugins that have dropped the ball due to security issues, but the developers of those plugins have been able to release updates to fix them as fast as possible. 

Testing

With the design and development phases finished. Now you can do the testing. Run through each page, test:

  • every button
  • link
  • function to make sure you have everything working
  • send test emails
  • sign up for your newsletter opt-in
  • test the tabs on your navigation bar
  • Click on your social media links

Take time during this phase. Trust me, there have been plenty of times projects were coming to a launch, and something goes wrong, whether it was a lead generation form not connecting to a CRM, payment gateways not connected to the live accounts, and crashed plugins, etc. To be in stressful situations before the big launch is something you do not want to be in, so take your time and comb through everything. 

Conclusion

In closing, following this process of concept, design, development, and testing will help build a website on whatever platform you decide to make your website. Beginning the journey to build an online presence should not have to be an overwhelming experience, especially if you are on a tight budget but want a design that will make you proud.  

Do you have a project you need to get started?

Send me an email so you and I can get started.

contact me

/0 Comments/by