how to design a website

How to Design a Website (2019) | 8 Simple Steps + 12 Plugins

Page Contents

How to Design a Website?

The first thing I can say is that It’s Easy.

Well, fear not. Our guide will show you how anyone can build a website – with just a few pointers!
When I first started I thought I need to learn HTML, CSS, PHP, and whatnot.

But today in 2019 and specifically July 2019 it’s freaking easy.

When I started I searched ‘How to Design a Website’ and I got the first result of https://websitesetup.org/ on How to create a Website: Step-By-Step Guide for Beginners

I read that post and watched a couple of Youtube videos.

And guess what, I created a 3-page website hosted on WordPress which have a Home, About & Contact pages and couple others Terms & Disclosure pages in just 2 days.

Go through this post and I am damn sure it’ll be very easy for you to design your website and grow it big to earn a passive income and live a life of freedom.

Electrobot Report...

You know what, 47% of visitors will leave a website if they find the speed & layout unattractive.

 

A report by one of the top entrepreneurs in the world: Neil Patel.

  • 73% of mobile internet users say that they’ve encountered a website that was too slow to load.
  • 51% of mobile internet users say that they’ve encountered a website that crashed, froze, or received an error.
  • 38% of mobile internet users say that they’ve encountered a website that wasn’t available.
  • 47% of consumers expect a web page to load in 2 seconds or less.
  • 40% of people abandon a website that takes more than 3 seconds to load.
  • A 1-second delay in page response can result in a 7% reduction in conversions.
 

According to Neil Patel, If an e-commerce site is making $100,000 per day, a 1-second page delay could potentially cost you $2.5 million in lost sales every year.

You can see the YouTube video by Neil Patel On ‘ How to Speed Up Your Website’

Here at Electrobot, we’ll learn how to design a website as-fast-as possible to get started and we can modify it later on the go. So to help you, we’ve put together this simple, easy to follow, Eight Step Guide + 12 Free Must Recommended Plugins & Free Cloudflare CDN + SSL

Before You Start, Read This:

There are hundreds of different website building platforms and website builders around the market & How to Design a Website?

WordPress, Wix, Joomla, Drupal… There are many but I have named some just for your reference.

Here’s how people are using these Platforms to Host their website (in%):

  • WordPress (free) 52%
  • Wix (paid) 7%
  • Joomla (free) 4%
  • Progress Sitefinity (free) 4%
  • SquareSpace (paid) 4%
  • Weebly (paid) 2%

Here’s Why Most People Use WordPress to Build a Website.

 

Unlike website builders, it’s completely freeElectrobot is also hosted in WordPress.

 

WordPress is the easiest platform to design a website I’ve ever worked with, but it’s flexible enough to suit everyone – small business websites, online shops, bigger organizations, and even Entrepreneurs.

Learning HTML from scratch can take 6-8 months but if you want to design a website within a day or two, learning HTML isn’t a viable option.

You may think of designing a website on a website builder but it’s a bit expensive and WordPress can do everything they can do.

Here comes the life saver: Our Elementor, the free website builder platform and you can make a website just by drag-and-drop templates and designing some of the best-looking websites or blogs.

How to Design a Website

WordPress vs. Joomla/Drupal: WordPress is just so much user-friendlier.
But for the beginners, I strongly suggest sticking to WordPress.

You can also get a one-click-installs for WordPress, Joomla, and Drupal with Most of the Hosting Providers.

Here’s a curated list of what we’ll be covering:

What’s Your Purpose for Creating Your Website

It sounds like such a simple point to make, but before you jump head-first into designing your website, you first need to be clear on its purpose.

It can be a Hobby Blog or maybe not just Blogging but also earning profit from Blogging and Affiliate Programs.

It can be a WooCommerce store or a Business Website. But you must be very clear about your purpose and goals.

It is one of the most important steps so that you don’t lose hope and inspiration in later times.

Choosing a Domain & Hosting for your Website/Blog

How to Design a WebsiteOnce you have done that you are ready to go to your first point that is choosing a good domain name for your Website/blog.

Choosing the right domain name for your website is crucial for your success. If you choose the wrong domain name, then it can be a hassle to switch later on without hurting your brand and search rankings.

It’s extremely important that you choose the best domain name from the start for yourself.
When first starting, it can be hard to come up with catchy business name ideas with a perfect domain for a blog. A domain consists of two parts; the name followed by the extension.

For example, with apple.comapple is the name and .com is the extension.

You can’t have a website without a domain name. Like a street address that tells people where you live, a domain helps customers drive directly to your website.

Let just go straight to the point:
Domain: electrobot.co
URL: https://electrobot.co

1. Go with .com

Most of the time internet users assume .com when browsing. Having a .net, .info, .tv or any other extension puts another potential roadblock in the process of finding you. Having said that, there are plenty of successful sites that use a .net or .co extension (or something else), but a .com is ideal.

Electrobot uses .co extension because .com was already taken hence here comes our next point.

2. Short and sweet

The shorter the better. Electrobot.co is a great example though Enough said.

3. Easy to say and spell

The goal is for your domain for a blog to be passed along easily by you and by others. This is more likely to happen if people don’t have to stop and think about how to say or spell it. Do not include words that are commonly misspelled or tricky to spell.

4. No hyphens

It’s not very smooth or punchy to specify a hyphen. Example: “Hi, my name is Jane and my domain is online hyphen marketing dot com.”

5. Use keywords

