The Start of a New Website Project
Master Roofing Company is a family-owned and operated Oakland roofing contractor with nearly 40 years experience of servicing residential and commercial clients in and around the San Francisco Bay Area. They had a Yelp page, but they didn’t have their own website.
The Process
After a phone call to clarify the scope of the project, budget and timeline we had the client send us a list of the 8 pages they wanted and the text that they wanted for each page, as well as some layout suggestions.
And the clock started ticking…
Where to build the site – our choice for most clients is Sitedistrict
Once we had the initial content and a “sitemap” we chose to build the site at Sitedistrict. This the hosting company we usually start with because of their developer tools and the support they provide — including the best site migration and staging site creation I’ve ever seen.
In addition, we can start to build a site for a client for no charge on our account, then create an account for the client and transfer the site to the new client account without bothering the client. Only when the site is ready to go live and we’re ready to point a domain to the new site do we need to automatically send an email to the client inviting them to take ownership of the site and add a payment method for the account. Sitedistrict charges monthly ($25/mo for a single site) at the end of the month once the site is live.
This workflow lets us start to build a site
- without engaging the client in a lot of administrative details setting up new accounts
- the client doesn’t have to commit to a year or more of hosting costs before the site is even built
- we don’t incur any hosting expenses while building the site.
Page Layout Using Beaver Builder Pagebuilder
I was unhappy with the previous tools I had been using for several years to build client WordPress websites. The tools were getting clunky, bloated, not WYSIWYG, and slow, both during the page creation and editing, and also when the pages loaded. 
After 6-months of researching and trying alternatives I’ve chosen to use Beaver Builder, the best page layout plugin for building WordPress websites, and the Genesis theme framework from StudioPress as our main tools and framework for creating websites.
There are numerous reasons for this choice of theme, but it boils down to Genesis being a solid foundation for the website with great coding, support, and perhaps most important — significant market share. I’m risk adverse, after we turn over a website to the client, we don’t want to hear 6 months or a year later that after updates to WordPress core, the theme, and the multiple plugins to customize the website, that some update has broken the site because an incompatibility between the plugin and the theme. If a plugin has a conflict with Genesis, the plugin developer will notice and fix it almost immediately. If it is some other theme (other than the WordPress default themes), then maybe not so much.
While there are several modern page builder plugins available these days Beaver Builder seems to be the best-in-class. This is why I picked Beaver Builder.
- It really is WYSIWYG page layout for building responsive web pages. It’s like when Aldus introduced Pagemaker document page layout program in 1985 and started the desktop publishing revolution.
- Beaver Builder doesn’t leave messy shortcodes behind, or remove the content entirely when you disable it — all your content is always there.
- There is a thriving 3rd party ecosystem building addons for Beaver Builder, no vendor lock-in.
- There are active Beaver Builder developer communities on Slack and Facebook groups and many video tutorials on YouTube and Vimeo. The support is great.
Proof of the Pudding is in the Eating
By using Genesis and Beaver Builder, we were able to go — from request to the site launch — in under 3 weeks and for less than $600.
Now part of that economy was having a savvy client who knew exactly what he wanted and had the content ready to go. Since this is a simple “brochure” website we didn’t spend a lot of time on the graphic design. He knew what fonts and colors he wanted. The majority of the layout emerged from standard Beaver Builder tools and pre-built templates.
One key aspect of website design is meeting the requirements and desires of the client for a particular header, either specifically on the homepage, with other designs on the interior pages, or just a global header design. Header layout options have been one of the primary factors in choosing a theme – Not anymore!
Beaver Theme Builder Plugin – build page Headers to look the way You want
The Beaver Themer plugin is an additional plugin that lets us create theme elements like headers, footers, single post layouts, archive pages, 404 pages, etc. using the standard Beaver Builder page layout tools. These layouts can be saved and reused throughout the site as well as downloaded and applied to other sites. We’re no longer beholden to the theme developers’ design choices. With these tools we can make any page look the way the client wants from the top of the browser window to the bottom.
Turning Over the Site to the Client – Site Changes and Enhancements
The site has just launched at the end of March 2017. But it’s not done. Websites are never done. In this case, the client already knows he wants to add a bunch more photos of the roofing work, but he doesn’t have those yet. One of the advantages of a WYSISYG page layout tool is that it simplifies training the client to do most of the editing and adding additional content as the site evolves. As I’ve said, this happens to be a particularly savvy client who was comfortable editing the page content after we set up the pages with his original text. we were able to quickly coach him in how to make editing changes, as well as changes to the individual page layouts. When he gets stuck, he can call on us to help out, but we expect him to take the site forward from here.
You can see the current state of the homepage in the screenshot below, or you can visit the live site and see the rest of the pages as well as the interactive elements like the popup contact form on the homepage.
Enjoy!
click on the image to see the larger size
Reader Interactions