طراحی واکنش‌گرا برای صفحات وب

استراتژی دیجیتال - نویسنده : رامین جابری - ارسال شده در

طراحی ریسپانسیو (Responsive) به معنای نمایش صحیح سایت در دستگاه‌های مختلف با سایز صفحه نمایش مختلف است. طراحی ریسپانسیو (پاسخ‌گرا یا واکنش‌گرا) به طراحان وب‌سایت کمک می‌کند تا ظاهر وب‌سایتِ طراحی‌شده در ابزارها و رزولوشن‌های متفاوت به درستی نمایش پیدا کند تا کاربران با هر ابزاری که از سایت شما بازدید می‌کنند محتوا و ظاهر سایت را استاندارد و خوشایند ببینند.

این یعنی ظاهر یک وب‌سایت به طور خودکار با توجه به صفحه نمایش دستگاهی که در دست کاربر است تغییر کند و قالب‌بندی آن منطبق با ابعاد هر دستگاهی شود و این بدان معنی است که طراحی باید نهایت انعطاف را در هر صفحه نمایشی داشته باشد.

 جهت بررسی اینکه آیا سایت شما به صورت ریسپانسیو و استاندارد طراحی شده است یا خیر می‌توانید از ابزار Google Mobile-Friendly استفاده کنید. اگر مشکلی وجود داشته باشد می‌توانید گزارشی در مورد خطاها مشاهده کنید.

در ادامه یک نمونه موردی مرتبط با اهمیت بحث طراحی ریسپانسیو سایت را مطالعه خواهیم کرد.

http://blogad.ir/wp-content/uploads/2016/12/pixelz_optimize-product-images-for-mobile-responsive-design-750x450.jpg

معرفی نمونه موردی:

“SHirtinator” یکی از ارائه‌دهندگان محصولات به صورت آنلاین و پیشرو در اروپا است که در زمینه چاپ روی هدایا و سفارشاتی مانند تی‌شرت، پیراهن، لباس و… فعالیت می‌کند و ترافیک خوبی را به سمت خود جذب‌کرده‌است. این وب‌سایت چندی پیش با بررسی واکنش بازدیدکنندگان و میزان تاثیر‌گذاری طراحی وب‌سایت روی مبحث ریسپانسیو(واکنش‌گرا) تمرکز کرد.

  • فرآیند طراحی فرضیه A/B Testing:

“Shirtinator” با نمایش صفحات وب‌سایتش روی دسکتاپ یا لپ تاپ هیچ مشکلی نداشت و برای ترافیکی که از سمت دستگاه‌های تلفن همراه جذب می‌شدند طراحی ریسپانسیو انجام داده بود پس از چندی متوجه شد که برای توسعه و بهینه‌سازی صفحات وب‌ باید به فکر ترافیکی که از سمت‌ دستگاه‌‌هایی با صفحه نمایش بزرگ‌تر از گوشی همراه باشد و این موضوع را مورد بررسی قرار داد؛

ترافیکی که به وسیله دستگاه‌هایی مانند تبلت وارد سایت می‌شوند این صفحات را چگونه می‌بینند؟

طراحی ریسپانسیو برای تلفن همراه با در نظر گرفتن صفحه نمایش کوچک انجام شده بود اما این ظاهر جدید در سایزی کوچک، منجر به تولید یک ضعف بصری در تبلت‌ها به شکل فضاهای پرت و خالی شد که تمرکز بیننده روی محتوا به هم می‌زد. به همین دلیل این وب‌سایت تصمیم گرفت از نشان دادن نسخه موبایل در تبلت‌ها صرف نظر کند و نسخه دسکتاپ را در تبلت‌ها به نمایش بگذارد. سپس این راه‌حل را برای حذف ضعف بصری در قالب یک آزمایش بررسی کرد تا میزان فروش و واکنش کاربران را بررسی کند.

  • فرضیه A/B Testing:

این وب‌سایت نسخه دسکتاپ را در تبلت‌ها به نمایش گذاشت و طراحی ریسپانسیو را فقط در در گوشی‌ها به کار گرفت و این حالت را نسبت به حالت قبل بررسی کرد.

حالت A: نمایش نسخه موبایل در تبلت

حالت B: نمایش نسخه دسکتاپ در تبلت‌ها

a-b-test

می‌توانید مشاهده کنید که فضاهای خالی چطور طراحی صفحه را در تبلت غیر جذاب می‌کند.

  • نتیجه A/B Testing:

