Search the site:

Copyright 2010 - 2018 @ DevriX - All rights reserved.

The Complete Action Plan for Building and Growing a Professional WordPress Website

Professional WordPress Website

Everyone wants a well-known site that attracts thousands if not millions of visitors monthly. While this can be hard it’s not impossible and there are many techniques to achieve that.

Of course, we are not promising, “do this, get rich”, because nothing is that simple. The goal of this list is to share some light on the best practices, the most common pitfalls as well as the misconceptions in web development, content writing, design, and marketing.

We have developed various sites and web apps across a whole range of complexity and size. Be it gorgeous little blog themes or large – scale SaaS solutions for tens of thousands of users up to news sites with more than 10 to 20 million visitors.

In order to get everything organized, we have separated the list into a few primary sections: Planning, Execution, Optimizing and Growing.

  • Planning Stage: Things you can do before even beginning your site (or rebranding).
  • Execution: Important steps when developing the site; potential problems, tricks, and techniques.
  • Optimization: Jump to this if you already have your site up, running and you want to find a way to further improve it.
  • Growing: Right after optimization — steps to grow the user base and potential customers.

Planning

Many teams overlook this stage. Planning is what can save hours and hours of time (another way to say money) for everyone. It is also one of the areas where many companies fail even if the final result comes afterward.

8 out of 10 businesses fail. A good portion of the list are stages related to planning. Be it internal discussions, bad research of the market or lack of a good business model.

We have created a solid planning guide to help you out with this stage. It covers the cost of a website, tips on picking the right team, examples of big and small businesses and much, much more.

We have prepared a good list of potential pitfalls that we’ve collected through years of experience.

“No matter what one does, regardless of failure or success, the experience is a form of success in itself. – Jack Ma, billionaire founder of Alibaba

So what is important to look for before you begin working on your website?

What is your budget? — This will pretty much tell you how far can you go on your initial stage before reconsidering a budget bump. If you’re going to use pre-built themes, then your main concern is the theme’s price and hosting plus any additional (premium) plugins.

Though that might be a rather big portion of site owners, it’s important to note also the more demanding ones. A website development costs can vary from $5,000 to $50,000 or more depending on the project.

But not to worry, nowadays it’s not all “gimme all your mo$ey now”. Retainer plans are a solid option that can break down the costs over time, usually months, and keep the client safe from investing everything all at once.

Market Research — Is your idea unique enough? What do your competitors do that you can do better? Find the industry trends and highlight them on beautiful landing pages. Write down everything that grabs your attention, ask questions, “Why is this successful?” or “Why isn’t it?”. Make sure to read through various marketing statistics that will further narrow down the final goal.

Content — You don’t have to start with your blog first, but you do need content for your site and have it laid down even before starting the designing phase. Headlines and text  can be further polished by an experienced marketing team, making it even better later on. When content planning, you will also do keyword research to highlight the top search queries from your ideal customers.

“What content marketing is often used for?” Source: Econsultancy

Prepare for Estimation — You might want an estimation from an agency for your website. However, this estimation has to be based on something. All of this planning will greatly help out in deciding how much can it cost. Here are a few good things to write down:

  • Your top five goals. What are your main business needs?
  • What does your ideal customer look like? Why would he or she visit your website?
  • Do you have any design concepts/ideas?
  • What do you expect from your website in the next 12 months or so?

These, among others, are questions we take a look at on our “Request a website” form.

Sitemap — Top navigation menu, second level pages, custom post types, landing pages. What is everything that you need to show and where should that go? This too can be done using an experienced agency, additionally, it’s not something to ignore if you’re starting solo at first. A good navigation is paramount to improving the CRO (conversation rate optimization)  of your website.

Consult with an agency or experienced developers — All that is written here are things to consider, but business to business can vary a lot, so more targeted planning is a very valuable addition to your arsenal.

As a bonus to these points, here is a checklist of things to remember/consider when planning your website:

  • Is the name easy to remember and spell? Is it unique enough to show up first on Google when searched?
  • Invest in good branding. Logo, fonts, colors — all of this will make you stand out and be remembered. Cheap generic logos from a shady site won’t do you any favors. You can open a logo design contest so freelance designers can compete to deliver their own custom logo. They can pitch their creative ideas to you and they’ll have a chance to be selected as a winner.
  • Set a deadline — projects being forgotten or dragged out are nothing but a bad experience.
  • Set a strong deadline and follow it.
  • What’s your CMS (contract management system) of choice?

