Not having a website these days could mean that you are an old-timer! The first thing anyone does on the internet is to search for brand availability online. Only having a website is not enough, but to make it visible online is another thing. You also need to do a whole lot of Search Engine Optimization (SEO) to rank well. Not to mention a professional web designer working on the presentation, layout and in some cases, on the content of a website.
Note that, a fast website is not just a way to rank higher in search engines. Fast websites are also a way to present information more easily to users, who of course prefer quicker than slower websites. The conclusion is clear; more guests equals more progress.
So what makes a good website? This is the first question most web project managers ask before starting their web endeavors. Most of them know the answer to the “how” question.
According to internetlivestats.com, there are 1,835,314,343 websites and still counting. But that is not the only case. How do they perform on search engines? How fast do they load?
Looking at this article snippet from Pingdom. “78% of the top 100 retail sites had a load time of under 3 seconds, while only 6% took 5 seconds or longer to load.
Unsurprisingly, the fastest homepages were also some of the smallest. Among the fastest websites, the average homepage was 1.70 MB in size. Among the slowest sites the average size was 2.65 MB. In other words, the slowest websites were almost 1 MB (64%) bigger compared to the fastest websites”.
Let’s take to account that the average human attention was 12 seconds in 2000. And 8 seconds in 2013 while that of a goldfish is 9 seconds! Well, we won’t expect fish to browse our websites with their PCs and smartphones any time soon! Our websites should be ready to grab human attention within those 8 seconds, which decreases as time goes on.
Websites are one of the company's most valuable properties. Getting a consistent, competent, and engaging online presence takes effort and diligence. To stand out from your competitors can be challenging. And viewers that only have less than 8 seconds to be interested in viewing your website.
A decent website catches your attention and awakens your feelings. It gives you what you need quickly. Here are some very important things to note when you start a web design or manage an existing one for your company.
A visually appealing and simple website makes it easy to memorize. Not only that but also making it readable to all your designated audiences. Include the logo, color, texts and images that uniquely identify your company, this improves your front-end design and company brand.
As the website reflects your company and products or services, does it meet your viewers' intent? Before starting a web design, there must be clear goals and objectives to be fulfilled. There ought to be challenges, both company and viewers that must be addressed and resolved.
There must be your clear audience defined. You need to discover everything about them. Where are they? Are they in Dar es salaam? Do they work on digital marketing agencies? What are their ages? Which language do they speak? How many use desktops, mobile phones, tablets or laptops? Do your research well.
In simple terms, your web design must align with the needs and wants of your audience. All these must be answered as they will be your website’s audiences.
Should the website be beautiful? Yes, but also remember that the beauty lies in the eye of the beholder. Imagine you search on google “photos to print on my t-shirts”, click on the first result then you see this…
Will you continue browse it? Big NO. Design a website which is clean and minimal, good use of colours, easy to read texts and with meaningful images. Let’s look at this…
Now you can stick on browsing this.
Good websites are well structured and organized. If you browse around the website for what you need, you will be disappointed and abandon it if it is not easy to use. It is thus important to have an intuitive navigation bar on your website.
By developing a well-organized website, users will be able to better browse and locate information. In comparison, search engines can quickly crawl and index the website with ease.
According to Telemedia Online, 50.88% internet viewers are mobile users. While 46.39% are desktop and 2.74% are tablet. That means, your website should accommodate more on mobile without segregating other views.
Some webpages redirect visitors to different URL i.e. from www.bridging.co.tz to m.bridging.co.tz. This to provide different experiences for desktop and mobile visitors. Such process can also be simplified by using bootstrap CDN. Bootstrap is bundled with mobile-friendly libraries. Your same www.bridging.co.tz can now be viewed by all visitors from desktop and mobile devices. That is what we call responsiveness or responsive design.
OK, if your design looks great, how about your content? Remember point #1 above. After you understand your audience, create and publish content tailored for them. Avoid jargon, corporate or very formal content, and acronyms during your content creation.
Be clear, accurate and remember to update regularly.
Good content is loved by both your audience and search engines. Also, social media and blog posts are few ways that help fresh content and engagement. A good way to ease content marketing.
Your website should help visitors USE, UNDERSTAND and STAY. Create clear and logical navigation with a clear hierarchy. Use standardized formats and visual prompts around the site. Flash objects are highly discouraged. Simplify navigation by onsite search and show related content on every result.
It not enough to have a beautiful website for your audience. Search engines should also love it, it is called Search Engine Optimization (SEO). The following web optimization techniques are strongly recommended:
Use page titles and metatags on every page.
Save your images and other files with descriptive names. Remember to incorporate an alt tag on your website’s image tags.
Use keywords on your content, links, meta descriptions and titles.
Embed social share functionality.
Use the search engine tools such as Bing for webmasters and Google Search Console.
Loading your libraries from CDN reduces server and web page load time and improve web performance. You can use bootstrap CDN or Google’s CDN.
Since the attention span for human beings decreases, and so your website’s loading time. Enable your server Gzip compression feature to reduce the number of bytes sent over to your visitor.
The total website space is accounted for CSS, JS, parsed HTML and media files (images, videos and animations). These are very crucial web optimization components to consider. For those who do not use Adobe Photoshop or Illustrator, there are online tools for you.
Use tools like JPEGmini or TinyPNG to reduce the image file size without affecting quality. You can also use the so-called Next Gen image formats like webp, svg, JPEG 2000 and JPEG XR.
These formats reserve quality and occupy very low space. Please note, low space means fast loading website.
Mozilla MDN explains caching as follows: The performance of web sites and applications can be significantly improved by reusing previously fetched resources.
Web caches reduce latency and network traffic. Thus lessen the time needed to display a representation of a resource.
By making use of HTTP caching, Web sites become more responsive.
Browsers cache your website, but you can also use caching backend technology like Memcached and Redis for your website. Do not worry about your CMS website, it’s already managing cache itself unless you want to tweak it.
Bad code may cause bad web performance on your website. Remove HTML comments and make them as small as possible. Avoid inline JS and CSS, don’t use empty href attributes.
For PHP developers, avoid unnecessary loops, use PHP accelerator and PHP-FPM.
Enable your website to load its components and content using asynchronous requests. You can use AJAX when it doesn’t affect your SEO.
Other developers use very good programming languages while designing and developing their websites. Take an example NodeJS, VueJS and ReactJS.
If your website has a streaming service, streaming large video files from the same server is not smart.
Now when your website is beautiful and fast, you can add more of these techniques to enhance it:
There are so many tools to help you analyze your visitors. Data from such tools help you know how many visited your website. Not only that but also which content performs well, where are your visitors and how they behave when browsing your website.
Most of these tools are free and easy to install. Examples are Google Analytics and Microsoft web analytics.
Results from analytics help you plan your website, improve web optimization and generate more leads.
If you are using a Content Management System (CMS) as your web design tool, developers periodically update such a tool. With each new product release, there are performance improvements. For PHP developers, start at PHP7.1, Jquery v3.2, WordPress v5.5.
Review your codebase for the latest and stable versions. This is crucial for web security, web performance and web usability.
Import or embed or use plugins/modules that will suit your needs. Note that, if such tools have their libraries, they might become render-blocking components. The components that block the first paint of your website page.
A quick example, the developer might choose to use WYSIWYG editor called CKEditor plugin and wysiwyg plugin at the same time on the website. Or may use CKEditor plugin while WYSIWYG CSS and JS are still loaded on the website.
OK, take an example, your visitor wants to send you a message on the contact form. He fills in the details and hits send button. Imagine your mail server fails to respond, that means your visitor will hang on a loading page for quite some time!
Thanks to our web technology. There are plenty of tools that support background activities. Examples are Redis, crontab, queues and RabbitMQ.
You can let your website use these backend tools to handle your mail activities. Let your visitors enjoy other website activities.
A flash is a piece of a program embedded on a web page to fulfill certain web activity. Examples are animations, rich web applications, desktop applications, mobile apps and mobile games.
In 2000, the flash was the king of the web. But then in 2007 Apple did not support flash, followed by Google in 2015. Now, most of the web browsers do not and discourage using flash. In 2020, only fewer than 5% of the websites are using flash, it is nearly dead.
Flash objects tend to be unfriendly with search engines. They contain security vulnerabilities, making your website exposed to security threats.
Developers move to other new era web programming languages as an alternative to flash. See HTML5, WebGL and Web Assembly.
A lot is going on to design a good website. It's not just making it beautiful, having a random server, downloading WordPress, optimizing it, and selecting a theme that looks cool. That might set you up for disappointment. You're going to need to prepare to get it right.
You need a strategy, maybe that's the most critical aspect of a good web design!
Your website is essentially your business card. It's the thing that everybody sees when they dream of doing business with you: customers, investors, colleagues, and relatives.
By making the website sharp, you guarantee that anyone who uses it finds you to be trustworthy, competent, and capable of doing business with.
Plus, a good website draws traffic through Google. Gets connections from authoritative sources, and is shared more frequently than not.
We are in 2021. Having a fantastic website is no longer "nice to have" but it's an absolute requirement.
These are some of the most critical elements that you can concentrate on in your web design. It is not a complete collection.
This is a high-level summary of three main trends! These simple tactics will help you get more out of your Web design. Call us for a deeper dive. BTL is happy to help you out.