راهنمای طراحی رسپانسیو وب سایت در سال 2015

طراحی رسپانسیو مبحث پیچیده ای نیست و به روش های زیادی می تواند پیاده سازی شود. در این مقاله راهنمای طراحی وب سایت رسپانسیو در سال 2015 شرح داده شده است.

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

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

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

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

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

img { max –width:100%;}

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

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

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

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