Web Design Services

New Build Workflow

New Build Workflow
1. Pre-Build

Pre-Build

Modgi

  1. Review the build in general, checking for additional functionality or any special requests.
  2. Download all the attachments so you have them ready to go when you need them.
  3. Open any reference sites listed, or if builder discretion is requested, open any industry similar sites you may find inspirational.

Copywriting and SEO Worksheet

This may be buried. Check the following path for files:

  • On the Parent Ticket, under "Issue links", in "is blocked by"
  • Click the vendor link
  • Under "Sub-tasks", click on the Copywriting link
  • In the attachments find the doc or zip file labeled "Final" and download

If you still cannot find the copywriting and SEO, please reach out to a teammate. Do not take text from an existing site or make up copy of your own.

*Note: Every Build will have at least an SEO Worksheet unless it was specifically requested to not have any SEO writing done. 

If placeholder text has been requested please use lorem ipsum: https://loremipsum.io/

Resources

If the customer requested stock images or provided images that are low quality, open our stock image galleries.

If you find that icons would be beneficial, open only our approved stock icon options.

Do not stray from font awesome or icons db, these are our only approved stock icon libraries. If you can use font awesome icons in the modules do this as opposed to downloading the icon and saving as an image, it is easier to edit them in the module than it is to edit an image file.

Dont forget to open the QA checklist to keep notes as you go.

Styleguide is always a good tool if you need help with functionality

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

2. WP Dashboard

WP Dashboard

Core/Plugins

  1. Install and activate Core.
  2. Choose site type and region.
  3. Click activate, then install now to install all the required plugins.
  4. Add any additional requested plugins and deactivate any unnecessary plugins from the plugins page.
  5. For more detailed information about Core check out the styleguide: https://styleguide.pwsgallery.com/gd-core/

Author display name

  1. Go to Users, PWS Admin.
  2. Edit the field for the Nickname to be the site name.
  3. In the drop down for "Display Name Publicly As" choose your new nickname, then scroll down and save.

Posts

  1. If blogs were provided enter those now.
    • Don't forget to either delete or edit the default "Hello World" post.
  2. Add a featured image to all posts unless specifically asked not to.
  3. If blog/posts are not being used, remove default "Hello World" post and turn off comments.

Forms

  1. Add a simple Contact form, unless one is specified in Modgi.
    • Don’t forget to enable the anti-spam honeypot setting.
  2. Adjust the subject line in the notification settings, so it is not the default subject. Something like the site name with the form name i.e. "Site Name Website Contact From - {Name} "
  3. Change the from email to something like "[email protected]" 

Form Restrictions
We do not want to put private or personal information on a website.

We should never be asking the following information through an email form:

  • Social Security Numbers or SSN#
  • Bank Account information
  • Credit Card Numbers or CC#
  • Driver's License Number or DL#

Our goal should always be to protect our customers and C2 (customers’ customers)

Do NOT place more than one form on a page.

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

3. Customizer

Customizer

General Tab

  1. Layout

    • Enable the "Scroll to Top Button".

    • Set Font Awesome Icons to "Font Awesome 5".

  2. Accent Color

    • Change the "Accent Color" to the color the customer chose in Modgi and adjust the "Hover Color" to an appropriate variation of the accent color.

      • This can be grey if a darker color of the accent color does not look appropriate.

      • Review color standards in the Style Guide for help picking appropriate colors: https://styleguide.pwsgallery.com/color/
  3. Headings
  4. Text

    • Adjust the font family to a font chosen by the customer, or acceptable alternative.

    • Adjust the font size to 18 and the line height to 1.6 unless this does not look good, then notate in your ticket why you chose what you did. 

Menus/Pages

  1. Create a new Menu labeled "Main Menu".
    • Add all the pages requested in Modgi and marked as "Default", by typing in the page name in the "Add New Page" field under the "Pages" tab and click on the "+Add" button.
    • Make sure you are setting sub-navs correctly and forcing external links to open in a new tab.

      • If you do not see the checkbox to have a link open in a new tab, go back to the menus area and click on the gear at the top, this will have a checkbox for Link Target, make sure you have this option checked.

    • Include a contact page, if not already requested in Modgi, if it is anything other than a simple site.
  2. If a split nav or a separate footer nav is required, create a menu for these as well.

Settings Tab

  1. Site Identity

    • Enter the site title and tagline from Modgi.

    • If customer has provided a logo edit the logo in an appropriate way to use as a favicon. Favicons should be 512px square.

      • If no logo has been provided, create a favicon using 1-3 letters from the site name.

    • Upload your favicon.

  2. Homepage Settings

    • Change the "Your homepage displays" to “A Static Page” then choose your home page from the drop down.

    • Leave "Posts page" as "select page" unless they intend to have a blog, then set it to the blog page.

Additional CSS

Copy and paste the CSS template here. All new builds should include the template.

https://styleguide.pwsgallery.com/design-etiquette/css/#csstemp

Don't forget to hit Publish!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

4. Themer Layouts

Themer Layouts

Header

  1. Add a new layout called Header.
  2. Choose Header from the Layout drop down.
  3. Then under location choose Entire Site.

Footer

  1. Add a new layout called Footer.
  2. Choose Footer from the Layout drop down.
  3. Then under location choose Entire Site.

Blog/Shop Layouts

If the site will be using blogs or is a woo and has products:

  1. Set up singular layouts for the posts/products.

  2. Set up archive layouts for the main blog/shop pages as well as the category pages if necessary.

Don't forget to hit Publish!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

5. Beaver Builder

Beaver Builder

Global Settings

  1. Open Beaver builder on any page or themer layout.
  2. Click on the down arrow in the upper left next to the Beaver Builder icon.
  3. Click on the Global Settings option.
  4. Change the “Default Row Width” to “Full Width”.
  5. Scroll to the bottom of this screen and make sure you adjust the “Enable Column Max Width” to “No”.
    • This ensures that tablet and small devices are full width and don’t have strange margins.
  6. Save your changes.

Sitewide Elements

Now that your themer layouts have been added lets edit them

  1. Start with the header. Edit it by either:
    • Clicking on the Beaver Builder link on the themer layouts screen.
    • Or by going to any page on the site, hover over beaver builder, then click on header.
  2. Start by selecting the template:
    • Click the plus sign.
    • Click on Templates.
    • From the drop down choose "Header Templates".
    • Then chose the layout chosen in Modgi or whatever fits best.
    • Click "Replace Existing Content".
  3. Swap out all relevant information and style appropriately.
    • Check all devices! Mobile – 390px | Tablet 768px | iPad Pro 1024px | Laptop 1366px
  4. Do the same for the footer, make sure you use the template as this contains the GoDaddy badge as well as other style presets to make it easier for you.
  5. Don’t forget about your blog/product pages too.

Page Content

First, review Modgi as well as the copywriting worksheet to see what is being requested. If they are giving you discretion or not much to work with, feel free to google similar businesses to see typical industry styles. Obviously, you should not copy these sites, but you can pull inspiration from them if you need to.

  1. Start with your home page. Set up your hero with the requested info from Modgi and the copywriting worksheet.
    • If you cannot find the copywriting or SEO worksheets and copywriting has been checked in Modgi, please get with a teammate to track it down, do not simply pull it from an old site or make it up.
  2. Once you have your hero in place, make sure you check the layout on all devices
    • Mobile – 390px | Tablet 768px | iPad Pro 1024px | Laptop 1366px
  3. Then save the Hero row to use on internal pages as a base. Save it as “Home Hero”.
  4. Then style the rest of the page accordingly making sure to check all devices as you go.
    • If you feel that you may use some of the styling on internal pages, go ahead and save these elements as well. Make sure that you are NOT clicking “Global” as this will make the changes no matter what page you place the module or row. Global elements should be reserved for the header or footer.
  5. Once you get to an internal page add your saved row “Home Hero” from the home page as a base. Adjust the height, background image if necessary, and text according to the copywriting worksheet. Once you have an acceptable hero image for internal pages that looks good on all devices save this new row as “Internal Hero” to make it easier to stay consistent.

SEO

  1. On each page click "Edit".
  2. Use the SEO worksheet to add title tags (using the snippets) and meta descriptions to the Yoast settings on each page.
    • If you cannot find the copywriting or SEO worksheets and copywriting has been checked in Modgi, please get with a teammate to track it down, do not simply pull it from an old site or make it up.
  3. Don’t forget to add featured images.

Don't forget to hit Publish!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

6. WooCommerce

WooCommerce

WP Dashboard

  1. Add the pages:

    • Cart, Checkout, My Account, Terms & Conditions, Privacy Policy, and Shop (or whatever term the customer requested as the shop page)
  2. Connect the pages to Woo
    • Go to WooCommerce > Settings > Advanced. Select each page you created corresponding with its respective label under "page setup"
  3. Connect Shop
    • To tell WooCommerce what pages to use for the Shop page go to WooCommerce > Settings > Products

Check the Style Guide for more detailed information: https://styleguide.pwsgallery.com/wp-woo/woocommerce-components/

Customizer

