15 خطوة ضرورية قبل إطلاق موقعك!

كتبه أحمد مجدي 24 أبريل 2012

هذا المقال سيعرض بعض الخطوات الهامة والضرورية قبل إفتتاح أي موقع بصورة رسمية للجمهور، هذه الخطوات غالباً ما يتم إهمالها أو تجاهلها من قبل مطوري المواقع أو القائمين على إداراتها، على الرغم من انها لو طبقت بشكل صحيح، ستدعم تجربة المستخدم عند تصفحه للموقع، كما ستدعم فكرة  “أن يكون الموقع علامة تجارية”.

1- ضع أيقونة مفضلة Favicon لموقعك

Favicon - أيقونة المفضلة
Favicon – أيقونة المفضلة

ايقونة المفضلة تميز موقعك بشكل كبير، كما تساهم في بناء هوية مميزة لك مختلفه عن المواقع الأخرى، فهي تعرض بجانب أسم الموقع المفتوح في المتصفح، وتخزن بجوار أسم الموقع في قائمة المفضلة Bookmarks الخاصة بالمستخدم، وهي تفيد في:-

  • أولا : تساعد المستخدم أن يصل سريعاً للموقع لو كان هناك أكثر من موقع مفتوح في المتصفح، سينظر المستخدم للأيقونة بدلاً من قراءة اسم الموقع.
  • ثانياً : الوصول السريع للموقع من قائمة المفضلة لنفس السبب أيضاً، سينظر المستخدم للأيقونة بدلاً من قراءة أسم الموقع.

كيف تضع أيقونة مفضلة لموقعك؟

المتصفحات تتعرف على أيقونة المفضلة الخاصة بالموقع المفتوح من خلال أسمها ومسارها الافتراضي، فتبحث في مجلد Root عن الصورة Favicon.ico ثم يقم المتصفح بعرضها تلقائياً، ولكي تتأكد من عرضها على كل المتصفحات، أكتب هذا الكود مصحوباً بمسار الايقونة في الوسم Head داخل رئيسية الموقع.


1
 

كيف تصمم أيقونة مفضلة لموقعك؟

اذا لم يحن الوقت لإستثمار أموالك في تصميم أيقونة مفضلة لموقعك أو أن ميزانية الموقع لا تسمح، يمكن أن تستخدم أحد هذه الأدوات لتساعدك في تصميم أيقونة أو أن ترفع شعار موقعك ليحولها لأيقونة مفضلة:-

  •  Favicon CC، ارسم أو ارفع صورة لتحويلها لأيقونة مفضلة.
  • Favicon Generator، أداة اخرى لتصميم أيقونة مفضلة.
  •  Favicon Canter، حول شعار موقعك لأيقونة مفضلة.

2- تأكد من عناوين الصفحات ووصفها

عناوين الصفحات ووصفها
عناوين الصفحات ووصفها

تأكد من وضع عناوين لكل صفحة من صفحات الموقع، ضع العناوين داخل وسوم <title> وتأكد أن كل عنوان صفحة مرتبط بمحتواها، تأكد من ادراج وصف لكل صفحة داخل الوسم <meta> فهي التي يستخدمها جوجل لوصف نتائج البحث، اذا لم يكن موقعك يدار ببرمجية إدارة محتوى (الووردبريس-جوملا- … الخ) فأنت غالباً لن تحتاج إلى التأكد من هذه الخطوة.

 3- إختبر عرض الموقع على متصفحات وأنظمة مختلفة

إختبار عرض الموقع على متصفحات وأنظمة مختلفة
إختبار عرض الموقع على متصفحات وأنظمة مختلفة

اعتقد انك بدأت تؤمن بقيمة زوار موقعك، وعليه فأنه لزاماً عليك أن تحترم زوار موقعك وتوفر لهم طريقة لتصفح الموقع بنجاح أياً كان نوع المتصفح أو نظام التشغيل المستخدم لديهم، يجب أن تختبر الموقع على الثلاث متصفحات الشهيرة على الأقل Firefox – Google Chrome – Internet Explorer بنسخهم الأكثر ثباتاً وتحديثاً، يجب أن تطبق مفهوم التصميم التجاوبى Responsive Design والذى يعنى أن يكون الموقع سليم العرض على كافة المتصفحات دون مشاكل، لا تجعل الموقع يبدوا ١٠٠٪ صحيح على كل المتصفحات فربما يكون هذا الهدف صعب المنال، ولكن على الأقل يجب أن تكون جميع وظائف ومحتوى الموقع معروضه بشكل صحيح.

