بسم الله الرحمن الرحيم وبه نستعين ،

مُقدمة

أهلاً بكُم في أول تدويناتي هُنا 🙂
نتحدث اليوم عن منطقة يُهملها الكثير، زوّار ومُصممون ، خاتمة الموقع، ذيله أو الفوتر.
ربما أعلل سبب إهمال الزوار للفوتر وأجد لهم العذر في ذلك، هُناك أسباب عدّة تجعل زائراً لا يهتم للفوتر وفي اعتقادي أهمها، هو قلّة محتوى الفوتر وشُح ما يقدمه من إفادة للزائر.
وبما أننا نتفق جميعاً أن الويب “العربي” – مع أني لا أوافق على هذا المصطلح فليس هناك ويب عربي وآخر أجنبي – في تطورٍ ملحوظ، فكان لابد من أن نبدأ الإهتمام بأكثر التفاصيل التي نهملها في تصميم الويب.
ماهي العناصر التي يجب أن تضعها في الفوتر ؟
هل تضع نسخة مصغرة لموقعك في الفوتر كما يفعل البعض ؟
أم تكتفي بوضع بعض المواقع الاجتماعية للتواصل معك ؟

النوع الأول: مُهملي الفوتر
سمِّ هذا نقداً أو ما شئت، ولكنّي سأصنفه تحت بند النصيحة، نجد أن بعض المُصممين أو أياً كان من أجبر المُصمم على اختيار هذا النوع من الفوتر وهو البسيط زيادة عن المطلوب وهو حالة اللا فوتر التي توجد في كثير من المواقع العربية.
كمثال نختار مدونة عبد المهيمن نجد هُنا أن صاحبها قرّر الإستغناء التام عنه، وهو – في نظري – إن أعطاها لمحة من البساطة وقدراً من وضوح الرؤية، فوّت على صاحبها فرصة جذب الزائر إلى رُبّما بعض المواضيع المُهمة، روابط قد أغفلها في بداية الصفحة، أو حديثٌ عن صاحبها، ولكن بالطبع فلهذا النوع مؤيديه، ولكنّي لستُ أبداً منهُم.

فوتر لمدونة عبد المهيمن

فوتر لمدونة عبد المهيمن

 

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

فوتر لمدونة حُسَام

 

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

فوتر لمدونة التقنية بلا حدود


النوع الثاني: المُصمم الحُر / المُدوّن

بالفعل، الذي يجعلك تختار هذا الفوتر أو ذاك، هو محتوى موقعك وليس تصميمه، فنجد أن المُصمم الحُر Freelancer يفضل دائماً وضع بعض الأسطر التي يتحدث فيها عن نفسه، مع صورة له وبعض المواقع الإجتماعية للتواصل معه، وهذا هو الأنسب للمُصمم الحر في رأيي، لأن سبب زيارة الزائر للموقع غالباً هو تعلقه بصاحب الموقع وهو غالباً شخصٌ واحد، فمن المحبوب للزائر أن يجد بعض الأسطر تعرفه بمن يقرأ له أو يشاهد تصاميمه.
نجد هذا في تصميم المُعاصر (فؤاد بدوي) الذي اكتفى – نظراً لتخصص موقعه – بوضع بعض الأسطر عنه مع صورة له – بنظارته الصديقة لأي مهووس بالتقنية سابقاً أو لاحقاً – وأحدث التعليقات بحكم أنها مُدونة وبعض الصور الخاصة به من فليكر.

فوتر لمدونة المعاصر

 

فوتر لمدونة تصميم مصري

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

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

فوتر لمدونة الدكتور نت

 

النوع الثالث: الفوتر كبير الحجم

وكما عرضنا سابقاً، فلهذا النوع أيضا محبيه ومؤيديه، باختصار، هو فوتر يُعتبر مرشد للزائر وموجه له، يحتوي على أهم الروابط وأكثرها إفادةً للزائر، وأهم ما يرى مُصمم الموقع بأن على الزائر إلقاء نظرة عليه، وهو عكس تقريباً النوع الأول، ومن مؤيدي هذا النوع Mozilla – Firefox ، نجد في هذا الفوتر روابط بعض المواقع الإجتماعية ورسومات الإليستريتور وبالطبع عدد لا بأس به من الروابط المُهمة في نظر القائمين على الموقع.

Mozilla - Firefox footer

 

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

Apple - Mac footer

 

كمثال أيضاً موقع البيت الأبيض نجده كسابقيه.

The White House site footer

 

أيضاً الموقع الرائع CSS-tricks بتصميمه الجديد، فوتر أكثر من رائع في نظري، قم بزيارته وتحريك الماوس على كل بلوك من البلوكات في الفوتر لتشاهد ما أتحدث عنه.

CSS-Tricks footer

النوع الرابع: نموذج المُراسلة المُدمج بالفوتر

*لم أجد في هذا النوع مثالاً لموقعاً عربياً فأتمنى أن تفيدني بواحد إن كنت تعرف موقعاً عربياً يستخدم هذه الفكرة.

تحديث: وجدت مثالاً عربياً أخيراً وهو تصميم مدونة محمد عبد الله الشهري للمعاصر.
هذا النوع، أو هذه الفكرة أعجبتني كثيراً، فبدلاً من أن تُجهِد الزائر بضغطة بالماوس ليصل لصفحة اتصل بنا ويرى نموذج المراسلة، لم لا تضع هذا النموذج المُبسط بين يديه في نهاية الصفحة !
قام بهذه الفكرة عددٌ لا بأس به من المواقع أذكرُ منها موقع bcandullo.com استخدم شكل الورق القديم في الفوتر بنموذج للمُراسلة و بعض الأسطر عن طرق المراسلة.

bcandullo.com footer

موقع آخر هو Branded07 ، الفوتر الذي يعد لوحة فنية، بعض رسومات الاليستريتور تزينها، بالإضافة لنموذج المُراسلة أيضاً.

brander07 footer

 

يأتي أيضاً هذا الموقع تحت تصنيفنا هذا

GoodSonBros Coffee Company footer

 

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

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

شاهد بعض مصادر كتابة هذا المقال وبعض تصميمات الفوتر الجميلة لعلها تُلهمك 🙂

وأخيراً، شُكراً لك على قراءة هذا المقال 🙂

Advertisements