In the last chapter, we tackled the business challenges faced by Rob the Builder, highlighting the company’s outdated website and systems that hindered business operations and project bids. Embarking on a transformative journey, Sarah and Brenda began exploring Power Pages, installing essential tools, and laying the groundwork for a digital overhaul oftheir business.

In this chapter, we will explore the exciting journey of Sarah and Brenda as they dive into the world of the Power Pages design studio to transform the digital presence of Robthe Builder.

In this chapter, we will cover thefollowing topics:

• Planning thewebsite structure
• Creatingstatic pages
• Final touches and preparingfor launch

Sarah was brimming with excitement for her meeting with Brenda. They planned to dive deep into developing new website content. This update was much needed, replacing their decades-old site. The original site was built years ago. It was basic, featuring a Home page, anAbout Us section, and listings of clients and projects. Brenda hadn’t reviewed the site in years. Revisiting it with Sarah was both embarrassing and a relief. Sarah assured Brenda that the new site would be easy to update and maintain. She also promised to teach Brenda how to do it. This was a source of amazement and comfortfor Brenda.

Movingforward 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 websitewould feature:

• AnHome page
• AnAboutUs page
• AContactUs page
• A client listing consisting of an image and text foreach listing

Sarah decided to write an Agile user story to capture the essence of their website development work and ensure clear communication with the teamand 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 withour audience.

Acceptance criteria

Here are the acceptance criteria for buildingthe website:

• The website should have a visually appealing design that aligns with ourbranding guidelines
• It should feature key sections such asHome,About Us,Services, andContact Us, each providing relevant informationto visitors
• TheHome page should welcome visitors with an engaging headline, accompanied by high-quality images andintroductory text
• TheAbout Us page should provide insights into our company history, values, and team members, fostering trustand credibility
• TheServices page should showcase our offerings in a clear and organized manner, detailing the range of serviceswe provide
• TheContact Us page should include a contact form or clear instructions for visitors to reach out tous easily
• The website should be responsive and accessible, ensuring optimal viewing experienceacross devices
• Content should be organized logically, with intuitive navigation and consistent layoutacross pages
• Thewebsite should be hosted on a reliable platform and configured with proper security measures to safeguarduser data

Tasks

Here is a list of tasksfor buildingthe website:

1. Collaborate with Brenda to finalize the website structureand content.
2. Select appropriate templates and design elements within the Power Pagesdesign studio.
3. Populate pages with relevant text, images, andmultimedia content.
4. Customize design elements, such as colors, fonts, and layout, to align withbranding guidelines.
5. Test website functionality and responsiveness across different devicesand browsers.
6. Iterate based on feedback from stakeholders and makenecessary revisions.
7. Deploy the website to a production environment and configure domain settingsfor 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 toour 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 forher work.

In the previouschapter, 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 sitesRobBuilderDev1,RobBuilderDev2, andRobBuilderDev3. 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 totheir needs.

To create the websites, Sarah followsthese steps:

1. Log in toPower Pages.
2. Select theDev environment and select theTemplates tab.
3. Scroll through templates, read the description, and view theirstyling design.
4. Select aPreview template such asStarter layout 1, as shown inFigure 2.1.
5. Having reviewed the description, selectChoose this template toinstall it.
6. Enter a site name and a web address, suchasRobBuilderDev1:

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 oftheir 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 wouldcome together.

Tip

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

Sarah willbegin 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 asRobBuilderDev1,RobBuilderDev2, andRobBuilderDev3 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 namedRobBuilderDev1 to work on for their home page and to create a draft website on which to basetheir work.

Sarah followed these steps to access the Power Pagesdesign studio:

1. Sarah opened the Power Pages design studio andeditedRobBuilderDev1.
2. She selected theHome page from thePages 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 andintroductory 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 inFigure 2.2:

Figure 2.2 – Replacing and uploading images

5. As theydeveloped theHome 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 abit smaller:

Figure 2.3 – Clicking the text brings up the style tool