يجب أن تغير قناعتك بأنه مادام الموقع معروض لديك بشكل صحيح فإنه كذلك عند جميع المستخدمين

كيف تختبر الموقع على المتصفحات والأنظمة المختلفة؟

استخدم أحد هذه المواقع لتعرف كيف يبدوا موقعك على المتصفحات والانظمة المختلفة:-

  • Browser Shots، شاهد كيف يبدوا موقعك على عدد كبير من المتصفحات وأنظمة التشغيل بإصداراتها المختلفة
  • Responsive.is، هل موقعك يطبق مفهوم التصميم التجاوبي؟
  • The Responsinator، كيف يبدو موقعك على أجهزة العرض المختلفة (آيباد، آيفون، لاب توب، … الخ)

4- المراجعة اللغوية للمحتوى

المراجعة اللغوية للمحتوى
المراجعة اللغوية للمحتوى

اقرأ كل محتوى الموقع كلمة كلمة، ويفضل أن تجعل أحد اصدقائك يقرأه أيضاً، بالتأكيد ستجد بعض الاخطاء أو الكلمات الغير مكتملة، بعض أدوات الترقيم الموضوعه في غير مكانها… الخ.

نصائح لكتابة محتوى أفضل يصلح للعرض على الويب

  • ضع المحتوى المرتبط بهدف وفكرة موقعك فقط!
  • ضع خلاصة كل فقرة من فقرات المحتوى في أول جمله منها.
  • كل فقرة أجعلها تدور حول فكرة واحدة واضحة وجيدة الصياغة.
  • استخدام أفعال تحث القاريء على القيام بمهمة محددة لتطبيق الفكرة! مثال: اقرأ كل محتوى الموقع كلمة كلمة.
  • اختصر واختصر ثم اختصر محتوى الموقع قدر الإمكان، فزائر الويب لا يحب القراءة، فلا تضع غير المحتوى المهم فقط.
  • قسم الكتل النصية الكبيرة إلى فقرات وضع لها عناوين موجزة ومختصرة تصف كل فقرة.
  • حول الفقرات إلى نقاط Lists، فهى أسهل واسرع في القراءة.
  • اختصر في الجمل، اجعل كل جملة لا تزيد عن ١٤٠ حرف، مثل تغريدات موقع تويتر.

بعض روابط لمقالات تساعدك على الإلمام بالأخطاء اللغوية الشائعة، وعلامات الترقيم

5- اختبار عمل الروابط الخارجية والداخلية

إختبار عمل الروابط الخارجية والداخلية
إختبار عمل الروابط الخارجية والداخلية

اختبركل رابط تضعه في الموقع، وبخاصة روابط الصفحات الخارجية عن موقعك، في بعض الأحيان قد تنسى كتابة “http://” فيجعل الرابط معطوب، لا تتوقع أن يكون كل زوار موقعك على نفس مستوى الخبرة التي تمتلك فسيضيفون تلك الحروف المنسية، كما لا تفترض أن زائر الموقع سيصحح الأخطاء التى يجدها بالموقع، عزيزى كل هذه أوهام، لا تنسى أن أبعد منافسيك هو على بعد بضعة نقرات بالماوس! كما أن المستخدم سيصل لما يريد سواء كان هذا المحتوى بموقعك أو موقع آخر.

يجب أن تميز الروابط links عن المحتوى النصي العادي الموجود بصفحات الموقع، الرابط الإفتراضي لونة أزرق وأسفل منه خط، عندما يشاهد المستخدم هذا فإنه يدرك انه رابط حتى لو لم تخبره بذلك، عدل إعدادات الـ  CSS الخاصة بك لتوافق هذه الاختيارات، كما يجب أن تجعل لكل حالة من حالات الروابط اعدادات مختلفة من ال CSS. فحالات الروابط هى:-

