هدر موبایل شیشه‌ای

مسئله تجاری

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

آنچه تحویل دادم

• a2-mobile-header-fix.php نسخه‌ی ۱.۱.۵: هدر موبایل نیمه‌شفاف، نوار ناوبری چسبان پایین و فوتر نهایی، همه در یک MU-plugin.
• فاصله‌ی محتوا که از همان فریم اول درست است، تا صفحه بعد از کامل شدن استایل‌ها و اسکریپت‌ها جابه‌جا نشود.
• رعایت safe-area، تا نوار پایین روی گوشی‌هایی که نشانگر home دارند بالاتر از آن بایستد و زیرش نرود.
• ته‌رنگ فوتر که مستقیم روی wrapperهای داخلی المنتور اعمال می‌شود، تا فوتر با هدر یکی باشد و پس‌زمینه‌ی پیش‌فرض صفحه‌ساز از پشتش نزند بیرون.
• کلاس‌های body که از راه فیلتر body_class اضافه می‌شوند، تا کل استایل‌دهی به یک هوک مستند وصل باشد، نه به حدس‌هایی درباره‌ی مارک‌آپ.

رویکرد فنی

• فاصله در wp_head و به‌عنوان بخشی از رندر اولیه چاپ می‌شود، نه اینکه بعداً حساب شود. هرچه بعد از اولین رنگ‌آمیزی اجرا شود، طبق تعریف یک پرش چیدمان است.
• فوتر سفت به جای خودش قفل شده، چون در غیر این صورت صفحه‌ساز با رسیدن فایل‌های خودش دوباره جابه‌جایش می‌کند.
• هدف گرفتن مستقیم wrapperهای داخلی المنتور — به‌جای غلبه بر آن‌ها با سلکتورهای پهن — بازنویسی را باریک و قابل پیش‌بینی نگه می‌دارد، حتی وقتی صفحه‌ساز آپدیت شود.
• همه‌چیز با کلاس‌های body فقط به موبایل محدود است، پس چیدمان دسکتاپ اصلاً دست نمی‌خورد.

نتیجه و شواهد

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

اهمیت برای کارفرما

برداشت اول روی موبایل در همان ثانیه‌ی اول شکل می‌گیرد. صفحه‌ای که می‌پرد، هرچقدر هم واقعاً سریع باشد، خراب به نظر می‌رسد.