Don’t randomly generate your company’s name. It’s not a game character. It has to be easy to remember and meaningful.

This point can be generalized for both clients and freelancers that can outsource the work while most of the tips from the “development” section are focused on the agency part.

Execution

The long but hard development time, or the easy but messy quick install, either one is an option. This is the process of converting your ideas and planning into an existing product. In it are packed design, development, and content.

This is where your budget decides the path to take — premium/free themes or freelancer/agency. We did a quick breakdown on this very decision to help get you started.

The initial phase would be getting the content for your main landing pages. This is needed for the design team to prettify your message and present it in a fancy way. Therefore, here are some of the more important parts to pay attention to:

Design

A strong message above the fold — You need to grab your visitor’s attention right off the bat. There is only one chance to make a first good impression. This is on par with a stunning image that fits your business idea and which will benefit you greatly. It’s important to keep your visitors on the site and lower the potential bounce rate.

Source: neilpatel.com

Trendy Design — if you launch a new site, it’s good to stay up to date. Shiny 3D text, gifs, and flashy graphics are a bit old school. Browse the newest websites, take a look at the trendy designs from Behance or Dribbble, among others, to see what’s the most liked, popular, nowadays. Just don’t forget that being functional is more important than being shiny. It’s one of the core parts of the design in general.

Prepare all comps early on — This one has become problematic, more times than not in our experience. New design changes, missing pages, lack of mobile designs or no design for hover states have often delayed development time, sometimes even up to double the amount of time it would normally take.

We’ve used Invisionapp before to keep track of all designs in one place

You need the sitemap from the planning stage in order to achieve that. This is how connected everything is.

Keep Communicating — Stay constantly in the loop. Different design agency/designers have different methods of work. Some keep discussing everything throughout the process while others plan from start and keep the design hidden until it’s finished.

Depending on that, find what works best and keep a good eye on the progress. Just one tip — explain your goal and ideas, do not interfere with the design decisions too much. This is why sites like clientsfromhell.net exist.

Request a style guide — Make sure your design team will provide a web thought-out style guide (as long as your budget agrees with this of course). It will come of great help for any future changes or if the design team is different in the future. This will also be helpful to any partners you might have in the future.

Keep a copy of the latest work files — Again, design teams can change and the developers will 100% require it. Nowadays there are cloud storage services everywhere as well as tools like [invisionapp]. Make sure you have everything up to date, in one place and easy to share.

Development

This can be considered to be an even longer period than the design phase. Of course, that can depend on your contract with the development agency/freelancer. In similar fashion to the design phase, communication with the development team is paramount.

From our experience, we know that a good portion of smaller projects time go into sending emails back and forth.

This is simply because not everyone has a good plan from the get go and many of the points above are not followed. The development time increases together with the cost.

DevriX is a WordPress development company, so all of the tips given here are with regards to that, though many of them can be ported to any other CMS.

Read the specification very carefully. — Everything needs to be checked with the technical team. A single small bullet point saying “And it has to be in three languages” can easily throw you behind of schedule.

Server Setup — Delegate a good amount of time to all tasks that require communicating. That would mean setting up SSL certificates, migrations, server settings and so on. Parts of these can require communication between the hosting company and the development agency and that alone will take an unknown amount of time. So the earlier you get this done the better.

Good code structure — As obvious as this might sound, some projects, with very tight deadlines, might require messy code and monkey patching. While this might sound reasonable when you have to launch in two days, if possible it’s best to keep everything clean from the very start. We could write thousands of words on this topic, for every language and project, but that is not the goal here.

Double check your implementation — A very common mistake is that the client requires a feature A that does exactly one thing. The developer reads it and understands it slightly differently, so the new code does a slightly different thing.

Let’s work with examples: The client wants to make the category “Featured” outlined in a red color on all of the pages. What the developer does instead is to add a checkbox for every category that can be “featured” and outline that. In the end, it can be used in the same way and the result would be the same, but a junior writer for the client could check that checkbox and mess up the site.

