Websites | Staging Site

What Is a Staging Site? How Do You Set One Up?
WPEngine (WordPress) | Jan 12, 2022

What is a staging site? To put it simply, a staging site is a clone of your live website. It enables you to test any changes or major new features that you plan to implement in a secure environment. Developers typically use staging sites to test changes and fix bugs before going to production.
Your staging site is intentionally identical to your live site—same plugins, same settings, same widgets, and so on. The only real difference between your live website and a staging site is that the latter is not live.
Instead, it exists in a sort of sandbox where you can see how your website would react in everyday scenarios. Anything that happens in the staging environment won’t affect your live website.

Development vs. QA vs. Staging vs. Production Sites
Most common types of WordPress testing environments that are used during development:
Development website. This environment contains all the latest iterations of the code you’re working on. It’s perfect for initial testing of new features.
Quality Assessment (QA). During the QA process, changes to your website will be tested thoroughly to find any issues that you may have missed while coding. This type of environment is most often used by large companies, since they can’t afford to have bugs pop up on live sites.
Staging website. A staging website acts as the bridge between the development and live versions of your site. At this point, any remaining errors should be addressed, and the changes should be ready to roll out.
Production website. This is the live version of your website that users will see. If you’ve been careful throughout the development process, this iteration of your WordPress site should be bug-free and provide a flawless user experience.

Staging Environment vs. Testing Environment

The Benefits of Using a Staging Site
Enable you to produce better websites
Provide you with the opportunity to catch errors and bugs without putting your site at risk
Are usually simple to create
Can be set up locally or online (depending on your preferences)

The Drawbacks of a Staging Site
It takes longer to update your website (as you need to test changes first).
Web hosts often charge for a staging site service (although you can always set one up locally).
Staging sites may not be exact replicas of a live website (caching is not usually enabled on a staging site, for example).

Who Needs a Staging Site? Ideally, everyone who runs a website needs a staging test site. However, if we’re being practical, staging websites should be used at the very least by anyone who runs a sizable operation.

How to Create a Staging Site for WordPress
Option 1:
Set Up a Staging Test Site Through Your WordPress Host
Option 2: Using a WordPress Staging Plugin to Create Your Staging Sandbox
Option 3: Set Up a Local Installation

Should You Create a Staging Site Manually?
How to Deploy Changes to Your Live Site
Develop Safely With WP Engine

Author = Erin Myers

URL = https://wpengine.com/resources/what-is-a-staging-site-why-have-one/

Websites | Average Time Spent On A Website

What Is the Average Time Spent On a Website? [+ How to Improve It]
HubSpot | Dec 22, 2021 (Update) Mar 2014 (Orig)

Average Time Spent on a Website
Average time spent on a website, like average time on page, is dependent on a range of factors. Industry, the type of website, and even the device that users are on impact this average.
For example, Statista calculated the 20 most popular websites worldwide as of June 2021, by time per visit. Users spent approximately 22 minutes and 44 seconds per visit on Google, the most popular website, and only .54 minutes on VK.com, the 20th most popular.

How to Improve Average Time Spent on a Website
Decrease load time.
Optimize your navigation.
Add internal links.
Improve the readability of your posts.
Add images and videos.
Optimize for all devices.
Use exit intent popups.

Author = Anna Fitzgerald

URL = https://blog.hubspot.com/marketing/chartbeat-website-engagement-data-nj

UX | 10 Examples of Good User Experience (UX)

10 Examples of Good User Experience (UX)
trone | Undated (Summer 2021 or before)

Websites & Apps that Understand Humans

  1. Rover: Using Reviews to Build Trust | https://www.rover.com
  2. Duolingo: Tearing Down Roadblocks | https://www.duolingo.com
  3. Paypal: Letting Simplicity Rule | (Mobile App)
  4. MailChimp: Humanizing Technology | https://mailchimp.com (Note: Intuit acquired MailChimp in Q4/2021, the current interface does not reflect the article, which predates the acquisition).
  5. Starbucks: Making it Personal | (Mobile App)
  6. Google: Loading Super Fast Since 1997 | https://www.google.com/
  7. Simple: Adding Clarity and Digestibility to Finance | (Mobile App)
  8. Nest Thermostat: Invisible Design | (Physical Product & Mobile App)
  9. Habitica: Using Gamification for Productivity | https://habitica.com/static/home
  10. Yelp: Everything Findable | https://www.yelp.com
  11. Bonus Example: From the Internet Archive (Poncho)

Author = Laura Flugga (trone)

URL = https://www.trone.com/blog/10-examples-good-user-experience-ux

Websites | Web Development Life Cycle