Have you read my post What is SEO? Your domain is one of the best places to use a keyword or two. And the more compact and closer to the beginning of your domain, the better. For example, if “online marketing” is your keyword, you can use onlinemarketing.com as your domain which will eventually help in SEO and if your keyword is region-specific like New York, then you can make it OnlineMarketingNY.com

6. Consider using your name

I highly recommend registering your name as a domain even if you have no plans to do anything with it. Why? Because you never know if you just might become a household name in the future. And then you’ll be glad you have it.

If you plan on using your blog to sell a service you provide or if you hope to speak or become a published writer, your name might be perfect.
If you have a really difficult name to say or spell, consider using your first and middle, or a nickname, or make up a new name altogether (yes, people do that).

7. Research Your Domain For a Blog

You know what, when looking for a domain for a blog you always research the online search engines if there already exists any domain-related to yours. This can save you from unnecessary confusion.
Before you register a domain name, try to find out if there is already a registered business using the same name.

You can perform a trademark search to see if there is already a similar or exact name already trademarked. You can also perform a Google search and check for the name’s availability on top social media websites like Twitter, Facebook, Instagram, etc.

8. Avoid Double Letters

When finding a domain for a blog you must avoid using a double letter domain as it can lead to typos.
It’s a good idea to avoid domains with doubled letters because it increases your chances of losing traffic to typos. For example, a domain like websitessetup.com will be more prone to typos and result in lost traffic.
Avoiding doubled letters will also make your domain easy to type and more brandable.

You can just take the help of some Domain Name Generators like:

NameStation
http://www.namestation.com/home
NameMesh
https://www.namemesh.com/
Business Name Generator
https://www.shopify.com/tools/business-name-generator
Domain Puzzler
http://www.domainpuzzler.com/
Wordoid
http://wordoid.com/

I have written a detailed blog on How to Choose the BEST Domain for your Blog. You can check it out here.

The second thing is to choose the best hosting provider for you.
To store your images, content and website files, you are going to need a web hosting. Without web hosting, your website will not be visible on the Internet.

It’s a familiar dilemma: Which hosting provider should I trust with my sites?

For developers, bloggers, small business owners, and others, choosing a host is like searching for Mr. Hosting.

If done right, you can spend a lifetime of happiness with a reliable and high-performing host who is always available through phone, chat, or email to answer your burning late-night questions.

However, rushing into a hosting relationship without doing your research could lead to feeling trapped, misled, or extorted. Choosing the wrong host often ends with headaches and a messy, expensive divorce — and you again alone, holding on to all the files you used to share.

I’m currently in a happy hosting relationship with Hostinger, but I’ve been burned before a lot of time. I think here in India and other Asian countries Hostinger is 2nd best hosting provider after SiteGround.

Choose your Platform

How to Design a Website

The first thing that springs to mind when you think of quality web design is a professional agency, right?

How to Design a Website? 

And while top companies largely do a great job, they can be very expensive.

Luckily, there is another way: website builders and eCommerce platforms.

These are DIY online tools that allow you to create and design your website – without needing to know a single line of code!

Naturally, there are tons of options out there – of varying quality – but we’ve put in the legwork and researched the best on the market.

Through a combination of expert research and thorough testing, we can now reveal the best options for designing your very own site.

Below, we’ll run through the top three options for both regular websites and online stores.

First, though, let’s address the boss in the room: WordPress.

What about WordPress?

WordPress.org is a self-hosted, open-source CMS (content management system) – but all you really need to know is that it’s the most popular platform for designing a website.

WordPress gives you total control over the look and feel of your website and is technically free to use. We say this because, to get your website live, you’ll need to pay for web hosting, security, a domain name, and any additional plugins or themes you need.

Let's Compare

Wix

How to Design a WebsiteWix is generally regarded as the best website builder on the market. It’s easy to use a drag-and-drop editor gives you total creative control, allowing you to add in all your content and position it wherever you see fit.

There’s also a choice of 510 professionally designed templates, a bunch of amazing features that come built-in, and a huge app store where you can install any extras you may need.

From thoroughly testing the platform ourselves, we can confirm Wix lives up to the hype. Have a look at our final research scores and see for yourself:

Pros
  • Highly intuitive and easy-to-use editor
  • Great value for money
  • Strong help and support features
  • The builder our users were most likely to recommend
Cons
  • Can’t switch templates after your website goes live
  • May have to spend more on third-party apps to scale your website
  • The sheer choice and amount of customizable options can be overwhelming

How to Design a WebsiteSquarespace is a website builder that oozes class. It’s slightly more expensive than Wix but comes with a glossy, premium feel.

Squarespace prides itself on its templates. Their cutting-edge designs make them perfect for anyone in a creative field, such as photographers, artists, or graphic designers.

Squarespace also comes with an array of quality features. Here you can see how it scored in our research for all the major categories:

Pros
  • Best quality templates in terms of design and flexibility
  • Best quality features of any builder on the market
  • Full customization control without the need for coding
Cons
  • Relatively expensive price plans
  • Not totally beginner-friendly

How to Design a WebsiteWeebly is marketed as a website builder for all, but really, it specializes in small business websites. It has a great range of templates to choose from and a drag-and-drop editor that’s pretty easy to get to grips with.

Weebly comes into its own when you start looking at its features – there are hundreds to choose from, and most of them are brilliant!

For a closer look at where Weebly’s strengths lie, take a look at our scores:

Pros
  • Best for small businesses, with all the basic tools you need to build a great business site
  • Cool customizable templates
  • Really helpful SEO guides in Weebly’s help and support center
