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

طراحی واکنشگرا یا ریسپانسیو وب سایتتقریبا امروزه تمام مشتریان پس از اتمام طراحی سایتشان، یک نسخه موبایل هم از سایت طراحی شده توسط ما (گروه نرم افزاری i-dev) می خواهند. پس باید درست همان زمان که درگیر طراحی وب سایت هستیم به فکر نسخه ای از آن در آی فون iPhone، تبلت Tablet و موبایل Mobile باشیم؛ به گونه ای که رزولوشن Resolution همه این دستگاه ها با یکدیگر هماهنگ باشد و به هم ریختگی نمایش عکس و متن نداشته باشد. قطعا در پنج سال آینده تعداد این ابزارها نیز بیشتر خواهد شد پس حساسیت در هماهنگی رزولوشن ها باید خیلی بیش از پیش باشد.در آینده ای نه چندان دور به نقطه ای از طراحی و توسعه در وب سایت خواهیم رسید که نمی توان با ابزارها و رزولوشن های جدید همگام شد، زیرا سرعت رشد وسایل بیشتر از سرعت پیشرفت علم در توسعه سایت هاست. قاعدتا برای طراحان سایت، ساخت یک وب سایت برای هر ابزار با رزولوشن خاص خود اگر غیر ممکن نباشد عملی هم نیست. پس آیا باید تعدادی از کاربران سایت بر روی یک ابزار خاص را برای بدست آوردن کاربران دیگر بر روی ابزار دیگری از دست بدهیم؟ گزینه دیگری پیش رو نداریم؟ آیا می توان کاربران را محدود به استفاده از یک وسیله خاص مثلا لپ تاپ کنیم؟طراحی وب سایت واکنش گرا یا ریسپانسیو، روشی است که در آن طراحی باید به گونه ای باشد که سایت بدون هیچ مشکل و به هم ریختگی چه از لحاظ رزولوشن و چه پلتفرم و یا سایر موارد به نمایش درآید. برای رسیدن به چنین سایتی به ترکیبی از گرید، قالب ها و تصاویر و همچنین استفاده هوشمندانه از کوئری های مدیای CSS نیاز داریم. به محض اینکه کاربر کامپیوتر شخصی خود را با یک آی پد عوض کرد، سایت نیز باید به طور خودکار با سایز تصاویر، رزولوشن و توانایی های اسکریپت کردن دستگاه جدید خود را تطبیق دهد. به عبارت دیگر، وب سایت می بایست دارای این تکنولوژی باشد که بتواند به تنظیمات مربوط به هر کاربر و هر نوع دستگاه پاسخ (Respond) بدهد. با همچین روشی دیگر نیاز نیست که برای هر نوع گجتی که در بازار وجود دارد یک وب سایت اختصاصی طراحی کرد.طراحی وب سایت به سبک ریسپانسیو responsive web designروش های طراحی وب سایت RESPONSIVEبه کارگیری ترکیبی از کوئری های CSS و افکت های حرکتیشما در طراحی یک سایت واکنش گرا (Responsive) بایستی جهت انطباق وب سایت با عرض مرورگر از کوئری های مدیا استفاده کنید، و مدام سایز مرورگر را تغییر دهید تا واکنش سایت را مشاهده و بررسی کنید، اما هر زمان که یک کوئری وارد عمل و پیاده سازی می شود، استایل اول و دوم یک پرش فاحش دارد. بنابراین چرا از افکت های حرکتی CSS جهت جلوگیری از این پرش ها استفاده نکنیم؟ با بهره گیری از چنین افکت هایی تغییرات به صورت انیمیشنی انجام خواهند شد.منوی کشویی (DROP DOWN MENU)یکی دیگر از تکنیک ها در رابطه با طراحی ریسپانسیو، دراپ داون یا همان کشویی کردن یک منوی ساده و عادی است زمانی که پنجره مرورگر باریک و کوچک می شود. وقتی کاربر سایت با وسیله ای کار می کند که صفحه باریکی دارد، نوار منو به شکل drop-down در می آید و با منویی روبرو می شوند که اگر قرار بود به شکل قبلی باشد بسیار ناهماهنگ و زشت می بود و کار کردن با آن بسی دشوار، اما حالا انتخاب گزینه بسیار راحت تر است.بهتر است وب سایت ها طوری طراحی شوند که نحوه نمایش آنها در تلفن های همراه مانند نمایش در کامپیوترهای خانگی باشد، به طور مثال زمانی که لیست عمودی است لینک ها در بالای منو کاربردی تر از زمانی هستند که بصورت افقی نمایش داده می شوند. این نوع جزییات توسط طراحی ریسپانسیو پشتیبانی می شود.اگر زمانی در یک سایت ۱۰ تصویر کوچک عرضی به زیبایی در کنار یکدیگر در صفحه مانیتور نمایش داده می شوند، همین تصاویر هنگامی که در یک iPad یا iPhone نمایش دهده شوند شکل بدی به خود می گیرند و ممکن است به هم بریزند. با استفاده از طراحی واکنش گرا می توانید این موضوع را حل کنید بدین صورت که چنانچه عرض صفحه نمایش دستگاه به کوچکی iPad باشد فقط ۷ عکس را در کنار هم نمایش دهد و به همین شکل برای iPhone که ۴ عکس در کنار هم نمایش دهده می شوند.