كيفية تصميم الموقع صفحة واحدة مثالية
يمكن أن تكون تصميمات الصفحة الواحدة تقنية ممتازة لمعالجة مواقع الويب الأصغر ، حتى تلك التي قد لا تعتقد أنها يمكن أن تتم بدون صفحات متعددة. هناك الكثير من الأسباب العظيمة لاستخدام موقع صفحة واحدة ، من سهولة الصيانة إلى تقليل احتياجات النطاق الترددي.
إذا كنت تعالج موقعًا أقصرًا ، وهو موقع يحتوي عادةً على عدد قليل من الصفحات ، ففكر في استخدام صفحة واحدة ، واعرف ما إذا كان ذلك سيجعل المشروع أسهل وأكثر ملاءمة للمستخدمين. تابع القراءة للحصول على مزيد من المعلومات حول المزايا ، ومتى (ومتى لا) لاستخدامها ، وبعض أفضل الممارسات التي يجب عليك اتباعها.
فوائد تصميم صفحة واحدة
من الواضح أن تصميمات الصفحة الواحدة ليست مثالية لكل مشروع. ولكن هناك مجموعة من الأسباب لاستخدامها إذا كانت ملائمة.
انهم بديهية للاستخدام
بشكل افتراضي ، يحتاج كل مستخدم إلى معرفة كيفية التنقل في موقع صفحة واحدة وهو التمرير. يمكنك تضمين أسهم أو أدلة تنقل أخرى ، ولكن مع استثناء نادر ، فإن التمرير ببساطة سيجلب زوارك من قسم إلى آخر.
لن تقلق أبدًا بشأن تعطل زوارك في طبقات متعددة من التنقل ، والبحث عن ما يحتاجون إليه بلا نهاية. غالبًا ما يكون استخدام رأس أو روابط تنقل أخرى مفيدة إذا كانت هناك أقسام متعددة على الصفحة ، ولكن حتى بدونها ، يكون الموقع قابلاً للاستخدام.
يمكن أن يكون أسرع وأسهل في الصيانة
وعلى الرغم من أن هذا الموقع ليس معطىًا ، فمن المحتمل أن يكون موقع الصفحة الواحدة الذي يتم ترميزه بشكل جيد أسرع من الشفرة أكثر من موقع متعدد الصفحات. قد تستغرق عملية التصميم أحيانًا وقتًا أقل ، رغم أن ذلك يعتمد على مدى تعقيد الصفحة الواحدة.
يمكن لموقع صفحة واحدة أيضًا فرض بعض قيود التصميم التي تسرع العملية بمجرد وضع التصميم الأساسي في الاعتبار. موريسو أكثر من موقع متعدد الصفحات ، يجب أن يكون لموقع صفحة واحدة أقسام تعمل بسلاسة معًا. يمكن لهذا النوع من القيود أن يسرع تطوير الصفحة بمجرد أن تحدد بوضوح ما يمكنك وما لا تستطيع القيام به.
يمكن أن تكون الصيانة أسهل أيضًا. عندما يكون لديك صفحة واحدة فقط للتعامل معها ، تكون الصيانة أكثر انسيابية ، طالما أن شفرتك مكتوبة بشكل جيد للبدء بها.
أنت مضطر للتبسيط
هذا واحد يبني من النقطة السابقة. عندما يكون لديك صفحة واحدة فقط للعمل بها ، يجب عليك تبسيط الأمور إلى المكونات الأساسية الخاصة بها. لا مزيد من الصفحات وصفحات الدعاية التسويقية عديمة الفائدة. يجب أن تصل إلى النقطة على الفور.
تحسين محسنات محركات البحث
تمثل الروابط الداخلية عالية الجودة جزءًا كبيرًا من أداء موقع الويب في محركات البحث. على الرغم من أن محركات البحث ليست بالضرورة مصدر الزيارات الأكبر لعدد كبير من المواقع ، إلا أنها لا تزال مهمة بشكل عام.
عن طريق وجود صفحة واحدة فقط ، يكون لديك صفحة واحدة فقط مرتبطة بها. يمكن أن يزيد من أهمية الموقع بقدر ما تذهب محركات البحث.
رواية القصص يمكن أن تزيد من العمل
غالبًا ما تستخدم مواقع الصفحات الواحدة زاوية رواية القصص التي لا تكون مواقع متعددة الصفحات فيها جيدة. يمكن أن يؤدي ذلك إلى زيادة التحويلات وإلهام الزائرين لاتخاذ إجراء.
يتم استخدام الأشخاص لاتباع القصص ، سواء عبر الإنترنت أو خارجها ، لذلك يتمتع هذا المستخدم بفوائد واضحة على تجربة المستخدم. لقد قرأنا وسمعنا قصصًا منذ كنا أطفالًا ، لذا فهو شيء يأتي بشكل طبيعي إلينا.
أسهل لتنظيم
لا توجد قوائم لا نهاية لها من الصفحات والصفحات الفرعية للتنظيم. لا مزيد من التساؤل عما إذا كان يجب أن تكون هذه الصفحة أو تلك الصفحة أحد الوالدين أو الأطفال. لا مزيد من قوائم الملاحة الضخمة والقوائم الفرعية. كل شيء على صفحة واحدة. وإذا قررت تضمين روابط تنقل ، أو ببساطة السماح للمستخدمين بالتمرير ، فالأمر متروك لك وما إذا كنت تعتقد أنه سيضيف إلى تجربة المستخدم أم لا. هذا ليس مجرد خيار عندما يكون لموقع صفحات متعددة.
انخفاض عرض النطاق الترددي
على الرغم من أن هذه المشكلة ليست مشكلة كبيرة في نهاية الاستضافة ، فكّر في عدد المستخدمين الذين يدخلون إلى موقعك باستخدام أجهزة الجوّال هذه الأيام. إن تقليل كمية النطاق الترددي التي يتلقاها موقعك محل تقدير من قبل المستخدمين ذوي خطط البيانات المحدودة.
القضاء على مواقع المحمول
بالطبع ، لا يقتصر التصميم السريع الاستجابة على مواقع الصفحات الفردية. ولكن كلما كان الموقع أكثر تعقيدًا ، زادت صعوبة جعله يعمل بشكل جيد على شاشة أصغر ، حتى مع تصميم متجاوب. موقع الصفحة الواحدة هو ، بالضرورة ، غير معقد. جعل تصميم استجابة هو أسهل عموما. كما أن التنقل المبسط والتغييرات المشابهة تجعل التصميم الذي يعمل بشكل جيد على الشاشات الصغيرة أكثر سهولة.
إلى المنظر أو عدم الاختلاف؟
اعتمادًا على وجهة نظرك ، فإن التمرير في المنظر هو أفضل شيء يحدث على الإنترنت ، أو آفة مفرطة الاستخدام ، ومدهشة على متصفحاتنا. لكن بغض النظر عن المكان الذي تقف فيه ، لا يبدو أنه سيختفي في أي وقت قريب.
شخصياً ، أشعر أن هناك وقت ومكاناً للتمرير في المنظر. يمكن لبعض المواقع ذات الصفحات الواحدة أن تستفيد فعلاً من هذا التأثير ، في حين أن البعض الآخر يصادف أنه غريب أو أسوأ: يصعب استخدامه. المفتاح هو أن تقرر ما إذا كان تأثير تمرير المنظر الذي تريد استخدامه هو شيء من شأنه أن يعزز إمكانية استخدام الموقع ، أو إذا كنت تريد استخدامه فقط لأنه سيبدو باردا.
شيء آخر يجب مراعاته إذا قررت أنك تريد استخدام التمرير الخاص بالعرض هو استخدام جافا سكريبت أو تقنية CSS بسيطة للقيام بذلك. راجع قسم الموارد لمعرفة المزيد حول كلا الخيارين.
متى تستخدم موقع صفحة واحدة ، ومتى لا
في حين أن هناك الكثير من الفوائد لمواقع الصفحات الفردية ، إلا أنها ليست مثالية ، حل واحد يناسب الجميع. هناك الكثير من المرات التي لا يجب عليك فيها استخدام تصميم صفحة واحدة ، في حين أن هناك الكثير من الأوقات الأخرى التي يكون فيها موقع صفحة واحد أكثر منطقية من صفحة متعددة الصفحات.
إذا كنت تقوم بإعداد موقع يحتوي على عدد قليل من الصفحات على أي حال ، فقد يكون موقع صفحة واحدة مثاليًا. من شأن تكثيف كل شيء في صفحة واحدة أن يمنح الموقع ككل نظرة أكثر حداثة ، وإذا كان الضوء على المحتوى على أية حال ، فإن موقع صفحة واحدة يمكن أن يجعل الأمر يبدو وكأنه يحتوي على المزيد من الجوهر.
مثال آخر شائع على الموقع المكون من صفحة واحدة هو موقع ما قبل الإطلاق. هذه ، في أكثر الأحيان ، صفحة واحدة ، وغالبا مع شكل لتسجيل الاشتراك في النشرة الإخبارية. في معظم الحالات ، يمكن بسهولة تنظيم المعلومات المقدمة للجمهور خلال مرحلة ما قبل الإطلاق على صفحة واحدة ، لذلك من المنطقي اعتبار هذا النمط أولاً عند تصميم هذه الصفحات.
مواقع التجارة الإلكترونية أحادية المنتج هي مكان آخر يمكن أن تكون فيه مواقع الصفحات الواحدة رائعة. إذا كنت تبيع منتجًا واحدًا فقط ، سواء كان ذلك منتجًا ماديًا أو منتجًا رقميًا ، فلماذا تهتم بالصفحات المتعددة؟ يمكن أن يكون الموقع البسيط للصفحة الواحدة أداة مبيعات أفضل بكثير.
قد تعتقد أن موقع التجارة الإلكترونية الأكثر تعقيدًا ليس مناسبًا جيدًا لموقع صفحة واحدة ، ولكن يمكن أن يكون كذلك. ومن المؤكد أنني سأتجنب ذلك بالنسبة للمواقع التي تحتوي على أكثر من اثنتي عشرة منتجًا أو نحو ذلك ، ولكن يمكن بسهولة الاحتفاظ بمتجر عبر الإنترنت بسيط في صفحة واحدة ، مع نوافذ مشروطة لتحميل تفاصيل المنتج وعملية الدفع.
عندما لا يكون استخدام موقع صفحة واحدة أمرًا بسيطًا: تحتاج المواقع الكبيرة أو المعقدة أو الافتراضية إلى أن تكون كميات كبيرة من المعلومات غير مناسبة لموقع صفحة واحدة. في هذه الحالات ، تكون أفضل حالاً بفضل بنية الموقع الأكثر تقليدية.
مواقع مختلطة
في حين أن هناك الكثير من المواقع صفحة واحدة كبيرة هناك ، وهناك أيضا الكثير من المواقع نوع هجينة. فهي تعطي الانطباع عن صفحة واحدة ، ولكن باستخدام ajax ، والنوافذ المشروطة ، وما شابه ، فإنها تحتوي بالفعل على صفحات متعددة من المحتوى.
يعتبر موقع دانغ أند بلاست مثالاً رائعاً على ذلك.
يمكن أن يكون هذا حلًا رائعًا إذا لم تستطع الحصول على كل شيء لتلائمه في صفحة واحدة.
بعض المواقع نوع من "الغش" عندما يتعلق الأمر بالصفحة الواحدة. لديهم صفحة واحدة لموقعهم الرئيسي ، ولكن لديهم مدونة على نطاق آخر (أحيانًا موقع مستضاف في Tumblr أو WordPress.com). لا يوجد شيء خاطئ في هذا ، ويمكن أن يكون وسيلة للحفاظ على رسالتك على موقعك الرئيسي ، دون التخلي عن فوائد وجود بلوق.
أفضل الممارسات لمواقع الصفحات الفردية
لا تزال معظم مبادئ التصميم الجيد سارية في مواقع الصفحات الواحدة ، كما هو الحال مع أي تصميم موقع جيد. ولكن هناك بعض الأشياء الإضافية التي يجب أن تضعها في اعتبارك ، والتي تم التطرق إلى بعضها بالفعل أعلاه.
أبقيها بسيطة
إن محاولة تصميم تصميم معقد للغاية بالنسبة للمحتوى الذي تحاول تقديمه ، ليس هو أنت أو مستخدميك أي تفضيلات. بدلاً من ذلك ، يمكنك تبسيط التصميم والمحتوى الخاص بك قدر المستطاع ، مع الاستمرار في تقديم ما تحتاج إليه.
روابط التنقل لا تزال مفيدة
فقط لأن المستخدمين يمكنهم التمرير للتنقل في موقع الويب الخاص بك ، لا يعني أن هذه هي الطريقة الأكثر سهولة للقيام بذلك. هذا صحيح بشكل خاص إذا كان لديك صفحة طويلة مع العديد من الأقسام. ما لم يكن هناك سبب وجيه جدًا لعدم تضمينها ، فإن إضافة روابط التنقل إلى أقسام معينة تجعل موقعك أكثر سهولة في الاستخدام.
قسّم المحتوى الخاص بك
لا تعني صفحة واحدة أن كل شيء يجب أن يكون مقطعًا واحدًا طويلًا. في الواقع ، لا ينبغي أن يكون. قسم المحتوى الخاص بك إلى أجزاء وأقسام منطقية بحيث يمكن للمستخدمين العثور على ما يبحثون عنه بشكل أفضل.
افعل شيئًا بكل هذه الخلفية
تميل مواقع الصفحات الفردية إلى الحصول على خلفيات كبيرة. في بعض الأحيان ، تُترك تلك الخلفيات بشكل عادي أو بنمط متكرر ؛ لكن مواقع أخرى ذات صفحة واحدة تستفيد من كل تلك المساحة لعمل شيء مبتكر. يمكن أن يساعد هذا أيضًا في تقسيم المحتوى الخاص بك ، كما سبق ذكره. لا يجب أن تكون خلفيتك صورة واحدة. يمكن أن يكون سلسلة من الصور ، إذا كان ذلك يناسب المحتوى الخاص بك بشكل أفضل.
موارد لمواقع صفحتك الفردية
هناك مئات الموارد ، بما في ذلك قوالب ، لمواقع صفحة واحدة هناك. ولكن هنا سنركز على تلك التي تبرز.
Pure CSS Parallax Scrolling : يشرح هذا المقال من Keith Clark كيفية إنشاء تقنية تمرير parallax باستخدام CSS فقط. يعد هذا خيارًا رائعًا إذا كنت لا تريد استخدام جافا سكريبت (أو لا تعرف كيف).
Skrollr : "التمرير المنظر لبقية منا". إنها مكتبة مستقلة تعمل مع الجوال وسطح المكتب. ليس هناك حاجة إلى jQuery ، مجرد جافا سكريبت عادي.
Stellar.js : Stellar.js هو آخر سهل الاستخدام مكتبة التمرير المنظر. إنه يوفر الكثير من خيارات التكوين ودعم iOS.
واحد صفحة الموقع wireframes : يمكن أن تكون هذه المجموعة من الإطارات السلكية لتصميمات الصفحة الواحدة نقطة بداية رائعة إذا كنت غير متأكد من كيفية بناء موقعك. انهم أحرار في التحميل. هناك مجموعة ثانية يمكنك تنزيلها هنا .
حب صفحة واحدة : One Page Love هو معرض موقع الويب الأول من نوعه ، مع أكثر من 5000 موقع للمواقع ، وإضافة المزيد طوال الوقت. كما أنها تتميز بأطنان من القوالب والموارد الأخرى.
بدء Bootstrap : Start Bootstrap يحتوي على مجموعة كبيرة من ثيمات Bootstrap من صفحة واحدة مجانية. هناك مواضيع للوكالات ، والعاملين لحسابهم الخاص ، والمحافظ ، والصفحات المقصودة ، وأكثر من ذلك.
قوالب الحب صفحة واحدة : بالإضافة إلى معرضها الواسع ، يقدم One Page Love أيضًا نماذج مجانية ومتميزة.
هوس صفحة واحدة : يقدم One Man Mania معرضًا يضم مواقع وقوالب فريدة يمكنك تنزيلها أو شرائها.
استنتاج
يمكن أن تكون تصميمات الصفحة الواحدة خيارًا ممتازًا للعديد من أنواع مواقع الويب المختلفة. في حين أنهم ليسوا جميعًا في تصميم المواقع الصغيرة ، ولكنهم يستحقون النظر في العديد من المشاريع. فكر في أسباب استخدام صفحة واحدة ، ثم فكر في أسباب عدم ذلك ، ثم قرر من هناك.