سایتی همگام با تکنولوژی
قرن 21 با تکنولوژی تلفن‌های همراه عجین شده است و همه‌ی افراد گرایش زیادی به این وسایل پیدا کرده‌اند. اگر شما هم بخواهید کسب‌وکارتان را مطابق با پیشرفت‌های تکنولوژی به جلو برانید، باید با دستگاه‌های موبایل سازگار شوید. طراحی سایت ریسپانسیو روشی است که می‌توانید سایتتان را با فناوری تلفن‌های همراه آشتی دهید و بتوانید کاربران این دستگاه‌ها را نیز به سمت سایت و کسب‌وکارتان بکشانید. در گفتار پیشِ‌رو قصد داریم در کنار هم عمیقا درک کنیم که ریسپانسیو بودن سایت چیست و این ویژگی چطور می‌تواند سایت ما را به صفحه‌ی اول گوگل برساند.
![طراحی سایت ریسپانسیو یا واکنش گرا]()
پاسخگوی دستگاه‌های موبایل باشید
طراحی سایت ریسپانسیو یا RWD رویکردی در توسعه‌ی سایت‌هاست که باعث ایجاد تغییرات پویا در ظاهرشان می‌شود. این تغییرات بر اساس سایز صفحه و با هدفِ نمایش درستِ صفحه روی نمایشگر، در استایل سایت اعمال می‌شوند. به زبان ساده، طراحی ریسپانسیو باعث می‌شود که صفحات سایت شما در هر نوع دستگاهی اعم از گوشی، تبلت و کامپیوتر و در دو جهت افقی و عمودی نمایش درستی داشته باشد؛ بدون اینکه بخواهید برای سایزهای مختلف صفحات نمایش دیوایس‌های متفاوت، یک صفحه‌ی جدا طراحی کنید. روند طراحی سایت ریسپانسیو به این صورت است که باید ابتدا مشخص کنیم که سایت در چه سایزهایی از صفحه باید تغییر شکل دهد. به این سایزها، نقطه‌ی شکست یا breakpoint گفته می‌شود. زمانی‌که مرورگر را با کمک ماوس کوچک‌تر می‌کنید، صفحه از یک جایی به بعد شروع به تغییر شکل میدهد و ستو‌ن‌های صفحه به هم می‌ریزند؛ این نقطه دقیقا همان breakpoint است. در طراحی ریسپانسیو شما چندین نقطه‌ی شکست خواهید داشت که هر کدام برای یک صفحه‌ی نمایش مناسب است. معمولا دستوری که در css برای پیاده‌سازی طراحی ریسپانسیو استفاده می‌شود، Media queries است که با کمک آن می‌توانید استایل‌های مختلف را بر اساس سایز، جهت یا... به سایت خود اعمال کنید
![سایت ریسپانسیو چیست؟]()
تولد اولین سایت ریسپانسیو
اولین طراحی سایت ریسپانسیو متعلق به سایت خودروسازی آلمانی آئودی بود که در سال 2001 توسط یک تیم معماری اطلاعات خبره در razorfish انجام گرفت. این سایت علی‌رغم قابلیت‌های محدود مرورگر اینترنت اکسپلورر، توانست با این مرورگر به‌خوبی تعامل کند و صفحاتش را به‌صورت داینامیک تغییر سایز دهد؛ ولی، در مرورگر نت اسکیپ برای هر تغییر سایز باید صفحه یک‌بار از روی سرور لود می‌شد. کامرون آدامز در سال 2004 نیز شکلی جدید از طراحی سایت ریسپانسیو را ارائه کرد که برای توصیف طرح‌بندی آن از القابی نظیر طراحی شناور، طراحی مایع، طراحی انعطاف‌پذیر و الاستیکی استفاده می‌شد؛ اما، cssهای آماده برای طراحی سایت ریسپانسیو اولین بار در سال 2008 به‌وجود آمدند و سال 2010، اتان مارکوت در مقاله‌ای، نام این شیوه را طراحی ریسپانسیو گذاشت.
![سایت واکنش گرا]()
سایتی از جنس ریسپانسیو
امروزه تقریبا 63 درصد از افراد به‌جای
استفاده از کامپیوتر، از موبایل برای بازدید سایت‌ها استفاده می‌کنند و طبق آمار 38
درصد مردم هرگز دوست ندارند از «سایت‌های غیرریسپانسیو در موبایل» استفاده کنند. از
آنجا که طراحی سایت
ریسپانسیو تاثیر زیادی روی بهبود نمایش صفحات دارد، این کار باعث می‌شود که
کاربران تجربه‌ی مثبتی از حضور در سایت شما داشته باشند. این مسئله به افزایش رتبه‌ی
سایت در گوگل خیلی کمک می‌کند؛ چون، نرخ بازدید سایت و زمان حضور کاربران را
افزایش میدهد. طراحی موثر یک سایت ریسپانسیو باید ویژگی‌های زیر را داشته باشد تا
باعث بهبود رابط کاربری و سئوی سایت شود:
-
سازگاری: در صورتی سایت ریسپانسیو نمایش بهتری خواهد داشت که در تمام دستگاه‌ها و با هر اندازه‌ای به‌درستی نمایش داده شود و کاربر بتواند به‌راحتی به بخش‌های مختلف سایت، مثل منو، اطلاعات تماس و محتواهای کلیدی دسترسی پیدا کند.
-
پشتیانی از تمام مرورگرها: همان طور که می‌دانید یکی از مهم‌ترین ویژگی‌های وب‌سایت‌های ریسپانسیو، سازگاری با تمام موتورهای جست‌و‌جو است؛ ولی، مهم‌تر از آن قابلیت دسترسی و نمایش صفحات سایت در تمامی دیوایس‌هاست که برای این امر شما نیاز دارید سایت را طوری طراحی کنید که همه‌ی مرورگرها آن را بشناسند.
-
بهبود سئوی سایت: یک سایت غیرریسپانسیو، برای نسخه‌ی موبایل باید یک سایت موبایلی طراحی کند و لینک آن را برای نسخه‌های موبایل قرار دهد. این مسئله باعث می‌شود که عملکرد سایت در موتور جست‌و‌جو ضعیف شناسایی شود و روی سئو تاثیر بسیار بدی بگذارد. از سوی دیگر سایتی که ریسپانسیو نباشد در موبایل و تبلت نمایش خوبی ندارد و کاربر سریعا آن را ترک می‌کند؛ بنابراین، می‌توان گفت یکی از ویژگی‌های کلیدی طراحی سایت ریسپانسیو، بهبود تعامل خواهد بود.
-
هزینه‌های کمتر طراحی و نگهداری سایت: شما می‌توانید به‌جای طراحی چندین نسخه از سایت برای دستگاه‌های مختلف، یک نسخه‌ی ریسپانسیو طراحی کنید تا هم هزینه‌های طراحی را به حداقل برسانید و هم نقص‌های پنهان را به مرور اصلاح کنید.
-
افزایش ترافیک و نرخ تبدیل: بسیاری از افراد بیشتر کارهای اینترنتی خود را از طریق موبایل انجام می‌دهند. داشتن نسخه‌ی موبایل سایت می‌تواند باعث جذب بیشتر مخاطب و در نتیجه افزایش نرخ تبدیل سایت شما شود.
![ریسپانسیو بودن سایت یعنی چه]()
ریسپانسیو بودن سایت از نان شب واجب‌تر است
اگر هنوز هم متقاعد نشده‌اید که چرا باید برای موفقیت کسب‌وکارتان، طراحی سایت ریسپانسیو انجام دهید، باید بگوییم این کار بنا به دلایل زیر بسیار اهمیت دارد:
-
گوگل به شما پیشنهاد می‌کند که طراحی سایت ریسپانسیو انجام دهید تا علاوه بر نمایش درست در دستگاه‌ها، سایتتان بهینه شده و تروتمیز باشد؛
-
با طراحی سایت ریسپانسیو یک وبسایت برای تمامی دستگاه‌ها طراحی می‌کنید و نیازی نیست کار اضافه‌تری برای نسخه‌های موبایل انجام دهید.
-
داشتن دو سایت برای نسخه‌های دسکتاپ و موبایل، نیاز به داشتن دو نسخه‌ی جداگانه از ابزارهایی نظیر گوگل آنالیتیکس و گوگل ادوردز دارد؛ ولی، طراحی سایت ریسپانسیو باعث می‌شود که سایتتان را خیلی راحت‌تر مدیریت کنید.
-
اگر سایت شما در موبایل تجربه‌ی کاربری خوبی نداشته باشد و کاربر نتواند آنچه می‌خواهد را پیدا کند، به احتمال 61 درصد سایت را ترک خواهد کرد.
-
در جست‌و‌جوی موبایل، گوگل سایت‌های ریسپانسیو را بالاتر از سایت‌های غیرریسپانسیو نشان میدهد.
![نقاط ضعف سایت‌های ریسپانسیو]()
نقاط ضعف سایت‌های ریسپانسیو
طراحی سایت ریسپانسیو ممکن است مشکلاتی هم به همراه داشته باشد؛ مثلا:
-
کاهش سرعت لود: برای ریسپانسیو بودن یک سایت از کدهای 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 ثانیه طول می‌کشد تا یک کاربر انتخاب کند که در سایت شما بماند یا آن را ترک کند؛ بنابراین، باید نهایت تلاش خود را برای بهبود تجربه‌ی کاربری و حفظ تمرکز کاربران روی سایت انجام دهید. طراحی سایت ریسپانسیو یک راه‌حل برای بهبود تجربه‌ی کاربری سایت و سئوی آن محسوب می‌شود نه یک روش مجزا برای طراحی سایت. یک سایت ریسپانسیو نمایش درستی در گوشی‌های موبایل دارد و می‌توانید با کمک آن نظر مخاطبان موبایل را نیز جلب کنید تا سایت شما را ترک نکنند. از طرف دیگر گوگل توجه ویژه‌ای به بحث موبایل‌پسند بودن سایت‌ها دارد و در رتبه‌بندی آن‌ها نیز بسیار روی این فاکتور تاکید می‌کند. با طراحی سایت به‌شکل ریسپانسیو شما می‌توانید سایتی کارآمد برای تمامی دستگاه‌ها بسازید که در نتایج اول گوگل نیز نمایش داده می‌شود.
منبع:
en.wikipedia.org/wiki/Responsive_web_design