مطالعه موردی مهندسی
هدر موبایل شیشهای
هدر موبایل اولین چیزی است که رندر میشود و راحتترین چیزی است که خراب شود. هدر چسبانی که ارتفاعش بعد از اولین رنگآمیزی اعمال شود کل صفحه را یک لحظه بعد پایین میراند، و این همان جابهجایی چیدمانی است که مشتریها حسش میکنند حتی اگر نتوانند اسمش را بگویند.
مسئله تجاری
یک هدر چسبان نیمهشفاف نیاز دارد محتوای زیرش دقیقاً به اندازهی ارتفاعش آفست شود. اگر این آفست بعد از بارگذاری در جاوااسکریپت محاسبه شود، فریم اول در موقعیت اشتباه رندر میشود و همهچیز میپرد. علاوه بر این، فروشگاه روی المنتور اجرا میشود که فوتر را در کانتینرهای خودش میپیچد، پس استایلدادن فوتر برای هماهنگی با هدر یعنی هدفگرفتن مارکآپی که صفحهساز تولید میکند نه مارکآپی که من کنترلش میکنم.
آنچه تحویل دادم
- a2-mobile-header-fix.php نسخهی ۱.۱.۵: یک هدر موبایل نیمهشفاف، یک نوار ناوبری چسبان پایین و یک فوتر نهایی، بهصورت یک افزونهی MU واحد.
- یک آفست محتوا که در فریم اول پایدار است، تا صفحه بعد از تمامشدن بارگذاری استایلها و اسکریپتها جابهجا نشود.
- مدیریت safe-area، تا نوار ناوبری پایین روی گوشیهایی که نشانگر home دارند از زیرش رد نشود.
- رنگآمیزی فوتر که wrapperهای داخلی المنتور را هدف میگیرد، تا فوتر با هدر هماهنگ باشد نه اینکه پسزمینهی پیشفرض صفحهساز از پشتش دیده شود.
- کلاسهای body که از طریق فیلتر body_class اضافه میشوند، تا کل استایلدهی به یک هوک مستند آویزان باشد نه به فرضهایی دربارهی مارکآپ.
رویکرد فنی
- آفست در wp_head بهعنوان بخشی از رندر اولیه منتشر میشود نه اینکه بعدش محاسبه شود. هرچه بعد از اولین رنگآمیزی اجرا شود طبق تعریف یک جابهجایی چیدمان است.
- فوتر به موقعیتش قفل سخت شده چون یک صفحهساز در غیر این صورت با رسیدن اسِتهای خودش دوباره جاریاش میکند.
- هدفگرفتن wrapperهای داخلی المنتور بهجای جنگیدن با آنها با سلکتورهای وسیعتر، بازنویسی را باریک و قابلپیشبینی نگه میدارد وقتی صفحهساز آپدیت میشود.
- همهچیز از طریق کلاسهای body به موبایل محدود شده، پس چیدمان دسکتاپ از هیچکدام از اینها دست نمیخورد.
نتیجه و شواهد
هدر، ناوبری پایین و فوتر در فریم اول در موقعیت نهاییشان رندر میشوند. نتیجهی قابلدیدن این است که صفحه دیگر حین بارگذاری زیر پای مشتری تکان نمیخورد، که روی یک کاتالوگ موبایل بیشترِ کیفیت ادراکشده همین است.
اهمیت برای کارفرما
اولین برداشت روی موبایل در ثانیهی اول تصمیمگیری میشود، و صفحهای که میپرد بدون توجه به سرعت واقعیاش خراب خوانده میشود.
خلاصه اجرایی خوانا
خلاصه_اجرایی {
پروژه: "Liquid Glass Mobile Header"
فایل: "mu-plugins/a2-mobile-header-fix.php (v1.1.5)"
اجزا: "هدر نیمهشفاف + ناوبری چسبان پایین + فوتر"
اصلاح_کلیدی: "آفست محتوا در wp_head منتشر میشود،
در فریم اول پایدار؛ بدون محاسبهی پس از بارگذاری"
safe_area: "ناوبری پایین از نشانگر home فاصله میگیرد"
صفحهساز: "رنگ فوتر wrapperهای داخلی المنتور را هدف میگیرد"
محدوده: "فلگهای body_class؛ دسکتاپ دستنخورده"
}ارزش حرفهای این پروژه
آفست فریم اول همان چیزی است که به آن اشاره میکنم. این تفاوت بین هدری است که در یک اسکرینشات درست به نظر میرسد و هدری که روی یک دستگاه واقعی روی یک اتصال کند درست رفتار میکند.
کارکردن با مارکآپ تولیدی المنتور بهجای علیهش، همان چیزی است که این را قابل نگهداری نگه میدارد. بازنویسیهای وسیع امروز برنده میشوند و در ریلیز بعدی صفحهساز میشکنند.