طراحی ریسپانسیو : یک وبسایت با دیدهایی نامحدود – بخش اول

درآمد از اینترنت
چطور می‌توان از بازاریابی اینترنتی به سود رسید؟
۲۸ آذر ۱۳۹۵
شبکه های اجتماعی و تحلیل آنها
۱۵ دی ۱۳۹۵
نمایش همه

طراحی ریسپانسیو : یک وبسایت با دیدهایی نامحدود – بخش اول

طراحی ریسپانسیو
Want create site? Find Free WordPress Themes and plugins.

از سال ۲۰۱۴ جهشی خیره کننده‌ در روند پیمایش سایت‌‌ها توسط موبایل نسبت به کامپیوتر‌های خانگی شکل گرفت. با فروش نزدیک به ۳۰۰ میلیون تبلت تنها در سال ۲۰۱۴ و افزایش فزاینده مشترکین گوشی‌های هوشمند، احتمالا شاهد رشد روز افزون بازدیدهای موبایلی و استفاده از طراحی ریسپانسیو در سراسر دنیا خواهیم بود. که امروزه بسیار مورد توجه شرکت‌های طراحی سایت قرار گرفته است.

نحوه‌ی استفاده و بهره وری از گوشی‌های هوشمند در حال تبدیل به سمت خدمات و محتوای آنلاین است. بیشترین سهم اتصال به محتوای آنلاین توسط موبایل دربین کشورهای اروپایی متعلق به انگلستان است؛ با میانگین ۳۲% ترافیک موبایلی. این بدان معناست که ما باید دیدمان را نسبت به موبایل تغییر دهیم یا اینکه در جایی دیگر بدنبال مشتریانمان باشیم. درواقع هدف اصلی ما موبایل نیست بلکه ابعاد صفحات نمایش آن‌هاست.

 

افزایش تعداد انواع صفحات نمایش

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

زمانی که بازدید از سایت شما توسط دستگاه‌های محدودی صورت گیرد مشکلی نیست اما نرخ بازدید برخی سایت‌‌ها توسط بیش از ۲۵۰۰ دستگاه مختلف در ماه می‌‌باشد. پس موضوع روشن است که سایت شما می‌‌بایست تعداد بیشماری از دستگاه‌‌ها را پشتیبانی کند(اعم از تبلت و موبایل). این موضوع در گرو طراحی رسپانسیو تحقق میابد.

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

نمای ریسپانسیو سایت

 

طراحی ریسپانسیو

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

آیا همانطور که یک وب سایت خوب طراحی شده، در دستگاه‌های مختلف‌هم به همان خوبی نمایش داده می‌‌شود؟

یک طراحی واکنشگرا شامل شبکه بندی صفحه، تغییر سایز و تغییر موقعیت تصاویر و متون، جابجایی در سایت و … می‌‌شود که تمام این موارد بر اساس رزولوشن دستگاه‌های بازدید کننده سایتتان تنظیم می‌‌شوند.
یک راه ساده برای تست ریسپانسیو سایت، تغییر اندازه مرورگرتان است؛به تازگی مرورگر Chrome در نسخه ۵۵ خود ابزار مناسبی برای اینکار در نظر گرفته. شما می‌‌توانید با کلیک راست بر روی یک وب سایت و انتخاب گزینه Inspect سپس انتخاب آیکون موبایل شکل به نام Toggle Device Toolbar ، وب سایت مورد نظرتان را در ابعاد مختلف تست کنید.

toggle-device-toolbar

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

دیگر مزایای طراحی ریسپانسیو

تجربه کاربری: لذت بردن کاربران از پیمایش و گشت وگزار در سایت شما وابستگی مستقیمی با طراحی ریسپانسیو دارد.

توازن: توسط طراحی رسپانسیو است که شما مانع سردرگمی کاربرانتان می‌‌شوید و بازدید نسخه موبایلی و غیر موبایلی را در سطح یکسانی نگه خواهید داشت.

بهینه سازی برای موتورهای جستجو ( سئو ) : توصیه موتور جستجوی گوگل ریسپانسیو ساختن وب سایت جهت بهینه سازی برای موبایل‌‌ها و روبات‌های پیمایشگر است.

لینک سازی: وب سایت‌های ریسپانسیو لینک‌های بیشتری را به صفحات اصلی ما می‌‌کشاند. این سایت‌‌ها تنها یک لینک برای هر برگه در نظر می‌‌گیرند پس متمرکز کردن لینک‌‌ها به هر برگه مهمتر از ساخت چندین لینک جهت دسترسی به برگه هاست.

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

در بخش دوم این مقاله مسائل زمانبندی مطرح می‌‌شود و در نهایت یک جمع‌بندی کلی ارائه خواهد شد.

Did you find apk for android? You can find new Free Android Games and apps.
محمدرضا
محمدرضا
علاقه‌مند به حوزه طراحی سایت هستم و حرفایی هم توی PES 2016 دارم برای گفتن :)

پاسخ دهید

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