{"id":2226,"date":"2024-08-11T02:09:34","date_gmt":"2024-08-11T06:09:34","guid":{"rendered":"http:\/\/sites.bu.edu\/marcom-team\/?page_id=2226"},"modified":"2024-08-13T20:38:27","modified_gmt":"2024-08-14T00:38:27","slug":"evergreen-site-process","status":"publish","type":"page","link":"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/what-we-do\/id-offerings\/evergreen-site-process\/","title":{"rendered":"Custom Website Process (Condensed)"},"content":{"rendered":"<div class=\" bu-callout aligncenter\"><\/p>\n<h4>For Reference Only<\/h4>\n<p>The following process and dev workflow are for fringe case projects and no longer recommended or maintained.<\/p>\n<p>They are no longer recommended as we are pursuing evolving <a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/what-we-do\/id-product\/\">Responsive Framework<\/a> to a block editor with our <a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/what-we-do\/id-offerings\/\">Custom Website offering<\/a>.<\/p>\n<p><\/div>\n<ol>\n<li><strong>IA Phase (Information Architecture)<\/strong>:\n<ul>\n<li><strong>Gather Requirements<\/strong>: Meet with stakeholders to understand the project\u2019s goals, user needs, and design preferences.<\/li>\n<li><strong>Site Audit<\/strong>: Review the existing site structure, content, and design elements to identify areas requiring customization.<\/li>\n<li><strong>Define Scope<\/strong>: Outline the scope of changes, including which pages or elements will be affected by custom CSS.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Design Phase<\/strong>:\n<ul>\n<li><strong>Create Wireframes<\/strong>: Develop wireframes to visualize layout and design changes.<\/li>\n<li><strong>Design Mockups<\/strong>: Create detailed design mockups incorporating the new styles and custom CSS elements.<\/li>\n<li><strong>Review and Feedback<\/strong>: Present designs to stakeholders for feedback and make necessary revisions.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Development<\/strong>:\n<ul>\n<li><strong>Set Up Development Environment<\/strong>: Prepare a staging environment for testing custom CSS changes.<\/li>\n<li><strong>Implement Custom CSS<\/strong>: Write and apply custom CSS based on the approved designs.<\/li>\n<li><strong>Initial Testing<\/strong>: Conduct preliminary tests to ensure styles are applied correctly and do not conflict with existing CSS.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Hiding a Specific Page<\/strong>:\n<ul>\n<li><strong>Identify Page<\/strong>: Determine which page(s) need to be hidden from public view or search engines.<\/li>\n<li><strong>Apply CSS Rules<\/strong>: Use custom CSS to hide the page, either by setting <code>display: none<\/code> or other appropriate CSS techniques.<\/li>\n<li><strong>Verify<\/strong>: Ensure the page is effectively hidden and does not appear in site navigation or search results.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Custom CSS<\/strong>:\n<ul>\n<li><strong>Fine-Tune Styles<\/strong>: Adjust and refine CSS to achieve the desired look and functionality.<\/li>\n<li><strong>Cross-Browser Testing<\/strong>: Test custom CSS across various browsers and devices to ensure compatibility and responsiveness.<\/li>\n<li><strong>QA Review<\/strong>: Perform a quality assurance review to check for any issues or inconsistencies.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Media Library<\/strong>:\n<ul>\n<li><strong>Organize Media<\/strong>: Review and organize media files used in the project, ensuring they are properly categorized and optimized.<\/li>\n<li><strong>Update Media Links<\/strong>: Update any media links in the CSS or site content if necessary.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Page\/Post Editing<\/strong>:\n<ul>\n<li><strong>Apply Styles<\/strong>: Ensure custom CSS is correctly applied to specific pages or posts as needed.<\/li>\n<li><strong>Content Review<\/strong>: Edit page or post content to align with the new design and CSS changes.<\/li>\n<li><strong>Client Review<\/strong>: Present updated pages\/posts to the client for final approval.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Launch<\/strong>:\n<ul>\n<li><strong>Final Testing<\/strong>: Conduct thorough testing on the live site to confirm that custom CSS changes are working as intended.<\/li>\n<li><strong>Deploy Changes<\/strong>: Push the custom CSS and any related updates to the live site.<\/li>\n<li><strong>Monitor and Support<\/strong>: Monitor the site post-launch to address any issues or feedback and provide support as needed.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\"><div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h5 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Dev Workflow for Custom CSS Sites<\/h5><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/span><\/p>\n<p>Request a new <code>customcss-{sitename}<\/code> repo (e.g., <a href=\"https:\/\/github.com\/bu-ist\/customcss-framinghamheartstudy\" target=\"_blank\" rel=\"noopener noreferrer\">customcss-framinghamheartstudy<\/a>) based on <code>r-static-starter<\/code> or have a developer initialize a clone of <a href=\"https:\/\/github.com\/bu-ist\/r-static-starter\" target=\"_blank\" rel=\"noopener noreferrer\">r-static-starter<\/a>.<\/p>\n<div class=\" bu-callout alignright\"><\/p>\n<h4>r-static-starter<\/h4>\n<p>This repo is ideal for static sites and editorial articles because it provides BURF-Tools for responsive design with SASS.<\/p>\n<p><\/div>\n<h4>During Development<\/h4>\n<ul>\n<li>Upload compiled CSS to a temporary location (e.g., <code>\/webteam\/projects\/my-project\/dev\/<\/code>), but <strong>**do not leave this for production**.<\/strong><\/li>\n<li>Use <code>@import<\/code> to integrate the compiled CSS into the WordPress Custom CSS editor.<\/li>\n<\/ul>\n<h4>Upon Completion<\/h4>\n<ul>\n<li>Copy and paste the compiled CSS into the Custom CSS editor.<\/li>\n<li>Remove the <code>@import<\/code> line and delete the temporary files from Webteam.<\/li>\n<\/ul>\n<p><\/div>\n<\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>IA Phase (Information Architecture): Gather Requirements: Meet with stakeholders to understand the project\u2019s goals, user needs, and design preferences. Site Audit: Review the existing site structure, content, and design elements to identify areas requiring customization. Define Scope: Outline the scope of changes, including which pages or elements will be affected by custom CSS. Design Phase: [&hellip;]<\/p>\n","protected":false},"author":12906,"featured_media":0,"parent":1342,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/2226"}],"collection":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/users\/12906"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/comments?post=2226"}],"version-history":[{"count":13,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/2226\/revisions"}],"predecessor-version":[{"id":2718,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/2226\/revisions\/2718"}],"up":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/1342"}],"wp:attachment":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/media?parent=2226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}