حالات الروابط Links
حالات الروابط Links
  1. Link، رابط لم يفتحه المستخدم بعد / لم ينقر عليه المستخدم بعد.
  2. Alink، رابط يزوره المستخدم.
  3. Vlink، رابط تم زيارته / نقر عليه المستخدم.

أداة مساعدة

أداة W3C Link Checker، تساعدك في التحقق من الروابط الموجودة في موقعك.

 6- اختبار عمل وظائف الموقع

تبيان الخطأ للمستخدم

اختبر كل كبيرة وصغيرة من وظائف الموقع، هل لديك نموذج للإتصال بنا؟ اختبر الارسال، ارسل رسالة بدون عنوان، هل ستصل للبريد الذى حددته؟ توقع ما قد يقوم به المستخدم وافعله لكي تتأكد من عمل وظائف الموقع بشكل صحيح، قم بدعوة مستخدمين من الجمهور الذي تستهدفه لاختبار وظائف الموقع، ثم اجلس وشاهد ردود أفعالهم وسجل ملاحظاتك، كيف يتفاعلون مع المحتوى، ومع الوظائف والمميزات المختلفة التي توفرها في الموقع، وهل وظائف ومميزات الموقع مقدمة بالشكل الذي يتوقعونه؟

لو موقعك عبارة عن متجر الكتروني، اختبر عملية شراء منتج بشكل كامل، لو لديك مدونة اختبر التعليقات، نموذج اتصل بنا، البحث … الخ

أداة مساعدة

برنامج SilverPack أحد أهم وأروع البرامج التي تقيس وتسجل ردود أفعال المستخدمين صوت وصورة، قم بتنصيب البرنامج على حاسوبك ثم استضيف المستخدمين المختلفين لتصفح موقعك، سيقوم البرنامج بتسجيل حركاتهم وكل ما يفعلون، ثم تعيد تشغيل الفيديو وتلاحظ ردود أفعال المستخدمين عند قيامهم بوظائف معينة، العيب الوحيد بالبرنامج انه متاح لمستخدمين Mac فقط!

7- اختبر رشاقة الموقع!

اختبر عمل الموقع بدون الاضافات البرمجية
اختبر عمل الموقع بدون الاضافات البرمجية

اختبر عمل الموقع بعد إيقاف الجافا اسكريبت من المتصفح الخاص بك، بعض المستخدمين يفضلون تعطيل الجافا اسكريبت بدعوات الأمان، اختبر جميع الوظائف مرة اخرى مثل نماذج الاتصال بنا

8- تحقق من معيارية الموقع/ مطابقة الموقع للمعاير القياسية العالمية

تحقق من معيارية الموقع

نعم، اعلم انه لن يموت موقعك لو كان غير مطابق للمعايير القياسية لـ W3C ولكن من الأفضل ان تقوم بذلك، من الممكن أن تجد بعض الأخطاء السهلة التصحيح، أو ربما تكون نسيت اضافة بعض الوسوم الهامة والتي توفر تجربة أفضل للمستخدم مثل الوسم Alt، اجعل كود الموقع نظيفاً ومطابق للمعيارية قدر المستطاع.

أداة مساعدة

استخدم اداة W3C Validator للتحقق من معيارية موقعك

9- اضافة خدمة تلقيمات/خلاصات الموقع RSS

خلاصات/تلقيمات المدونة
خلاصات/تلقيمات المدونة

لو كان موقعك عبارة عن مدونة أو موقعاً إخبارياً، وفر للمستخدمين خدمة RSS لخلاصات الموقع وجديد ما يعرض به، إستخدم خدمة Feed Burner لتولد لك رابط لخلاصات المدونة أو الموقع، مع إحصائيات عن المستخدمين المشتركين بالموقع أولاً بأول.

10- تنصيب خدمة لمعرفة إحصائيات الموقع Analytics

خدمة تحليلات جوجل

استخدم أداة لقياس مدى فاعلية الموقع ومدى قبوله لدى الجمهور، من أين يأتي زوار الموقع؟ هل الإعلان الذي تضعه في موقع فلان الفلاني يجلب ما تتوقعه من زوار؟ ما هي الكلمات التي يستخدمها الزوار للوصول للموقع من محركات البحث؟ كل هذه المعلومات ستفيدك لتوجيه الموقع للطريق الصحيح للنجاح.

