Laptop showing text I design and develop experiences that make people's lives simple

Tricks and Traits of Websites

[Photo by Ben Kolde on Unsplash]

Tricks and Traits of Websites

In Business Alignment, websites live in the root chakra, Mūlādhāra. What does that mean, really? The root chakra is the first of seven energy systems. The color of focus is red. Red grabs attention and signifies importance. Although all chakras work together to create synergy, the root chakra is the most important to create balance within the other chakras.

Within businesses, this chakra represents stability, safety, trust, comfort, and the company’s “home”. The energy that is protruding from a website, should follow in the suit for what the root chakra represents. Prospective customers view a website as a home for companies.  Therefore, envision guests coming to your home as a representation of your website. Are you making your home easy to find? How do you want your guests to feel?  Are they staying to shop because they feel safe? The accessibility, functionality, design, and usability all need to be well balanced.

First, let’s discuss the web. Websites have many factors that enable proper functionality and display. Some factors are beyond any control of a developer’s doing. In order for a website to function and to be seen correctly, hardware, software, and web browsers all need to communicate effectively with the website code. It is like a big happy web family working together to produce a website.

Network

A network is how your device is connected to the internet. It is like the ground under a house. If there is no soil, the house cannot stand. The network needs updates, regularly. What are updates you ask? Well, everything is code; whether code is written on the frontend where the results are visible or the backend where code produces function, coding is needed. Your home network is where you obtain your internet service. Sometimes, the security within the code is compromised and the code needs edits. Other times, the code needs to be updated to work properly with devices or browsers. Everything needs to work together.

A network may stop working or may be working inefficiently causing your device to go in and out of service. Sometimes this happens because of updates. Other times, like your browser, the temporary files are not clearing. Either an update needs to be done and the server is not communicating properly or the cache is building up. Most of the time, from my experience, a hard boot resolves the problem. This can be done by unplugging all your hardware to your router and modem or combo, waiting for a minute, and plugging back in first your modem wait for it to light up, then your router. Once all the lights are lit up, you should be good to go.

Another possibility contributing to network problems can be from updates. You may notice updating devices sometimes bring settings back to a default mode or changes the configurations altogether. In these scenarios, you may need to reset your network router. There are some detailed blog posts available about resetting and rebooting routers. I found this blog post, How to Properly Restart a Router & Modem, valuable.

If you tried all of the above and still have issues, the configuration of channels and packets can cause the connection to become unstable. I resolved this issue, completely, when I purchased and installed a Google Nest Wifi. It is a mesh system that uses an algorithm to find the appropriate channels your network should be on. It also uses masking technology to create a safer network connection.

Web Host

In order for websites to have visibility on the web, a host stores the files of code on a server. There are many companies that offer hosting services such as SiteGround and GoDaddy. CNET writes about the best hosting companies. They did the research and supplied the data. Many of these hosting companies offer other services. For instance, your website needs an address. You can purchase your domain name, download prepackaged files, create email addresses, and even hire help to create the website for you; all within clicks away!

Web Browsers

Web browsers are software applications installed on devices that enable web surfing. There are many web browsers available. I’m sure you are familiar with the most popular such as Google Chrome, Mozilla Firefox, and Microsoft Edge.  and 2021 discuss the best browsers available.

A web browser has to communicate with a website for the content to display and function properly. It is important to update your web browsers when online. This quick update, if neglected, can cause display issues, failed functions, and security threats. It is also just as important to delete your browser’s history or cache for this same reason. Sometimes the browser’s customer service teams need to be contacted if the display and functionality are still being compromised. I will discuss this later in the blog post.

Content Management System (CMS)

A CMS is a software application and storage for data. All contacts and customers’ data are stored within a CMS. It is the place to create, design, and publish content. More importantly, it is where your website is transformed. Having a CMS allows prepopulated code to establish. This allows you to spend less time writing code and more time designing.

As mentioned above, once the web hosting company is selected, deciphering how to create a website will need to be determined. You may decide to have an all-in-one hosting website (aka website builder). These are done on sites like wordpress.com or wixx.com. Shivar (2020) wrote a detailed comparison blog post on the two. Basically, with this option, you pay one flat fee and use a click and drag tool to create a website. The disadvantage is the lack of flexibility when your business starts to take off. Most of these website builders do not allow transferring data and domain names when you expand and need more from a website. However, it may be a good option for those on a strict budget. Just know these all-in-one hosted websites are not the best options.