6. Sarah used thedesign 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 Brendahad prepared:

Figure 2.4 – Clicking the logo to replace it

7. When they were satisfied with the page content, Sarah used thePreview feature in the Power Pages design studio to see how theHome page looked in alive environment.
8. Having built theHome page, Sarah and Brenda spent the rest of the day applying this process to other pages. They focused on theAbout Us andContactUs 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 andcolorful text.
10. They thenworked 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 socialmedia pages.

Now that Brenda and Sarah had created a home page along with the pages to showcase their business, they were ready to replace theirlegacy 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 theincident 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 inthis section:

1. Defining the website’s hierarchy: Identifying main pages such asHome,About Us,Services, andContact Us and creating sections foreasy navigation.
2. Creating and organizing pages: Determining specific pages needed under each main section and adding them using the Power Pagesdesign studio.
3. Maintaining a consistent layout across pages: Maintaining a uniform look and feel by using similar templatesor 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 Pagesdesign studio.

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

Defining the website’s hierarchy

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

Creating and organizing pages

Under each main section, Sarah determined the specific pages needed. For example, underServices, 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 inFigure 2.5.

Here, Sarah added the page name and itsURL path:

Figure 2.5 – Adding a new page

Brenda and Sarah discussed additional pages, such as aFinance section withInvoices,Orders, andQuotes subpages. They also discussed theServices section, considering addingProjects andIncident Management subpages. Using the Power Pages design studio, Sarah was able to add subpages by selectingAdd a new subpage, as shown inFigure 2.6:

Figure 2.6 – Adding a subpage

Brenda mentioned the need for aFinance page. It would includeInvoices,Orders, andQuotes subpages. They also discussed what would be underServices: maybe to includeProjects and changeOrder requestsandIncidents.

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 withoutwireframe 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 inPower Pages!

What is wireframe modeling?

Here is a link to get moreinformation on wireframemodeling: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 userexperience 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 suchasIncidents.

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 withtheir 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 thatSarah 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 manageher 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 DNSsettings/management area.
3. Update DNS records: Sarah then navigated to the page where she was able to edit herA records andCNAME records. This is where she was able to set directions for where to pointthe domain.

   Here, Sarahchanged 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 byPower 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 copiedthe 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 pastedthe URL).
6. Save DNS settings: After updating her records, she savedher changes.

   Keep in mind that DNS changes can take up to 48 hours to fully propagate acrossthe 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 theDomain Management section and verified that the custom domain was pointing to her new Power Pagessite 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 thisfor Sarah.
9. Test the website: Further, Sarah ensured that the website loaded correctly and that all links and functionality were workingas 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 anyunintended disruptions.

For further reading on adding a custom domain name, follow the link toMicrosoftLearn: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 brandpresence 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 inChapter 1, now she needed to deploy it to the production environment she had created inChapter 1. To do this, she would use the Power Pages solution tool to add her website and then deploy the solution to the productionenvironment. Here are the steps forthe same:

1. In the studio, Sarah selected theHome |Solutions tab.
2. She then clickedNew solution and entered a name, as shown inFigure 2.7.
3. Within the solution, Sarah added the website andpressedExport.
4. Once that was complete, Sarah downloaded the.zip export to herlocal PC.
5. In the studio, Sarah selected the production environment and pressedImport. After that, she chose the downloaded.zip fileto 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 toPublic so that other users and the public could view thenew website.

Setting the website to public

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

To do this, in the studio production environment, Sarah selected theSet up tab and setSite visibility, as shown inFigure 2.8,toPublic:

Figure 2.8 – Site visibility

The website static pages were ready, and Brenda was ready to show them to her colleagues and announce them toher 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 fortheir site.

Once they established their template and content, Sarah led the development process. Using the Power Pages design studio, they createdHome,About Us, andContact Us pages, meticulously customizing each element to align with their branding. They also explored the process of building a client listing page, adding images, andrefining 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 theirwebsite’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, readyfor 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 theirnavigation 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 theBuilder’s website.