Cons
  • Drag-and-drop customization is limited – unless you’re confident with code
  • No personal restore option, so if your site goes down, you’re reliant on the Weebly support team
  • No ADI option (short for Artificial Design Intelligence, this is where a website builder uses information you provide to automatically design a site for you)

How to Design a WebsiteShopify stands head and shoulders above its peers as the best eCommerce platform. It has a range of themes that are all designed with your products in mind and more sales features than you can shake a stick at.

Where Shopify excels, though, is away from your website. The platform allows you to broaden your online store’s reach by tapping into different channels, and by selling across various marketplaces and social media networks.

Here you can see how Shopify performed in our eCommerce platform testing:

Pros
  • Sell across multiple channels, including Facebook, Instagram, Amazon, and eBay
  • Brilliant inventory system which helps you manage your store
  • Came first in our research for sales features and customer score
Cons
  • You have to design your storefront between the editor and dashboard, meaning you’ll have to flick between the two
  • The only platform to enforce its transaction fee with Shopify Payments
  • Content doesn’t automatically reformat if you switch to a different theme

Although Wix can’t rival Shopify when building a ‘pure’ online store, it’s perfect for people who just want to have a store section on their website.

Anyone who sells products on the side could benefit from Wix. If you’re in a band, for example, the main purpose of your site will probably be to provide fans with tour information and take bookings for gigs.

However, you may also want to sell merchandise, such as tour tops, albums, and branded instruments. Wix makes it easy to either build an online store from the off or add in a store section further down the line.

Pros
  • Eye-catching designs – add product videos to give customers a better shopping experience
  • Advanced eCommerce tools, including abandoned cart recovery to catch customers who have left items at the checkout
  • Multilingual sites – grow your business globally by creating multiple sites for different countries
Cons
  • No social media integration – doesn’t let you sell across multiple channels, such as Facebook, Instagram, and Pinterest
  • Too much creative freedom, which can get in the way of eCommerce design best practices

How to Design a WebsiteBetween Shopify and Wix, BigCommerce is far more similar to the former. It’s designed solely for selling online and is widely regarded as one of the best platforms to create an online store with.

One thing BigCommerce has over Shopify is the number of built-in features it has. With Shopify, you may end up spending far more than just the standard monthly fee to install a whole bunch of apps – many of which are free to use with BigCommerce.

BigCommerce is undoubtedly harder to use than Shopify. Some of the terms it uses are quite technical, and the actual design of your site can get quite complex – meaning it’s not exactly a beginner-friendly platform.

Pros
  • Most scalable eCommerce platform
  • More built-in features than any competitor
  • Lets you sell across multiple channels, including Facebook, Instagram, and Pinterest
  • Fantastic SEO tools
Cons
  • Hard for eCommerce beginners to get to grips with
  • No mobile app to run your store on the go

How to Design a Website: Creating Pages

Adding theme

How to Design a Website

Once you have successfully installed WordPress to your domain, you’ll see a very basic yet clean site.

But you don’t want to look like everyone else, do you?

That’s why you need a theme – a design template that tells WordPress how your website should look. See an example of a free WordPress theme that you can install:

Electrobot uses Cenote theme template. Get it for FREE here.

There are 1500+ of awesome, professionally designed themes you can choose from and customize for your sit. Just go through the filter and choose the best for you whether you want a blog, eCommerce or store, search for anything.

Most of the WordPress themes are free to use and highly customizable.

Here’s How To Find a Theme You Like

How to Design a Website:

1. Log into your WordPress dashboard
If you’re not sure how to type in: https://yoursite.com/wp-admin (replace “your site” with your domain).

This is what the WordPress dashboard looks like:How to Design a Website

Everything is easily labeled. If you’re feeling a bit overwhelmed, don’t sweat it – I’m going to show you where to go next.

2. Access FREE themes
Once you’re on the dashboard, you’ve got access to over 1500 free themes! Just search the sidebar for “Appearance”, then click “Themes”.How to Design a Website

Here you can check out 60+ Beautiful & Free WordPress Themes to Build Awesome Websites in 2019.

 How to Design a Website

If you want something more professional or elegant than what you find here, you can head over to ThemeForest.net where there’s a big library of themes to pick from at varying costs.

But before you do that, I suggest you at least try spending some time browsing the free themes. Many of them are really professional and well made; so don’t write them off.

As you can see above, installing a new theme for your website is very easy.

You can search for specific keywords and/or use filters to find themes that suit your style. Finding the perfect theme can take a while, but it’s worth it.

You should also look for themes that are “responsive”, as this means they will look good on any mobile device.

Just punch it in as one of your keywords, and you’ll be all set!

3. Install your new theme
Once you have found a theme you like, installing it is as simple as clicking “Install” followed by “Activate”.

Installing a WordPress themeHow to Design a Website

Note: Changing themes won’t delete your previous posts, pages, and content. You can change themes as often as you want without having to worry about losing what you’ve created.

Add Content and pages to your website

With your theme installed, you’re ready to start creating content. Let’s quickly run through some of the basics:

Adding and editing pages
Want a “Contact” page, or an “About Me” page (like I have on my menu at the top of the site)?

1. Look along the sidebar in the WordPress Dashboard for “Pages” -> “Add New”.

2. You’ll find a screen that looks a lot like what you’ve maybe seen in Microsoft Word. Add text, images and more to build the page you want, then save it when you’re done.

WordPress editing a page

 

Adding pages to the menu
If you want your new page to be linked to your navigation bar,