Upon installation of Woo, a panel appears in the customizer for WooCommerce that contains some layout and checkout settings. These items used to be found in the dashboard under WooCommerce settings, but they've recently shifted to the customizer and tend to get overlooked.

Appearance > Customize > WooCommerce

Since we custom create our Woo layouts with Themer, the majority of these settings usually don't matter, but its good to know where to find them. 

Check the Style Guide for more detailed information: https://styleguide.pwsgallery.com/wp-woo/woocommerce-components/#sett

Themer Layouts

  1. Products
    • If you did not previously set up the themer layout for products, do this now. 
    • The themer layout should be labeled something like "Products" and it should be a singular layout.
    • Make sure your location is set to "product" - "all products".
    • Be sure to use the Templates in Beaver builder when building out the page. Click the + > Templates > WooCommerce > Choose the layout designated in Modgi.
  2. Shop
    • If you did not previously set up the themer layout for the shop page, do this now. 
    • The themer layout should be labeled something like "Shop" and it should be an archive layout.
    • Make sure your location is set to "product archive".
    • Be sure to use the Templates in Beaver builder when building out the page. Click the + > Templates > WooCommerce > Choose the layout designated in Modgi.
  3. Categories
    • If the site calls for products categories, be sure you set up a category layout, or it will default to the basic woo layout.
    • This should be labeled something like "Product Categories" and it should be an archive layout.
    • Your location should be set to "Product Category Archive" - "All Categories".
    • Be sure to use the Templates in Beaver builder when building out the page. Click the + > Templates > WooCommerce > Choose the layout designated in Modgi.

Check the Style Guide for more detailed information: https://styleguide.pwsgallery.com/wp-woo/wordpress-page-setup/#them

Beaver Builder

Once the new pages are connected to Woo as shown in the step above, edit each page and add the component via shortcode placed in an HTML module or via themer's WooCommerce module. If you've saved a hero / H1 layout or style, you can use this on each component page to keep the site consistent.

  1. Cart Page
    • Shows the cart contents - Use the [woocommerce_cart] shortcode placed in an HTML module or select "Cart" from the standard Woo module
  2. Checkout Page
    • Shows information such as shipping and payment options - Use the [woocommerce_checkout] shortcode placed in an HTML module or select "Checkout" from the standard Woo module
  3. My Account Page
    • Shows each customer information related to their account, orders, etc - Use the [woocommerce_my_account] shortcode placed in an HTML module or select "My Account" from the standard Woo module
  4. Terms & Conditions
    • Use the default terms & conditions document to place terms in a text module on this page
  5. Privacy Policy
    • The default terms & conditions document has a section for privacy policy - you can use this clipping temporarily but notate that the customer needs to revise these items - privacy policy is automatically connected to checkout
  6. Order Tracking
    • There's an optional Woo function built in called "order tracking" - You can create its own page, or you can choose to place it on the "my account" page above/below the dashboard - to use it, select "Order Tracking" from the standard Woo module

Check the Style Guide for more detailed information: https://styleguide.pwsgallery.com/wp-woo/woocommerce-components/#mods

Don't forget to hit Publish!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

7. Final Checks

Final Checks

Responsive

Once more, double check that your site is responding well on ALL devices:

Mobile – 390px | Tablet 768px | iPad Pro 1024px | Laptop 1366px

Plugins

Double check that all your plugins are up to date in Core, and any plugins outside of Core are up to date.

Smush

Go to the dashboard and run Smush.

Cache

Flush all the caches!

Google Lighthouse

Run google lighthouse from the Core dashboard. 

If you get a score below 75%, notate all the steps you took to attempt to get the score to or above 75%. Follow the steps outlined in the style guide to attempt to bring the score up: https://styleguide.wdsgallery.com/google-lighthouse-in-gd-core/

Screenshots

Take screenshots of your finished site at the following breakpoints: 

390px | 1024px | 1920px

Be sure you are taking screenshots of:

  • All Pages
  • At least one of each Post Type (i.e. blogs, products, pods; if applicable)
  • At least one Category (i.e. product cateogry/post category; if applicable)
  • The Plugins Page
  • The GD cORe Plugins page

Your file naming convention should be as follows:

"page-name_screen-size_date" - example: Home_375px_10-7-2020.png

Zip all of your files

Name the zip file the "Screenshots_URL_date" (example: Screenshots_wdsdesigns.com_10-7-2020.zip)

Upload the zip file to the jira build subtask

Don't forget to save a copy for yourself, they make great examples for portfolios!

Checklist/Notes

Fill out the checklist for all of your new builds: http://wdsdesigns.com/qa-check/

This will help generate notes for you, so you can copy and paste them into your ticket.