نمایش نسخه دسکتاپ در تبلت‌ها عملکرد بهتری نسبت به نسخه تلفن همراه داشت و درآمد به میزان شگفت‌آوری تا نرخ ۷۲٪ افزایش یافت.

  • آنالیز A/B Testing:

  1. دسته‌بندی بازدیدکنندگان از نظر نیازهای مشترک، تنظیمات، لوکیشن، دستگاهی که برای دسترسی به یک سایت استفاده‌ می‌کنند، ساعت مراجعه در طول روز و خیلی از رفتارهای موجود دیگر به شما در کشف چالش‌ها و طراحی راه‌حل‌ها برای بهینه‌سازی وب‌سایت‌ها کمک می‌کند.
  2. حواستان به تکنولوژی و بروزرسانی‌ها باشد زیرا اگر اطلاعات دیجیتالی شما با بروزرسانی‌ها خود را تطبیق ندهند، دیده نخواهند شد پس باید بهینه‌سازی‌ها در راستای تکنولوژی در دسترس کاربران باشد.
  3. با مراجعه به گوگل آنالاتیکس اگر متوجه شدید درصد قابل توجهی از ترافیک خود را از دستگاه خاصی جذب می کنید حتما روی بهینه بودن آن تمرکز کنید و این کار همان دسته‌بندی بازدیدکنندگان به حساب می‎‌آید.
  4. در حال حاضر با حضور گجت‌های مختلف، درصد زیادی از وبگردی‌ها به وسیله تلفن همراه و تبلت اتفاق می‌افتد و با افزایش این دسته از کاربران اگر وب‌سایتی به درستی ریسپانسیو نباشد بازدید کنندگانی را که وبگردی در وب‌سایت شما برایشان آسان نیست، از دست خواهید داد و کاهش بازدید و از دست دادن مخاطبانتان روی فروش شما تاثیر زیادی می‌گذارد.
  5. به طور کلی عدم ریسپانسیو بودن فرآیند پیمایش کاربر را بسیار سخت می‌کند به خصوص اگر خریدی بخواهد اتفاق بیفتد. باید تمام آن چیزی که کاربر را به سمت خرید جذب می‌کند در یک قاب تعریف شود تا کاربر مجبور به بزرگ و کوچک کردن صفحات نشود.
  6. در نسخه‌های موبایل جستجو به صورت عمودی خواهد بود و اگر کمی صفحه وایدتر یا کشیده‌تر شود، چیدمان محتوا و تصاویر به درستی اتفاق نمی‌افتد، فضاهای کشیده و دِفرم ایجاد می‌شود گویی که یک عکس کش آمده باشد یا طراح خواسته به زور یک فضای خالی را پر کند.

 

برچسب ها : , ,

start campaign

کسب‌وکار خود را رشد دهید...

راه‌کارهای ای‎نتورک برای رشد کسب‌وکار شما

بیشتر بدانید

رامین جابری

من از دوره نوجوانی به حوزه تولید محتوا علاقمند شدم و با روی کار اومدن رسانه‌های اجتماعی، تصمیم گرفتم به صورت جدی در زمینه تولید محتوا در این رسانه‌ها، به فعالیت بپردازم. به شدت به مد، موسیقی بین ‌المللی، آشپزی مدرن و بازی‌های ویدئویی علاقه دارم و زمان فراغتم هم صرف همین موارد می‌کنم.

تبلیغات

۲ دیدگاه در رابطه با “طراحی واکنش‌گرا برای صفحات وب
  1. تیبا بلاگ
    ۲۱ آذر ۱۳۹۵ — ۱۵:۲۳

    ممنون از راه کارهایی که ارائه می کنید

  2. عرفان رحیمی (yadino.com)
    ۱۸ آذر ۱۳۹۶ — ۱۴:۱۵

    سلام و درود بر شما:

    طراحی ریسپانسیو صفحات وب یکی از مهم ترین المانهاییست که همه وبمستر ها باید به آن توجه ویژه داشته باشند دلیلش هم واضحه . بیشتر شدن آمار استفاده از دیواییس های همراه نسبت به دیوایس های ثابت

درباره این مطلب دیدگاهی بنویسید...

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز با * علامت‌گذاری شده‌اند.

عضویت در خبرنامه

ایمیل شما برای هیچ منظور دیگری استفاده نخواهد شد !

social.share

بهترین و بدترین زمان برای پست گذاشتن در شبکه‌های اجتماعی

بازاریابی شبکه‌های اجتماعی - ارسال شده در

info user twitter

اینفوگرافیک استفاده کاربران ایرانی از توییتر

بازاریابی شبکه‌های اجتماعی - ارسال شده در