در این مطلب می خوانیم:
طراحی سایت واکنش گرا چیست؟
طراحی سایت واکنش گرا یا سایت ریسپانسیو (responsive) سایتی است که با ابعاد و رزولوشن دستگاههای مختلف سازگاری دارد و کاربران بدون توجه به اینکه صفحه نمایش دستگاهشان کوچک باشد (مثل اکثر گوشی های هوشمند موبایل) یا نمایشگری متوسط(مثل لپ تاپ و تبلت) و یا نمایشگرهای بزرگ (کامپیوترهای رومیزی و ال سی دی های بزرگ)داشته باشند، میتوانند به راحتی سایت را بررسی کنند و دیگر نیازی نیست اندازه صفحه را تغییر دهند که سایت به صورت کامل دیده شود.
امروزه کاربران از نمایشگرهای مختلف در ابعاد بزرگ و کوچک برای دستیابی به صفحات اینترنت استفاده میکنند. بنابراین سایتی میتواند در فضای وب موفق باشد که بتواند به همه کاربران مراجعه کننده به سایت خدمات مناسب ارائه دهد و نمایش سایت به صورت کامل باشد .
حدود 50 درصد از کاربران از موبایل و تبلت برای مشاهده سایت ها استفاده میکنند و در صورتی که قالب سایت شما نمایش درستی در موبایل و تبلت نداشته باشد کاربران بسیاری را از دست خواهید داد. زیرا این دسته از کاربران پس از ورود به سایت شما در صورتی که نتوانند مطالب سایت شما را به راحتی مطالعه نمایند ممکن است سایت شما را بلافاصله ترک کنند و وارد سایت دیگری شوند که به درستی در دستگاه آنان نمایش داده شود. با توجه به مورد مطرح شده وجود سایت ریسپانسیو(واکنش گرا) برای سایت ها امری لازم و ضروری میباشد.
کلیه وب سایت هایی که در لایت کمپانی طراحی میشود، کاملا ریسپانسیو هستند و با تمامی نمایشگرهایی که میتوان سایت را مشاهده کرد، سازگاری دارند.
سرفصل مطالب زیر
-
چگونه سایت های ریسپانسیو را شناسایی کنیم ؟
-
تولد اولین سایت ریسپانسیو
-
ریسپانسیو بودن سایت در رتبه گوگل تاثیر دارد
-
سایزهای استاندارد در اصول طراحی سایت واکنش گرا
-
مزایای طراحی سایت واکنش گرا
-
اهمیت طراحی سایت ریسپانسیو چیست؟
چگونه سایت های ریسپانسیو را شناسایی کنیم ؟
تولد اولین سایت ریسپانسیو
اولین طراحی سایت ریسپانسیو متعلق به سایت خودروسازی آلمانی آئودی بود که در سال 2001 توسط یک تیم معماری اطلاعات خبره در razorfish انجام گرفت. این سایت علی‌رغم قابلیت‌های محدود مرورگر اینترنت اکسپلورر، توانست با این مرورگر به‌خوبی تعامل کند و صفحاتش را به‌صورت داینامیک تغییر سایز دهد؛ ولی، در مرورگر نت اسکیپ برای هر تغییر سایز باید صفحه یک‌بار از روی سرور لود می‌شد. کامرون آدامز در سال 2004 نیز شکلی جدید از طراحی سایت ریسپانسیو را ارائه کرد که برای توصیف طرح‌بندی آن از القابی نظیر طراحی شناور، طراحی مایع، طراحی انعطاف‌پذیر و الاستیکی استفاده می‌شد؛ اما، cssهای آماده برای طراحی سایت ریسپانسیو اولین بار در سال 2008 به‌وجود آمدند و سال 2010، اتان مارکوت در مقاله‌ای، نام این شیوه را طراحی ریسپانسیو گذاشت.
ریسپانسیو بودن سایت در رتبه گوگل تاثیر دارد
واکنش گرایی وب سایت شما میتواند یک تجربه بهتر برای کاربران ایجاد کند… اما قضیه به همینجا ختم نمی‌شود. بلکه علاوه بر این، ریسپانسیو بودن سایت باعث کسب رتبه‌های بهتری در گوگل هم میشود (یا اگر بخواهیم کمی تخصصی‌تر صحبت کنیم، در سئو شما هم تاثیرگذار خواهد بود.) اما چگونه؟
طبیعتاً گوگل می‌خواهد، هوای کاربران خود را داشته باشد؛ بنابراین تلاش میکند بهترین نتایج را به آنها نمایش دهد. پس کاملاً طبیعی است که وقتی کاربری با گوشی موبایل خود در گوگل جستجو کرد، اولویت را به سایت‌های ریسپانسیو بدهد؛ (در واقع، نتایج جستجو یک کلمه در کامپیوتر و موبایل معمولاً با هم متفاوت است.) این یعنی اگر سایت شما ریسپانسیو نباشد، خیلی سخت در نتایج موبایل میتوانید رتبه کسب کنید. بنابراین باید قید بسیاری از بازدیدکنندگان خود را بزنید. به‌خاطر همین می‌گوییم: اگر برایتان ورودی گرفتن از گوگل (سئو) مهم است، حتماً باید یک سایت ریسپانسیو داشته باشید.
سایزهای استاندارد در اصول طراحی سایت واکنش گرا
شما به عنوان یک برنامه نویس می توانید از سایزهای استاندارد در اصول طراحی سایت واکنش گرا که شامل موارد زیر می باشد، استفاده نمایید.
سایز رسپانسیو موبایل
- ۳۲۰ *۴۸۰ پیکسل
- ۳۶۰×۶۴۰ پیکسل ۴۱٫۱۱%
- ۳۷۵×۶۶۷ پیکسل ۹٫۵۸%
- ۷۲۰×۱۲۸۰ پیکسل ۵٫۱۶%
- ۳۲۰×۵۶۸ پیکسل ۴٫۵۵%
- ۴۱۴×۷۳۶ پیکسل ۳٫۷۹%
- ۳۲۰×۵۳۴ پیکسل ۳٫۴۶%
رسپانسیو تپلت
- ۷۶۸×۱۰۲۴ پیکسل ۵۷٫۹۹%
- ۱۲۸۰×۸۰۰ پیکسل ۵٫۸۹%
- ۶۰۰×۱۰۲۴ پیکسل ۴٫۶%
- ۶۰۱×۹۶۲ پیکسل ۳٫۰۲%
- ۸۰۰×۱۲۸۰ پیکسل ۲٫۹۴%
- ۱۰۲۴×۶۰۰ پیکسل ۲٫۳۶%
سایز رسپانسیو دسکتاپ
- ۱۳۶۶×۷۶۸ پیکسل ۲۹٫۲۵%
- ۱۹۲۰×۱۰۸۰ پیکسل ۱۷٫۳۴%
- ۱۴۴۰×۹۰۰ پیکسل ۷٫۳۲%
- ۱۶۰۰×۹۰۰ پیکسل ۵٫۷۲%
- ۱۲۸۰×۸۰۰ پیکسل ۵٫۲۷%
- ۱۲۸۰×۱۰۲۴ پیکسل ۴٫۵۱%
- ۹۸۰*۱۲۸۰ پیکسل
- ۱۲۸۰*۶۰۰ پیکسل
- ۱۲۹۰*۹۰۰ پیکسل
مزایای طراحی سایت واکنش گرا
- انعطاف پذیری هنگام بارگذاری صفحات با طول و عرض مختلف
- پشتیبانی از ابعاد مختلف گوشیهای هوشمند
- پشتیبانی از ابعاد مختلف تپلت
- پشتیبانی از ابعاد مختلف صفحه نمایش دسکتاپ
- پایین آوردن هزینه و زمان
- بالا بردن ترافیک سایت
اهمیت طراحی سایت ریسپانسیو چیست؟
بسیاری از مشتریانی که برای طراحی سایت یا فروشگاه اینترنتی با ما تماس می‌گیرند، در مورد ریسپانسیو بودن سایت‌ها می‌پرسند. گروه لایت کمپانی پاسخگوی تمامی سوالات شما خواهد بود.
همراهان گرامی برای آشنایی بیشتر با گروه تخصصی لایت کمپانی میتوانید نمونه کارهای طراحی سایت را مشاهده کنید. و یا ما را در اینستاگرام دنبال کنید.
