Moving forward from their reflections on the old site, Sarah and Brenda then shifted their focus to planning the structure of the new website. They sat down with the Power Pages design studio open in front of them, ready to turn their vision into reality. The first task at hand was reviewing the various templates provided by Power Pages, selecting one that best represented the essence of Rob the Builder. They knew their new site needed to be not only visually appealing but also functional and easy to navigate. As they browsed through the options, they discussed the key sections the website would feature:

• An Home page
• An About Us page
• A Contact Us page
• A client listing consisting of an image and text for each listing

Sarah decided to write an Agile user story to capture the essence of their website development work and ensure clear communication with the team and stakeholders.

As a construction company aiming to enhance our digital presence and showcase our services effectively, we need a modern and user-friendly website. This website should reflect our brand identity, provide clear navigation, and engage visitors with compelling content and imagery so that we attract potential clients, communicate our expertise, and facilitate seamless interactions with our audience.

Acceptance criteria

Here are the acceptance criteria for building the website:

• The website should have a visually appealing design that aligns with our branding guidelines
• It should feature key sections such as Home, About Us, Services, and Contact Us, each providing relevant information to visitors
• The Home page should welcome visitors with an engaging headline, accompanied by high-quality images and introductory text
• The About Us page should provide insights into our company history, values, and team members, fostering trust and credibility
• The Services page should showcase our offerings in a clear and organized manner, detailing the range of services we provide
• The Contact Us page should include a contact form or clear instructions for visitors to reach out to us easily
• The website should be responsive and accessible, ensuring optimal viewing experience across devices
• Content should be organized logically, with intuitive navigation and consistent layout across pages
• The website should be hosted on a reliable platform and configured with proper security measures to safeguard user data

Tasks

Here is a list of tasks for building the website:

1. Collaborate with Brenda to finalize the website structure and content.
2. Select appropriate templates and design elements within the Power Pages design studio.
3. Populate pages with relevant text, images, and multimedia content.
4. Customize design elements, such as colors, fonts, and layout, to align with branding guidelines.
5. Test website functionality and responsiveness across different devices and browsers.
6. Iterate based on feedback from stakeholders and make necessary revisions.
7. Deploy the website to a production environment and configure domain settings for launch.

By implementing this user story, we aim to create a professional and engaging website that effectively represents Rob the Builder and attracts potential clients while providing valuable information to our audience.

Having written and submitted the user story to her client, Sarah would now go on to install Power Pages templates both to learn from and see if she could make use of their designs to repurpose them for her work.

In the previous chapter, Sarah had already set up the environments and initial website using Power Pages. Microsoft’s policy of offering a 30-day free trial and allowing users to create multiple websites within the same tenancy worked to the company’s advantage. This flexibility enabled Sarah to experiment confidently with various template designs. She named these experimental sites RobBuilderDev1, RobBuilderDev2, and RobBuilderDev3. This approach allowed her to explore different design options without any immediate commitment, ensuring that the final choice for Rob the Builder’s website would be well-informed and perfectly suited to their needs.

To create the websites, Sarah follows these steps:

1. Log in to Power Pages.
2. Select the Dev environment and select the Templates tab.
3. Scroll through templates, read the description, and view their styling design.
4. Select a Preview template such as Starter layout 1, as shown in Figure 2.1.
5. Having reviewed the description, select Choose this template to install it.
6. Enter a site name and a web address, such as RobBuilderDev1:

Figure 2.1 – Power Pages design studio templates

After thoroughly reviewing and selecting their preferred templates from Power Pages, Sarah now had a clear vision for the page layouts, font choices, and styling.

They began the hands-on process of crafting the new website. Brenda opened a Word document and created headings for each web page, while they transferred and updated text from the old website. Brenda, deeply knowledgeable about the business, was decisive about the messaging. They spent several hours refining the content and wording. Over the years, Brenda had collected a treasure trove of photos and testimonial messages from satisfied clients. Retrieving these, they chose which images to use, finalized the text and bullet points, and highlighted customer comments to include. Brenda felt a growing sense of pride and accomplishment. Finally, she created a website that truly reflected their achievements and the essence of their business.

Building the home page

With a clear vision and all the necessary content at hand, Sarah and Brenda were ready to begin the actual construction of their new website in the Power Pages design studio. This phase was about turning their plans and designs into a digital reality, a step where Sarah’s technical skills and Brenda’s deep understanding of their business would come together.

Tip

For further reading on the Power Pages design studio, follow the link to Microsoft Learn: https://learn.microsoft.com/en-us/training/modules/power-pages-studio/.

Sarah will begin with the home page. This section will provide a detailed, step-by-step guide on how Sarah uses the Power Pages design studio to build the home page, emphasizing how each element is added and customized. They had several sites listed as RobBuilderDev1, RobBuilderDev2, and RobBuilderDev3 from the various templates they had configured. Now, they had a good idea of which template they wanted to use and the content they would implement for these first few pages. Sarah and Brenda decided to use the template they had named RobBuilderDev1 to work on for their home page and to create a draft website on which to base their work.

Sarah followed these steps to access the Power Pages design studio:

