Project Overview
CnEL India worked on a modern website development project focused on building highly flexible, responsive, accessible, and design-focused websites using the native content management capabilities of a popular open-source website platform.
The project was designed around a reusable starting-point theme and a block-based full-site editing approach. Instead of depending on third-party visual page builders, the development process focused on native content blocks, reusable templates, structured components, and extensive custom styling.
The objective was not simply to create attractive websites. The goal was to establish a reliable development framework that could be reused for multiple website projects while maintaining strong performance, responsive behaviour, accessibility, usability, and design consistency.
CnEL India’s role involved understanding the existing starting-point architecture, extending it according to individual design requirements, creating reusable layouts, writing substantial custom styling, adapting templates for different screen sizes, and ensuring accessibility was considered throughout the development process.
Business Challenge
Many modern websites are created using visual page-building systems that can make design changes easy but may introduce unnecessary dependencies, inconsistent markup, excessive page elements, or limitations when highly customised layouts are required.
The client wanted a different approach.
Their websites were primarily based on native block functionality and full-site editing. The development team needed to work directly with the site’s underlying templates and components instead of relying on third-party page-building systems.
This created several technical requirements.
The developer needed to understand how reusable blocks, templates, navigation structures, global styles, content areas, and responsive layouts worked together.
At the same time, the websites needed to reproduce detailed visual designs through custom styling.
Accessibility was another major requirement. It could not be treated as a final quality check after development. Accessibility needed to influence decisions throughout the entire development lifecycle, including navigation, headings, buttons, forms, colour contrast, keyboard interaction, content structure, and responsive behaviour.
The project therefore required a combination of frontend development, template engineering, responsive design, custom CSS, accessibility awareness, and careful quality assurance.
Project Objectives
The main objectives of the project were to:
- Build websites using native block-based functionality.
- Extend an established starting-point theme rather than rebuilding from scratch.
- Create reusable templates and components.
- Reproduce custom visual designs accurately.
- Use substantial custom CSS for layout and responsive behaviour.
- Ensure websites work correctly across desktop, tablet, and mobile devices.
- Incorporate accessibility throughout development.
- Create logical navigation and semantic content structures.
- Build accessible forms and interactive components.
- Maintain clean and manageable website architecture.
- Reduce unnecessary third-party dependencies.
- Test designs and functionality across different screen sizes.
- Create a development approach that could be reused across future projects.
Understanding the Existing Architecture
Before beginning development, CnEL India would first review the existing starting-point theme and understand how its templates and reusable components were organised.
This included analysing:
- Header structures
- Footer structures
- Navigation
- Page templates
- Content layouts
- Typography settings
- Colour systems
- Spacing systems
- Reusable blocks
- Responsive rules
- Existing custom styles
- Content hierarchy
Understanding the existing architecture was important because the project was based on an established foundation.
Rather than replacing the entire structure, the objective was to identify which components could be reused, which required modification, and which new components needed to be introduced.
This approach reduced unnecessary development and helped maintain consistency between websites.
Block-Based Website Development
The websites were built primarily using native content blocks.
Each page could be assembled from structured sections such as:
- Hero areas
- Content sections
- Feature sections
- Service sections
- Testimonials
- Image and text combinations
- Calls to action
- Cards
- Navigation elements
- Forms
- Footer sections
The advantage of this approach was that content and layout could remain structured while still allowing significant visual customisation.
Reusable components could be developed once and then adapted for different pages.
This also helped maintain consistency across a website because common elements did not need to be recreated independently on every page.
Full-Site Editing Architecture
A major part of the project involved working with full-site editing concepts.
Instead of treating individual pages as completely separate designs, the website was structured around reusable templates and global components.
This allowed common areas such as headers, footers, navigation, and page structures to be controlled centrally.
For example, a change to a global header structure could be reflected throughout the website rather than requiring manual changes on every individual page.
This created a more maintainable architecture and made future website updates easier.
Custom CSS Development
Custom CSS was one of the most important parts of the implementation.
While native blocks provided the structural foundation, detailed designs often required additional styling to reproduce the desired appearance.
CnEL India could use custom CSS to control:
- Section spacing
- Typography
- Font sizing
- Button appearance
- Borders
- Backgrounds
- Card layouts
- Grid structures
- Image positioning
- Responsive behaviour
- Hover states
- Mobile layouts
- Alignment
- Content widths
The objective was not to add styling unnecessarily. Instead, CSS was structured around reusable design patterns wherever possible.
This helped avoid excessive one-off styling and made future modifications easier.
Responsive Design
Responsive behaviour was treated as a core development requirement.
A website that looks correct on a desktop screen may become difficult to use on a mobile device if spacing, typography, navigation, or content structures are not adapted properly.
CnEL India therefore considered multiple screen sizes during development.
Responsive testing focused on areas such as:
- Navigation menus
- Hero sections
- Typography
- Images
- Columns
- Buttons
- Forms
- Content spacing
- Cards
- Tables or structured information
- Footer layouts
On smaller screens, multi-column layouts could be converted into stacked sections where appropriate.
Typography and spacing were also adjusted to maintain readability without making the page unnecessarily long.
The goal was to preserve the design intent while ensuring that the website remained practical and easy to use across devices.
Accessibility-First Development
Accessibility was a major part of the project.
Rather than waiting until development was complete and then running a final accessibility review, accessibility considerations were integrated into the development process.
This meant thinking about how different users would interact with the website from the beginning.
Important areas included:
- Semantic headings
- Logical document structure
- Keyboard navigation
- Visible focus states
- Accessible navigation
- Meaningful link text
- Form labels
- Accessible buttons
- Image alternative descriptions
- Colour contrast
- Readable typography
- Appropriate content hierarchy
- Screen-reader compatibility
The purpose was to make the website usable by a wider range of people, including users who navigate websites using keyboards or assistive technologies.
Semantic Content Structure
A logical content hierarchy was maintained throughout the website.
Headings were organised according to their role rather than simply their visual appearance.
For example, the main page heading was treated as the primary heading, while supporting sections followed a logical hierarchy.
This approach improved both usability and accessibility.
It also created a cleaner content structure that could be easier for search engines and assistive technologies to interpret.
Accessible Navigation
Navigation was another important accessibility area.
The website’s navigation needed to work for users interacting through different input methods.
CnEL India focused on clear navigation structures, logical focus movement, readable labels, and appropriate interactive states.
On smaller screens, the navigation could transition into a mobile-friendly menu without compromising usability.
The objective was to make it easy for users to understand where they were and how they could move to another section of the website.
Accessible Forms
Forms were developed with usability and accessibility in mind.
A properly structured form should clearly communicate:
- What information is required
- Which field is currently active
- What format is expected
- Whether an error has occurred
- How the user can correct the error
Labels, instructions, focus states, and error messaging were therefore considered part of the development process rather than optional enhancements.
This helped create a better experience for all users, particularly those relying on keyboard navigation or assistive technology.
Reusable Components
A reusable component approach helped make the development process more efficient.
Instead of creating every section as an isolated design, common patterns could be turned into reusable structures.
Examples included:
- Call-to-action sections
- Content cards
- Feature sections
- Testimonial layouts
- Navigation areas
- Footer structures
- Button patterns
- Information blocks
Reusable components helped maintain visual consistency while reducing repetitive development.
They also made future modifications easier because a shared component could be updated without rebuilding every page individually.
Design Accuracy
Another important requirement was the ability to translate design concepts into functional website components.
CnEL India focused on matching:
- Layout proportions
- Typography
- Spacing
- Alignment
- Visual hierarchy
- Section relationships
- Button placement
- Image positioning
- Responsive transitions
The development process required attention to both visual details and technical constraints.
Rather than simply copying a desktop design, the objective was to understand how the design should behave at different screen sizes.
Performance Considerations
The development approach also considered website performance.
A cleaner architecture with fewer unnecessary dependencies can make websites easier to maintain and potentially reduce unnecessary page overhead.
CnEL India focused on avoiding excessive third-party components and unnecessary functionality.
Images, layouts, styles, and content structures could be reviewed to ensure that the website remained efficient.
Performance was considered alongside design rather than treated as a completely separate stage.
Testing and Quality Assurance
Testing was carried out across multiple areas.
Functional Testing
The website was checked to ensure that navigation, buttons, forms, links, templates, and interactive components behaved as expected.
Responsive Testing
Pages were reviewed across different screen sizes to identify layout problems, overflow, spacing issues, and navigation problems.
Accessibility Testing
Accessibility checks focused on keyboard interaction, heading structure, focus visibility, form usability, content hierarchy, and other important accessibility requirements.
Visual Testing
The implemented website was compared against the intended design to identify differences in spacing, typography, alignment, sizing, and responsive behaviour.
Cross-Browser Testing
The website could also be reviewed across commonly used browsers to identify rendering differences and ensure consistent behaviour.
Development Workflow
CnEL India’s development workflow for this type of project can be organised into several stages.
Stage 1: Requirement Understanding
The design requirements, existing theme structure, content needs, and accessibility expectations are reviewed.
Stage 2: Architecture Review
Existing templates, reusable components, styles, and navigation structures are analysed.
Stage 3: Component Development
Required website sections are developed as reusable blocks and components.
Stage 4: Styling
Custom CSS is applied to achieve the required visual design and responsive behaviour.
Stage 5: Accessibility Integration
Accessibility requirements are reviewed throughout development instead of being postponed.
Stage 6: Responsive Optimisation
Layouts are tested and adjusted for desktop, tablet, and mobile devices.
Stage 7: Quality Assurance
Functionality, visual accuracy, responsiveness, accessibility, and browser compatibility are reviewed.
Stage 8: Final Deployment
After successful testing, the website is prepared for production use.
Business Benefits
The project approach provided several business benefits.
Reusable Development Foundation
A starting-point architecture could be reused for future websites, reducing repetitive development work.
Easier Maintenance
Reusable templates and structured components made future changes easier to manage.
Better Accessibility
Accessibility considerations were incorporated throughout development rather than added as an afterthought.
Responsive User Experience
The websites were designed to work across different devices and screen sizes.
Design Flexibility
Custom styling allowed the development team to achieve highly specific visual designs without depending entirely on third-party page-building systems.
Reduced Dependency
The native block-based approach reduced reliance on large collections of external components.
Consistent Development
Reusable structures helped maintain consistency between pages and future client projects.
CnEL India’s Contribution
CnEL India’s contribution focused on combining frontend development, structured website architecture, custom styling, responsive design, and accessibility practices.
The key value was not simply creating individual web pages. It was creating a repeatable development process that could support multiple websites while maintaining quality and consistency.
CnEL India could take an existing starting-point theme, understand its architecture, adapt it to a new design, build reusable components, customise the visual presentation, test responsive behaviour, and ensure accessibility throughout the implementation.
This approach allowed the development process to remain flexible while preserving a consistent technical foundation.
Future Scalability
The architecture can support additional websites and future design requirements.
New templates and reusable components can be introduced without completely changing the underlying structure.
Accessibility standards can also be continuously reviewed and improved as website requirements evolve.
The same development methodology can be applied to corporate websites, service businesses, informational websites, landing-page systems, and other content-driven digital platforms.
Conclusion
CnEL India’s Gutenberg-based full-site editing website development project demonstrates how modern websites can be built using a structured, native, and highly customisable development approach.
The focus was not on simply producing visually attractive pages. The project combined reusable architecture, custom CSS, responsive design, accessibility, semantic content structures, reusable components, and quality assurance into one development process.
By working with native website functionality and avoiding unnecessary dependence on third-party page-building systems, the approach created websites that were easier to structure, customise, maintain, and extend.
Accessibility was treated as a fundamental development requirement, ensuring that navigation, content, forms, components, and responsive layouts were considered from the perspective of usability throughout the project.
For CnEL India, this type of project represents a strong approach to delivering scalable website development services where design flexibility, technical quality, accessibility, and long-term maintainability are treated as equally important parts of the final product.