This is a problem that can happen very easily. This is why the role of the project manager is so crucial to delivering on time. A feature that can be implemented in minutes may take an hour or two instead, then it will be given back to the client for testing, and it might be returned as “not what we’ve asked for” and a new patch must be submitted.

Polish your demo  The client wants to see the project when you say it’s done. Quite often people don’t understand the concept of “this is just a demo, you can edit it later on”. In order to avoid this problem, just present to the client what he or she wants from the start.

Polish your demo, fix all little bugs on it, make it perfect. Even if a feature is not ready, at least have the front-end for it there, and tell them “we will connect it on the next sprint” or something along the lines.

It has happened more than once when asking a developer, “So are you ready?“, and they say, “Yes“, and then I say, “Show it to me then.” and they’re like, “Uh,… about that…“.

This does not mean not ready, this means, “I wrote some code, but you can’t see proof of that”. Nobody cares if there is a function somewhere that does something. Unless they can go and see it live, like on a production site, then to them, it’s not ready.

Not using version control from day 0 — Version control is a no-brainer nowadays. Use it always, even if you are working on your own code. Even if you just start quickly and bootstrap some code quickly, start in a repo, commit and continue working. The reason? “Whoops, I cut and pasted but now it’s gone”. Now you are behind. “Why use Version Control?”

Keep a good documentation — That can be said for the code and the project. In an agency, the development team can be huge depending on the project, and people on a project can change, you might have to take on board new people every few months.

What we do at DevriX for all medium to large projects is keep a Google document for the whole project. Some of the main headlines are:

  • What is the company, brand, history? Who do we speak with?
  • What are the main important links? – Stagings, production, VC repository, Asana project, guidelines, assets, etc.?
  • What are all of the main features and how were they implemented?
  • What are any third party services and plugins that work there? Lists for access links, steps for troubleshooting, etc.

This is just a short overview, some documents easily exceed 50-60 pages. Send this to a newcomer and he will get onto the project quickly, instead of perhaps, spending the time, like an experienced developer would, on going over things properly and thoroughly. This will also save time on answering important questions because all a more experienced developer has to give is a, “check the documentation, it’s there”.

If you have more questions feel free to post it in Quora and ping some of our technical members there!

Optimization

That leads us to the next stage. Now the site has been launched or you’re taking on the  project of an existing site.

If you have to start optimizing right after a launch, then a few (important) things could have happened:

  • There was not enough time, so a lot of monkey patching has been done and now everything is a mess.
  • Not all the features were implemented, there is lack of speed/lightness to the application/site.
  • New requirements come. Maybe the client now understands what you mean by “Sliders are not that great idea anymore.” or “We should cut down third-party services.”.

The above is a very short list, but it gets the point across.

If instead, you get a project for an existing site and the main technical requirement is to make it lighter/faster, then here is a list of things to look for:

Reduce response time — That could even mean moving to a different hosting provider (migration). Ideally getting to under 200ms response time is ideal. Some of the main ways to achieve this would be improving database requests, reducing resource usage in general and so on.

Source: webenfolds.com

Compression, browser caching, expire headers and more — All the various server-side techniques that are reported by services like GTMetrix. Just from that alone, you can decrease the load time of your site by 50% or more. We’ve seen over 10 seconds improvement just by enabling them alone.

Enable Caching – A very important part. There is no reason to serve the very same result to every new visitor and for every reload by fetching it from the database. If there is no change, then a simple cached response with no DB queries should suffice.

An easy way to fail at this is by adding a “random posts” widget. With that, for every load, every user generates a request to get a random post, and there is no easy way to cache this. And so, this is another example of how you don’t have to always improve something, you can scratch it off and remove it if it’s not adding any real value to the product.

Look for scripts to remove/reduce – Very often a site that has been live for years will get bloated with various scripts. Some can reach over 100 different JavaScript files loaded on every single page refresh.

Remove any caching and this will be just too heavy for some servers. This is the first thing we look for when we optimize a certain site. A few solutions might be:

  • Simply remove a script that is not really used.
  • Bundle the scripts that are used across the site together and reduce the HTTP requests.
  • Load a script only if it’s needed. This could be only for a certain page, for a popup or to lazyload them.
  • Defer/async them to improve load times.

Optimize Images – The easiest way to slow down your website is by uploading huge images. For non-developers, that’s easy to miss. On your screen, a 10MB image and 80KB image can look the same, but there is an obvious difference in file size.