1. Sarah opened the Power Pages design studio and edited RobBuilderDev1.
2. She selected the Home page from the Pages tab.
3. Sarah clicked on the text areas within the Home page designer to edit. Sarah pasted in the text that Brenda had previously prepared, including the welcoming headline and introductory text.
4. Sarah uploaded the images that Brenda had prepared. In some cases, she used an image editor to crop or resize images to fit the image controls placed in the template. The preselected template already had images, so Sarah replaced these by clicking on them and uploading the new images, as shown in Figure 2.2:

Figure 2.2 – Replacing and uploading images

5. As they developed the Home page together, they discussed some of the text box and image design and made a few changes to the original template design that they agreed would be better; for example, making some headlines a bit smaller:

Figure 2.3 – Clicking the text brings up the style tool

6. Sarah used the design tools on the page to customize colors, fonts, and other style elements to match the company’s branding guidelines. Now, they added branding elements such as the company logo, tagline, or any other unique branding features. There was already a logo in the header from the template. Sarah clicked on it and replaced it with the company logo Brenda had prepared:

Figure 2.4 – Clicking the logo to replace it

7. When they were satisfied with the page content, Sarah used the Preview feature in the Power Pages design studio to see how the Home page looked in a live environment.
8. Having built the Home page, Sarah and Brenda spent the rest of the day applying this process to other pages. They focused on the About Us and Contact Us pages.
9. For the client listing page, they started with a new page and selected sections to insert, selecting two-column sections, creating a listing of headings, followed by an image and then a block of text, highlighting keywords with bold and colorful text.
10. They then worked on the footer. Sarah had some basic footer text that she had authored herself, and Brenda had some ideas; they also placed and inserted links for their social media pages.

Now that Brenda and Sarah had created a home page along with the pages to showcase their business, they were ready to replace their legacy website.

Brenda now wanted to discuss with Sarah what the next steps would be. She wanted a website that not only interacted with her customers and suppliers but also with the construction teams or, more specifically, the foremen to implement the incident management (IM) pages.

Effective content management is crucial for a successful website. In the Power Pages design studio, organizing content begins with a clear understanding of the site’s purpose and audience. Sarah and Brenda used this platform’s tools and features to make content organization both intuitive and efficient. We will cover the following in this section:

1. Defining the website’s hierarchy: Identifying main pages such as Home, About Us, Services, and Contact Us and creating sections for easy navigation.
2. Creating and organizing pages: Determining specific pages needed under each main section and adding them using the Power Pages design studio.
3. Maintaining a consistent layout across pages: Maintaining a uniform look and feel by using similar templates or layouts.
4. Pointing a custom domain to a new website: Steps to redirect the company’s domain from the legacy website to the new one created in the Power Pages design studio.

This section will highlight Sarah’s and Brenda’s collaborative efforts in organizing content effectively and seamlessly transitioning to their new website.

Defining the website’s hierarchy

Sarah started by outlining the hierarchy of the website. This step involved identifying main pages such as Home, About Us, Services, and Contact Us. The Power Pages design studio’s user-friendly interface allowed her to create and name these sections easily, forming the foundation of the site’s structure.

Creating and organizing pages

Under each main section, Sarah determined the specific pages needed. For example, under Services, different pages were created for each service offered. She utilized the Power Pages design studio to create these pages, organizing them under the appropriate sections to ensure a logical flow of information. Sarah added new pages by selecting + Page in the studio, as shown in Figure 2.5.

Here, Sarah added the page name and its URL path:

Figure 2.5 – Adding a new page

Brenda and Sarah discussed additional pages, such as a Finance section with Invoices, Orders, and Quotes subpages. They also discussed the Services section, considering adding Projects and Incident Management subpages. Using the Power Pages design studio, Sarah was able to add subpages by selecting Add a new subpage, as shown in Figure 2.6:

Figure 2.6 – Adding a subpage

Brenda mentioned the need for a Finance page. It would include Invoices, Orders, and Quotes subpages. They also discussed what would be under Services: maybe to include Projects and change Order requests and Incidents.

Sarah simply created new pages and subpages in the Power Pages design studio and dragged one under another until they had navigation in an order that Brenda thought looked good. Sarah remembered how her tutor at college had said that you could start a website without wireframe modeling using a graphics-type tool and how hard and awkward they were to use. She thought to herself, Wireframing a project is easier directly in Power Pages!

What is wireframe modeling?

Here is a link to get more information on wireframe modeling: https://support.microsoft.com/en-us/office/use-wireframe-templates-to-design-websites-and-mobile-apps-2d54dc55-f5c4-49a2-85da-d649eb7fc281

Maintaining a consistent layout across pages

To maintain a consistent look and feel across the site, Sarah focused on using similar templates or layouts for similar types of pages. This approach, easily managed in the Power Pages design studio, helped to keep the navigation intuitive and the user experience cohesive.

Sarah started with the default web template that is used on every page, but she had in mind that eventually, she would need to create her own web template later, especially for pages such as Incidents.

The process of content management and organization was a collaborative effort between Sarah and Brenda. As they worked together in the Power Pages design studio, they found that the platform’s capabilities greatly simplified what could have been a complex task. Their website’s content was now well organized, easily navigable, and poised to effectively communicate with their audience.