1. Save any changes you’ve made to the page by clicking “Update”

2. Click “Appearance” -> “Menus” in the sidebar of the WordPress Dashboard

3. Find the page you created and add it to the list by clicking the checkbox next to it and then “Add to Menu”.

4. Adding and editing posts
If you have a blog on your website, “Posts” will be where you turn to next. You can use different categories to group similar posts.

 

WordPress categories: If you want to add a blog to your website, you can use different categories and posts. Let’s say you want to create a category named “Blog”. Simply add it to your menu and start making posts.

How to Design a Website

Here’s what you need to do:

a. Create a new category by going to “Posts -> Categories”

OR

b. Create a blog post by going to “Posts -> Add New”. Once you’ve finished writing your blog post, you need to add the right category for it.

Once you’ve created your category, simply add it to the menu, and you’re in business!

Changing Your Title and Tagline

 

It can also be done with the customization panel by going to site identity.

Page titles explain to searchers what your website is about. They’re also a big part of how search engines determine your rankings. You want to be sure they’ve got the keywords you want to have targetted (but in a natural way, written for real people).

You should use a unique title on every page of your site. For example, my site’s title is “How to Make a Website”.

Taglines are added at the end of titles across every page. My site’s tagline is “Your First Website

To change the title and tagline on your website, go to “Settings -> General” and fill in the form below:

Site title, tagline, and settings

Setting Up a Static Front Page

 

Some people are frustrated that their home page looks like a blog post. You can fix that by making your home page “static”.

A static page is a page that doesn’t change. Unlike a blog, where the first new article will show up at the top every time, a “static” page will show the same content every time someone comes to the site – like a home page you’ve designed.

To set up a static front page:

1. Go to “Settings -> Reading”

How to Design a Website

You can keep the homepage or any page as static or it’s your choice if you want to keep the post page.

2. Choose a static page that you have created. “Front Page” denotes your home page. “Posts page” is the front page of your blog (if your entire site isn’t a blog).

If you don’t choose a static page on your own, WordPress will take your latest posts and start showing them on your homepage.

How to Design a Website: Static Home Page

How to Design a Website

Installing Plugins

What is a plugin?

“Plugins” are extensions that are built to expand WordPress’ capabilities, adding features and functions to your site that don’t come as built-in.

They’re shortcuts to getting your site to do what you want to, without having to build the features from scratch.

You can use plugins to do everything from adding photo galleries and submission forms to optimizing your website and creating an online store.

How do I install a new Plugin?

To start installing plugins, go to “Plugins -> Add New” and simply start searching.

Keep in mind that there are over 25,000 different plugins, so you’ve got a LOT to choose from!

Installation is easy – once you find a plugin you like, just click “Install”.

BUT – before you go and install every single one I suggest here.

 

Here I have provided every single Plugin I have used to make Electrobot and my other niche websites and I highly recommend to try all of these.

#1 Contact form 7:

My website has a contact form on my Contact page. It’s an awesome feature to have, as people (like you!) can fill in the form and send me an email without logging into their own email provider. If you want to do something similar, definitely get this plugin. P.S. Here’s a step-by-step guide for setting it up.

#2 Yoast SEO:

If you want to make your WordPress site even more SEO-friendly, this plugin is a must-have. It’s free, and it’s awesome. You’ll be able to edit your title tags, meta descriptions and more, all from within the page itself – no more fussing with WordPress settings.

#3 Google Analytics:

Interested in tracking your visitors/traffic and their behavior? Just install the plugin, connect it with your Google account and you’re ready to go.

#4 Easy Table of Contents:

A user-friendly featured focused plugin which allows you to insert a table of contents into your posts, pages, and custom post types.

  • Automatically generate a table of contents for your posts, pages, and custom post types by parsing its contents for headers.
  • Optionally enable for pages and/or posts. Custom post types are supported, as long as their content is output with the the_content()template tag.
  • Optionally auto-insert the table of contents into the page, selectable by enabled post type.
  • It provides many easy to understand options to configure when and where to insert the table of contents.
#5 Elementor Page Builder:

Q. How it is different from WordPress Page Builder?

A WordPress page builder plugin provides a simple drag and drop interface to build beautiful websites. You can create pages by simply arranging blocks of content with a drag and drop tool. Most page builders also offer front-end editing so you can make live edits without having to switch back and forth between your editor and the preview page.

Above all, a page builder allows anyone to build a website with ease regardless of their skillset. No technical know-how is required as you won’t be touching a single line of code.

Elementor is an easy-to-use WordPress page builder plugin that has a visual drag and drop interface. It comes with a wide array of elements that enable you to simply organize the content on your page with the drag and drop tools. The plugin requires no coding at all to configure its settings and create pages.

With over 900,000 active installs, it’s one of the most popular WordPress page builders available on the web.

#6 MailPoet – emails and newsletters in WordPress:

With MailPoet, your website visitors can sign up as newsletter subscribers and build your mailing list, all without leaving your WordPress admin.

Mailpoet’s newsletter builder integrates perfectly with WordPress so any website owner can create beautiful emails from scratch or by using our responsive templates that display flawlessly across all devices.

Schedule your newsletters, send them right away or set it up to send new blog post notifications automatically in just a few clicks.

Trusted by 300,000 WordPress websites since 2011.

Premium Plan is now free for sites with 1,000 subscribers or fewer. 

The best part is you can use every feature of the premium plan of Mailpoet till you reach 1000 subscribers.

This is one of the best email marketing tool out there which I also use for Electrobot and My other niche sites.