I am a big fan of WordPress. I have been working with WordPress from the beginning of my career and I just love it. Although I am aware there are other CMSs that are great, I just prefer to stick with what I know. WordPress is an open-sourced CMS aka FREE. Also, the WordPress crew is phenomenal. There are so many brilliant developers working towards the WordPress movement. If you have a problem, there is an answer in their support forum or another WordPress chat.

Most if not every hosting company has WordPress integrated within its platform. It is an easy click and load to install. Once the files are downloaded, you easily go into the dashboard and create. It is that easy.

The Design

Tricks to a Good Website

Believe it or not less is more and simplest is best. Don’t be afraid of white space. I have taken so many courses in the design aspect of websites. And trust me, it is kind of common sense. As a business owner, you want your message or your mission to be clearly interpreted. That’s it. Go back to my blog post about mission statements and follow the guidelines.

Speaking of trust, you need your viewers to trust you. You want your visitors to return. How do you gain trust with a website? And if you have an e-commerce website, how do you get visitors to stay and shop? I have one word, consistency. Everything should be consistent. This is done by keeping your font the same size and the same style throughout each and every page. It is common to select one font for headers (titles and subtitles) and another for paragraph text. However, the font style should not be dramatically different. Oliver Stevenson 2020 discusses the most popular top-twenty fonts.

The image to text ratio is just as important and needs to be consistent. This benefits the viewer experience as well as website accessibility. The common text to image ratio is 60% text 40% images. However, this is a valid judgment call. These numbers may not align with your mission and therefore need to be adjusted. For instance, if your business is in photography, images will be on the higher end.

Images are used on web pages to break up text and allow the readers’ eyes to stay focused. When telling a story such as in a blog post, match the images to the description. Images should tell a story similar to the text.

Let’s discuss text size, spacing, and alignment. You may notice that text sizing has changed within the last ten years on websites. Thank goodness because I’m tired of squinting.  ADA guidelines are strict and so are search engines. Considering Google is the number one search engine and most widely used browser, they, also, have become strict with their guidelines. Google has the power to blacklist a website. This means users cannot navigate to your website on Google Chrome. This, also, means you will not be listed on web searches. You can read more about this on Google’s Search Console Help.

Texts size should be between 14px – 16px for standard paragraph text. Anything smaller loses legibility causing the visitor to slow down and become distracted. The reader will find it difficult to process more than one word at a time. On the contrary, text too large overcompensate the flow of the content and disrupts the comprehension of the words.

Line height is the space between the lines of text. Most readers scan words at a fast pace both horizontally and vertically. If the line height is too close together, visitors will scan further down the page without realizing it. This will cause the information to go unseen and unread. When space is too far apart, the reader loses track of their vertical scan. This makes it challenging for the paragraphs to be comprehended in one unit. The line height should be approximately 150% of the text size. So, if the text size is 16px, the line height should be 24px.

The alignment of text is also based on how a human eye wants to move around on a page. Left-aligned and justified is easier for our natural eye tendencies to move side-to-side and up-and-down. The trouble is justified does not display well on web pages. It also is not available on most templates. It can be customized into the website; however, there are some drawbacks such as uneven spaces in between words. This contradicts the rule of consistency. However, in some instances, justified text could be justifiable (pun intended). The same goes for centering text. This can allow the text to stand out and change the flow of the content, especially in instances when the author wants the reader to slow down, briefly, to absorb a given point.

Speaking of text, everyone should install Grammarly on their web browsers. If you are writing your own content, install this simple extension. It is so easy to make typos. Even if you proofread a million times. The extension will pick up common errors and misspellings. If you are looking to have some help elaborating on your copy or better flow within the sentence structure, the premium package is worth the extra $12 per month.

The Function

Traits to a Good Website

A function is how your site moves and functions. Let’s begin with the main navigation menu. Do not overload navigation items. Instead, decide on 3-6 important titles to display at the top of the page. I’ve seen some neat designs where the home page image pops out at you. This is great; however, it is not functionally appealing. You have the visitor confused not knowing where the menu is. Instead, keep it simple. Add your navigation titles at the top right of the page. This right-side navigation can be explained by where the majority of users’ eyes direct at first glance. The logo is on the left; while the navigation menu is towards the right. Also, having an easy-to-use navigation menu has better search result ratings. This is because Google especially likes easy functionality and will rate pages based on ease. The ratings contribute to where your web pages appear on a search result.

Load times impact your website on many levels. Make sure all images are optimized, keep add-on software or plugins to a minimum, and delete unused media. WPengine describes the best practices to decrease load times.

Test, test, and test some more and then test again. I’m serious. Testing your web pages and the functionality of your website should be a daily duty. If something is not seen properly or a form or any other function is not operating correctly, you need to know a.s.a.p so it can get fixed. Otherwise, you are risking losing trust between a prospective customer due to a lack of credibility.

