طراحی ریسپانسیو یا Reponsive Web Design(RWD) مجموعه تکنیک های مورد استفاده برای توسعه وب سایت است که موجب می شود صفحات سایت با دستگاههای مختلف سازگار شود . بسته به اندازه صفحه نمایش، وضوح و تغییر اندازه متناسب با آن دستگاه می شود. این دستگاهها از گوشی موبایل تا تلویزیون های اینترنتی متنوع هستند.
نام دیگری که برای توصیف آن بکار می رود ” Adaptive Web Design” یا طراحی واکنشگرا می باشد. که به تکنیک های مورد استفاده در طراحی وب سایت اشاره دارد تا بتواند نمایش صفحه سایت را در نمایشگرهای مختلف سازگار کند.
تکنیک های طراحی ریسپانسیو
3 روش معمول برای طراحی یک سایت ریسپانسیو وجود دارد:
1- چیدمان شبکه ای شناور (Fluid Grid Layout)
2- تصاویر و ویدئوهای انعطاف پذیر (Flexible Media and Images)
3- مدیا کوئری در css برای وضوح صفحه نمایش (Media Query and Screen Resolution)
1- چیدمان شبکه شناور
یک وب سایت به طور کلی با استفاده از جداول HTML یا div بصورت شبکه ای ساخته می شود. طراحی ریسپانسیو بر روی طرح شبکه وب اعمال می شود تا با تعیین ابعاد درصدی نسبت به شبکه صفحه سایت، بتواند براحتی در همه دستگاهها بخوبی مشاهده شود.
به عنوان مثال اگر وب سایت شما مطابق شکل یک عنوان، یک منو و یک قسمت محتوا با عرض 1024 پیکسل داشته باشد.
اگر عرض سه قسمت به عنوان عدد ثابت مشخص شود، نمای وب سایت در تمام دستگاهها ثابت می باشد. که این امر موجه می شود در دستگاههای کوچک مثل موبایل بسیار بزرگ باشد و در دستگاههای بزرگ نیز بسیار کوچ نمایش داده شود. به شکل زیر نگاه کنید:
بنابراین با استفاده از تکنیک Fluid Grid Layout ابعاد صفحه مورد نظر متناسب با حداکثر اندازه صفحه تنظیم می شود. برای این منظور بایستی عرض هر یک از اجزای صفحه را مطابق تصویر زیر به صورت درصدی از عرض کل صفحه محاسبه نماییم.
بخشی از کد آن مطابق زیر می باشد:
2- تصاویر و ویدئوهای انعطاف پذیر
در این روش، تصاویر یا رسانه های یک صفحه وب با توجه به اندازه یا وضوح نمایش فعلی، به طور خودکار تغییر اندازه می دهند. این کار را می توان با استفاده از ابعاد نسبی مانند بخش قبلی، برش قسمت های اضافی تصویر در اندازه صفحه کوچکتر یا حتی با پنهان کردن کامل یک تصویر انجام داد.
با استفاده از ابعاد نسبی، مشابه روش قبلی ابعاد نسبی به جای استفاده از مقادیر ثابت، برای تصاویر یا رسانه ها بکار می رود.
به عنوان مثال هنگام نمایش یک تصویر در اندازه 512px ، بر روی صفحه نمایش 1024 پیکسلی، از یک عدد به عنوان درصد استفاده می شود. بنابراین اکنون اندازه آن براساس کل ابعاد صفحه گسترش یافته است یا آنقدر کوچک می شود تا دقیقا نیمی از صفحه را پر کند. مطابق تصویر زیر:
این کار را می توان فقط با تعیین عرض 50% از کل عرض صفحه نمایش قرار داد:
3- مدیا کوئری در css برای وضوح صفحه نمایش (Media Query and Screen Resolution)
این روش از قابلیت مدیا کوئری در CSS3 استفاه می کند. این روش از چندین نسخه ثابت از یک عنصر صفحه وب برای هر محدوده وضوح صفحه نمایش استفاده می کند.
نتیجه گیری:
از آنجا که دستگاه ها و فناوری های اینترنتی بسیار سریع در حال تغییر هستند، نیاز زیادی به انطباق مداوم طراحی ریسپانسیو با این تغییرات وجود دارد. در این مقاله تکنیک های مختلف برای دستیابی به طراحی ریسپانسیو بررسی شد.