#7 Pretty Links – Best WordPress Link Tracking Plugin:

Pretty Links enables you to shorten links using your own domain name (as opposed to using tinyurl.com, bit.ly, or any other link shrinking service)! In addition to creating clean links, Pretty Links tracks each hit on your URL and provides a full, detailed report of where the hit came from, the browser, os, and host. Pretty Links is a killer plugin for people who want to clean up their affiliate links, track clicks from emails, their links on Twitter to come from their own domain, or generally increase the reach of their website by spreading these links on forums or comments on other blogs.

LINK EXAMPLES

This is a link setup using Pretty Links that redirects to the Pretty Links Homepage where you can find more info about this Plugin:

https://electrobot.co/e254xyz

Here’s a named pretty link (I used the slug ‘yourpreferredname’) that does a 307 redirect to a random affiliate link for xyz:

https://electrobot.co/yourpreferredname

 

#8 Sumo – Boost Conversion and Sales:

Here’s what Sumo can do for you:

  • Grow your email list with timed popups across your site
  • Schedule one-off marketing emails or email drips to communicate with your subscribers
  • Ecommerce integrations and features to win back customers who abandon their cart and increase average order value
  • See the ROI from every email subscriber and sale you make

I use Sumo me for the share button which you can see on the left side of the website. It can help your website grow social shares which is one of the top Google SEO ranking factors.

 

#9 One-Click Demo Importer (ThemeGrill Demo Importer-For ThemeGrill Themes)

This is the simple plugin by which you can import the theme demo content and widgets with just one click. It supports the themes created by the phoeniixx.

FEATURES
  • It can import the demo content of the themes and also import the widgets.

Whatever theme you install in your WordPress, just use this plugin to import the demo content and later you can customize it according to your needs.

Let’s get to the site optimization tools.

(Highly recommended tools) and I use every tool listed here.

 

#10 Smush Image Compression and Optimization:

Smush has been benchmarked and tested number one for speed and quality and is the award-winning, back-to-back proven crowd favorite image optimization plugin for WordPress.

  • Lossless Compression – Strip unused data without affecting image quality
  • Lazy Loader – Defer offscreen images with the flip of a switch
  • Bulk Smush – Optimize up to 50 images with one click
  • Image Resizing – Set a max width and height and large images will scale down as they are being compressed
  • Incorrect Size Image Detection – Quickly locate images that are slowing down your site
  • Directory Smush – Optimize images even if they are not located in the media library
  • Automated Optimization – Asynchronously auto-smush your attachments for super fast compression on upload
  • Unlimited & Free – Optimize all of your images up to 5MB in size forever (no daily, monthly, or annual caps)
  • Gutenberg Block Integration – View all Smush stats directly in image blocks
  • Multisite Compatible – Both global and individual Multisite settings
  • Process All Your Files – Smush will process PNG, JPEG and GIF files for optimum results
  • Super Servers – Smush images with no slowdown using WPMU DEV’s fast, reliable Smush API
  • And many, many, more!
PRESERVE IMAGE QUALITY

Some image compression tools destroy images with as much as a 30% loss in quality. Our servers strip hid bulky information from your images and reduce file size without affecting the appearance.

#11 Swift Performance Lite:

You Have Just 3 Seconds To Impress Your Visitor. Don’t Lose It By Slow Loading. 95% of customer’s don´t wait if a website takes longer than 5-6 seconds to load!

Yes, that´s a big number.


People spend a lot of time and money on building websites and even more on marketing to get traffic… but what happens when those people come to your website and the website is slow to load? You lose sales.

Slow-loading websites lose visitors and sales.


But we have a solution! Say goodbye to slow loading websites and say hello to Swift Performance Lite or Pro!

Get a complete Cache & Performance plugin for free or as a pro.

Swift Performance will increase the loading speed of any WordPress website and provides an intelligent, modern caching system. You can even cache AJAX request, dynamic pages, and you can add exceptions (URL, page or content-based rules).

Here are some of our most popular functions.

 

Caching. Page caching is working out of the box. It is compatible with WooCommerce, bbPress, Cloudflare and Varnish as well. It will boost your performance, improve SEO scores, and create a better user experience.

CSS and Javascript optimization. One of the most important things for performance is to optimize the delivery of static resources. Swift Performance not only combines and minifies the CSS files but generates the Critical CSS for each page automatically. Also, Javascripts (even inline scripts) can be combined, minified, and move to footer without any conflict.

Huge combined javascript files may still be render-blocking, however with our unique Async Execute solution, you can not only combine/minify the scripts, but you can run them individually as soon as a chunk has been downloaded – which provides incredibly fast JS execution, improves SEO scores and user experience.

Database Optimization. Keeping your database clean is extremely important for speed. Swift Performance has a built-in DB Optimizer to clean expired transients, orphans, duplicated metadata, and spammy comments. You can also schedule every task. It has never been easier to keep your WordPress database clean.

Plugin Organizer. Plugins are a big part of WordPress, however sometimes not properly written plugins can cause performance issues. With Plugin Organizer you can disable plugins on certain pages, and let plugins run only where it is really necessary. You can set a URL match, Frontend, Admin Pages, AJAX action rules and exceptions to get the best results.

#12 a3 Lazy Load:

If you are wondering how to optimize your website and how to design a website that load fast enough. a3 Lazy Load is a Mobile-Oriented, very simple to use a plugin that will speed up sites page load speed. The more content-heavy your site the better the plugin will perform and the more you will see the improvements in performance. See this demo of a page with 1,000 images (yes 1,000 images) to load.

