Spark Website Development Guidelines

development guidelines for Spark Developers

Essential practices and standards for building consistent, high-quality websites using WordPress and Elementor.

Explore guidelines

Getting Started

Before beginning any new project or page, follow these essential steps to ensure consistency with brand standards and optimal site performance.

  1. Update all style guide settings for font, color, and typography in Elementor Global Settings.
  2. Compare layout with design mockups to ensure pixel-perfect implementation.
  3. Set proper responsive settings for each breakpoint as per the Breakpoint System.
  4. Verify that PHP and WordPress versions are up-to-date.
Important: Always check with the design team if you're unsure about any styling elements. Consistency across the site is crucial for maintaining brand identity.

Form Implementation

Handle forms in Elementor unless special functions are required. For advanced functionality, use Jet Form Builder.

SMTP is already configured with the test@sparkinteract.com.au account.

Backup Procedures

For sites requiring daily backups, contact Mac or Roshan. We use ManageWP for automated daily backups of larger sites.

Custom Functionality

For custom post types or additional features, utilize the Jet Plugins family (Jet Engine, Jet Popup, Jet Form, etc.).

Styling Guidelines

Styling should follow the specific brand guidelines provided by the design team. The examples below represent sample styles - always refer to the client's actual style guide for implementation.

1. Color System

Each project has its own color palette defined by the designer. Below is an example of how colors should be organized in your implementation:

Note: The colors shown below are examples only. Always use the actual brand colors provided by the designer.
Dark Background #000021
Light Background #FFFFFF
Grey #F5F3FA
Primary Purple #5F01D3
Pink #F53D74

2. Typography System

Typography should be consistent across the site. Use the brand's designated font family and sizing guidelines.

Note: Always use global typography settings in Elementor to maintain consistency. The font family and sizing will be specified in the design documentation.

3. Breakpoint System

Ensure that all designs are responsive using these standard breakpoint ranges:

Device Size Range Notes
Mobile 0 to 768px Optimize for portrait view
Tablet 769 to 1024px Works for both portrait and landscape
Laptop 1025 to 1536px Most common user screen
Desktop 1537 to 2559px Large screens and monitors
Widescreen 2560px and up Ultrawide displays

Best Practices

Elementor Best Practices

  • ALWAYS Use global colors and typography settings to maintain consistency.
  • Organize sections and columns with proper naming for easier maintenance.
  • Create and use Templates for repeating elements to improve site performance.
  • Optimize images before uploading (use WEBP format. https://anywebp.com/convert-to-webp).
  • Set responsive styles for all breakpoints, don't rely on automatic responsive behavior.
  • Follow proper heading hierarchy (H1, H2, H3, etc.) for SEO and accessibility.

Plugin Management

Warning: Do not install plugins from unknown or untrusted sources. Unauthorized plugins can impact site performance, security, and compatibility.

Follow these guidelines for plugin usage:

  • Before adding a new plugin, check if the functionality can be achieved with existing tools.
  • Keep all plugins updated to their latest stable versions.
  • Regularly audit and remove unused plugins.
  • For specific functionality needs, use the approved Jet Plugins family.

Support & Resources

Technical Support

If you encounter issues or have questions, reach out to Roshan or Mac on the development Google Chat space.

Provide screenshots and clear descriptions of any problems you encounter.

Documentation

Maintain documentation for any custom solutions implemented.

Reference the project's design documentation for specifics on styling and functionality.

Quality Assurance: Before launching any page, verify that it's responsive on all device sizes, test all forms, check for console errors, validate links, and run performance checks.