Project AdUI: Accessible & User-Friendly Ad UI Components
Welcome to Project AdUI! This open-source project provides developers with a collection of pre-designed, accessible, and user-experience-focused UI components for various online advertisement formats. Built with standard HTML, CSS, and minimal JavaScript, Project AdUI helps you integrate advertising responsibly.
Find the repository on GitHub: https://github.com/Nitra-Global/Project-AdUI/
Our Goal
The goal of Project AdUI is to improve the online advertising experience for everyone. We offer high-quality UI building blocks that prioritize user comfort, accessibility (following WCAG 2.2), performance, and modern web standards. We believe ads can be integrated in a way that is respectful and enhances the Browse experience.
Why Use Project AdUI?
- Better User Experience: Reduce frustration caused by poor ad design.
- Improved Accessibility: Make your ads usable for people with disabilities.
- Faster Performance: Use lean, efficient code for quicker loading.
- Full Responsiveness: Ensure ads look great on any device.
- Easy Customization: Adapt styles to fit your website’s design.
- Standard Web Technologies: Use with any project, no framework required.
- Community Driven: Benefit from and contribute to an open project.
Features
- Modular HTML/CSS/JS components for various ad formats.
- Focus on accessibility (ARIA, keyboard support, contrast, focus management).
- User-friendly design patterns and clear ad labeling.
- Fully responsive and adaptive layouts.
- Easy integration and customization.
- Optimized for performance.
- Comprehensive documentation, guidelines, and live demos.
Getting Started
- Get the code: Clone the GitHub repository or download the files.
git clone [https://github.com/Nitra-Global/Project-AdUI.git](https://github.com/Nitra-Global/Project-AdUI.git)
- Include Styles and Script: Link the main CSS and JS files in your HTML. Place the CSS in the
<head> and the JS at the end of the <body>.
<head>
<link href="[https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap](https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap)" rel="stylesheet">
<link rel="stylesheet" href="path/to/style.css">
</head>
<body>
<script src="path/to/script.js"></script>
</body>
- Add Component HTML: Find the HTML for the ad format you need in the
/components folder and copy-paste it into your page.
- Insert Ad Content: Replace the placeholder content within the HTML with your actual ad creative (images, text, links, etc.). Make sure your ad content is also accessible (like using
alt text for images).
Visit our Documentation Website for more detailed instructions and examples.
Available Components
Explore our library of ad UI components:
- Standard Banners: Responsive Banner, Leaderboard (728x90), Mobile Banner (320x50), Large Mobile Banner (320x100)
- Rectangle & Square: Medium Rectangle (300x250), Large Rectangle (336x280)
- Skyscrapers: Skyscraper (160x600), Wide Skyscraper (300x600)
- Overlay Formats: Interstitial/Modal, Sticky Banner (Bottom & Top)
- Integrated Formats: Basic Native Ad Structure, Video Ad Container
- …more formats are planned!
Documentation & Guidelines
Our Documentation Website is your guide to using Project AdUI effectively:
- Component demos and usage.
- Customization options.
- Accessibility Guidelines for Ad UIs (WCAG 2.2).
- Best practices for UX-friendly ad integration.
- Performance tips.
Contributing
We welcome contributions! Whether it’s code, documentation, design ideas, or bug reports, your help is valuable. Please see the CONTRIBUTING.md file for details on how to contribute.
Code of Conduct
We are committed to a welcoming and inclusive community. Please read our CODE_OF_CONDUCT.md.
License
This project is licensed under the MIT License.
Questions or suggestions? Open an issue on the GitHub repository.
Project AdUI is maintained by UNBOUND LABEL and the open-source community.