طراحی موبایل

سورج شهپرنیایادداشت مدیر فنی۱۳ خرداد ۱۴۰۵

راهنمای سایز، بی‌صدا نرخِ مرجوعیِ یک فروشگاهِ لباس را پایین می‌آورد. فقط حواست باشد جدول روی موبایل نشکند؛ بگذار افقی اسکرول شود تا هیچ ستونی له نشود. راحتیِ خواندن، خودش یک نوع احترام به مشتری است.

.size-table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

سورج شهپرنیایادداشت مدیر فنی۲۲ اردیبهشت ۱۴۰۵

روی گوشی‌های امروزی، دکمهٔ چسبیده به پایینِ صفحه اغلب زیرِ نوارِ خانه گم می‌شود. کمی فاصلهٔ امن بگذار و ارتفاع را با واحدِ درستِ موبایل بگیر؛ تفاوتِ یک اپِ حرفه‌ای با یک صفحهٔ ساده، در همین چند پیکسل است.

.bar {
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100svh;
}

سورج شهپرنیایادداشت مدیر فنی۱۸ اردیبهشت ۱۴۰۵

عنوانی که روی دسکتاپ عالی است، اغلب روی موبایل غول‌آسا می‌شود یا برعکس. به‌جای نوشتنِ چند اندازهٔ جدا، بگذار متن نرم و پیوسته با صفحه بزرگ و کوچک شود؛ یک خطِ کد جای ده‌ها تنظیمِ دستی را می‌گیرد.

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}