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

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

چرا طراحی سایت واکنش گرا؟

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

اهمیت ریسپانسیو در سئو سایت

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

چگونه یک سایت ریسپانسیو طراحی کنیم؟

برای طراحی یک سایت واکنش گرا نیاز دارید تا زبان های HTML5، CSS3 و JavaScript و نحوه استفاده از مدیا کوئری را بدانید، البته روش های ساده تری هم برای اینکار وجود دارد، میتوانید از فریمورک های ریسپانسیو مانند: Bootstrap، Foundation و Skeleton هم استفاده کنید.

استفاده از مدیا کوئری

با استفاده از مدیاکوئری media query میتوانید مشخص کنید کنید که سایت در رزولوشن های مختلف چگونه نمایش داده شود. و برای هر رزولوشنی استایل های مختلفی تعریف کنید.

@media only screen and (max-width: 600px) {
    body {
        color: red;
    }
}

مثلا در تکه کد بالا مشخص کرده ایم که در رزولوشن های 600px یا کوچکتر از آن رنگ متن قرمز باشد. برای اینکار رزولوشن های استانداری وجود دارند که به شرح زیر هستند:

رزولوشن های استاندارد برای مدیا کوئری

• ابعاد موبایل : 320* 480 px و 360* 680 px
• ابعاد سایت تبلت و دستکتاپ : 768*1024 px

استفاده از متاتگ viewport

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

<meta name="viewport" content="width=device-width, initial-scale=1">

استفاده از bootsrap برای طراحی سایت ریسپانسیو

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

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