Web Integration Photoshop → HTML/CSS + SPIP Templates
Media/publishing sites, cross-browser integration and advanced search
Context
At a web agency in Paris, production of pages and templates from Photoshop mockups for different projects, including a media site and a bookstore site for a major publisher. The goal was to deliver clean, cross-browser compatible integrations and add advanced search functionality to the bookstore via the SPIP CMS.
Objectives
- Transform Photoshop mockups into faithful and maintainable HTML/CSS pages
- Ensure cross-browser compatibility and robust integration
- Develop and integrate dynamic templates in SPIP for the bookstore site
- Design a multi-criteria search engine in PHP/SQL for book catalog browsing
Approach
Front-end integration from Photoshop mockups with a focus on clean HTML structure, organized CSS styles and reusable components. Rendering checks and adjustments to ensure cross-browser compatibility. For the bookstore site, creation and adaptation of SPIP templates to industrialize page and content display. Development of a custom search engine: criteria definition, SQL query construction, result display and CMS integration. Team-based work with coordination and regular iterations on deliverables.
Deliverables
- HTML/CSS pages integrated from Photoshop mockups (cross-browser)
- SPIP templates for the bookstore site (pages and components)
- Multi-criteria search engine (PHP/SQL) integrated into the site
- Light documentation and team support for integration/testing
Results achieved
- Integrations delivered faithful to mockups and cross-browser compatible
- SPIP templates facilitating page maintenance and evolution
- Multi-criteria search improving access to the book catalog
- Smoother delivery through collaborative work and rapid iterations