A Comprehensive Guide To The 7 Phases of Web Development Life Cycle
Monocubed | Jan 6, 2022 (Update), Nov 22, 2021 (Orig)

What is Web Development?
Software development life cycle or SDLC for website development includes-
the coding of the application logic
incorporating databases and managing user queries
designing user interfaces,
hosting the website on servers
maintaining and updating

Layers of Web Development
Server Side =
Backend or server-side development incorporates all the processes that go behind the scene in a website. The management of databases, servers, and logical components are the main components of the backend.
These are not tangible for the users, but without a strong backend development team, your website will be an empty page that can not do any tasks.
Client-Side = This layer, also referred to as the frontend, mainly deals with the visual presentation and designing of the site. Frontend developers work on creating a seamless user experience through responsive web pages using CSS, HTML, and JavaScript. Without a good user interface, your website will not be able to attract customers.
Full Stack = Full-Stack development combines the frontend and backend, encapsulating the whole web development process. In this layer, you deal with the entire stack of tasks and technologies involved in the website development cycle.
This means a full-stack engineer is adept at UI-UX designing, database manipulation, server hosting, and coding the browsers.

These three layers together encompass the web development life cycle. It remains the same for both website and web application development.

What is a Web Development Life Cycle? A web development life cycle concerns all the stages that go into building the website, from formulating the idea to coding and designing to deploying and maintaining. It is the standard or methodical step to follow to achieve a well-functioning website.

The 7 stages of web development cycle are –
Research
Planning
Designing
Content creation
Development
Testing
Maintenance

The 7 Phases of Web Development Life Cycle
Research and Analysis
Purpose
Requirements
Expectations
Planning and Strategy
Designing and Wireframing
Content Creation
Code and Development
Front-end Web Development
Back-end Web Development
Testing and Quality Assurance
Deployment and Maintenance

Author = Jeel Patel

URL = https://www.monocubed.com/blog/web-development-life-cycle/

Websites | Quality Assurance

Your Complete Guide to Website QA (Quality Assurance) with Free QA Checklist
SEOptimer | Undated

What is website QA? Website QA (Quality Assurance) can be defined as the process of testing a website in order to discover mistakes, errors or oversights that may not have been noted during web development or design before going live. It is also referred to as QA testing. Note that QA begins way earlier, even before development begins. It starts as soon as the requirements for the website are laid out and culminates in testing. Its overarching concern is the quality of the overall site, which goes far beyond just fixing bugs.

How does QA differ from other testing types?
QA is a process, not a one time task.
QA vs user testing
QA vs functional testing
QA vs requirements testing
QA vs design testing

Other testing types:
Regression testing
– evaluating whether making changes in your site affects other parts of the site. It checks whether any changes to the code, for example, breaks the site.
Integration testing – this is testing whether third party services or sources are working as expected when integrated with your site. These services may include APIs.
Performance testing – this tests whether the site can handle traffic spikes and surges. This test may also include how fast the site loads.
There are many more tests that you could do on your QA testing.

Why is it important? Website QA is geared towards ensuring that the web site’s user interface (UI) functions as intended (there are no bugs). It also makes sure that great user experience is achieved. Here are the other benefits of QA testing:
Showcases your brand as reputable.
It could reveal problems that may have dire consequences.
Allows for the delivery of a reliable site.
It ultimately saves the business money and time
.

How to carry out website QA testing
Factors to consider when designing a QA process flow
Audience
Application type
Test specificity
Risk level
Estimated number of users
Tools to use
The platform the site is accessed on

QA best practices
Define the users who will be using the end product.
Follow your checklist for every testing phase or type.
Test using a staging site (a site that simulates the real site).
Schedule the amount of time each testing phase needs to take.
Test as early as possible – test new features as soon as they are added.
Use an agile QA approach (test at the end of different stages of development).
Prioritize bug fixes, depending on how critical they are to your site’s functionality.
Automate where possible, especially the high risk parts of the site. Do not ‘over-automate’, though. Prioritize testing the parts where automation would fit best.
Strive to establish a collaborative approach between your QA team and the design/development team.
Create a site mind map, a visual that will help you see your site’s structure in order to get an idea of the scope of work and identify the parts that you need to prioritize.

What tools can you use for your website QA?
TestRail
CrossBrowserTesting
Web Developer Form Filler
Ranorex Webtestit
Window Resizer
CloudQA
SEOptimer

Website QA checklist
Functional testing
Performance testing
Security testing
Compatibility testing
Content testing

Use our website QA checklist for your needs, and add to your own checklist and customize it as you see fit.

Author = Jay Kang

URL = https://www.seoptimer.com/blog/website-qa/