بعض الأدوات التي تقدم احصائيات للمواقع بشكل مجاني:-

11- خريطة الموقع SiteMap

اضافة صفحة sitemap.xml تساعد محركات البحث في أرشفة الموقع بشكل صحيح، فمن المفترض أن يحتوي هذا الملف على محتوى الموقع بشكل كامل.

أدوات تساعدك في عمل صفحة خريطة الموقع SiteMap
  • Xml Sitemaps، موقع يساعدك في عمل ملف خريطة لموقعك.
  • Google Xml Sitemaps Generator، إضافة للوردبريس تولد ملف خريطة للمدونة، والتي تحدث ملف خريطة الموقع دورياً عند إضافتك لمقالة جديدة، بعد توليد هذا الملف ارفعه على Google WebMaster Tool، لتخبر جوجل أن موقعك يمتلك ملف SiteMap.

12- التصميم لأخطاء المستخدمين/ التصميم الوقائي Defensive Design

التصميم لأخطاء المستخدمين
التصميم لأخطاء المستخدمين

هذا المصطلح يشير إلى التصميم الذي يراعي أخطاء المستخدمين بالموقع فيظهر للمستخدم الخطأ ويوجهه لنقطة يبدأ منها من جديد، مثال: إذا نقر المستخدم على رابط خطأ أو على رابط لصفحة تم حذفها من الموقع من المفترض أن يظهر للمستخدم صفحة 404 Not Found Page فلو تم تصميم صفحة مخصصة لهذا الخطأ يوضح للمستخدم أنه بصفحة خاطئة كما يوفر له طريق ليبدأ التصفح من جديد، هكذا يتحول تصميم الموقع إلى تصميم يراعي أخطاء المستخدمين، أبرز تطبيقات هذا المصطلح:-

  • صفحة الخطأ 404
  • تنويهات الموقع في حالات خطأ المستخدم في مليء حقل ضروري في التسجيل مثلاً.

أمثلة لتلهمك لتصميم صفحة  404 Error Page:-

 13- اختبر سرعة الموقع 

اختبر سرعة الموقع
اختبر سرعة الموقع

اجعل موقعك مثالياً بالنسبة للمستخدم… بأن يكون جيد التصميم، مراعي لقابلية الاستخدام، ذو محتوى جيد، يعرض المحتوى بشكل ملائم للويب، سريع التحميل والتصفح، المبدأ الثالث من فلسفة جوجل يقول “السرعة أفضل من البطء.”، لتجعل هذا المبدأ من فلسفتك أنت أيضاً،

نعلم أهمية الوقت بالنسبة إليك، لذا عندما تريد الحصول على إجابات عبر الويب، فإنك تريدها بشكل فوري -وهذا ما نسعى لتحقيقه. -فلسفة جوجل

نصائح لتقليل حجم الموقع

14- خذ نسخة إحتياطية من الموقع

هل قمت بكل الخطوات السابقة، الآن حان موعد أخذ نسخة احتياطية للموقع، جدول طريقة لآخذ نسخة إحتياطية من الموقع بشكل دوري، إذا كنت تستخدم الووردبريس استخدم BackWPup فهي تجدول عملية نسخ دورية للمدونة كما يمكنك ربط حسابك على Dropbox ليحفظ النسخة دورياً عليه.

15- صمم استايل CSS مخصص لطباعة صفحات الموقع

بعض المستخدمين ربما يرغبون في قراءة محتوى الموقع بالطريقة الكلاسيكية، على ورق مطبوع، عندما يقومون بطباعة صفحة الموقع فإنه سيُطبع بكل محتواه من هيدر وفوتر واعلانات … إلخ، كل هذا لا يريده المستخدم فهو يريد المحتوى فقط، لذا وفر استايل سي اس اس مخصص للطباعة Print CSS Style بحيث يطبع المحتوى بشكل مناسب للقراءة.

هل حاولت أن تطبع هذا المقال؟ او أي من مقالات مدونة معمل ألوان؟

أدوات مساعدة

المراجع

هل تعتقد ان هناك خطوات أخرى ضرورية قبل إطلاق الموقع؟

عن كاتب المقال

