امروز دیگر همه ما با دنیای موبایل زندگی میکنیم. صبح که از خواب بیدار میشویم، اولین کاری که انجام میدهیم چک کردن گوشیمان است و اگر بخواهیم اطلاعاتی جستوجو کنیم، راحتترین راه همین موبایلی است که کنارمان قرار دارد. حالا تصور کنید وارد یک سایت میشوید، اما نوشتهها آنقدر ریز هستند که نمیتوانید بخوانید، دکمهها روی هم افتادهاند و باید هر بار زوم کنید تا بتوانید چیزی ببینید. همان لحظه سایت را میبندید و به دنبال جای دیگری میگردید. این دقیقا همان چیزی است که طراحی ریسپانسیو میخواهد از آن جلوگیری کند. ریسپانسیو یعنی چه؟ یعنی طراحی سایت شما به شکلی است که در هر دستگاهی که کاربر باز کند، درست و زیبا نمایش داده شود. در این مقاله از وبکده قصد داریم با هم ببینیم که ریسپانسیو بودن سایت چیست، چرا اینقدر مهم است و چطور میتوانیم سایت خودمان را برای همه دستگاهها آماده کنیم.
پاسخگوی دستگاههای موبایل باشید
طراحی سایت ریسپانسیو یا RWD رویکردی در توسعه سایتهاست که باعث ایجاد تغییرات پویا در ظاهرشان میشود. این تغییرات بر اساس سایز صفحه و با هدف نمایش درست صفحه روی نمایشگر، در استایل سایت اعمال میشوند. به زبان ساده، طراحی ریسپانسیو باعث میشود که صفحات سایت شما در هر نوع دستگاهی اعم از گوشی، تبلت و کامپیوتر و در دو جهت افقی و عمودی نمایش درستی داشته باشد، بدون اینکه بخواهید برای سایزهای مختلف صفحات نمایش دیوایسهای متفاوت، یک صفحه جدا طراحی کنید.
روند طراحی ریسپانسیو به این صورت است که باید ابتدا مشخص کنیم که سایت در چه سایزهایی از صفحه باید تغییر شکل دهد. به این سایزها، نقطه شکست یا breakpoint گفته میشود. زمانیکه مرورگر را با کمک ماوس کوچکتر میکنید، صفحه از یک جایی به بعد شروع به تغییر شکل میدهد و ستونهای صفحه به هم میریزند؛ این نقطه دقیقا همان breakpoint است. در طراحی ریسپانسیو شما چندین نقطه شکست خواهید داشت که هر کدام برای یک صفحه نمایش مناسب است. به طور معمول دستوری که در css برای پیادهسازی طراحی ریسپانسیو استفاده میشود، Media queries است که با کمک آن میتوانید استایلهای مختلف را بر اساس سایز، جهت یا… به سایت خود اعمال کنید.
تولد اولین سایت ریسپانسیو
![تولد اولین سایت ریسپانسیو]()
اولین طراحی سایت ریسپانسیو متعلق به سایت خودروسازی آلمانی آئودی بود که در سال 2001 توسط یک تیم معماری اطلاعات خبره در razorfish انجام گرفت. این سایت علیرغم قابلیتهای محدود مرورگر اینترنت اکسپلورر، توانست با این مرورگر بهخوبی تعامل کند و صفحاتش را بهصورت داینامیک تغییر سایز دهد؛ ولی، در مرورگر نت اسکیپ برای هر تغییر سایز باید صفحه یکبار از روی سرور لود میشد. کامرون آدامز در سال 2004 نیز شکلی جدید از طراحی سایت ریسپانسیو را ارائه کرد که برای توصیف طرحبندی آن از القابی نظیر طراحی شناور، طراحی مایع، طراحی انعطافپذیر و الاستیکی استفاده میشد؛ اما، cssهای آماده برای طراحی سایت ریسپانسیو اولین بار در سال 2008 بهوجود آمدند و سال 2010، اتان مارکوت در مقالهای، نام این شیوه را طراحی ریسپانسیو گذاشت.
بیشتر بخوانید: 5 نکته کلیدی برای طراحی بصری وب سایت
سایتی از جنس ریسپانسیو
امروزه تقریبا 63 درصد از افراد بهجای استفاده از کامپیوتر، از موبایل برای بازدید سایتها استفاده میکنند و طبق آمار 38 درصد مردم هرگز دوست ندارند از سایتهای غیرریسپانسیو در موبایل استفاده کنند. از آنجا که ریسپانسیو کردن سایت تاثیر زیادی روی بهبود نمایش صفحات دارد، این کار باعث میشود که کاربران تجربه مثبتی از حضور در سایت شما داشته باشند. این مسئله به افزایش رتبه سایت در گوگل خیلی کمک میکند؛ چون، نرخ بازدید سایت و زمان حضور کاربران را افزایش میدهد. طراحی موثر یک سایت ریسپانسیو باید ویژگیهای زیر را داشته باشد تا باعث بهبود رابط کاربری و سئوی سایت شود:
- سازگاری: در صورتی سایت ریسپانسیو نمایش بهتری خواهد داشت که در تمام دستگاهها و با هر اندازهای بهدرستی نمایش داده شود و کاربر بتواند بهراحتی به بخشهای مختلف سایت، مثل منو، اطلاعات تماس و محتواهای کلیدی دسترسی پیدا کند.
- پشتیبانی از تمام مرورگرها: همانطور که میدانید یکی از مهمترین ویژگیهای وبسایتهای ریسپانسیو، سازگاری با تمام موتورهای جستوجو است؛ ولی، مهمتر از آن قابلیت دسترسی و نمایش صفحات سایت در تمامی دیوایسهاست که برای این امر شما نیاز دارید سایت را طوری طراحی کنید که همه مرورگرها آن را بشناسند.
- بهبود سئوی سایت: یک سایت غیرریسپانسیو، برای نسخه موبایل باید یک سایت موبایلی طراحی کند و لینک آن را برای نسخههای موبایل قرار دهد. این مسئله باعث میشود که عملکرد سایت در موتور جستوجو ضعیف شناسایی شود و روی سئو تاثیر بسیار بدی بگذارد. از سوی دیگر، اگر ریسپانسیو سایت چیست را ندانید و سایتتان در موبایل و تبلت نمایش خوبی نداشته باشد، کاربر سریعاً آن را ترک میکند؛ بنابراین، میتوان گفت یکی از ویژگیهای کلیدی طراحی سایت ریسپانسیو، بهبود تعامل خواهد بود.
- هزینههای کمتر طراحی و نگهداری سایت: شما میتوانید بهجای طراحی چندین نسخه از سایت برای دستگاههای مختلف، یک نسخه ریسپانسیو طراحی کنید تا هم هزینههای طراحی را به حداقل برسانید و هم نقصهای پنهان را به مرور اصلاح کنید.
- افزایش ترافیک و نرخ تبدیل: بسیاری از افراد بیشتر کارهای اینترنتی خود را از طریق موبایل انجام میدهند. داشتن نسخه موبایل سایت میتواند باعث جذب بیشتر مخاطب و در نتیجه افزایش نرخ تبدیل سایت شما شود.
ریسپانسیو بودن سایت از نان شب واجبتر است
![]()
اگر هنوز هم متقاعد نشدهاید که چرا باید برای موفقیت کسبوکارتان، طراحی سایت ریسپانسیو انجام دهید، باید بگوییم این کار بنا به دلایل زیر بسیار اهمیت دارد:
- گوگل به شما پیشنهاد میکند که طراحی سایت ریسپانسیو انجام دهید تا علاوه بر نمایش درست در دستگاهها، سایتتان بهینه شده و تروتمیز باشد.
- با طراحی سایت ریسپانسیو یک وبسایت برای تمامی دستگاهها طراحی میکنید و نیازی نیست کار اضافهتری برای نسخههای موبایل انجام دهید.
- داشتن دو سایت برای نسخههای دسکتاپ و موبایل، نیاز به داشتن دو نسخه جداگانه از ابزارهایی نظیر گوگل آنالیتیکس و گوگل ادوردز دارد؛ ولی، اگر بدانید که ریسپانسیو یعنی چی، متوجه میشوید که این روش باعث میشود سایتتان را خیلی راحتتر مدیریت کنید.
- اگر سایت شما در موبایل تجربه کاربری خوبی نداشته باشد و کاربر نتواند آنچه میخواهد را پیدا کند، به احتمال 61 درصد سایت را ترک خواهد کرد.
- در جستوجوی موبایل، گوگل سایتهای ریسپانسیو را بالاتر از سایتهای غیرریسپانسیو نشان میدهد.
بیشتر بخوانید: تکنیک های بهبود تجربه کاربری (UX)
نقاط ضعف سایتهای ریسپانسیو
طراحی سایت ریسپانسیو ممکن است مشکلاتی هم به همراه داشته باشد؛ مثلاً:
- کاهش سرعت لود: برای ریسپانسیو بودن یک سایت از کدهای css روی html5 استفاده شده که این مسئله باعث میشود که کل محتوای سایت در حالت ریسپانسیو هم لود شود؛ برای مثال، اگر در نسخه موبایل 60 درصد اطلاعات نمایش داده شود، 40 درصد دیگر نیز بهطور مخفی بارگزاری میشود که این مسئله ممکن است روی سرعت لود سایت در نسخه موبایل تاثیر منفی داشته باشد.
- ضعف در ارائه سرویسها: برخی از سرویسهای دیجیتال ممکن است در نسخههای موبایل توانایی اجرا شدن نداشته باشند و برای طراحی سایت ریسپانسیو نتوان از آنها استفاده کرد؛ یا اینکه در نسخه موبایل مجبور شویم آنها را حذف کنیم.
- عدم پشتیبانی مرورگرها: یکی از مشکلاتی که ممکن است در سایتهای ریسپانسیو رخ دهد این است که برخی از مرورگرها از html5 پشتیبانی نمیکنند و نمیتوانند سایتها را در قالب ریسپانسیو نمایش دهند.
با تست ریسپانسیو مو را از ماست بکشید
چندین روش برای اینکه بفهمید یک طراحی سایت ریسپانسیو بوده است یا خیر وجود دارد. در ادامه چهار راه رایج برای تست ریسپانسیو بودن را با هم بررسی میکنیم:
- بررسی بهصورت دستی: این روش سادهترین راه بررسی ریسپانسیو بودن یک سایت است. برای این کار کافی است مرورگر کامپیوتر را از حالت maximize خارج کرده و با دراگ کردن، عرض آن را کوچک کنید تا ببینید لیاوت سایت بهم میخورد یا خیر. در صورتی که نمایش سایت متناسب با سایز صفحه تغییر کند، یعنی این سایت ریسپانسیو است.
- بررسی با ابزارها: ابزارهای مختلفی وجود دارد که میتوانید با کمک آنها، رسپانسیو بودن سایت را بررسی کنید؛ مثلاً Emulators یا Responsinator.
- بررسی با استفاده از افزونههای مرورگر: در مرورگرهایی مثل کروم و فایرفاکس، افزونههای متعددی وجود دارد که با کمک آنها میتوان نمایش سایت را در سایز دستگاههای مختلف مشاهده کرد و ریسپانسیو بودن سایت مشخص میشود.
- بررسی بهوسیله inspect: شما میتوانید با راست کلیک روی صفحه مرورگرهای کروم یا فایرفاکس وارد پنجره inspect شده و روی سه نقطه سمت راست صفحه، گزینه اول را در قسمت dock side انتخاب کنید. با انتخاب این گزینه میتوانید مشاهده کنید که آیا سایت ریسپانسیو هست یا خیر.
موبایل گدون (Mobilegeddon)، در کمین سایت شما
در 26 فوریه 2015 گوگل با پیغامی همه متخصصان حوزه وب را غافلگیر کرد. در این پیام آمده بود که سایتهایی که ریسپانسیو نباشند، در نتایج گوگل رتبه خوبی کسب نمیکنند و این مسئله بسیاری از کسبوکارهای بزرگ و کوچک را به چالش کشید. نام این الگوریتم هم اشاره به همین پیشینه دارد و قسمت دوم آن یعنی گدون بهمعنای نبرد آخرالزمان است. در 21 آوریل همان سال گوگل لیستی سه بخشی از تاثیرات این بهروزرسانیها را اعلام کرد:
- این الگوریتم تنها روی رتبهبندی نتایج جستوجو در دستگاههای موبایل تاثیر میگذارد.
- این الگوریتم روی نتایج جستوجو در تمام زبانهای دنیا تاثیر میگذارد.
- این الگوریتم روی صفحات سایت اعمال میشود نه کل وبسایت.
ظهور این الگوریتم تنها یک بهروزرسانی برای گوگل محسوب نمیشد، بلکه تغییر فرهنگ و حرکتی رو به جلو برای موتور جستوجوی گوگل بود. گوگل وسواس خاصی نسبت به تجربه کاربری سایت و کارآمدی آن برای کاربران دارد و تاکیدش روی این مسئله نیز بیشتر بهعلت توجه او به رفتار سایتها در قبال کاربران موبایل بود.
بیشتر بخوانید: سبکهای مختلف طراحی سایت چیست؟
خود را برای سایت ریسپانسیو مجهز کنید
![خود را برای سایت ریسپانسیو مجهز کنید]()
طراحی سایت ریسپانسیو هم برای عملکرد بهتر سایت، هم سئوی سایت و هم راحتی کاربران سایت بسیار مفید خواهد بود و میتواند در رشد وبسایت کمک شایانی کند. برای ریسپانسیو کردن سایت راهها و ابزارهای مختلفی وجود دارد که در ادامه برخی از مهمترینهایشان را بررسی میکنیم:
- بوت استرپ: یک فریمورک بر پایه html، css و جاوا اسکریپت است که رایگان و منبع باز بوده و میتوانید با آن سایتهای ریسپانسیو طراحی کنید.
- Gator: این سایت ساز بیش از 100 قالب ریسپانسیو دارد که میتوانید از میان آنها طرح دلخواهتان را انتخاب کنید. هر کس در گاتور عضو شود، میتواند به کتابخانه این پلتفرم دسترسی پیدا کرده و از انواع نمونههای آماده و سفارشی آن استفاده کند.
- Simbla: این سایت شامل مجموعهای از صدها سایت آماده ریسپانسیو است که شما میتوانید از آنها برای ساخت سایتهای انگلیسی ریسپانسیو استفاده کنید. معمولاً این نمونهها برای طراحی سایتهای کوچک با چندین صفحه مناسب است.
- Colorlib: مجموعهای از صدها قالب رایگان و پولی برای سایتهای وردپرسی است که همگی بهصورت ریسپانسیو طراحی شدهاند و نیازی نیست که برای طراحی سایت ریسپانسیو خود نگران باشید.
- ThemeForest: پلتفرم محبوب تمفارست مجموعهای بینظیر از 45000 قالب آماده وردپرسی است که حدود 5000تای آن ریسپانسیو هستند و با عضویت در آن میتوان از تمام قالبها استفاده کرد.
گامهای رسیدن به سایت پاسخگو
طراحی سایت ریسپانسیو یعنی html و css بهصورت خودکار عملیات تغییر سایز، مخفی کردن، کوچک کردن یا بزرگ کردن آیتمهای سایت را برای تمامی دستگاهها انجام دهند. اگر بخواهید از cms ها برای طراحی سایت ریسپانسیو استفاده کنید، باید قالبهای ریسپانسیو را بهکار ببرید یا اگر میخواهید خودتان صفحات را بسازید، میتوانید از صفحهسازهایی نظیر بیور بیلدر استفاده کنید که حالت ریسپانسیو دارند. در حالت دوم اگر سایت را از طریق کدنویسی راهاندازی میکنید، کافیاست اقدامات زیر را انجام دهید:
- با متاتگ viewport حالت کنترل ابعاد بر اساس وسیله را در مرورگر فعال کنید.
- عکسها را ریسپانسیو کنید؛ برای این کار کافی است در css مقدار width عکس را %100 قرار دهید. همچنین میتوانید با تگ picture تصاویر مختلفی را برای سایزهای صفحه متفاوت، ست کنید.
- برای ریسپانسیو کردن متنها کافی است یک عبارت vw بعد از اندازه فونت در css اضافه کنید.
- با کمک media query نیز میتوانید سایز صفحات را بر اساس سایز صفحه مرورگرها، تنظیم کنید.
بیشتر بخوانید: مراحل طراحی سایت
جمعبندی
تنها 3 ثانیه طول میکشد تا یک کاربر انتخاب کند که در سایت شما بماند یا آن را ترک کند؛ بنابراین، باید نهایت تلاش خود را برای بهبود تجربه کاربری و حفظ تمرکز کاربران روی سایت انجام دهید. طراحی سایت ریسپانسیو یک راهحل برای بهبود تجربه کاربری سایت و سئوی آن محسوب میشود نه یک روش مجزا برای طراحی سایت. یک سایت ریسپانسیو نمایش درستی در گوشیهای موبایل دارد و میتوانید با کمک آن نظر مخاطبان موبایل را نیز جلب کنید تا سایت شما را ترک نکنند. از طرف دیگر گوگل توجه ویژهای به بحث موبایلپسند بودن سایتها دارد و در رتبهبندی آنها نیز بسیار روی این فاکتور تاکید میکند. با طراحی سایت بهشکل ریسپانسیو شما میتوانید سایتی کارآمد برای تمامی دستگاهها بسازید که در نتایج اول گوگل نیز نمایش داده میشود.