Imagine how slow a site would load when the user has to download fifty 1mb+ images on every page loading through bad 3G. There are a few ways to proceed here:

  • Just remove images that might not be required. This can even improve the design if it’s too crowded.
  • Lazyload images. This means to start downloading them only when they are visible on the screen, it can greatly improve initial load times.
  • Compress and resize. One of the best things to do – lower the file size as much as possible. Use JPG format for non-transparent images, compress GIFs, optimize PNGs. Running your images through a site like tinyjpg.com can strip megabytes from every page load.
  • Use sprites: Small PNG icons can be grouped into one file and then arranged with CSS on the page. This is more the work for the developer when building the theme, but it’s still a valid option to reduce the number of requests.
  • Use SVG: small file size, they can even be sent with the HTML without extra requests. They are a Vector image, and so will remain in perfect quality always.

Try to disable some plugins – It’s very likely that not every active plugin on the site is doing something crucial. But it’s very likely that almost every plugin adds a CSS and JS file (in fact, maybe more than one).

Compose a list of non-crucial plugins and present it to your client. Try to explain why they are “good to have, but not important” or that they are just too heavy.

Need an example? Sliders. The big ones with 10,000 lines of code or more. And all of this, loaded for every page just to show a small slider on the homepage with some text on the image. All of this can be reduced to a single image or very basic lightweight slider that is loaded just for that page in particular and weighs no more than a few kb.

Reduce database requests – A very good place to begin. A poorly written piece of code can practically make the website almost impossible to use and increase server loads by a lot. There are many cases where site owners have upgraded their hosting plans to over $400 a month because they think that their site needs all of this.

The case, in reality, is that there are a bunch of poorly written requests and lack of caching. Solving all of this can cut down the resource need and lower the monthly cost to under $50 quite easily. Obviously, this can vary from project to project.

Reduce the number of CSS files – This is the same with scripts and images. If possible try to combine your files. It is true that the h2 protocol is there to help with serving many small files, but it’s rarely implemented yet. A good starting point is to compress them into one bigger file. This can be done in the theme or through WordPress plugins like autoptimize, though similar solutions can cause unexpected caching issues.

Improve first-paint times – This is a fun one. The first-paint time is the time between opening a site and seeing what’s on it. How long do you wait with a white empty screen until you can see the text and images on the site?

40% of people will leave a website if it takes more than 3 seconds to load. — Econsultancy

This is psychological. Even if the site is heavy and it takes at least 7-8 seconds to load, if the user sees the content he or she came for, in the first second, then that is very useful, the site feels fast. Here are a few tricks to achieve it:

  • Add CSS in the header, this will style the above-the-fold components early on before any other resources have loaded. To do this you need to make sure that the HTML and that CSS code in it (in the <head> tag) are not blocked by any other resources.
  • With this inline CSS animate loading components or prioritize the content. If the user can start reading right away, he won’t care about some image in the footer (and he needs time to reach it anyway).
  • If you retrieve a lot of data, add preloaders. This can be a set of elements that look like text but made of boxes instead. Just animate them to “loading” and now the user has something to see, an action happening instead just a blank page. Apps like Facebook and Quora are good examples.
  • Keep the CSS, in the header, lightweight and simple. Your mobile design must be simple in the first place, but if there are complex elements above the fold, then make sure to simplify them with loading placeholders.

Number of mobile users throughout the years

Growth

We’ve gone through the long planning process, we’ve built the site and managed to optimize it. Now is time to continue improving and growing. This is the longest part of the project for a retainer-based relationship between the agency and the client.

If we break down the steps from day one to this stage it would be something like this:

  1. Official start of the project – get all designs and specs from the client.
  2. Go through all specifications and write them down into actionable tasks.
  3. Review every single requirement and discuss it with the dev team for potential problems or delays caused by the implementation/communication.
  4. Go through all the designs with the front-end team and spot potential issues. Write down all questions and talk with the client/designer about them. See if there are final changes that could be made.
  5. Build the front-end architecture – write down a style guide and reuse components from it when building all pages. Keep things simple and easy to edit.
  6. The project manager separates the front-end and back-end work so that both teams can work at the same time for the fastest delivery time. Separate the work in sprints if possible for larger projects.
  7. Build a solid demo that is an exact representation of the final product. That way issues can be easily spotted.
  8. Double check all requirements and their implementation internally. Make sure everything is spot on before giving a final review to the client.
  9. After the launch, discuss all leftover tasks from the development that have been postponed because of lack of time or budget. Write them down in sprints and come up with new suggestions.
  10. If there have been compromises to the code start improving page load times and introduce new techniques to visually speed up the site.

