وب‌سایت‌های سازمانی
معین خودرو · برساوش · نامی خودرو · امداد خودرو · خدمات خودرو
- React
- JavaScript
- SCSS
- REST APIs
- Responsive Design
چهار سایت سازمانی که در یک بازه‌ی زمانی برای شرکت‌های خودرویی مرتبط ساخته شدند: معین خودرو، برساوش، نامی خودرو و امداد خودرو. هر کدام برند و محتوای خودش را دارد، اما نیازهای زیربنایی - صفحه‌های معرفی واکنش‌گرا، فهرست خدمات، و فرایندهای تماس و نشانی - آن‌قدر به هم نزدیک بودند که بشود آن‌ها را به اشتراک گذاشت.
چالش
سایت‌های سازمانی واکنش‌گرا برای چهار شرکت خدمات خودرو - الگوهای کامپوننت مشترک، محتوای متکی بر REST API و یک ساختار یکسان در همه‌ی آن‌ها.
چهار سایت تقریباً یکسان یک تله‌ی نگه‌داری است. اولی را سه بار کپی کنید، و هر اصلاحی بعد از آن باید چهار بار انجام شود؛ معمولاً هم به دست کسی که آخر از همه متوجه باگ شده.
کاری که کردم
- چیدمان، ناوبری و الگوهای بلوک محتوای مشترک را به کامپوننت‌های قابل استفاده‌ی مجدد تبدیل کردم، به‌جای اینکه هر سایت را از روی سایت قبلی کپی کنم.
- تفاوت‌های برند را به یک لایه‌ی تم محدود کردم - رنگ، تایپوگرافی و تصاویر - تا اصلاحات ساختاری به همه‌جا برسد.
- از ابتدا واکنش‌گرا ساختم، چون بیشتر ترافیک این سایت‌ها از موبایل است.
ویژگی‌های کلیدی
- چهار سایت سازمانی در production با یک پایه‌ی کامپوننت مشترک.
- تفاوت‌های برند جدا شده در یک لایه‌ی تم.
نتیجه
بهبودهای ساختاری با یک بار اعمال به هر چهار سایت رسیدند؛ و این تمام دلیلی بود که ساختن یک پایه‌ی مشترک را می‌ارزید.
