اهمیت طراحی به صورت ریسپانسیو بر کسی پوشیده نیست لذا در این مقاله به تعریف ریسپانسیو بودن سایت می پردازیم. Responsive به معنای پاسخگو یا واکنشگرا است و این مفهوم در طراحی وب سایت به این معناست که کاربر با هر دیوایس یا ابزاری که یک وب سایت را مشاهده می کند، بر اساس این ابزار وب سایت، خود را بصورت مرتب نمایش می دهد.
طراحی responsive به وب سایت واکنشگرا به ابزار های مختلف مانند موبایل، تبلت و کامپیوتر رومیزی گفته می شود. حال اگر کسب وکار شما به هرمیزانی به وب‌سایتتان وابسته باشد و تا به حال به یک طراحی وب واکنشگرا (ریسپانسیو موبایل) روی نیاورده‌اید، شما امروزه، در معرض از دست دادن بخشی یا تمام کسب‌وکار خود قرار دارید.که در سایت ما https://idehweb.com/به جنبه ی ریسپانسیو بودن نیز توجه شده است.
با توجه به این نکته که وب گردی (web browsing) به وسیله موبایل و تبلت، در سال‌های اخیر گسترش فراوانی پیدا کرده است، لازم است تا هنگام طراحی سایت، به موضوع ریسپانسیو بودن آن توجه کافی شود. طبق آمار بیش از نیمی از ورودی وب سایت‌ها از طریق گوشی‌های تلفن همراه و تبلت‌هاست. از این رو لازم است تا طراحی سایت شما پاسخگوی نیاز کاربرانی با انواع ابزارها و نمایشگرها باشد؛ در غیر این صورت تعداد زیادی از بازدیدکنندگان را از دست خواهید داد.
طراحی سایت های معمولی و غیر ریسپانسیو، دلیل بر عدم نمایش سایت ها در دستگاه های مختلف نیست، بلکه سایت هم در کامپیوتر و هم در دستگاه های دیجیتال سیار نمایش داده می شود اما ممکن است برای دیدن بخشی از سایت مجبور به zoom کردن روی آن و یا طی کردن اسکرول شویم.
برای ساخت صفحات ریسپانسیو احتیاج به داشتن پیش زمینه هایی در مورد css3 وhtml5 و JavaScript و استفاده از مدیا کوئریها دارید، همچنین شما نیازمند به استفاده از کامپوننت ها و فریم ورک های خاصی خواهید داشت، مانند استفاده از فریم ورک های bootstrap ،Foundation ،Skeleton ،YAML و…
طراحی ریسپانسیو چیست؟
طراحی ریسپانسیو یک روش یا رویکرد است که طراح بر مبنای آن صفحه را به نحوی طراحی میکند که با دستگاهی که در آن نمایش داده میشود تطبیق پیدا میکند. در این روش، طراحی و توسعه به گونه‌ای انجام میگیرد که بهترین تجربه برای کاربران دستگاه‌های مختلف رقم زده شود.
در طراحی ریسپانسیو از ترکیبی از تصاویر، گریدها (Grid) و طرح‌های انعطاف‌پذیر در کنار کاربرد منطقی و زیرکانه CSS استفاده میشود. در این حالت با تغییر محیط کاربری از وضعیت لپ‌تاپ به گوشی هوشمند، وبسایت به سرعت با اندازه و رزولوشن صفحه و همچنین میزان پشتیبانی دستگاه مورد نظر از اسکریپت‌های مختلف تطبیق پیدا میکند. طبیعتاً فناوری لازم برای واکنش خودکار به درخواست کاربر باید در سایت و مرورگر کاربر وجود داشته باشد. در نهایت، از طریق این روش نیاز به طراحی و توسعه مجزا برای دستگاه‌های مختلفی که در بازار وجود دارند یا در آینده عرضه خواهند شد مرتفع میشود.
ویژگی اصلی طراحی ریسپانسیو
برای اینکه یک طراحی وب “پاسخگو” تلقی شود، باید دارای سه ویژگی اصلی باشد.
آقای “Ethan Marcotte” طراح و توسعه دهنده وب و نویسنده کتاب “طراحی وب پاسخگو”، این سه ویژگی را اینگونه بیان می کند :
- سایت باید بر پایه گریدهای انعطاف پذیر ساخته شده باشد. (یعنی کادرهائی در نظر بگیریم و المان ها در داخل انها گنجانده شوند. این کادرها و المان های درون شان، خودشان را با سایز هر مانیتوری وفق می دهند. container در بوتستراپ)
- تصاویری که در طرح قرار می گیرند نیز باید انعطاف پذیر باشند. (تصاویر وقتی در گریدها قرار بگیرند، ریسپانسیو می شوند. کلاس های img-fluid و img-responsive در بوتستراپ نیز برای واکنش گرایی تصاویر استفاده می شوند)
- نماهای مختلف در دستگاه ها و شرایط مختلف، از طریق Media Query ها فعال شود. (استایل های CSS و Media Query ها)
چگونه سایت‌های ریسپانسیو را شناسایی کنیم؟
برای این که متوجه شوید سایتی، ریسپانسیو است یا خیر، میتوانید صفحه مرورگر خود را کوچک یا بزرگ کنید. در این صورت اگر سایت مورد نظر، واکنشگرا باشد، اندازه تصاویر و اجزاء صفحه مورد نظر تغییر میکند و در عین حال هیچ تغییری در خوانایی مطالب و لینک‌ها به وجود نخواهد آمد. همچنین به اسکرول افقی نیازی نیست. اما در سایت‌های غیرریسپانسیو، حتماً باید به سراغ اسکرول افقی بروید تا بتوانید قسمت‌های دیگر صفحه که با بزرگ کردن آن، پنهان شده‌اند، مشاهده کنید.
سایزهای استاندارد طراحی سایت ریسپانسیو
ابعاد طراحی سایت موبایل
320*480 پیکسل
360*640 پیکسل
ابعاد طراحی سایت تبلت و دسکتاپ
1024*768 پیکسل
ابعاد طراحی سایت دسکتاپ
800*1280 پیکسل
980*1280 پیکسل
1280*600 پیکسل
1290*900 پیکسل
تاثیر طراحی سایت ریسپانسیو در سئو چیست؟
سایتی که به صورت ریسپانسیو طراحی شده باشد توجه کاربران را به خود جلب میکند و میتوان گفت کاربرپسند میباشد.گوگل هم دقیقا به دنبال سایت هایی میباشد که به کاربران اینترنتی احترام میگذارد و به دنبال رضایت کاربر میباشد.گوگل به چنین سایت های کاربر پسند که سئو و بهینه سازی را رعایت کرده اند رتبه میدهد و جایگاه مناسبی نیز به این سایت ها تعلق میگیرد اگر میخواهید رتبه بهتری از گوگل کسب نمائید بهتر است برای طراحی سایت از این تکنولوژی استفاده کنید.
آیا وبسایت من ریسپانسیو است؟
سوال بسیار خوبی است. برای اینکه چک کنیم که آیا وبسایت‌مان طبق اصول طراحی وب واکنش گرا یا ریسپانسیو طراحی شده است یا خیر، یک تست بسیار ساده دارد.
وبسایت‌مان را در یک مرورگر اینترنتی مثل گوگل کروم باز میکنیم و اقدام میکنیم به کوچک کردن سایز صفحه مرورگرمان. با اینکار شبیه سازی میکنیم که اگر یک کاربر سایت ما را با موبایل خود باز کرد، با چه صحنه‌ای مواجه میشود. در واقع با کوچک کردن اندازه‌ی مرورگر، اندازه‌ی صفحه‌ی نمایش کاربر را بصورت نمایشی کوچک میکنیم. همین تست را میتوانید روی تلفن همراه‌تان نیز انجام دهید. یک سایت را باز کنید و ببنید که واکنش گرا هست یا خیر.
مزیت‌های طراحی سایت ریسپانسیو چیست؟
- همیشه در دسترس هستید
- صرفه جویی در زمان و هزینه پروژه طراحی سایت
- کاربرانتان لذت می‌برند
- تعداد زیادی از مخاطبین به سوی شما خواهند آمد
- افزایش ترافیک سایت
- انعطاف‌پذیری وبسایت
- تاثیرگذاری قابل توجه در رتبه سایت
- جلوگیری از ایجاد محتوای تکراری (Duplicate Content)
دیدگاهتان را بنویسید