آموزش طراحی سایت responsive یا واکنش گرا

امروزه آمار استفاده از تبلت و تلفن همراه در کنار رایانه های شخصی شدیداً در حال افزایش است. به این ترتیب کاربران انتظار دارند وب سایت مورد علاقه شان ریسپانسیو باشد تا با اندازۀ صفحۀ نمایشگری که استفاده می کنند هماهنگ باشد.

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

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

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

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

در روش دوم یا همان Layout مشبک شناور، به جای تغییر رفتار بر اساس پیکسل ها، بر اساس بخش ها عمل خواهد شد. به این ترتیب، محتوای وب سایت متناسب با اندازۀ مرورگر تغییر می کند و با توجه به سایز دستگاه های تلفن همراه یا تبلت، قابل انعطاف است. محتوای وب سایت، به عنوان درصدی از صفحۀ نمایش یا مرورگر تعریف می شود. به این ترتیب با تغییر سایز پنجره، محتوا با مرورگر هماهنگر می شود. این درصد محتوا با یک الگوریتم ساده قابل محاسبه بود: مجموع پیکسل ها تقسیم بر پیکسل های محتوا = درصد

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

سایت واکنش گرا

برای اینکه مطمئن شوید که وب سایت شما و محتوای آن به کلی واکنش گرا هستند، باید برای تصاویر وب سایت خود نیز چاره ای بیاندیشید. تصاویر شناور می توانند با ساختار مشبک تغییر اندازه دهند. این راه حل به راحتی با کدهای CSS امکان پذیر است:

img { max –width:100%;}

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

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

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

شاید این سوال پیش بیاید که اگر طراحی وب سایت را از گزینۀ "موبایل-محور" شروع کنیم، احتمالا به یک معادلۀ اپلیکیشن موبایل نیز نیاز خواهیم داشت. ما در پرتال، پیشنهاد می کنیم که وب سایت خود را به صورت واکنش گرا طراحی کنید تا با استانداردهای فعلی جهانی مطابقت داشته باشد. با رقابت سختی که در بین سیستم عامل های Android و iOS وجود دارد، دنیای اپلیکیشن ها را می توان ناپایدار دانست. داشتن وب سایتی ریسپانسیو تضمین می کند همۀ افرادی که با دستگاه های مختلف به اینترنت دسترسی دارند، می توانند از وب سایت شما بازدید کنند. با استفاد از فریم ورک های Foundation و Bootstrap می توانید به راحتی وب سایتی واکنش گرا ایجاد نمایید.

برای دسترسی به مقالات بیشتر می توانیدبه بخش مقالات لیو سایت ساز مراجعه نمایید.

دیدگاهای بازدیدکنندگان

admin 14 شهریور 1395 13:17

نرم افزار PHP از نظر امنیتی و کاربری بهتره وبا موتور های جستجو سازگار تر نرم افزار ورد پرس جایگاهشو از دست داده دیگه

sara beheshti 14 شهریور 1395 13:15

از وردپرس استفاده نمی کنین؟
این نرم افزار بهتر نیست؟

admin 14 شهریور 1395 13:14

خواهش می کنم دوست عزیز.

admin 14 شهریور 1395 13:14

از نرم افزار PHP برای طراحی استفاده می کنیم.

کورش محمدی 14 شهریور 1395 13:13

مرسی مقاله ی کاملی بود.

sara beheshti 14 شهریور 1395 13:12

از چه زبان برنامه نویسی استفاده می کنین؟

admin 14 شهریور 1395 13:10

بله خانم کد نویسی لازمه

sara beheshti 14 شهریور 1395 12:58

طراحی ریسپانسیو نیاز به کدنویسی داره؟

دیدگاه خود را بنویسید

دیدگاه پس از تائید مدیریت منتشر می شود.
 
پابرگی سایت