طراحی سایت ریسپانسیو چیست و چگونه اجرا می شود؟

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

شاید چند سال قبل طراحی وبسایت ها فقط در یک حال پیاده سازی می شدند. زمانی که اکثرا مانیتور های اصطلاحا مربع قدیمی خود را داشتیم طراحی سایت ها بر اساس صفحه های نمایش با رزولوشن ۱۰۲۴ در ۷۶۸ انجام می شدند. اما با گذشت زمان و بروزرسانی مانیتور ها و پیشرفت تلفن های هوشمند و حضور تبلت ها این اتفاق تغییر کرد.

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

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

روش طراحی سایت ریسپانسیو

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

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

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

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

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {wrapper: 100%;}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {wrapper: 100%;}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {wrapper: 100%;}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {wrapper: 900px;}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {wrapper: 1100px;}

در مثال بالا در ۳ حالت اول عرض کلی سایت برابر با ۱۰۰% عرض نمایشگر است. در حالت های بعدی بسته به شرایط عرض را ۹۰۰ و ۱۱۰۰ پیکسل قرار دادیم. توجه کنید که مثال بالا فقط برای توضیح بهتر ذکر شده و بسته به توانایی شما در نوشتن کد های CSS می تواند بهینه تر شود.

تجربه شما در مواجه به سایت های غیر ریسپانسیو چطور بوده است؟