Built project

Sheikh Khalid Al-Dhafiri Archive

An Arabic archive that organizes sermons, lessons, lectures, and publications behind one search and navigation structure.

https://aldhafiri.net/
Sheikh Khalid Al-Dhafiri website home page on desktop
Sheikh Khalid Al-Dhafiri website navigation on mobile
Desktop Mobile screen
Category Content archive
Industry Publishing and education
Project type Responsive Arabic website
Status Maintenance
Public URL Public link available
Visibility Public

Challenge

Project goals

The site contains several media types with different access patterns. The visible challenge is keeping search and taxonomy usable without hiding the main sections.

  • Organize sermons, lessons, lectures, and publications in a clear navigation structure.
  • Keep search available near the top on desktop and mobile.
  • Maintain an Arabic identity appropriate to the material.

UI decisions

Explicit section menu

Section names remain visible rather than relying on icons alone.

Quiet colors for long browsing

The interface uses brown and neutral tones with clear separation between rows.

Tools and stack

Build process

01

Classify the material

Separate content types into direct sections reachable from the home page.

02

Prioritize search

Place search before content lists to shorten the route to known material.

03

Check responsive behavior

Review navigation and sections at 390 pixels alongside desktop.

Key features

Key features

  • Site-wide search
  • Sections for articles, publications, lectures, lessons, and sermons
  • Listening, download, and view actions

Business benefits

  • Direct access to content types from the home page
  • A mobile layout that reorders navigation and content without hiding them

Project images

Sheikh Khalid Al-Dhafiri website home page on desktop
Desktop Archive, search, and content sections on desktop
Sheikh Khalid Al-Dhafiri website navigation on mobile
Mobile screen Navigation, search, and archive sections on mobile

Planning something similar?

Send the idea or current product URL. I will explain what needs review before we define scope and timing.

Send project details