a3 Lazy Load is the most fully-featured, incredibly easy to set up lazy load plugin for WordPress. Use the plugins admin settings to easily define what elements are lazy loaded and when they become visible in the users browser. As the user scrolls down the page the next lot of elements you have applied lazy Load to are only loaded as they become visible in the view port.

IMAGE LAZY LOAD

Images are the number one element that slows page load and increases bandwidth use. From the a3 Lazy Load admin panel turn load images by a3 Lazy Load ON | OFF. For more flexibility when ON you can choose to ON | OFF lazy load for images.

#13[not a plugin] Use CloudFlare for Free Global CDN and Free SSL
  • You’ll get a free Global CDN and Free SSL(https) with Cloudflare [highly recommended]
 

What is SSL?

How to Design a Website

SSL (Secure Socket Layer) is the standard security technology for establishing an encrypted link between a web server and a browser. This secure link ensures that all data transferred remains private. It’s also called TLS (Transport Layer Security). Millions of websites use SSL encryption every day to secure connections and keep their customer’s data safe from monitoring and tampering.

Why Use SSL?

Every website on the Internet should be served over HTTPS. Here’s why:

  • Performance: Modern SSL can actually improve page load times.
  • Search Ranking Boost: Search engines favor HTTPS websites.
  • Security: Encrypting traffic with SSL ensures nobody can snoop on your users’ data.
  • Trust: By displaying a green lock in the browser’s address bar, SSL increases the visitor’s trust.
  • Regulatory Compliance: SSL is a key component in PCI compliance.
 

What is a CDN?

How to Design a Website

A content delivery network (CDN) refers to a geographically distributed group of servers that work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon.

A properly configured CDN may also help protect websites against some common malicious attacks, such as Distributed Denial of Service (DDOS) attacks.

Is a CDN the same as a web host?

While a CDN does not host content and can’t replace the need for proper web hosting, it does help cache content at the network edge, which improves website performance. Many websites struggle to have their performance needs to be met by traditional hosting services, which is why they opt for CDNs. By utilizing caching to reduce hosting bandwidth, helping to prevent interruptions in service, and improving security, CDNs are a popular choice to relieve some of the major pain points that come with traditional web hosting.

What are the benefits of using a CDN?

Although the benefits of using a CDN vary depending on the size and needs of an Internet property, the primary benefits for most users can be broken down into 4 different components:

  1. Improving website load times – By distributing content closer to website visitors by using a nearby CDN server (among other optimizations), visitors experience faster page loading times. As visitors are more inclined to click away from a slow-loading site, a CDN can reduce bounce rates and increase the amount of time that people spend on the site. In other words, a faster website means more visitors will stay and stick around longer.
  2. Reducing bandwidth costs – Bandwidth consumption costs for website hosting is a primary expense for websites. Through caching and other optimizations, CDNs can reduce the amount of data an origin server must provide, thus reducing hosting costs for website owners.
  3. Increasing content availability and redundancy – Large amounts of traffic or hardware failures can interrupt normal website functions. Thanks to their distributed nature, a CDN can handle more traffic and withstand hardware failure better than many origin servers.
  4. Improving website security – A CDN may improve security by providing DDoS mitigation, improvements to security certificates, and other optimizations.

How does a CDN work?

At its core, a CDN is a network of servers linked together with the goal of delivering content as quickly, cheaply, reliably, and securely as possible. In order to improve speed and connectivity, a CDN will place servers at the exchange points between different networks. These Internet exchange points (IXPs) are the primary locations where different Internet providers connect in order to provide each other access to traffic originating on their different networks. By having a connection to these high speed and highly interconnected locations, a CDN provider is able to reduce costs and transit times in high-speed data delivery.

How to Design a Website

Latency – How does a CDN improve website load times?

When it comes to websites loading content, users drop off quickly as a site slows down. CDN services can help to reduce load times in the following ways:

  • The globally distributed nature of a CDN means reduces the distance between users and website resources. Instead of having to connect to wherever a website’s origin server may live, a CDN lets users connect to a geographically closer data center. Less travel time means faster service.
  • Hardware and software optimizations such as efficient load balancing and solid-state hard drives can help data reach the user faster.
  • CDNs can reduce the amount of data that’s transferred by reducing file sizes using tactics such as minification and file compression. Smaller file sizes mean quicker load times.
  • CDNs can also speed up sites that use TLS/SSL certificates by optimizing connection reuse and enabling TLS false start.
  • BY using the above tools I am able to get a very high server and loading speed. Just have a look.

  • My server is set to Singapore & Bangalore but I am getting higher server speed across US, UK, Canada and Germany just by using Cloudflare CDN.
 
How to Design a Website
  • Before & After Results: Cloudflare CDN + SSL, a3 Lazy Load, Swift Performance LIte & Smush
  • By-the-way, I have also shifted to Hostinger from a slow server hosting Company, which also helped  a lot to speed up the site.
How to Design a Website
 
  • After using the Tools:
How to Design a Website
 
  • After using the Tools:
How to Design a Website

Select a Template and Start Customizing

How to Design a Website using Elementor & Why I prefer to Build pages with Elementor?

1. Creating Posts and Pages with Elementor

As you add a new page or edit an existing page in your page editor, you can see the Edit with Elementor button above the WordPress editor. You can simply click on it to launch the Elementor editor.

How to Design a Website