أحمد مجدي
متخصص بتجربة الاستخدام، مصمم واجهات الإستخدام للويب والموبايل منذ 2008، امتلك خبرة معرفية وعملية عن التصميم الجرافيكي لواجهات الاستخدام والتفكير البصري، عملت مع أصحاب الأعمال التجارية في الشركات الكبيرة، المتوسطة، الصغيرة والأفراد لبناء جسـور بيـن احتياجات المستخدمين وأهدافهم التجارية. تابعني على تويتر: @ahmedmagdi


كل مقالات الكاتب

اترك تعليقك على المقال 38 تعليق

  • ما شاء الله تبارك الله معلومات قيمه و سرد سلس و أكثر من رائع ,,
    متابع للمدونه من فترة وجيزة و يسعدني أسألك عن ” ميتا تاج بلوجر ” ..
    هل بإمكانك مساعدتي في إيجاد كود فعال لوصف المدونة في قوقل ؟!
    ولك جُل التقدير وجزيل الشكر ..

    • مرحبا اخى الكريم، لا يوجد كود فعال يقوم بمهمة تحسين وضع الموقع بنتائج البحث، انه امر معقد بعض الشئ حتى تحسن من وضع موقعك فى جوجل، ولكن اتعلم ما هو السر العظيم وراء ذلك؟!… انه المحتوى، أعدك انه طالما كان محتوى موقعك جيد ومفيد سيتحسن ترتيبك ووصف موقعك تلقائياً بجوجل.

      راجل هذا المقال من مدونة جوجل الرسمية، سيفيدك جداً:
      http://google-arabia.blogspot.com/2010/05/site-improvement-tips-for-arabic_10.html

      • جزاك الله خيراً ..

      • احمد سعيد

        الحمد لله ربنا يزيدك انا كنت فاكر انا الوحيد الى بقرأ فى مجالات زى uxd and ui and usability
        الحمد لله فى ناس فاهمة

        وفعلا الحاجة الوحيدة الى تضمن بقاء الموقع فى المقدمة هى بناء الموقع عن طريق المحتوى
        المحتوى الجيد اساس جيد لاى موقع والتسرع فى الانتشهار والاشهار غير مطلوب من يريدوك سوف يأتون اليك مرغمين لانك تملك فى محتواك ما يبحثون عنه

  • موضوع جميل ومبسط ومهم
    موفق يا احمد باذن الله

  • رغم أن معظم الأمور لابد أن تكون معروفة لدى مطور الموقع إلا أنها في غاية الضرورة
    جزيتَ خيراً

  • مقالة مفيدة، راجعت الخطوات في ذهني و وجدتني قد طبقت معظمها في موقعي وبخاصة المهم منها كالاحصائيات وخريطة الموقع و RSS واختبار عمل الوظائف و تنظيم المحتوى وغيرها

    شكرا احمد، هذه المقالة تساهم بإثراء المحتوى العربي نحو الأفضل .. فقد أصبح من النادر أن نجد مدونة عربية تملك استراتيجية صحيحة تسير عليها

  • عبد الله

    جميل جدا، ولكن النقطة الثالثة غير مطبقة في مدونتك هذه 🙁

    • هذة حقيقة يا عبد الله، للأسف!
      لكن حالياً المدونة يتم تحويلها الي Responsive Design، قريبا جداً خلال الأيام القليلة القادمة بإذن الله، كما ان تحويل الموقع ليتناسب للعرض على كل المتصفحات ،انظمة التشغيل والاجهزة الوسيطة، ليس بالأمر البسيط، انه عمل يتطلب وقتا وجهداً … وكلفة!
      المدونه يتم تطويرها بإستمرار. أعمل علي توفير تجربة سعيدة لك ولكل زوار المدونة قدر الإمكان وفق الامكانات المتاحة.

      كما اننى فى كثير من الأحيان سأنقل المعلومه حتى وان لم استطع تطبيقها، فربما يستفيد بها غيرى ويطبقها افضل منى، وفى كل الأحوال من الجيد ان يعلم الانسان كل شئ

      شكراً لك على الإهتمام.

  • شكرا على الموضوع القيم

  • خطوات جميلة استفدت منها كثيرا أثناء عمل موقعي الذي أطلقته اليوم فأحببت أن أترك شكري وامتناني

    عناد

  • جميل جدا اني اشكرك صديقي

    معلومات مفيده وبيها فائده

    تحياتي لك صديقي

  • الله يعطيك العافيه أخوووي

    فعلاً خطوآت مهمه جداً

    وان بعض الخطوات ما كانت في باللي ” فتحت عيوني على أشياء مو متوقعه

    موضوع شيق ” تم أضافة الموقع للمفضله”

  • تدوينة من ذهب احسنت وجزاك الله خير

  • قمت بقراءة المقالة في فترة تجهيزي لمدونتي الشخصية، حاولت قدر الإمكان الالتزام بما ورد فيها.. تقريبا أكثر من 10 نقاط قمت بتطبيقها.. وأصعب ما واجهني عملية التوافق.. ولا زال IE6 لا يعرض الصفحة بالشكل المطلوب، لكني أظن أن نسبته انخفضت كثيرا..
    شكرا جزيلا لكم، وبالمناسبة.. موقع The Responsinator يعرض الموقع بإصدار الويب وليس الهاتف مع أن الموقع له نسخة هاتف!

  • نصائح جميلة جدا
    ومنتظرين المزيد

  • بارك اللة فيك
    موضوع متميز افدتنى

  • سلمت يمناك على هذا الموضوع الرائع

  • حقيقه نقاط اكثر من رائعه
    لو طبق ربعها لاتت بفوائد لا حصر لها
    ساطبق منها قدر المستطاع ان شاء الله
    ودمتم سالمين

  • ما شاء الله خطوات رائعة وبالفعل ضرورية لكل موقع ناجح .. شكراً على طرحك الرائع .. مدونتك مفيدة ما شاء الله .

  • مقال أكثر من رائع، مدونة معمل الألوان بالفعل تقوم بدور هام في أثراء المحتوي العربي علي الويب فقد أصبح من النادر أن تجد مقالة بهذا المستوي من الأحترافيه، أتمني لكم النجاح والأستمرار.

  • محتوى رائع ومهم جداً اول مدونة عربية بدخل عليها وبلاقي معلومات متجددة ومو كوبي بيست سلمت يداك

  • شكرآ لك اخوي

    عاشت الايادي

  • شكككككككككككككككككككككككككككككككككككككككككررررررررررررررررررررررررررررا للللللللللللللليككككككككككككك

  • جزاك الله خير على ما تقدمه من معلومات مفيده حقا … وكل عام وانتم بخير …

  • مشكووووووووووور

  • نسيت تطبيق احدى نصائحك 😀
    رابط تحليلات جوجل يفتقر الى البادئه Http://
    😀

  • مقال رائع وفعلا دليل شامل .. شكرا لكم .

  • Abdallah Ali

    السلام عليكم,

    بالنسبة لآخر خطوة الموقع الي إنت ضايفة للماسعدة على عمل ملفات CSS للطباعة فهو مش بيعمل كده خالص :)). الموقع بيعمل فايل بيخفي كل محتويات الصفحة عند الطباعة و يطلع جملة “Don’t waste paper!” الموقع هدفه الحفاظ على البيئة و توفير الورق.

    لكن بشكل عام شكرا جدا على المقال المفيد 🙂

  • شكرااااا
    رائع جدااا

  • مقالة رائعه واستفدت منها بصراحة استطعت اصحح بعض من المفاهيم والاسس لنجاح موقعي

  • عبدالرحمن احمد

    شكراً على التدوينه المفيده جداً

  • أحمد عرفة

    رائع جداً أستاذي الكريم
    ولكنها إقراء وليست إقرأ :-p , أنظر لأول ظهور لكلمة اقرأ بعد صورة http://cdn3.colorslab.net/wp-content/uploads/2012/04/alshamel.jpg

  • تامر سعيد

    بسم الله ماشاء الله موضوع مفيد جدا ومحتوى ممتاز
    أفادنى كتير شكرا لك على المجهود الرائع

  • عبدالرزاق محمد

    حقيقة عرض رائع وجميل
    يعطيك العافية اخي العزيز

  • Abo Munif

    معلومات قيمة جدا…
    بارك الله فيك وشكر الله سعيك…
    صراحة هذة المعلومات التي نحتاجها قبل البدأ…

  • namshicom

    موضوع جميل ومبسط ومهم
    موفق يا احمد باذن الله