Pointing a custom domain to a new website

Brenda now wanted to point the company’s own domain from the legacy website to the new website. Here are the steps that Sarah followed:

1. Access domain registrar account: Sarah logged in to the account where her current domain was registered (for example, GoDaddy, Namecheap) and navigated to the section to manage her domain.
2. Locate DNS settings: Within her domain registrar’s dashboard, she found the domain that she wanted to point to on the new website. From here, she accessed the DNS settings/management area.
3. Update DNS records: Sarah then navigated to the page where she was able to edit her A records and CNAME records. This is where she was able to set directions for where to point the domain.

   Here, Sarah changed the A record to point to the IP address of her new website hosted on Power Pages. Alternatively, if Sarah was using a CNAME record, she would similarly change it to the appropriate text provided by Power Pages.

4. Find your Power Pages site’s IP address or URL: In the Power Pages design studio, Sarah located the section that provided details about her site’s hosting information. Here, she copied the IP address that the Power Pages site was hosted on (if she was using CNAME, she would have copied the URL).
5. Input the IP address or URL in the DNS record: Sarah went back to her domain registrar’s DNS settings and pasted the IP address into the A record field (if using CNAME, she would have pasted the URL).
6. Save DNS settings: After updating her records, she saved her changes.

   Keep in mind that DNS changes can take up to 48 hours to fully propagate across the internet.

7. Verify domain connection in the Power Pages design studio: Once the DNS changes had been made, Sarah went back to her Power Pages design studio. Here, she navigated to the Domain Management section and verified that the custom domain was pointing to her new Power Pages site correctly.
8. SSL certificate: Navigating to the website, Sarah confirmed that her web page was secure, to ensure the site was safe to use. She did this by looking at the padlock button to the left of the URL. Power Pages handled this for Sarah.
9. Test the website: Further, Sarah ensured that the website loaded correctly and that all links and functionality were working as expected.

Tip

It’s important to ensure that you have a backup of any existing data or email services tied to your domain before making changes to the DNS settings to avoid any unintended disruptions.

For further reading on adding a custom domain name, follow the link to Microsoft Learn: https://learn.microsoft.com/en-us/power-pages/admin/add-custom-domain

By following these steps, Sarah successfully pointed the existing domain to the new website created in the Power Pages design studio, ensuring a seamless transition for users and maintaining the company’s brand presence online.

Having established a production website and several development sites, Sarah faced a new challenge. She needed to deploy content from one environment to another. She had built the website with Brenda in the Rob the Builder development environment that she had created in Chapter 1, now she needed to deploy it to the production environment she had created in Chapter 1. To do this, she would use the Power Pages solution tool to add her website and then deploy the solution to the production environment. Here are the steps for the same:

1. In the studio, Sarah selected the Home | Solutions tab.
2. She then clicked New solution and entered a name, as shown in Figure 2.7.
3. Within the solution, Sarah added the website and pressed Export.
4. Once that was complete, Sarah downloaded the .zip export to her local PC.
5. In the studio, Sarah selected the production environment and pressed Import. After that, she chose the downloaded .zip file to import:

Figure 2.7 – New solution for deploying the website

Now that the website was deployed, it was still set as private. It was time to set it to Public so that other users and the public could view the new website.

Setting the website to public

Sarah selected the settings to set the website as public, and they tested it on their phones to see how it looked.

To do this, in the studio production environment, Sarah selected the Set up tab and set Site visibility, as shown in Figure 2.8, to Public:

Figure 2.8 – Site visibility

The website static pages were ready, and Brenda was ready to show them to her colleagues and announce them to her customers.

In this chapter, we followed Sarah’s and Brenda’s journey as they delved into the Power Pages design studio to revamp Rob the Builder’s digital presence. They started by planning the website’s structure, selecting templates, and drafting a user story to guide development. With the Power Pages design studio’s flexible trial period, they experimented with various designs before settling on a vision for their site.

Once they established their template and content, Sarah led the development process. Using the Power Pages design studio, they created Home, About Us, and Contact Us pages, meticulously customizing each element to align with their branding. They also explored the process of building a client listing page, adding images, and refining text.

Sarah and Brenda then tackled content management and organization, defining the website’s hierarchy and ensuring a consistent layout across their web pages. They effortlessly added new pages and subpages using the Power Pages design studio’s intuitive interface, streamlining their website’s structure.

To finalize the transition, Sarah guided Brenda through pointing the company’s domain to the new website, ensuring a seamless experience for users. With the website deployed to the production environment, they set it to public, ready for viewing.

Having successfully created the static pages of the website and deployed them to the production site, Sarah’s next goal was to enhance its visual appeal. She aimed to use the Power Pages design studio’s styling tools to develop a distinct style that resonated with the company’s branding. This would lay the groundwork for the more intricate pages they had planned, as discussed in their navigation strategy.

In the next chapter, we’ll explore how Sarah utilized the styling tools in the Power Pages design studio to achieve this, taking a deep dive into creating a cohesive and visually appealing brand identity for Rob the Builder’s website.