This directs you to the Elementor editor interface as shown in the screenshot.
On the left side, there are elements or widgets ready for you to drag and drop. You can find the Settings bar below the elements. To add new content, click on Add New Section or Add Template in the content area.

A section is a design layout block with one or multiple columns in it. Upon choosing Add New Section, you’ll be prompted to select a content structure for your new page. There are 12 section types to choose from, as shown in the screenshot.

How to Design a Website

After choosing the structure of your page, you can choose a section layout and drag elements into the section’s columns.
As shown in the screenshot below, you can change everything from the editor on the left side and see the changes live within the content area.

 

If you want to use pre-made templates for your page, then you can click on the Add Template button. You have access to over 500 pre-designed templates, named pages, and blocks in the Elementor library.

 

 

Click on Save Options and then save as Template.

 

Now, your new template is stored in the Elementor library.

 

You can simply insert your custom-made template on any page you want. Moreover, you can export the template to other websites you own, making it super convenient. You won’t have to build a new page from scratch each and every time.

 

2. Customize as You Like

Elementor gives you endless customization options for your website.
Go to the Style and Advanced menu in the Elementor editor to see all the customization options.

 

 

You can manage the width and height of the section; resize columns; set your content position to the top, center, or bottom of a column; set padding and margins for sections, columns, and widgets; set column gap; etc.

3. Responsive Design Controls

Elementor allows you to customize the design of your web pages based on the type of devices your visitors use. This ensures your website is 100% responsive, meaning your site will look great on all devices including desktops, mobiles, and tablets.

Elementor Features

Let’s take a look at some more features of the Elementor plugin:

  • Inline editing: You can edit text content directly on the live screen using this feature. This feature makes it easy to write blog posts and edit your existing content.
  • Header and footer editor: Editing the header and footer areas of your site is easy with Elementor. You can visually edit them without coding.
  • Translation and RTL Ready: The plugin is translated into over 23 languages and can be translated into additional languages easily. It fully supports RTL language.
  • Global colors and typography: You can set global colors and typography to create a cohesive design across your entire website.
  • Extensive typography options: Use 800+ Google fonts, or add your own custom Typekit forms and use them throughout your website.
  • Third-party integrations: The plugin supports third-party integrations including MailChimp, Drip, ActiveCampaign, etc.
  • Maintenance mode: You can set maintenance mode using Elementor’s beautiful coming soon and maintenance mode templates.
  • eCommerce widgets: Use pre-built WooCommerce widgets along with pricing tables and price list widgets to build eCommerce pages easily.

Free Elementor Pro + Envato [Templates+Blocks] [Download Here]

Elementor is free if you download it from the official WordPress plugin repository. The free version of the plugin offers a decent number of widgets and other features that let you build simple websites.

For professionals, the plugin has a premium version with additional premium widgets, templates, and other options. It has three pricing plans: Personal, Business, and Unlimited. You can buy the Personal plan for 1 site license, Business for 3 sites, and Unlimited for unlimited sites.

elementor-pricing

Elementor includes extensive documentation with a lot of tutorials to help you build a website easily with the plugin. You can also find how-to guides on their blog and YouTube channel.

The plugin authors provide dedicated support via ticket-based emails.

But you know what even if you don’t buy Elementor Pro, you should download it as Envato Elements provides a free archive of templates and blocks which you can use with Elementor Pro.

How to Design a Website: You can download it here

Download Here: Elementor Pro

Download Here: envato-elements.1.0.5

When designing your site, you should think about how everything you do relates to your overall brand. Everything from the color scheme to font style and imagery plays a part in telling your brand’s story. It’s important they’re all sending the same message.

Color Scheme:

Color is one of the brand’s biggest communication tools. In fact, according to Color Matters, a signature color can boost brand recognition by 80%.

There’s a lot of psychology behind people’s perception of color, so it’s important to understand how it’s used in relation to your industry. To help you out, here’s an infographic we’ve put together that helps explain what different colors mean and how they’re used.

Most brands have one dominant color, then two or three secondary colors. Orange & Blue are the most popular color, with one-third of the top 100 brands using it in their logo.

Font Style:

Similar to color, the font you opt for has a big impact on what people think about your website. The average website user will read about 20% of the text on any given page, so it’s crucial to entice them with an appropriate vibe.

Naturally, white-collar businesses will want to use classic styles of font. Fonts like Arial and Helvetica are synonymous with professionalism and therefore make sense when discussing serious matters.

Visual content is useful for increasing clicks and engagement, but on a more basic level, images simply stick in the mind. According to one study, if we hear a piece of information, we’ll only remember 10% of it – but if you add a picture, you’ll remember an incredible 65%.

That said, be careful not to overload your site with images. Lots of high-quality images might look great, but they can slow your site down. Web users are impatient and will vote with their keyboards if your site doesn’t load quickly.

Add-In and Optimize Your Content

Now the time to optimize your content so that it could be seo friendly.

You need to focus on these two things first:

Title Tag: The title you see in your google search results

Meta Description: The description you see below the URL

So, now you know what you want to add to your website, there are two things you need to think about: positioning and optimization.

Positioning refers to where your content sits on each page, and how it’s laid out.

Optimization, meanwhile, is the process of tweaking content to help it rank higher on search engines, such as Google or Bing.

Search Engine Optimization (SEO, for short) is when you make changes to your website in order to increase the quality or quantity of people landing on your pages.

Here are just a few of the most important things you can do when designing an optimized website:

Metadata

Beyond your actual content, page titles and descriptions – known as metadata – are the easiest way of telling Google what your site’s all about. Metadata appears in the search results and allows users to discover what’s on your webpage before they click on it.