Now that we have it more or less written down into ten general steps, we can get into the repetitive “growth” state. The goal here is to suggest new improvements to the client every week and work on them in sprints. In a similar fashion to the steps above, we are listing what to look for (and expect if you’re the client):

Extending existing features – Because of the short deadline, most site features are doing only one thing in a certain way. Most likely, during the brainstorming in the planning phase, there have been many different ideas that couldn’t be implemented due to the short time frame or limited budget.

Now there is enough time to work more on the proposed ideas, to see if they will bring any profit or convert better. Go to the site and see what can be done better, what can be changed and just write down everything that comes to mind.

Then discuss it with the marketing team and come up with a proposal for the client. If there is a green light, then these ideas could fill in the hours for the whole month ahead.

One tip: Write down every single idea that comes to mind at any point of the planning, development or post-launch phase and store them. We call this the “icebox”. When the time to suggest new ideas to the clients comes, we grab the best fitting ones and propose them to the client.

Build new landing pages – This takes time. It needs good content, good images, a good message and a reason to exist in the first place. Have the marketing department do research on the business, see what can be represented in a fancy landing page and start working on a nice design for it that follows the existing style guide.

Suggest it to the client with all benefits that can go with it. Examples of generic pages that can work for many businesses are:

  • About us – Yes, this can be a blog post, but what can be done instead is a history of the company (like a timeline), all services listed, all team members in a fancy representation, a reason to work with this very company, the way it works and more. You can use our about page for an example.
  • Services – All the services the business provides in one place. Present them with a nice showcase of existing work, whitepapers, case study links and more. There is no reason to keep the landing pages short, list all valuable information starting with the one that fits the widest audience.
  • Landing pages for ebooks, whitepapers or guides. Part of the inbound strategy – produce valuable content that attracts visitors. All of them can be made into separate landing pages. This is also a good way to grow a mailing list. All of this is part of growing the business and the only good way to do it is through longer partnership.
  • New curated pages for content-orientated sites. Landing pages with lots of content on a topic that will attract a targeted type of readers. This again is part of a marketing strategy but requires design and development work. Each one of these suggestions can take weeks to months to implement depending on the complexity.

Keep researching new ideas – A lot of people have worked on the project. Have them  go and look for stuff they would love to see there every month.

Research what others are doing, what can be done better or in some cases removed. Then suggest the best ones every week to the client. Accepting some of the suggestions can take weeks, so it’s good to keep stacking them and planning ahead.

Keep updating the internal documentation – Projects can get very big. We’ve suggested this in the development stage, but good documentation must be maintained throughout the whole partnership.

Keep updating the site – New fresh content is one of the best ways to grow a website. Most of the points above were attributed to the agency side, but this one can be said for both. Either the business owner can have a separate content-writing team or use the agency’s writers, but it’s proven that it’s a core part of a successful site.

Fresh new content attracts people, it creates a discussion and increases profit. It’s a strong part of the inbound methodology. But don’t look at it just for writing blog posts, ebooks, white papers, case studies and large guides can be a valuable ever-green content.

Setup a live chat system – It is a very good way to get close to your potential customers. This will let you engage with them and provide a much more personal user experience. They can also be a good place for the salesman to convince the visitors of the benefits of the product in a cheaper way.

Strong social media presence – Need more visitors? Go to them first. Post regularly to the company’s social accounts. Retweeting relevant content, advertising products, engaging with people and more are always good things to do. You can explore this in greater details in top 5 list from Kissmetrics.

Furthermore improve user experience – “the overall experience of a person using a product such as a website or a computer application, especially in terms of how easy or pleasing it is to use.” This can mean including tracking scripts to measure how the site’s visitors navigate and suggest better workflows. An example can be shortening the buyer’s journey from finding an item on an e-commerce site and ordering it.

Source: baymard.com

