Website Development for Business: Introduction
Programming a web page is an important foundational, technical skill. As you refine these skills over time, you will likely encounter several other related decisions that impact your website’s functionality. This unit will review several business-related concepts that encompass the process of developing a website and the accompanying decision-making activities that are most common in web development. In this unit, you will cover the following concepts:
- the stages of website development
- common legal considerations
- measuring and tracking website performance
- programming languages
- multimedia technology
- creativity in web design
- web servers
- outsourcing considerations
Stages of Website Development – Introduction
The process of managing a web development project can be overwhelming if an organized set of steps are not followed. In this module, you will learn about the stages of website development that help to keep this process on track, as well as some of the legal concerns that you must consider as you design and develop content.
This module will cover the following topics:
- web page life cycle
- requirements analysis and design
- implementation and testing
- deployment and maintenance
- legal issues
By the end of this module you should be able to answer the following questions:
- What are the phases of the waterfall model? Where do the different web development tasks fall within this model?
- What are some items that would be identified as requirements for a web page?
- How does implementation differ from design?
- What interventions occur during the maintenance phase?
Stages of Website Development – Introduction
The process of managing a web development project can be overwhelming if an organized set of steps are not followed. In this module, you will learn about the stages of website development that help to keep this process on track, as well as some of the legal concerns that you must consider as you design and develop content.
This module will cover the following topics:
- web page life cycle
- requirements analysis and design
- implementation and testing
- deployment and maintenance
- legal issues
By the end of this module you should be able to answer the following questions:
- What are the phases of the waterfall model? Where do the different web development tasks fall within this model?
- What are some items that would be identified as requirements for a web page?
- How does implementation differ from design?
- What interventions occur during the maintenance phase?
Web Page Life Cycle
Learning Objectives
- Identify common steps in the website planning and development project cycle.
Effective website design requires thoughtful planning. You will learn more about one method that is used to create order and structure during the various phases of development.
The Waterfall as a Model for Website Development
A web page is a technological software structure; it requires a development strategy in order to be constructed in a reliable and productive way. According to the Waterfall Model, a standard for software development, the web page life cycle can be defined as a succession of the following phases:
- requirements analysis, where the goals and objectives for the web page are identified;
- design, where the web page is planned;
- implementation, where the actual web page is developed;
- testing, where the implementation is verified;
- deployment, where the web page is made available;
- maintenance, where the web page code may require patches or adjustments.
The Waterfall Model emphasizes that a logical progression of steps be taken throughout the software development life cycle, much like the cascading steps down an incremental waterfall (Airbrake, 2016). Consequently, the Waterfall Model follows a linear sequence of phases. However, it is common to revisit phases during the development process.
Review the table below to learn about the advantages and disadvantages of the Waterfall Model (TutorialsPoint, n.d.).
| Waterfall Model Advantages | Waterfall Model Disadvantages |
| Simple; easy to understand and useEasy to manage due to the rigidity of the model. Each phase has specific deliverables and a review process.Phases are processed and completed one at a time.Works well for smaller projects where requirements are very well understood.Clearly defined stages.Well understood milestones.Easy to arrange tasks.Process and results are well documented. | No working software is produced until late during the life cycle.High amounts of risk and uncertainty.Not a good model for complex and object-oriented projects.Poor model for long and ongoing projects.Not suitable for projects where requirements are at moderate to high risk of changing. It is difficult to measure progress within stages.Adjusting scope during the life cycle can end a project.Integration is done as a “big-bang” at the very end, which doesn’t allow for the early identification of technological or business challenges. |
Consider how each phase of the Waterfall Model can be applied further within the context of web page development. For example, after a testing phase is completed, it is not unusual to revise the web page (implementation), and even revisit the web page goals, requirements, or design.
Review the Waterfall Model for Website Development image for a summary of some of the key elements to each phase.“Waterfall Model for Web Development” © WGU 2020
Who oversees the web page life cycle, and who makes sure that the web page project is realized? The answer is the web project manager. Web project managers oversee the development of web projects from the initial phases of the project all the way through deploying the web page and making it accessible on the internet. Web project managers collaborate and communicate with all project stakeholders, as well as lead the development team in the process of creating and deploying the web pages or websites. Like other project managers, web project managers also create and deliver project status reports to the appropriate stakeholders.
Job responsibilities of web project managers include the following:
- establish project scope
- design and deliver solutions
- lead team members
- collaborate and communicate with project stakeholders
- deliver project status reports
Which phase of the web page lifecycle are HTML and CSS files coded?
Implementation
Correct! The design decisions have to be coded into the HTML/CSS file(s) during the Implementation phase.
Requirements Analysis and Design
Learning Objectives
- Analyze the relationships between electronic commerce (e-commerce) and related technologies and concepts necessary to develop a secure, useful interface.
Identifying a website’s intended goals and objectives, required functionality, and supporting technical components leads to successful, user-friendly design. You will learn about the considerations for a specific web page type and how to include those within the design process.
Requirements Analysis: Planning Design Elements
Before web page design and implementation can begin it is important to identify the requirements for the web page. This includes understanding the goals and objectives of the web page, including key functionality, user-experience characteristics, and the content types and architecture. Regarding the organization of the architecture, a site map represents a blueprint of the various web pages and content contained within a website. The site map can serve as a structural component that helps locate and reinforce web page organization. It helps viewers to see a clear, organized structure and should be clearly identified within the planning phase. These features will impact the technical foundation that will ultimately drive the design and implementation processes. Regarding the content types for the website, it may be helpful to consult the distinctive branding elements of the website owner or marketing representative and incorporate those elements into the design specifications.
E-commerce Considerations
As we have learned, the goals of a web page play an important role in the design phase. The requirements inform the design specifications, and the production includes development of HTML and CSS code (and sometimes executable code like JavaScript or PHP). Usually, at this point, the web page content and disposition are drafted. For example, consider the design steps needed for an e-commerce web page.
There are four e-commerce models that are widely implemented:
- Business-to-consumer (B2C) — A model in which a web-based business sells products and/or services to consumers or end-users.
- Business-to-business (B2B) — A model in which a web-based business sells products and/or services to other businesses.
- Consumer-to-consumer (C2C) — A model in which individual consumers sell products or services to other consumers.
- Consumer-to-business (C2B) – A model in which web-based business allows individuals to sell goods and services to companies. (BigCommerce, n.d.)
As businesses continue to extend their reach through products and services over the internet, a web page intended for e-commerce requires planning that takes into account specific technology issues related to security and interface usability. While security issues follow very well-established standards, interface usability evolves constantly. The simplest requirement related to security is the use of the HTTPS protocol that defines encryption of sensitive information to be sent or exchanged. Interface usability, however, implies clean choices for web design, but also the appropriate use of media technology. Finally, current e-commerce trends indicate that mobile devices will become the central piece of technology used to discover, research, and purchase goods and services (AlliedWallet, n.d.). This indicates that mobile device usage should drive many of the design and development considerations for any e-commerce websites.
Read “9 E-Commerce Website Design Tips and Best Practices in 2020” (opens new tab) from UX Planet.
This article explains the common features of an e-commerce web page and how these features must be supported by several important technical components.
As you read, consider the following questions:
- How can the website clearly communicate its value proposition to potential customers?
- What are the common features of a well-designed e-commerce web page?
- 1. Use quality photos and videos, 2. Add convenient navigation, filtering, and search, 3. Put emphasis and maintain the visual hierarchy, 4. Stick to simplicity and appeal to the wider audience, 5. Add some beauty and personality, 6. Keep it consistent and branded, 7. Make it responsive, 8. Provide multiple ways to get in touch,9. Add social proof
Implementation and Testing
Learning Objectives
- Identify essential aspects involved with developing and maintaining a website including project management, testing, and legal issues.
As the web page development process moves beyond the design phase, the implementation and testing efforts carry out the execution of proper coding and ensure correct web page functionality.
How the Implementation Phase Differs from Design Processes
The development of HTML and CSS code is completed during the implementation phase. Even though many developers mix design tasks with implementation, better results are frequently achieved when all position and style definitions are made during the design phase. This ensures that the implementation phase can focus on the most appropriate usage of HTML elements and CSS rules.
Responsive Design
One of the major aspects included within the implementation phase is the responsiveness of the web page across multiple devices or platforms. This is referred to as responsive design. Responsive design ensures the appropriate display of the web page regardless of the browser and window or device dimensions. While in the design phase, a web page may include the development of different web pages for a desktop or laptop and for mobile devices, but it is during the implementation phase that the web page has to be coded with appropriate size definitions to deliver a web page capable of adapting to specific display dimensions. It is important to recall that HTML5 is not homogeneously implemented by all web browsers and versions. Consequently, it is very important to test the produced HTML/CSS source in several browsers and several display options to verify the web page responsiveness.
The viewport meta tag is an important HTML element for ensuring a responsive web design. The browser’s viewport refers to the visible area of a web page, and the use of this tag allows developers to provide the browser with instructions on how to handle such things as screen width and scaling.
A common usage of the viewport tag is to instruct the browser to use the screen width of the device as the width for the page content:
<meta name"viewport" content="width=device-width">
Another common usage is to additionally specify the initial zoom level to be used when the page is first loaded:
<meta name"viewport" content="width=device-width, initial-scale=1">
Note: Offline Web Applications
Offline web applications are, in essence, responsive web sites that look and feel like native apps, including such elements as icons displayed on device launch screens, which allow users to keep working when their network connections are interrupted, albeit with somewhat reduced functionality due to the lack of access to network-based data. This is particularly useful in the case of applications running on mobile devices which can periodically lose network connectivity.
Offline applications typically use cached data in order to display last-known information when launched without network connectivity rather than displaying a ‘can’t connect’ error message, and they allow users to continue to perform actions that do not rely on the retrieving or posting of online data.
Offline applications rely on a manifest file, which is a simple JSON file linked to the application’s HTML files via a <link> element in the <head> of the document, in order to provide this additional functionality. These manifest files contain information about how the app should behave and appear on the user’s device and incorporate things such as the image to be used as the app icon and how situations should be handled when there is no network connectivity, including the specification of which files should always be cached and used instead of their network-based counterparts, which files should be used as fallbacks when the network versions cannot be reached, and which files should never be cached.
Version History and Version Management
As a web page is being developed, multiple versions of it can be created. As with any other development task, the management of the web page must include management of each version of a web page through tracking the version history, in order to provide the roll back option in the event of any errors. From an end user perspective, notification of web page changes can be important to receive. A web feed is a data format that delivers frequently updated web content and can help to accomplish this goal. Additionally, it is important to consider that along with any code addition, removal, or change, there is always the possibility of inserting new code with new problems that have to be thoroughly tested once again.
Read “HTML Responsive Web Design” (opens new tab) from W3Schools.
This article explains the factors that impact responsive web page design, as well as the coding language behind imagery and text size.
As you read, consider the following questions:
- How does the HTML tag
<meta>provide better web page responsiveness?- it allows to understand the viewport of the page so it looks better
- What does the unit
vwin text-font size correspond to?- viewport width for total width of viewable space
Deployment and Maintenance
Learning Objectives
- Identify essential aspects involved with developing and maintaining a website including project management, testing, and legal issues.
As the web page development process moves on from the implementation and testing phases, deployment and maintenance take place. These steps include publishing web content to be accessible by the internet, as well as preparing for any ongoing or future upkeep.
Considerations for Deployment
Once the HTML and CSS code has been tested and approved it is time to deploy the web page. Deployment involves moving the website from the development and testing environment to a production environment where the website will be available to the internet. During deployment, knowing the relationship between your computer (including your local development environment) and the internet, as well as how to communicate between the two, is essential for every developer (CodeAcademy, n.d.). Deployment is affected by several factors including the website purpose, available infrastructure, and the organization’s business policies. Usually, it is at this step that the decision about where the web page will be stored is finalized. Such a decision is frequently made at a system level, since the web page has to be stored on a machine running a web service that provides the protocols HTTP and/or HTTPS. Usually, the main concern in the deployment phase includes ensuring the correct references to files -all files must be placed in the correct location in the website folder structure in order for the web page to function correctly.
Maintenance
A more delicate phase to consider is overall web page maintenance, where there are two types of intervention:
- correcting problems missed during the testing phase;
- performing changes to the content of the web page due to:
- deprecated hyperlinks;
- redesign of the web page due to a change with the requirements (text update, rebranding, etc.).
Randolph (2020) identifies several reasons why website maintenance is important, and these considerations can help ensure that you plan accordingly:
- The majority of customers conduct online research, so a positive impression is key.
- Your website informs users’ first impressions, so ensuring it works properly and isn’t outdated is important.
- Your website helps grow sales, which is central to any site with an e-commerce platform.
- Site visitors value user experience, so prevention of poor user experience through regular maintenance is valuable.
- A website maintenance plan improves security.
Which phase of the web page life cycle is concerned with deprecated hyperlinks?
Maintenance
Correct! The analysis and repair of deprecated hyperlinks is usually a concern during the maintenance phase, which is usually much longer than the other phases.
Legal Issues
Learning Objectives
- Discuss potential copyright and ethical issues to resolve during the web site planning process.
One aspect that is frequently forgotten while designing and implementing a web page is the unexpected legal implications of any content item, design feature, or function. In this area there are three major concerns to be considered:
- privacy of end user data
- security of financial transactions
- intellectual property
Privacy and Security
While privacy and security are effectively dealt with through the use of encryption using the HTTPS protocol, it is important to note a couple of considerations in these areas.
When deciding on what type of data to collect and how to protect it for website users, web developers should consider the following:
- Informed Consent from Users: ensure that users are aware of why their personal data is being requested and how it will be used on the site to improve their experience;
- Give Good Value: in exchange for this data, be sure to provide value to the user in the form of a user-friendly, easy to navigate, and highly secure website;
- Allow Users to Manage their Data: putting control of personal data in the hands of the user allows the user to feel safer since they can add and remove information as desired (WebUnlimited, 2016).
Ultimately, it is the responsibility of the web developer to make a conscious decision to not violate the rights of the website visitors. Websites should only collect the minimum amount of user data necessary, and that data should be safeguarded once it is collected.
Intellectual Property and Copyright
Intellectual property (IP) requires consistent attention from the web developer. The use of materials protected by copyright, patents, and trademarks represents a likely source of intellectual property infringement. Intellectual property considerations extend even into standards of practice within the global community; the United Nations Educational, Scientific, and Cultural Organization (UNESCO) helped to enable the cooperation of copyright laws throughout multiple countries.
The use of images, videos, sounds, and text content must be carefully considered by the web developer. As you engage with these types of materials, further clarification might be needed in the planning and design phases to distinguish any materials or ideas that contain trade secrets. There are several nuances to be considered: for example, the use of some registered materials can be easily granted for nonprofit web pages, but restricted for commercial pages. On the contrary, the use of some protected materials may be waived according to some specific governing best practices. Fair use, for example, is a doctrine of US law that permits the limited use of copyrighted material under certain circumstances without having to first acquire permission from the copyright holder. In other cases, the issue may be less clear, as in the instance of plagiarism. Plagiarism can represent an ethical, as opposed to legal, issue, but it is important to prevent and address. One way to address the issue of plagiarism is to ensure that several reviews are conducted by an independent person during the design and testing phases. As a general rule, it is important to always cite the sources of materials used in web pages, but seeking legal counsel is a safe option when using materials published by others.
Ethical behavior is when someone behaves according to a set of moral standards. For example, a web developer would be exhibiting ethical behavior when he or she does not use nefarious methods to obtain a web page visitor’s data.
As you consider possible outsourcing for the design of a website, a business might also have to consider the usage of a nondisclosure agreement to protect the intellectual property of the business as it relates to the website’s contents and unique design features.
Watch “Introduction to Copyright Law” (opens new tab) in the course Understanding Copyright: A Deeper Dive from LinkedIn Learning.
This video teaches you about the nuances of copyright in the context of intellectual property.
As you watch, consider the following questions:
- What are the three conditions needed to claim copyright?
- copyrightable subject matter, original works of authorship, and fixed in a tangible form
- How might understanding copyright influence the design of a website?
Which legal concern relates to fair use during website planning?
Copyright
Correct! Copyright is one of the probable sources of intellectual property infringement, and fair use is a class of exceptions to copyright enforcement that are applied in accordance with US laws.
Stages of Website Development – Summary
During this module, you were introduced to the web page life cycle through the project management framework of the Waterfall Model. You learned how this model can be adapted to the web development process as well as the major activities within the six stages of the Waterfall Model:
- requirements analysis
- design
- implementation
- testing
- deployment
- maintenance
You explored a few specialized topics within each stage including how e-commerce transactions can influence website planning and design, how the implementation phase differs from design processes, and how maintenance processes must be carefully monitored. In addition, you explored the legal issues that commonly characterize the development of unique, custom web assets and materials, including considerations for privacy and security, as well as intellectual property and copyright.
During this module you learned the following:
- Phases of the waterfall model
- requirements analysis (identify goals and objectives)
- design (web page is planned)
- implementation (web page is developed)
- testing (implementation is verified)
- deployment (web page is made available to the internet)
- maintenance (web page adjusted as needed)
- Four e-commerce models
- business-to-consumer
- business-to-business
- consumer-to-consumer
- consumer-to-business
- Concepts of responsive design
- Considerations for web page deployment and web page maintenance
- Concepts of intellectual property and copyright