You want to make sure you are testing on multiple web browsers because, obviously, not everyone uses the same web browser. This is known as cross-browsing testing. You can track your visitors by enabling Google Analytics into your website. However, you should still get in the habit of testing your web pages in multiple browsers. I like BrowserStack. In a nutshell, you test the pages once within the dashboard. It is an extension on your main browser. You are, then, able to see any issues.

What do you do when flaws are found? Simply Google (or another search engine) x, y, and z is happening on such and such browser (make sure you add the version and the CMS you are using ). Many times, it is a simple fix. Other times, it is the web browser that has an error. If this is the case, you can reach out to the support team for that particular web browser. I actually had this happen to me on one Thanksgiving morning. I reached out to the support team and it was fixed within hours.

Keep the scroll and click simple. A user shouldn’t have to scroll for a minute to get where they desire to navigate to. Also, don’t create a scavenger hunt from page to page. There is a 3 click practice that demonstrates the ease of accessing a page. Basically, it should not take more than 3 clicks to get to the page. I like to use no more than 2 clicks. So, for instance, a user clicks on services, the second click should be purchasing or booking the service.

Web Tags

There are several types of tags in web development. First, and the most common are HTML tags or meta tags. These are the bits of code that wrap-around text on a website. Even if you are using a click-and-drag template, you should have the option to choose which tags to use when adding text. All the tags that wrap around text tell the crawlers what is scanned.  For instance, WordPress uses a drop-down box starting with “paragraph”. Under paragraph, Headings 1-6 will appear. These are heading tags and on the backside look like <h1></h1>. H1 tags are scanned first by crawlers that produce search quality. H1 tags are titles to pages and one page can only have one h1 tag. The crawlers will scan the first one that appears and will disregard any others. The next to follow are h2 tags and so on. H1 tags take precedence over any other. The goal is to be most mindful of titles to pages.

Images need to have an “alt” tag. WordPress automatically uses the file name as the alt tag when the image is uploaded. An alt tag is a description of the image and is used for multiple reasons. ADA requires all images to have alt tags; this is how specific software communicates details for the visually impaired. For more on ADA requirements, check out Oarses 2021 Checklist. Alt tags are also used when browsers are not accessing the image. Instead, the text will appear in its place. Lastly, alt tags help with Search Engine Optimization (SEO). This is because the text within the tag is scanned by trackers on the web. Think creatively when adding content to your alt tags.

Next, WordPress uses tags to group content. This is done within posts to specifically classify the same types of copy.  WordPress also has categories for broader categorizations. For instance, say you are writing blog posts about digital marketing. You would create a category for digital marketing and add tags that specify the type of digital marketing you are writing about for each post. Google recommends a combined number between 5-15 tags and categories for each post. WordPress.com has a support post about this topic.

Google tags are for tracking purposes. These tags are added to portions of your website to track and analyze website visitors. You can read more about Google Tag Manager under the Google Support Help Center. Basically, Google tags are implemented and injected to view analytics on Google Analytics. This allows business owners to see what is working and what may not be worth so much time devotion.

Encompassing Energy From Within

You may have heard the saying by Mary Frances “When you cook with love, the food just tastes better!” She has also said, When your intention is love, when you’re doing something for people you love, it naturally turns out better. When you cook with LOVE, even if you make mistakes, the food just tastes better. It’s rather magical!”

Similarly with Business Alignment, any act, task, or creation needs to have an intention. The intention sets the stage for emotions. Emotions emit energies that create a vibration. Positive emotions such as love, contentment, and commitment are felt by others on a subconscious level. When you or others are creating a website, these powerful emotions should be sustained with visions of success and prosperity. And because a website is part of the root chakra in Business Alignment, it is imperative for individuals that develop, design, and edit the website to also strengthen their own root chakra. This can be accomplished in various stages. I really enjoyed a blog post from Paige Butzlaff on ways to strengthen the root chakra.

Visitors and customers will feel the intentions put into the creation of the website. They will feel safe, stay, and shop. Prospective customers will feel secure to book appointments, provide their valuable information, purchase products, and entrust the brand. Businesses will develop an audience and that audience will continue to grow.

A website is the root of a business. It can make a business flourish when created and maintained accordingly. A multitude of free tools are available to create a beautiful website design. Besides skills and experience, designers and developers need to believe in their skillsets. They need to trust the process. Because what is believed and what is felt, emotionally, contributes to the energetic vibration associated with the end result.