[دليــل شامــل] ١٥ خطوة ضرورية قبل إطلاق موقعك!

3:03 م |

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

١- ضع ايقونة مفضلة Favicon لموقعك

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

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

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

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

المتصفحات تتعرف على ايقونة المفضلة الخاصة بالموقع المفتوح من خلال اسمها ومسارها الافتراضى، فتبحث فى مجلد Root عن الصورة Favicon.ico ثم يقم المتصفح بعرضها تلقائياً، ولكى تتأكد من عرضها على كل المتصفحات، اكتب هذا الكود مصحوباً بمسار الايقونه في الوسمHead داخل رئيسية الموقع.<link rel="icon" type="image/x-icon" href="/favicon.ico" />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

حالات الروابط Links

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

أداة مساعدة

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

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

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

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

أداة مساعدة

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

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

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

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

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

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

نعم، اعلم انه لن يموت موقعك لو كان غير مطابق للمعايير القياسية لـ 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- اختبر سرعة الموقع

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

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

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

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

قلل حجم الصور المعروضة فى الموقع قدر الإمكان، استخدم اداة ياهوو Smush.it
اضغط حجم ملفات ال CSS، استخدم CSS Compressor
اضغط حجم ملفات ال Java Script، استخدم JavaScript Optimizer
17 خدمة مجانية لضغط وتصحيح ملفات CSS

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

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

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

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

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

ادوات مساعدة

طرق تطويع موقعك للطباعة.
Print.CSS موقع يساعدك فى تنفيذ استايل سى اس اس مخصص لطباعة محتوى موقعك بشكل صحيح.

المراجع

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

اذا اعجبتك هذه التدوينة فلا تنسى ان تشاركها وتساعدنا على نشر المدونة ، كما يسعدنا ان تنضم الى قائمة المشاركين في Web-King من خلال (نشرات rss)

التسميات: تصميم تجربة المستخدم

6 التعليقات :

Chhiwatii يقول...: هكذا يتحول تصميم الموقع الى تصميم يراعى اخطاء المستخدمين.; 8 أغسطس 2013 في 7:59 م
salim rabat يقول...: من أين يأتي زوار الموقع؟ هل الإعلان الذى تضعة فى موقع فلان الفلانى يجلب ما تتوقعه من زوار؟; 8 أغسطس 2013 في 8:08 م
A.D.E.A يقول...: يمكمك اخي ان تشاهد الموضوع التالي في الاعلي .
10- تنصيب خدمة لمعرفة إحصائيات الموقع Analytics; 8 أغسطس 2013 في 8:10 م
Chhiwatii يقول...: نعم اخي الخطوة ١٠ تجيب علي استفسارك
10- تنصيب خدمة لمعرفة إحصائيات الموقع Analytics; 8 أغسطس 2013 في 8:13 م
sami يقول...: نعم كلامك صحيح اخي الفاظل يسعدني ان اشارك في هذه المدونة شكرا اخ زكي; 11 أغسطس 2013 في 1:12 ص
sami يقول...: قمت بكل الخطوات شكرا اخ زكي; 21 أغسطس 2013 في 8:03 ص

إرسال تعليق

رأيك مهم بالنسبه لنا ، فلا تحرمنا منه

Web-King

هل هذة أول زيارة لك ؟

يمكن أن تبدأ بقراءة :

الاقسام

ارشيف Web-King

جديد المواضيع