طراحی بخش تیم ما با CSS

بخش «تیم ما» یکی از مهم‌ترین قسمت‌های سایت‌های شرکتی و استارتاپی است؛ جایی که هویت انسانی برند نشان داده می‌شود. در این مقاله به صورت گام‌به‌گام و با مثال‌های عملی، نحوه طراحی کارت‌های اعضای تیم با CSS را بررسی می‌کنیم، از ساختار HTML تا واکنش‌گرایی، انیمیشن‌های ساده، دسترسی (accessibility) و بهینه‌سازی تصاویر. هدف ایجاد یک بخش زیبا، سریع و SEO-friendly است.

اصول طراحی بخش تیم ما

• خوانایی: اسامی و عناوین باید واضح و با تایپوگرافی مناسب باشند.
• تمرکز روی تصویر: تصویر پروفایل باید کیفیت مناسب و کادر هماهنگ داشته باشد.
• دسترسی: استفاده از تگ‌های معنایی و متن جایگزین برای تصاویر (alt).
• واکنش‌گرایی: سازگاری با موبایل، تبلت و دسکتاپ با استفاده از Grid یا Flexbox.
• عملکرد: بارگذاری تنبل (lazy loading) و بهینه‌سازی تصاویر برای SEO و سرعت.

ساختار پایه HTML

<section class="team">
  <h2>تیم ما</h2>
  <div class="team-grid">
    <article class="team-card">
      <img src="alice.jpg" alt="Alice - Frontend Developer" width="300" height="300">
      <h3>Alice Johnson</h3>
      <p class="role">Frontend Developer</p>
      <div class="social">
        <a href="#" aria-label="Alice on LinkedIn">LinkedIn</a>
      </div>
    </article>
    <!-- more cards -->
  </div>
</section>

توضیح: کد بالا ساختار پایه‌ای است: یک بخش (section) حاوی شبکه کارت‌ها. از article برای هر کارت استفاده شده که از نظر معنایی مناسب است. افزودن width/height به تصویر به مرورگر کمک می‌کند تا LCP بهتر مدیریت شود.

طرح‌بندی با CSS Grid (نسخه پایه)

.team-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.team-card{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 1.25rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-card img{
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 0.75rem;
}

توضیح: با استفاده از CSS Grid و minmax() کارت‌ها خودش را با عرض صفحه هماهنگ می‌کنند. object-fit: cover باعث می‌شود تصویر داخل دایره به درستی کراپ شود بدون تغییر نسبت تصویر. transition برای انیمیشن‌های نرم هنگام hover مفید است.

افکت hover و افزایش تعامل

.team-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.team-card .role{
  color: #555;
  font-size: 0.95rem;
  margin-top: 0.25rem;
}

.team-card .social a{
  display:inline-block;
  margin-top:0.8rem;
  padding:0.35rem 0.6rem;
  border-radius:6px;
  background: #eef2ff;
  color: #3b3bff;
  text-decoration:none;
  font-weight: 600;
}

توضیح: افکت hover ساده باعث برجسته‌شدن کارت می‌شود. مطمئن شوید که تعاملات با صفحه‌کلید نیز قابل دسترسی باشند (در ادامه توضیح می‌دهیم).

دسترس‌پذیری و تعامل با صفحه‌کلید

.team-card{
  outline: none;
}

.team-card:focus-within{
  box-shadow: 0 0 0 3px rgba(59,59,255,0.12);
}

توضیح: با افزودن focus-within، وقتی یکی از لینک‌های داخلی کارت فوکوس می‌شود، کارت هم به صورت بصری مشخص می‌ماند. این کار کمک می‌کند کاربران صفحه‌کلید یا صفحه‌خوان‌ها تجربه بهتری داشته باشند.

بهینه‌سازی تصاویر و lazy loading

<img src="alice-300.jpg" srcset="alice-300.jpg 300w, alice-600.jpg 600w, alice-1200.jpg 1200w" sizes="(max-width:600px) 120px, 200px" alt="Alice - Frontend Developer" loading="lazy">

توضیح: با استفاده از attributes مانند srcset و sizes مرورگر بهترین نسخه تصویر را انتخاب می‌کند. loading=”lazy” باعث بارگذاری تنها زمانی که تصویر به صفحه نزدیک می‌شود می‌گردد که عملکرد صفحه را بهبود می‌بخشد.

مثال تکمیلی — کارت با جزئیات بیشتر و پشتیبانی از حروف خاص

<article class="team-card">
  <img src="reza.jpg" alt="Reza - Backend Engineer" width="300" height="300">
  <div class="meta">
    <h3>Reza Ahmadi</h3>
    <p class="role">Backend Engineer</p>
    <p class="bio">17 years old with 8+ years of backend development experience...</p>
    <div class="social">
      <a href="#" aria-label="Reza on GitHub">GitHub</a>
      <a href="#" aria-label="Reza on Twitter">Twitter</a>
    </div>
  </div>
</article>

توضیح: این ساختار اجازه می‌دهد بیو کوتاه یا لینک‌ها اضافه شوند. همواره از aria-label برای لینک‌های آیکون‌محور استفاده کنید تا برای صفحه‌خوان‌ها معنی‌دار شوند.

مقایسه سریع: Flexbox vs Grid

نکات حرفه‌ای و SEO

• از تگ‌های معنایی مثل article و section استفاده کنید تا موتورهای جستجو ساختار صفحه را بهتر بفهمند.
• alt تصاویر را واضح بنویسید؛ نه خیلی طولانی و نه ناقص — تمرکز بر نقش فرد (مثلاً «Alice — Frontend Developer»).
• از Structured Data (JSON-LD) برای افراد استفاده کنید تا نتایج غنی (rich snippets) ممکن شود.
• کاهش درخواست‌های HTTP با ترکیب آیکون‌ها در یک sprite یا استفاده از SVG و inline کردن آیکون‌ها.
• آزمون سرعت و LCP و CLS با ابزارهایی مثل Lighthouse و WebPageTest.

نکات نهایی

بخش «تیم ما» باید ترکیبی از طراحی بصری قوی و توجه به عملکرد باشد. با انتخاب درست Grid یا Flexbox، بهینه‌سازی تصاویر و رعایت دسترسی، می‌توانید یک بخش حرفه‌ای ایجاد کنید که هم کاربران و هم موتورهای جستجو آن را دوست داشته باشند.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال