راهنمای طراحی وب سایت واکنش گرا

1447 بار
جمعه, 19 تیر 1394 ساعت 19:47
ارزیابی شما
(5 رای)
راهنمای طراحی وب سایت واکنش گرا - 4.0 out of 5 based on 5 votes

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

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

اگر به دنبال دلیلی متقاعد کننده برای اولویت طراحی واکنش گرا در سال  2015 هستید، ابزار Google analytics میتواند ابزار مفیدی برای درک این مطلب باشد. با ثبت کردن وب سایت در برنامه های آنالیز، به راحتی می توانید با انتخاب "audience"و  "mobile"تعداد بازدید کنندگانی  که از طریق موبایل به وب سایت دسترسی پیدا می کنند را متوجه شوید. با توجه به آمار فروش تلفن همراه در جهان، بازدید کنندگان وب سایت از طریق موبایل بیش از تصور خواهد بود.

برای حرکت به سوی طراحی واکنش گرا دو روش اصلی وجود دارد. ایجاد وب سایت قابل انعطاف با مجموعه ای از طرح ها با عرض ثابت برای دستگاه های متداول، و یا استفاده از طرح های مشبک شناور که به موجب آن وب سایت با دستگاه های متفاوت هماهنگ شود. در هر روش معایب و مزایائی وجود دارد که پیش از شروع کار می بایست به خوبی سبک و سنگین شوند. از از مزایای روش اول این است که شما به عنوان طراح سایت می توانید کنترل بیشتری روی ظاهر وب سایت نمایشگرهائی با اندازه های مختلف داشته باشید. اگرچه در این روش وبسایت شما قادر نیست به تغییر سایز مرور گر واکنش نشان دهد. اگر زمانی مجبور باشید دو پنجره را به طور همزمان باز کنید؛ متوجه ایراد کار خواهید شد و به سوی روش دوم خواهید شتافت. در روش دوم یا همان لی-اوت های مشبک شناور، به جای تغییر رفتار برطبق پیکسل ها، بر اساس بخش ها عمل می شود. بدین گونه که محتوا متناسب با اندازه ی مرورگر تغییر می کند و با توجه به سایز دستگاه های تلفن همراه قابل انعطاف است. محتوای وب به عنوان درصدی از مرورگر یا صفحه نمایش تعریف شده است و با تغییر سایز پنجره، محتوا درصد اختصاص داده شده با مرورگر هماهنگ می شود. این درصد می تواند با یک الگوریتم ساده محاسبه شود: مجموع پیکسل ها تقسیم بر  پیکسل های محتوا = درصد

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

برای اطمینان از اینکه تمامی اجزای وب سایت شما واکنش گراست، می بایست در ارتباط با تصاویر نیز فکری کنید. تصاویر شناور می توانند متناسب با ساختار مشبک شناور تغییر سایز دهند. این کار به راحتی با کرهای CSSانجام می شود:

img { max –width:100%;}

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

در سال 2015، "موبایل-محور" بودن یک وب سایت، نکته ای است که همواره توصیه می شود.   این یک روش است که طراحان وب سایت بر روی تلفن های همراه هوشمند آزمایش کردند و سپس آن را بر روی مقیاس بزرگتری از دستگاه ها گسترش دادند. دلیل این امر افزایش جستجو از طریق موبایل نسبت به جستجوی نت از طریق دستگاه های دیگر است. این نکته مخاطبان هدف را مشخص می کنند. گوشی های هوشمند توانایی بیشتری نسبت به مدل های ماقبل یعنی دسکتاپ ها دارند، از این رو شما می توانید طراحی برای صفحه نمایش های لمسی را در اولویت قرار دهید. صفحه نمایش تلفن های هوشمند تنها قادرند هسته اصلی وب سایت را نمایش دهند، نه نوارهای کناری و نه تبلیغات و نه گزینه های مربوط به شبکه های اجتماعی! از این رو بهتر است از نمونه های ساده تر اغاز کنید و با نحوه کار آشنا شوید.

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

اگر به الگوریتم ها تسلط ندارید، نیازی به نگرانی نیست! فریم ورک های سمت کاربر از جمله Foundation و Bootstrap را می توان برای ایجاد یک وب سایت واکنش گرا به خدمت گرفت.

منبع : business2community.com

اگر شما در مورد این مطلب نظری دارید در اینجا بنویسید

برای ارسال پیام پر کردن فیلدهای نام، ایمیل و پیام شما الزامی اند.

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