Most people are familiar with Google’s search results and how websites are presented.

Image Compression

Images are typically quite large files. This means that having a lot of imagery can slow your site down, leading to people becoming impatient and leaving it before it’s even fully loaded. This is known as ‘bouncing’ off the page.

You can use Smush for this.

Image Alt Text

Alongside compressing images, another important part of SEO is to tell Google what an image represents. Unlike text, search engines can’t ‘read’ images, so by adding alt text to an image, you are effectively helping them understand what it being depicted.

Most templates these days are mobile responsive, and will automatically reformat your content to fit various screen sizes. It is, however, worth thinking about if you want anything to appear differently to mobile users.

Internal Linking

Internal linking is where you direct users to another webpage on your site via a hyperlink. This is generally done when you mention something that you have related content on. This tells Google and co. that you are an authority on the subject since you have multiple articles about it.

Backlinking

A backlink is a link one website gets from another website. Backlinks make a huge impact on a website’s prominence in search engine results. This is why they are considered very useful for improving a website’s SEO ranking. Search engines calculate rankings using multiple factors to display search results.

Publish your website

Congratulations – you’re ready to launch!

 

Just have a look at what you have done till now and Publish!

You know what, you have now expertized the basics of building a website and can start monetizing it to grow your business with Adsense and Affiliate Links.

I personally don’t use Adsense because Affiliate Marketing is 10 times more profitable than Adsense without effecting the look of my blogs.

Now you’re done! You have made your first website from scratch to end. Remember these are very general directions so you know where to start from. The design and development of a website is a personal process and the workflow is different for every designer and client. Keep an open line of communication with your clients to determine which options would be better for a specific project. Pay attention to detail and don’t be afraid to express your thoughts.

Analyze and modify

Just regularly have a check upon your website and optimize it according to Google algorithms and SEO terms.

You never know Google can surprise you any time with its Update.

In today’s fast-paced and information-driven world, every business needs a website. With these tips on how to design a website, your venture can enjoy that benefit as well. A little time and planning can provide you with a well-designed site that will enhance your company’s image, even if you’re not a website designer.

#1 Use Tools like GTMetrix, Pingdom Tools, Google Page Speed and UberSuggest to regularly optimize your website.

 

#2 Make sure it works (cross-browser compatibility)

Along with responsive considerations, remember that not all of your visitors will use the same browser to view your website.

Most of the time, this will not be a problem, but you should check your website from multiple browsers.

You don’t need to try every possible browser option, but your site should work well on the five most popular: Chrome, Firefox, Safari, Edge, and Opera (Microsoft has discontinued support for Internet Explorer).

If you’re using WordPress and a responsive theme, you should see approximately the same image across any browser you try.

#3 Don’t ignore mobile users (responsiveness)

In 2018, 58% of website visits were made from some sort of mobile device. This means your site can’t only be presentable on a desktop monitor.

The ability of website design to adjust content automatically to fill different devices/screen sizes is known as “responsiveness.”

If you are thinking How to Design a Website perfect then your site needs to look equally good on a mobile phone, tablet, laptop or widescreen monitor.

Once again, however, WordPress makes this simple.

Many WordPress themes are already responsive and will require very little, if any, tweaking. Responsiveness allows you to present a professional website to all of your visitors, regardless of the device they use.

Now I have conveyed everything I learned in my online marketing and blogging journey and it’s your turn to go ahead and start right now.

Also Check out:

Any questions about How to Design a Website? Leave a comment below.

If you like this post do share it with your friends. Do check out our Blogs here.

If you are completely new to Blogging then here we learn how to get started with Passive Income and how to create a life of freedom. Get started here.

Check out My Story how I created a life of freedom with Blogging and Affiliate Marketing here.

Also, if you have any Query you can Contact Us

Have a good day 🙂

20 thoughts on “How to Design a Website (2019) | 8 Simple Steps + 12 Plugins

  1. We stumbled over here coming from a different web address and thought I might as well check things out. I like what I see so i am just following you. Look forward to looking over your web page yet again.|

    1. It is a WordPress platform and you need to invest some money to get good hosting which provides SSL and better security.
      Wordpress is a very good platform for beginners and one of the easiest and the best part is you do not need to learn HTML, PHP or any other programming language to make a website.

  2. Thanks a lot for sharing this with all people you actually realize what you are speaking about! Bookmarked. Please additionally talk over with my web site =). We may have a link trade contract among us!

  3. Howdy I am so glad I found your web site, I really found you by mistake, while I was researching on Digg for something else, Anyhow I am here now and would just like to say many thanks for a fantastic post and a all round thrilling blog (I also love the theme/design), I don’t have time to read it all at the moment but I have saved it and also added your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the superb job.

  4. Good blog! I really love how it is simple on my eyes and the data are well written. I am wondering how I might be notified when a new post has been made. I have subscribed to your RSS feed which must do the trick! Have a great day!

  5. I’ve been browsing online more than 2 hours today, yet I never
    found any interesting article like yours. It is pretty worth enough for me.
    In my view, if all site owners and bloggers made good content as you did, the internet will be much more useful than ever before.

  6. Wonderful work! This is the type of info that should be shared around the internet. Shame on the search engines for not positioning this post higher! Come on over and visit my website . Thanks =)

  7. Thanks for any other informative website. Where else may just I am getting that kind of info written in such a perfect manner? I’ve a mission that I am just now working on, and I’ve been at the glance out for such info.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top