همونطور که تو مقاله بازاریابی داخلی با طراحی سایت توضیح دادیم، جلب توجه مخاطب و ترغیبش به گشتن و گذار روی سایت خیلی مهمه. با توجه به این موضوع، بخش بالایی صفحه فرود سایتتون، مهمترین قسمت از کل سایته که بیشترین توجه رو میطلبه. اینجاست که بازدیدکننده، اولین تأثیر رو از وب سایت شما میگیره. فرقی هم نمیکنه که مخاطب از چه دستگاهی برای بازدید سایتتون استفاده میکنه. تو این مقاله درباره کار کردن با هدر بالای صفحه، در ارتباط با طراحی وب واکنشگرا توضیح میدیم.
طراحی وب واکنشگرا چیست؟
همونطور که تو مقاله طراحی وب سایت واکنشگرا توضیح داده شده، طراحی وب واکنشگرا یک روش طراحیه که پهنای دستگاههایی رو که به وب سایت دسترسی پیدا میکنند در نظر میگیره و ساختار و محتوای سایت رو بر اساس اون سازگار میکنه. عموما سه نوع پهنا در نظر گرفته میشه. شخصی که داره با کامپیوتر و لب تاپ به وبسایت نگاه میکنه، دید قدیمی‌تری از وب سایت خواهد داشت، کسی که داره با گوشی به همون وب سایت نگاه میکنه، همون وب سایت رو با قالب دیگه ای میبینه که تجربه بهینه تری رو در اختیارش میذاره.
هدر صفحه چیست؟
هدر صفحه به محدوده ای از وب سایت میگن که بازدیدکننده وقتی روی صفحه وب فرود میاد، اول از همه میبینه، و معمولا صفحه فرود یا صفحه اصلی سایته. تو این قسمت، باید تمام سعیتونو بکنید که نظر بازدیدکننده رو جلب کنید و خیلی خلاصه، موضوع اصلی سایتتونو براش توضیح بدید. این قسمت نباید شلوغ و پرهرج و مرج باشه و باید یکراست متوجه اصل مطلب باشه. اگه بتونید کاری کنید که بازدیدکننده ها اقدامی روی سایت انجام بدین یا اسکرول بار رو پایین بکشن تا اطلاعات بیشتری بدست بیارن، یعنی وب سایت کار خودشو خوب انجام داده و به هدفش رسیده.
هدر صفحه در تنظیمات واکنشگرا
حالا که میتونید طراحی وب واکنشگرا چیه و هدر صفحه چیه، اجازه بدید با ترکیب این دو سناریو، ببینیم وب سایت باید روی هر دستگاه چی نشون بده و چی کار کنه.
هدر صفحه در حالت کامپیوتر
تو این حالت، یکی از روشهای دارکوب اینه که، یه تیتر جذاب و جلب توجه کننده بالای صفحه میذاره و در ادامه توضیح مختصری از خدمات اصلی شرکت. بعد به مشتری یه درخواست برای اقدام میدیم و ازشون میخواهیم برای مشورت و گرفتن پیشنهاد باهامون تماس بگیرند. اینها مهمترین اطلاعاتی هستند که میخواهیم به بازدیدکننده هامون بدیم.
علاوه بر این قسمت، یه تصویر هم داریم که نوع کاری رو که شرکت انجام میده به نمایش میذاره. این تصویر به یک صفحه از نمونه کارهایی که شرکت برای یکی از مشتریهاش انجام داده و پروژه به پایان رسیده لینک میشه. این عکس مهمه اما نه به مهمی تیتر بالایی و اطلاعات و درخواست برای اقدامی که در ادامه‌اش میاد. بخاطر همین روی دستگاههای کوچیکتر میتونیم از عکس صرف نظر کنیم.
هدر صفحه در حالت تبلت
در این حالت با چیزهای بیشتری سر و کار داریم، اما مشکل بیشتر وقتیه که تبلت در حالت عمودی باشه. وقتی وب سایت رو در حالت عمودی مشاهده میشه، قسمت بیشتری ازش قابل رؤیته اما با پهنای کمتری. بنابراین قسمت بالایی که قرار بود تیتر جلب توجه کننده و درخواست برای اقدام باشه باید از نظر بصری بتونه کارشو خوب انجام بده.
تو این حالت، عکسی که قرار بود نوع کار شرکت رو به تصویر بکشه هم عوض میشه تا ابعادش با اندازه های عمودی نمایشگر جور در بیاد و حالت عمودی داشته باشه، اما اطلاعاتی که نمایش میده همونه.
به این ترتیب اطلاعات مهم – تیتر، درخواست برای اقدام – حالت اثرگذارتری دارند و میتونن همچنان به وظیفه شون که جلب توجه مخاطبه خوب عمل کنند.
هدر صفحه در حالت موبایل
اینجا کمترین فضا رو در اختیار داریم. بخاطر همین همه زواید باید حذف بشن تا اطلاعات مهمتر بتونن اکثر فضا رو در اختیار داشته باشند و به طرز مؤثری به ایفای نقش بپردازند و با اینکه نمیتونیم عکس و لینک نمونه کار رو داشته باشیم اما بتونیم به بهترین شکل ممکن به هدفمون که همون جذب مشتریه برسیم.
امیدوارم این مقاله تونسته باشه درک بهتری از هدر صفحه در طراحی وب واکنشگرا به شما عزیزان ارائه داده باشه. اگه برای طراحی وب سایتتون به مشاوره نیاز داشتید میتونید با متخصصان ما در دارکوب تماس بگیرید و سوالاتتونو بپرسید.