Select Page

The Steps of Developing a WordPress Website – Step 4 – Deploy

Step 4 in the 5 steps of developing a website is deploy. Once the website’s checklist is complete with all of the elements in place and the site has been thoroughly tested it is time to publish the site. Even though the site is tested ahead of time, we can’t just publish and walk away. There may be issues we haven’t found yet. Users might not enjoy using something that we thought would be a great choice. Something might be too confusing, or the functionality or needs might change.

Deploy according to your launch plan and check everything multiple times as you deploy. This will include setting up the domain on the new server or removing the coming soon message, disabling IP blockers, sending out emails, promoting in social media, setting up any necessary redirects, etc.

Quality Assurance

This person continues to watch the site for problems. This includes using different browsers, checking links, using different platforms and devices, etc. They will also check for load times and take feedback from users. These tasks are especially important if the site was moved from a test server to a live server.

A/B Testing

In order to help improve the site’s design and functionality, the blog manager or QA person should use a/b testing. This will help determine where changes need to be made. It would test the layout design, color choices, button styles, call-to-actions, and more. The results of the tests should be logged and used for inform website changes.

Analytics

The blog manager should analyze the site’s traffic to see which marketing efforts are effective, learn more about the audience (which can tell you more about their needs and what the site needs to provide), which browsers and devices are the most popular, what other websites are sending traffic, etc. This will help you focus your best efforts where they are the most effective.

Security

Security should remain a concern. Keep a check on the security logs. This will tell you of potential threats and identify IP’s that should be blocked and any holes in the website’s security. It’s important to respond to problems quickly.

Let’s Discuss

  • Do you follow a launch plan when deploying a website?
  • Is your launch plan different from what I’ve discussed here?
  • Do you have anything to add?

Thanks for reading. Please subscribe if you haven’t already.

Featured image by SpaceX 

The Steps of Developing a WordPress Website – Step 3 – Develop

Development brings all of the design elements together to build a workable website. Since it’s a content management system complete with database, content creation tools, and media storage, WordPress greatly eases the pain of development. The backend already exists and the frontend uses themes that are pre-made, customized, or built from scratch built on top of the WordPress system. Many themes and plugins include drag and drop tools that make it easy to place the elements where you want them. Let’s take a look at the steps involved in development.

Comps and Wireframes

Comps are the mockups that many designers create in Photoshop that show the design of the layout. Lots of designers skip Photoshop and build the mockup using tools such as Divi to build the wireframe. The comps or wireframes are used to build the site.

The developer, which can be the same person as the designer and sometimes does both jobs simultaneously, places all of the elements in their proper locations, adds the CSS (by hand or by using plugins), adds any PHP needed (or plugins) to create any special features for the theme, adds backgrounds, graphics, fonts, menus, buttons, social plugin, newsletter plugin, security, backups, eCommerce, analytics, etc., for both frontend and backend.

This work is sometimes done on the actual server while others prefer to develop the site on a private server and move it to the live server when the site is ready. Either way the domain name and hosting are prepared, sometimes with WordPress installed and security plugins in place, and a coming soon page displays to visitors and provides an email opt-in and social follow and sharing buttons.

Content

The content team will create the first round of written content for the website based on the direction decided in the design phase. This includes any copy for the pages and the first set of articles. This content is based on a spreadsheet called a content matrix.

Many use tools such as Microsoft Excel or Google Sheets to keep the list for the content matrix. Content creators use these tools as a checklist to produce the content. The blog manager will create the user accounts and have each user upload their content.

Media

Media includes podcasts, video production, slideshows, etc. The media development team create podcasts and videos (which are sometimes the same content). This also includes any videos to be produced such as company introductions, tutorials, product information, etc. This may require high-end recording equipment and software. The material is often written by the content team.

This will also include storing and presenting the media. For example, the design phases answers the questions of will the media be stored on the website itself or another site such as YouTube and then embedded within the content. In this phase those tools and accounts are gathered and prepared to store the media.

Blog Management

The blog manager will publish the pages and posts as they are approved. At this point the website will still display a coming soon message to visitors, so they won’t see the content until the site is ready to go live.

Let’s Discuss

  • Do you build comps with Photoshop or a similar tool?
  • Do you prefer to build a wireframe with tools such as Divi?
  • What is your favorite content matrix tool? 

Let us know in the comments. Thanks for reading. Please subscribe if you haven’t already. 

Featured image by Tirza van Dijk 

The Steps of Developing a WordPress Website – Step 2 – Design

The second step in developing a WordPress website is Design. Fortunately WordPress, being an amazing content management system, takes care of handling content database and other parts of the website under the hood, so you’re not designing from the ground up. Instead, you’re designing on top of an already powerful platform. Fortunately, this platform doesn’t place heavy restrictions on the design.

There are several steps to designing the website. Be sure to include the client in every step – getting their feedback and explaining design choices. This will help keep the project on time and within budget, and will reduce surprises while ensuring you’re creating the website the client needs.

Sitemap

A sitemap is a diagram of the website. It will show what the pages are and how they’re connected. It will show the navigation structure and the categories for the content.

One of my favorite tools for building sitemaps is a mindmap tool called Coggle.

Wireframe

A wireframe is a series of diagrams that show the details of each page. It shows the page’s navigation, the content such as text and images and how they relate to each other, and the interactive portions such as calls to action and links. (The image above shows Divi Wireframe Kit Vol. 3)

Many designers use tools such as Photoshop, Gimp, etc. I prefer to create wireframes directly within the page itself using Divi. Other building themes and page-building plugins are great too.

Content Plan

The wireframe shows where the content will go within the page’s design. The content plan will show what the content is, where it comes from, will it include snippets that link to blog posts, will those snippets include images and if so what size, what is the character limit of the snippet and posts’ title, will it include meta information, how will the user interact with the snippet, what categories will be included, etc.

The types of content, writing style, length, types of images, video, etc., should also be included within the content plan.

The Look of the Site

The look of the site is what we usually think of when we talk about design. Once the client has approved the sitemap and wireframe design, the visual designers can add visual elements on top of the wireframes. This includes choosing colors, fonts, and adding graphics.

Be sure to test the site on multiple screen sizes and devices, and in multiple web browsers.

UX/UI Testing

Once the design is in place it’s a good idea to test the site with a small group, taking their feedback and making improvements. Some prefer to test multiple designs from the same wireframes in order to get the best design possible. This will help ensure that you provide the best design to the client and you’ll also be able to provide feedback from the test group if needed.

Let’s Discuss

  • What are your favorite sitemap tools?
  • What are your favorite wireframe tools?
  • Do you use a process different from this?

Thanks for reading. Please subscribe if you haven’t already.

Featured image by Galymzhan Abdugalimov

The Steps of Developing a WordPress Website Step 1 – Define

Like any successful project, developing a website should follow a proper sequence of steps. The steps, often called phases, help keep the project on track and within budget. They also help ensure that the website that’s built is the website the client needs – without bugs and scalable. This requires breaking the project down into a series of steps. In this series we’ll look at the steps of developing a WordPress website.

Five Step Process

Many developers use a five-step process:

  1. Define
  2. Design
  3. Develop
  4. Deploy
  5. Maintain

There are lots of variations on these steps, but this is a simple plan that moves the project from concept to finished product. The steps follow a common-sense methodology. Let’s take a look at each of the steps.

Step 1 – Define

Before starting on the website’s design you must first define the website. This includes the site’s business goals and customer requirements. Before designing the site’s structure you need a clear definition of what the site is for.

Site Goals

Clearly define the top 3-5 goals that the website needs to meet. These goals will help determine the layout, visuals, navigation, and content requirements per page.

For example, a site for a local handyman business might only need to have a one-page layout to specify the services provided and give contact information, or it might need multiple pages with detailed information about each service and include purchasing through the site with recurring payments. Those are two vastly different levels of design for the same type of business.

Business Requirements

Meet with the internal stakeholders and have them help you create a list of the site’s business goals. Make statements for them to finish, such as “the site must be able to…”. This isn’t the look of the site. Rather, it’s the functionality of the site. It will answer the question “what are the site’s primary abilities?”

Create a list of all of these abilities the site must have and then have them prioritize the list. The first few should be the most important that the site must have at start-up and the rest can be added later.

In this meeting try not to discuss how something will be accomplished. The focus should be on what needs to be done rather than how it will be done.

Request For Proposal (RFP)

The client will need to create an RFP. It will include the project overview, the site’s business goals, and the site’s requirements.

Project Plan

This will be the roadmap for the project. It will list all of the steps required and specify the time, people, and budget required for each step. Break the steps down into milestones with a time and budget for each. Most recommend adding a little extra time and budget for unforeseen issues.

The project should be tracked using a Gantt Charts or similar tracking tool. Microsoft Project is a popular tool for project management. You can also get templates for Microsoft Excel or other spreadsheet apps.

Let’s Discuss

  • Do you use the common 5-step project plan or do you use another plan?
  • What are your favorite questions for defining the website’s requirements?
  • What is your favorite tool for tracking the project?

Let us know in the comments. Thanks for reading. Please subscribe if you haven’t already. 

Featured image by rawpixel.com

Stay tuned for Step 2 – Design