وب سایت CDS که توسط پل لوئیس خودمان ساخته شد، نشان داد که چگونه می توان یک تجربه وب موبایل عالی برای بازدیدکنندگان کنفرانس ایجاد کرد.
پشت صحنه
قابل توجه نرم بودن سایت در مرورگرهای مختلف تلفن همراه است. از چرخه های طرح و رنگ مرورگر به بهترین شکل ممکن استفاده می کند.
ویژگی های جدید پلت فرم وب استفاده شده است
- کارگر خدمات
- آشکار
- رنگ تم
الگوها
- کارت های خرج کردن
- شبکه پاسخگو
- طراحی متریال
کد منبع
مصاحبه
توسعه
زمانی که پل تصمیم به ساخت این سایت گرفت، اولویت اصلی این بود که از پیشرفت پیشرونده استقبال کند. او به جای طراحی برای دسکتاپ، ابتدا آن را برای نمایشگرهای کوچک ساخت، سپس آن را برای نمایشگرهای بزرگتر ساخت – به‌جای اینکه به‌خوبی به‌خوبی تحقیر شود، به تدریج بهبود می‌یابد. این امر مستلزم یک سری پرسش‌های رسانه‌ای بود، اما همچنین به مقداری آزادی برای تغییرات کوچک بین نقاط شکست نیاز داشت. ردیابی بین اندازه‌های صفحه نمایش به او این حس را می‌دهد که محتوا کجا خراب می‌شود، بنابراین می‌تواند به سرعت آن را برطرف کند.
یکی دیگر از جنبه های مهم PE این است که تا حد امکان با عقب سازگار باشد. پل استفاده از شناورها را بر روی Flexbox انتخاب کرد زیرا احساس می کرد که این کار باعث افزایش تعداد مرورگرهایی می شود که سایت روی آنها کار می کند. برای چیدمان خاص سایت، این مشکلی نداشت. اگر به Flexbox نیاز داشت، از PE برای اضافه کردن آن استفاده می کرد.
یکی از چالش‌های اصلی این سایت، ویژگی بسط و فروپاشی کارت بود که نیاز به فکر کردن به روشی کاملاً جدید برای انجام کار انیمیشن داشت. پل راهبردی را ارائه کرد که او آن را FLIP می نامد، که شامل تنظیم عناصر متحرک در حالت نهایی است. از آنجا، ویژگی‌های سازگار با ترکیب‌کننده مانند تبدیل‌ها و opacity را برای معکوس کردن تغییرات و برگرداندن عنصر به موقعیت شروع خود اعمال می‌کنید. در نهایت، با انجام این کار، ترانزیشن ها را در تبدیل ها و opacity فعال کنید و آن تغییرات را حذف کنید. این باعث می شود که عناصر یک بار دیگر به موقعیت های نهایی خود حرکت کنند! پل اعتراف می کند که کمی غیرمنتظره است، اما فوق العاده خوب کار می کند و عملکرد شما را تقویت می کند.
کارایی
با شناخت پل لوئیس به‌عنوان گوروی اجرا، تعجب نکردم که متوجه شدم قدرت عملکرد یکی از نکات بسیار مهم در ساخت سایت است. او به شدت به WebPageTest متکی بود تا مقدار Speed Index را تا جایی که می توانست پایین بیاورد. بدون تعبیه YouTube، پل موفق شد آن را به کمتر از 1000 در یک اتصال کابلی برساند، که به این معنی بود که اکثر کاربران در کمتر از یک ثانیه رندر اولیه را دریافت می‌کردند.
بیشتر کار برای دستیابی به این هدف در کارهای Grunt انجام شد تا تصاویر را تا حد امکان به هم متصل، کوچک‌سازی و فشرده‌سازی کرد. این سایت همچنین تصاویر غیر ضروری را به پس از بارگذاری صفحه موکول می کند تا محتوای واقعی سریعتر به نمایش درآید.
برای اینکه زمان بارگذاری صفحه حتی بهتر شود، پل یک سرویس دهنده را رها کرد. با استفاده از آن، چه آنلاین باشید چه نباشید، بازدید از صفحه را می توان از حافظه پنهان ارائه کرد، و تضمین می کند که حتی با اتصال ناقص به محتوا دسترسی پیدا می کنید (بسیار مهم در هنگام استفاده از WiFi کنفرانس!). سایت CDS یکی از اولین سایت‌های تولیدی است که از ویژگی جدید استفاده می‌کند، که پل را با یک سری «مشکلات اولیه پذیرش» مواجه کرده بود، اما او به من گفت که افزایش عملکرد فوق‌العاده آن را جبران کرد. در واقع، او اکنون آن را به هر سایتی که می سازد می برد!
البته عملکرد فقط به میزان بارگیری یک سایت نیست، بلکه به نحوه عملکرد آن نیز بستگی دارد. پل می‌دانست که انیمیشن‌ها یک چالش خواهند بود، به همین دلیل او FLIP را ارائه کرد. علاوه بر این، او تمام تلاش خود را کرد تا اطمینان حاصل کند که هیچ چیز مانع ورودی لمسی یا اسکرول نمی شود. علیرغم این واقعیت که سایت خیلی پیچیده نیست، او یک متدولوژی اصلاح شده RAIL را برای ساخت به کار گرفت (او واقعاً به زمان بیکاری زیادی نیاز نداشت) و این به تعداد زیادی کمک کرد!
طرح
از آنجایی که سایت توسط یک شخص ساخته شده بود، به این معنی بود که پل هم طراح و هم توسعه‌دهنده پروژه بود، که منجر به درک بی‌سابقه‌ای در مورد نگرانی‌های یکدیگر در دو «تیم» شد. او دوست دارد دسکتاپ پایین طراحی کند (برعکس بهبود پیشرونده، که در طول توسعه از آن استفاده کرد)، زیرا به او حسی از آنچه باید وارد پروژه شود می دهد. پس از آن، پل به نمای موبایل می‌افتد، که به او اجازه می‌دهد تا چیزها را به طور قابل توجهی اصلاح کند و مطمئن شود که مهم‌ترین چیزها بیشترین توجه را به خود جلب می‌کنند. سپس نسخه دسکتاپ را مطلع می کند، زیرا معماری و اولویت اطلاعات همیشه نیاز به به روز رسانی دارند.
همه آن به آرامی پیش نرفت. دستورالعمل‌های طراحی متریال در آن زمان در مورد چگونگی ایجاد یک سایت محتوا واضح نبود، بنابراین مواردی وجود داشت که او در آن کوتاهی می‌کرد. این طراحی همچنین نتوانست برنامه زمان‌بندی و اطلاعات جلسه را در نظر بگیرد، و در نهایت، UX به این معنی بود که افراد به برنامه زمان‌بندی می‌روند و از اینکه نمی‌توانند مستقیماً به اطلاعات جلسه دسترسی پیدا کنند، ناامید می‌شوند.
همانطور که گفته شد، من فکر می کنم که پل کار فوق العاده ای در انتقال مشخصات طراحی متریال به یک سایت محتوا انجام داد. و من واقعا از تصاویر و حرکت راضی هستم. آن حس طراحی متریال منحصر به فرد را دارد و اطلاعات و ظاهر آن تعامل و سلسله مراتب را تشویق می کند.
موفقیت
- با موفقیت کل سایت را در Github ( > 200 ستاره ) منتشر کرد تا به عنوان دیگ بخار و الهام بخش توسعه دهندگان وب باشد.
- جدیدترین و بهترین پلتفرم وب را شامل می‌شود: کارگر خدمات، مانیفست وب و رنگ‌های تم پویا . اثر خالص چیزی است که در هنگام اجرا در دستگاه‌های اندرویدی واقعاً با پلتفرم یکپارچه به نظر می‌رسد. اگر به صفحه اصلی کاربر اضافه شود، بسیار شبیه برنامه ای است که آنها استفاده می کنند، و این واقعاً عالی است.
- 73.7 هزار بازدید از صفحه، 180 هزار کلیک بر روی بخش‌های فرعی سایت به این معنی است که مردم واقعاً از آن استفاده کرده و با آن درگیر شده‌اند، بسیار بیشتر از حد انتظار.
در مجموع، یک الهام عالی برای توسعه دهندگان وب امروزی و یک وب سایت کنفرانس بسیار موفق است.