As the checkout study from Baynard shows, “27% of US online shoppers have abandoned an order in the past quarter solely due to a “too long/complicated checkout process”.” This is a clear sign that profits can improve just by improving the UX (user experience)  of the store.

Improve the conversion rates (CRO) – This one is tightly related to the UX improvements, copy and design. There are many sites across the web solely focused on CRO services. We have left this out of the optimization section to stress more on the marketing side as well as the benefits of the long-term relationships.

CRO is a continuous process, it can always get better. There are various techniques for testing certain steps like A/B testing, measuring through scripts on the site or testing out new landing pages completely.

Source: conversion-rate-experts.com

But there are more benefits to it than just converting more (which is quite good on its own). In the process, you understand your clients much better. What they’re after, what works and what not.

This alone will enhance the “perfect buyer” description and produce better results in the end. CRO can also affect the website’s rank in Google. When Google sees that the visitors of a site are satisfied and purchasing your product, it may decide to bump up the page rank and therefore bring in even more potential customers.

CRM Integration – This alone can be one of the few reasons that small business owners go for a new website in the first place. An integrated CRM (customer relationship management) system will keep track of all customers, business relations, potential new customers and more. The flexibility of WordPress allows for tight integration between other third-party services and the WordPress dashboard to see everything in one place.

Screenshot from DevriX’s CRM tool

Enterprise resource planning – An even bigger wrapper around CRM and other systems and integration. Considering it’s more complex nature, and the many different definitions for it on the web, it’s a good deal for some clients that the experienced agencies can take care of all automatizations, reporting, marketing  and more.

Though it’s important to note the “enterprise” part of the term and therefore the fact is that it might not always be cost-effective for smaller/medium-sized businesses.

Marketing Automation – A rather big topic, but it’s important to state that stacking up “marketing automation tools” won’t always work out as some might expect. A good strategy from the marketing department is at the core of everything. Some of the most popular automation tools are:

  • HubSpot
  • Pardot
  • Marketo
  • Eloqua
  • Infusionsoft

They all provide good integration with WordPress, but the implementation can take more development work instead of just a plugin installation. We have prepared an article that will list ten of the more common ways to create automation in business.

Further SEO improvements – Obviously this alone is enough to motivate people to form whole new companies that focus on SEO alone. It’s also a very big topic and there’s a good reason behind this. Ranking well in search engines is among the top ways to gain new visitors that later can be converted to customers. And there are many ways to achieve that, some of them can be summarized as:

  • Having a very fast site. No wonder that we’ve put so many points so far on speed optimizations. Google loves fast sites, it even has tools to test how well they perform.
  • Often updated content. No one likes a 3 years old site that hasn’t moved a bit. There is just no reason to visit it again. Keep writing new content and update existing pages.
  • Make a keyword research when planning articles, use them smartly throughout your titles.
  • Always have unique content. Plagiarism is a huge no-no. It can get your site blacklisted.
  • Good code structure – following the semantic rules of HTML5 is a must. It is also why we’re following all the best practices in our starter theme.
  • Keep a good content structure. Breadcrumbs are a great way to navigate back and forth.

We have also written more than one article on that topic that will go into even more details!

Write Evergreen content – This can be in the form of ebooks, large guides/tutorials, lengthy posts, white papers, landing pages or even videos. This is the type of content you can always share and use in the next year. It’s the type of content that will stay relevant for a long time and will rank high in the search.

As a bonus to giving away these free ebooks, you can place subscription forms to gather emails for future targeted email campaigns. It’s a good way to share more than free ebooks, just don’t promote too strongly an irrelevant content.

Summary

During the whole developing process, there are many things to consider and plan. There are potential pitfalls near every corner and it’s important to be prepared for all of them.

We have experienced some of them and we’ve taken actions to prevent any future problems by planning ahead, writing down everything and spending the time to discuss them.

Communication is among the pillars of a successful project. When clients see constant progress, they’re happy. When they see good looking polished demos, the project looks like it’s in good shape.

And a continuous partnership between the company and the client has proven to be beneficial to both parties every time. One is that we get to continue working on the project and second is that the client keeps growing his website and business.

1 Comments

  1. Excellent write up on building WordPress websites. This hold true for any website built by other CMS and website builders.

Leave a Reply

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