ما الذي يجيده Webflow
Webflow أداة تصميم مرئية تكتب لك HTML وCSS، وتجمع في منتج واحد الاستضافة ونظام إدارة المحتوى (CMS) والنماذج. لذلك يناسب المواقع التسويقية وصفحات الحملات ومكتبات المحتوى والكتالوجات الصغيرة. يغيّر المصمم التخطيط دون مبرمج، وينشر المحرر دون أن يمسّ التخطيط.
- مواقع الشركات والتسويق التي تهمّ فيها جودة التصميم وتتغير صفحاتها كثيرًا.
- مواقع المحتوى التي تُدار مقالاتها ومواردها وفعالياتها وملفات أعمالها في مجموعات (Collections).
- صفحات هبوط تريد اختبارها واستبدالها بسرعة.
- فرق بلا مهندسين داخليين تحتاج مع ذلك إلى موقع تتحكم فيه.
أين لا يعود Webflow الأداة المناسبة
Webflow يبني مواقع لا تطبيقات. ليس مكانًا لحسابات مستخدمين ببيانات خاصة، ولا لقواعد عمل معقدة، ولا لقاعدة بيانات تشكّلها بحرية. يمكنك إضافة خدمات خارجية لتسجيل الدخول أو الدفع أو البحث، لكن كل إضافة حل التفافي، والحلول الالتفافية تتراكم.
ونظام المحتوى له حدوده أيضًا. تضع الباقات سقفًا لعدد المجموعات والعناصر والحقول، ويصعب التعامل مع المحتوى شديد الترابط أو التصفية الثقيلة على بيانات كبيرة. راجع حدود باقتك الحالية قبل تصميم نموذج المحتوى. وإذا كنت تبني منتجًا لا موقعًا فانظر في Bubble وFlutterFlow أو تطوير المواقع بالشيفرة المخصصة.
كيف نبني موقع Webflow
تصميم كنظام لا كصفحات متفرقة
نبدأ بصفحة دليل أنماط: سلّم الخطوط والألوان والمسافات والأزرار وحقول النماذج، تُعرَّف مرة واحدة كأنماط ومتغيرات مشتركة وتُعاد عبر المكونات. وتسمية الأصناف (Classes) بنظام ثابت أهم مما يبدو. فبعد ستة أشهر سيحتاج أحدهم إلى تغيير حجم عنوان، والبنية المرتبة تحوّل يوم بحث إلى دقيقة تعديل.
نمذجة المحتوى حول محرريك
يجب أن تطابق المجموعات طريقة تفكير فريقك: مقالات وكتّاب وتصنيفات وموارد. نستخدم حقول الإحالة لربطها بدل إعادة كتابة الأسماء، ونضيف حقولًا صريحة لعنوان SEO والوصف وصورة المشاركة. ونتجنب مجموعة ضخمة واحدة تحمل كل شيء. نرسم النموذج مع محرريك أولًا، لأنهم يعرفون أي الحقول سيملؤونها فعلًا.
تفاعلات بقدر
تضيف تفاعلات Webflow حركة عند التمرير والتحويم دون شيفرة. نقصرها على حركات وتلاشٍ تساعد القارئ على تتبّع الصفحة، ونجربها على هواتف متوسطة المواصفات، ونتأكد أن الزائر الذي يطلب جهازه تقليل الحركة لا يُجبَر على مشاهدتها. وإن لم يوفر المصمم إعدادًا لذلك فقطعة صغيرة من الشيفرة المخصصة تكفي.
تحسين محركات البحث والاستضافة والنماذج
يوفر Webflow الضوابط المهمة للبحث: عناوين الصفحات وأوصافها وحقول Open Graph والتحويلات وخريطة موقع مولّدة والنص البديل ومكانًا للبيانات المنظمة في الشيفرة المخصصة. لكن الضوابط لا تغني عن البنية. عنوان رئيسي واحد في كل صفحة، وعناوين فرعية مرتبة، ونصوص روابط وصفية، وصور خفيفة، كلها تفعل أكثر من أي إعداد. وتنطبق القواعد نفسها على مواقعنا المبنية بالشيفرة المخصصة.
تتولى Webflow الاستضافة على بنيتها التحتية مع شبكة توصيل محتوى. فلا ترقّع خوادم، لكنك لا تستطيع تثبيت برمجيات خادم خاصة بك ولا اختيار مكان التشغيل. وهذه مقايضة جيدة لمعظم المواقع التسويقية. قارنها بأي متطلب لمكان تخزين البيانات قبل أن تلتزم.
النماذج مدمجة: تُحفظ الإرسالات في المشروع، وتصل الإشعارات إلى البريد، ويمكن لـ webhooks أو أداة أتمتة مثل Zapier تمرير الإدخالات إلى نظام إدارة العملاء. حدّد مبكرًا من يستلم كل نموذج، ومن يحق له قراءة الإرسالات المحفوظة، وكيف يُتعامل مع الرسائل المزعجة، لأن النماذج كثيرًا ما تحمل بيانات شخصية.
المواقع ثنائية اللغة ومن اليمين إلى اليسار
موقع بالعربية والإنجليزية ممكن في Webflow، لكنه يحتاج تخطيطًا قبل بدء التصميم. يوفر Webflow ميزات توطين لإدارة موقع واحد بعدة لغات، وما زال النهج الأقدم، نسخة منفصلة من الموقع أو مجموعات منفصلة لكل لغة، صالحًا. والاختيار يعتمد على مقدار الاختلاف بين اللغتين. ولا تفترض أن التخطيط ينعكس من تلقاء نفسه: الاتجاه من اليمين إلى اليسار عمل تصميم واختبار في معظمه.
- اضبط لغة الصفحة واتجاهها في كل صفحة عربية، وافحص النتيجة المنشورة لا شاشة المصمم فقط.
- اقلب التخطيطات عن قصد: ترتيب الأعمدة والمحاذاة والأسهم وأشرطة التقدم والعروض المتحركة. وحيث ينقص المصمم إعداد، تسدّ شيفرة CSS صغيرة الفجوة غالبًا.
- اختر خطًا عربيًا بأوزان كافية، وأعطِ الأسطر ارتفاعًا أكبر مما يحتاجه النص اللاتيني.
- اختبر النماذج ورسائل التحقق والتواريخ والأرقام بالعربية.
- خطط للروابط المختصرة (slugs) وتبديل اللغة وروابط اللغات البديلة لكل صفحة، لا للصفحة الرئيسية فقط.
ميزات المنصات تتغير. قبل أن تلتزم، ابنِ صفحة تجريبية عربية فيها نموذج وقائمة من نظام المحتوى وعنوان طويل، وتأكد مما تفعله النسخة الحالية. ويتناول دليل المنتجات ثنائية اللغة وتصميم الواجهات العربية جانب التصميم.
تسليم الموقع إلى فريقك
ينتهي الموقع حين يستطيع فريقك تشغيله دوننا. والتسليم يعني دليلًا مكتوبًا قصيرًا للمحررين، وجلسة تدريب على محتوى حقيقي، وخريطة بالمجموعات والحقول مع اسم من يحرر كل منها. ويجب أن تملك أنت مساحة العمل والنطاق وكل حساب مرتبط، لا نحن.
ونترك كذلك قائمة بالتكاملات كالتحليلات والنماذج والأتمتة، ومن يملك كل حساب، وكيف تنشر تغييرًا وتعاينه وتتراجع عنه. الموقع الذي يخشى فريقك تحريره موقع يتقادم.
الأمان في موقع Webflow
للموقع التسويقي مخاطر حقيقية أيضًا، وهي في أماكن قليلة متوقعة.
- السكربتات الخارجية. أدوات التحليل وأدوات الدردشة ومديرو الوسوم تعمل بوصول كامل إلى صفحاتك وإلى ما يكتبه الزوار. احتفظ بقائمة، وأزل ما لا تستخدمه، وقيّد من يحق له إضافة سكربت.
- النماذج. اجمع ما تحتاجه فقط، وقيّد من يقرأ الإرسالات، ولا تطلب من الزوار إرسال أسرار أو مستندات عبر نموذج عادي.
- أدوار الوصول. افصل دور المصمم عن دور المحرر، وامنح أقل وصول يكفي، واحذف حسابات الموظفين السابقين والوكالات، وفعّل المصادقة متعددة العوامل لكل من يستطيع النشر.
- الشيفرة المخصصة. عامل المقاطع الملصوقة كشيفرة. اقرأها، وفضّل مصادر تستطيع تسميتها.
- النطاق وخوادم الأسماء. احمِ حساب مسجّل النطاق بقدر ما تحمي الموقع، فمن يتحكم في DNS يتحكم في الموقع.
تحقق من ترويسات الاستجابة التي تستطيع التحكم بها. وإن كانت سياسة أمان المحتوى مهمة لموقعك فتأكد أن المنصة تتيحها قبل أن تلتزم. نجري مراجعة أمنية قبل الإطلاق ونسلّمك قائمة إصلاحات مرتبة بالأولوية، كما في أي مشروع. ونهجنا موضح في كيف نتعامل مع الأمان.
متى تنتقل إلى الشيفرة المخصصة
Webflow نسخة أولى جيدة لمواقع كثيرة، وبعض المواقع لا ينبغي أن تغادره أبدًا. ابحث عن هذه الإشارات قبل أن تنتقل.
- تحتاج مناطق بتسجيل دخول وبيانات لكل مستخدم وقواعد تتغير بحسب من يطلب.
- تتجاوز علاقات المحتوى أو حجمه ما تتحمله المجموعات.
- تتجاوز متطلبات الأداء أو الإتاحة ما تسمح به الشيفرة المولّدة.
- تصبح الشيفرة المخصصة في الموقع أكبر من البناء المرئي.
- تحتاج التكاملات إلى منطق على الخادم وإلى أسرار.
والانتقال أسهل بكثير حين يكون مخططًا له. احتفظ بالمحتوى في مجموعات منظمة بأسماء حقول واضحة، وصدّره بجدول منتظم، وأبقِ الروابط ثابتة، واكتب خريطة تحويلات. عندها تستطيع واجهة مخصصة مبنية بـ Next.js قراءة المحتوى نفسه من نظام إدارة محتوى منفصل. ويتناول مقالنا متى تكون الحلول بدون كود أذكى نسخة أولى القرار بصورة أوسع.