عرض موقع CDS، الذي أنشأه بول لويس داخليًا، كيفية إنشاء تجربة ويب رائعة عبر الويب على الأجهزة الجوّالة لزوّار المؤتمرات.
لقطات من وراء الكواليس
والجدير بالملاحظة هو سلاسة تشغيل الموقع في متصفحات الجوال المختلفة. وهو يستفيد من التنسيق ودورات الرسم الخاصة بالمتصفّح بأفضل طريقة ممكنة.
تم استخدام ميزات جديدة للنظام الأساسي للويب
- مشغّل الخدمات
- البيان
- لون المظهر
الأنماط
- نفقات البطاقات
- شبكة سريعة الاستجابة
- التصميم المتعدد الأبعاد
رمز المصدر
المقابلة
تطوير
عندما شرع "بول" في تصميم الموقع الإلكتروني، كانت الأولويات الرئيسية تبنّي التحسين التدريجي. فبدلاً من تصميمه لأجهزة الكمبيوتر المكتبية، قام ببنائه للشاشات الصغيرة أولاً، ثم يبني على الشاشات الأكبر حجمًا - مع تحسينه تدريجيًا بدلاً من التقليل منه إلى حد كبير. تطلب ذلك مجموعة من الاستعلامات عن الوسائط، ولكنه يتطلب أيضًا قدرًا عادلاً من الحرية في الاطلاع على تغييرات صغيرة بين نقاط التوقف الرئيسية. إن التتبع ذهابًا وإيابًا بين أحجام الشاشات أعطاه فكرة عن المكان الذي يمكن أن ينكسر فيه المحتوى، حتى يتمكن من إصلاحه بسرعة.
هناك جانب آخر مهم من جوانب المنتج، وهو التوافق مع الأنظمة القديمة قدر الإمكان. اختار بول استخدام أرقام عائمة فوق Flexbox لأنه شعر أن ذلك سيزيد من عدد المتصفحات التي سيعمل عليها الموقع. بالنسبة للتخطيط المحدد للموقع، تبين أن هذا لا يمثل مشكلة على الإطلاق. وإذا كان بحاجة إلى Flexbox، لكان كان قد استخدم خبير منتجات لإضافتها.
كان التحدي الرئيسي للموقع هو ميزة توسيع وتصغير البطاقة، والتي تتطلب التفكير في طريقة جديدة تمامًا لتنفيذ الرسوم المتحركة. ابتكر "بول" استراتيجية يسمّاها FLIP، وتشمل ضبط العناصر المتحرّكة في حالتها النهائية. من هناك، يمكنك تطبيق خصائص صديقة للمكوّن مثل التحويلات والتعتيم لعكس التغييرات وإعادة العنصر إلى موضع البداية. وأخيرًا، بهذه الطريقة، قم بتمكين الانتقالات عند التحويل والتعتيم، وإزالة تلك التغييرات. يؤدي هذا إلى انتقال العناصر إلى مواضعها النهائية مرة أخرى! يعترف بول بأن ذلك غير متوقع بعض الشيء، لكنه يعمل بشكل جيد للغاية ويعزز الأداء.
عروض أداء
مع العلم ببول لويس بصفته خبير الأداء، لم تفاجأ عندما اكتشفت أن تعزيز القوة كان أحد الاعتبارات المهمة للغاية عند إنشاء الموقع. وقد اعتمد بشدة على WebPageTest للحصول على قيمة مؤشر السرعة قدر الإمكان. وبدون تضمين YouTube، تمكّن "بول" من أقل من 1,000 مرة عند الاتصال بالكابل، ما يعني أنّ معظم المستخدمين سيحصلون على عرض أولي خلال أقل من ثانية.
تم تنفيذ معظم العمل لتحقيق ذلك في مهام Grunt لتسلسل الصور وتصغيرها وضغطها قدر الإمكان. يؤجّل الموقع الإلكتروني أيضًا الصور غير الأساسية إلى ما بعد تحميل الصفحة، بحيث يتم عرض المحتوى الفعلي على الشاشة بسرعة أكبر.
لتحسين وقت تحميل الصفحة، لجأ "بول" إلى عامل خدمة. وسواء كنت متصلاً بالإنترنت أم لا، يمكن عرض زيارة صفحة من ذاكرة التخزين المؤقت لضمان وصولك إلى المحتوى حتى عند استخدام اتصال متقطع (وهو أمر مهم للغاية عند استخدام شبكة WiFi في المؤتمرات). موقع CDS هو أحد أوائل مواقع الإنتاج التي تستخدم الميزة الجديدة، والتي واجه فيها "بول" مجموعة من "مشاكل المستخدمين الأوائل"، ولكن تعزيز الأداء الكبير قال لي إنّه تعويض ذلك. في الواقع، إنه ينتقل الآن إلى كل موقع يقوم بإنشائه!
لا يقتصر الأداء بالطبع على مدى جودة تحميل الموقع، بل أيضًا مدى جودة عمله. أدرك "بول" أنّ الصور المتحركة ستكون تحديًا، ولهذا السبب اخترع FLIP. إلى جانب ذلك، بذل جهدًا كبيرًا لضمان عدم عرقلة أي شيء يعيق الإدخال باللمس أو التمرير. وعلى الرغم من أنّ الموقع ليس معقدًا للغاية، إلا أنّه اعتمد منهجية RAIL معدّلة للتصميم (لم يكن يحتاج إلى الكثير من الوقت الخمول)، وقد ساعد ذلك كثيرًا.
التصميم
وحيث إن الموقع تم تزييفه من قِبل شخص واحد، فإن هذا يعني أن "بول" هو المصمم والمطور في المشروع معًا، مما أدى إلى مستويات غير مسبوقة من الفهم بشأن مخاوف كل منكما في "الفريقين". إنه يحب تصميم سطح المكتب لأسفل (على عكس التحسين التدريجي، الذي استخدمه أثناء التطوير)، لأنه يمنحه فكرة عما ينبغي القيام به في المشروع. بعد ذلك، ينزل "بول" لاستخدام طريقة عرض الهاتف المحمول، مما يسمح له بتحسين الأمور بشكل ملحوظ، والتأكد من أن أهم الأشياء هي الحصول على أكبر قدر من الاهتمام. بعد ذلك يتم إعلام إصدار سطح المكتب، لأنه لا يمكن تغيير بنية المعلومات والأولوية.
لم يسير كل ذلك بسلاسة. لم تكن إرشادات التصميم المتعدد الأبعاد في ذلك الوقت واضحة بشأن كيفية إنشاء موقع إلكتروني للمحتوى، لذلك كانت هناك مجالات لم يفتقر فيها إلى قدرته. فشل التصميم أيضًا في حساب معلومات الجدول الزمني والجلسة المرتبطة، وفي النهاية، تعني تجربة المستخدم أن الأشخاص سيذهبون إلى الجدول الزمني ويشعرون بالإحباط من عدم قدرتهم على الوصول مباشرة إلى معلومات الجلسة.
ومع ذلك، أعتقد أن "بول" قد بذل مجهودًا هائلاً في نقل مواصفات التصميم المتعدد الأبعاد إلى موقع على شبكة المحتوى، وأنا سعيد جدًا بالمرئيات والحركة. يتمتع بشعور تصميم Material Design الفريد، والمعلومات والمظهر تشجع على التفاعل والتسلسل الهرمي.
تم الإجراء بنجاح
- تم إطلاق الموقع الإلكتروني بأكمله بنجاح على GitHub (> 200 نجمة) ليكون نموذجيًا وملهمًا لمطوّري البرامج على الويب.
- تم دمج أحدث وأكبر نظام أساسي للويب: مشغّل الخدمات وبيان الويب وألوان المظاهر الديناميكية. التأثير الناتج هو شيء يبدو يندمج حقًا مع النظام الأساسي عند تشغيله على أجهزة Android. إذا تمت إضافتها إلى الشاشة الرئيسية للمستخدم، فإنها تشبه إلى حد كبير تطبيق يستخدمه، وهذا رائع حقًا.
- ~73.7k مشاهدة للصفحة تقريبًا، و~73.7k نقرة تؤدي إلى الأقسام الفرعية للموقع تعني أن الأشخاص استخدموها فعلاً وتفاعلوا معها، وذلك أكثر بكثير من المتوقع.
بشكل عام، كان ذلك بمثابة مصدر إلهام كبير لمطوري الويب اليوم وموقع إلكتروني ناجح جدًا للمؤتمرات.