همه چیز درباره‌ی طراحی وب واکنش گرا یا ریسپانسیو (Responsive)

اگر بخواهید به عنوان یک طراح وب حرفه ای شناخته بشید، یکی از مهارت هایی که حتما باید داشته باشید، طراحی وب واکنش گرا یا ریسپانسیو یا Responsive Web Design است.
اگر بخواهیم بگوییم که طراحی وب واکنش گرا یا ریسپانسیو به چه معناست، می توانیم آن را در یک جمله به این صورت خلاصه کنیم:
طراحی وب واکنش گرا یا ریسپانسیو یعنی صفحات وبمان را به گونه ای طراحی کنیم که در سایزهای مختلف صفحه‌ی نمایش مثل موبایل‌ها، تبلت‌ها و… سایتمان به درستی نمایش داده شود.

امروزه با توجه به افزایش تعداد کاربرانی که با استفاده از تلفن های همراه یا تبلت اقدام به گشت و گذار در سطح اینترنت می کنند، بسیار مهم است که وبسایتی که توسط شما طراحی می شود، قابلیت نمایش صحیح در انواع صفحات نمایش را داشته باشد.
اگر شما یک طراح وب باشید که با استفاده از HTML5 و CSS3 اقدام به طراحی وب می کنید، یکی از مهارت هایی که حتما باید به آن مسلط باشید، مهارت طراحی وب واکنش گرا یا ریسپانسیو است. اگر به این مهارت مسلط نباشید، نمی توانید خودتان را یک طراح وب حرفه‌ای بنامید. زیرا مهارت طراحی وب واکنش گرا یا ریسپانسیو یکی از مهم ترین مهارت هایی است که شما به عنوان یک طراح وب حرفه‌ای باید به آن مسلط باشید.
امروزه داشتن یک وبسایت ریسپانسیو یا واکنش گرا (Responsive) یکی از المان هایی است که هر کسی باید به آن توجه کند. اگر شما مهارت طراحی وب واکنش گرا یا ریسپانسیو نداشته باشید، به زودی از چرخه‌ی رقابت حذف خواهید شد.

مزایای طراحی وب ریسپانسیو

ممکن است این سوال برایتان پیش بیاید که چرا باید طراحی وب واکنش گرا یا ریسپانسیو (Responsive) را یاد بگیریم و اصولا چرا باید سایت هایی ریسپانسیو داشته باشیم؟ سوال بسیار خوبی است. در ادامه می خواهیم به این سوال جواب دهیم :

الزامات یک طراح وب حرفه‌ای

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

همه جا در دسترس هستید

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

کاربرتان لذت میبرد

یکی دیگر از مزایای طراحی وب واکنش گرا یا ریسپانسیو این است که کاربر هنگام کار با سایت شما، از آن لذت میبرد. 

وقتی کاربر شما سایتتان را با موبایل، تبلت، لپ تاپ و… باز میکند و از آن بدون هیچ مشکلی استفاده می کند، باعث می شود که از کار با سایت شما لذت ببرد و این فوق العاده است.

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

قشر زیادتری از مخاطبان را خواهید داشت

اگر شما طراحی وب واکنش گرا یا ریسپانسیو بلد باشید، می توانید سایت هایی طراحی کنید که مخاطبان زیادی داشته باشند.به این معنا که سایت شما می تواند همه کاربران موبایلی، تبلتی و… را پوشش دهد.

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

در رتبه‌ سایتتان موثر است

طراحی وب واکنش گرا یا ریسپانسیو در رتبه سایت شما نیز موثر است، طبق آماری که در سطح اینترنت وجود دارد و تا حدودی می توان به آن استناد کرد:
۴۵ میلیون کاربر اینترنت در ایران وجود دارد
۶۰ درصد جست و جوهای اینترنتی توسط موبایل ها انجام می شود
با استفاده از این دو آمار ساده می توانیم متوجه شویم که چرا طراحی وب واکنش گرا یا ریسپانسیو اینقدر مهم است. درصد بالایی از جست و جوهای روزانه توسط دیوایس های همراه انجام می شود. اگر سایت ما برای دیوایس های همراه بهینه نباشد، تمام کاربرانی را که از دیوایس های همراه استفاده می کنند را از دست می دهیم.

یک معیار مهم برای گوگل

با توجه به افزایش روز افزون کاربران موبایلی و تبلتی، یکی از معیارهایی که گوگل به تازگی به آن اهمیت بسیاری داده است، ریسپانسیو بودن وبسایت ها است.

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

پس اگر می خواهید یکی از المان‌های مهم را در سایت خود داشته باشید، حتما باید به طراحی وب واکنش گرا یا ریسپانسیو مسلط باشید.

ممکن است با خود بگویید که «من یک طراح وب هستم و نمی خواهم سایتی داشته باشم که نگران واکنش گرا بودن یا نبودن آن باشم.» موضوع بسیار خوبی است.

طراحی وب واکنش گرا یا ریسپانسیو برای ۲ دسته از افراد امری ضروری می‌باشد:

اشخاصی که دارای یک سایت هستند، باید سایت‌ آن‌ها ریسپانسیو باشد
اشخاصی که طراحی وب با HTML و CSS انجام می دهند نیز باید به طراحی وب واکنش گرا یا ریسپانسیو تسلط کامل داشته باشند.

چرا؟

به ۲ دلیل:

اگر شما مهارت طراحی وب واکنش گرا یا ریسپانسیو (Responsive Web Design) را نداشته باشید، نمی توانید به خودتان یک طراح وب حرفه‌ای بگویید و بزودی از دور رقابت حذف خواهید شد. زیرا یکی از مهم ترین مهارت‌های طراحی وب را ندارید.

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

آیا وبسایت من ریسپانسیو است؟

سوال بسیار خوبی است. برای اینکه چک کنیم که آیا وبسایتمان طبق اصول طراحی وب واکنش گرا یا ریسپانسیو طراحی شده است یا خیر؟ یک تست بسیار ساده دارد.

وبسایتمان را در یک مرورگر اینترنتی مثل گوگل کروم باز می کنیم و اقدام می‌کنیم به کوچک کردن سایز صفحه مرورگرمان. با اینکار شبیه سازی می کنیم که اگر یک کاربر سایت ما را با موبایل خود باز کرد، با چه صحنه‌ای مواجه می شود. در واقع با کوچک کردن اندازه‌ی مرورگر، اندازه‌ی صفحه‌ی نمایش کاربر را بصورت نمایشی کوچک می کنیم. همین تست را می توانید روی تلفن همراهتان نیز انجام دهید. یک سایت را باز کنید و ببنید که واکنش گرا هست یا خیر؟!

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

برای طراحی یک وبسایت واکنش گرا، راه های زیادی وجود دارد. در محصول «طراحی وب واکنش گرا یا ریسپانسیو» به‌صورت کامل و پروژه‌ی محور، یاد می گیریم که چطور می توانیم وبسایت‌ هایی ریسپانسیو طراحی کنیم. 

ویژگی های مثبت بالا بودن سرعت وب سایت چیست؟

به عنوان صاحب یک وب سایت، تاثیری که سرعت وب سایت شما بر ترافیک بازدید وب سایت شما می گذارد، تبدیلات و درآمدها نباید دست کم گرفته شوند. تحقیقی انجام شده توسط Akamai به نتیجه رسید که ٧٤% از مردم از یک وب سایت انتظار دارند که در کمتر از٢ ثانیه بارگذاری شود و ٤٠% از مردم اگر بارگذاری وبسایت بیش از٣ ثانیه طول بکشد، آن را ترک خواهند کرد.
تحقیقی در سال ٢٠١٠ توسط Gomez انجام گرفته بود " چرا سرعت اجرای یک وب سایت اهمیت دارد؟ آیا وب سایت شما کاربران را از خود می‌راند؟ " نام داشت که در آن با ١٥٠٠ کاربر در مورد اجرای یک وبسایت و اینکه چگونه تجربه خرید آنها را تحت تاثیر قرار می‌دهد مصاحبه کرده بود، در این تحقیق دید خود را این گونه اظهار کرد :
- افزایش زمان بارگذاری یک وب سایت بین ٢ تا ١٠ ثانیه، رها کردن وبسایت توسط کاربران را ٣٨% افزایش می دهد.
- طی دوره های اوج ترافیک، بیش از ٧٥% کاربران یک وب سایت که با تأخیر بارگذاری می شود را رها کرده و به وبسایت رقیب خواهند رفت.
تحقیقات زیادی در مورد تاثیر سرعت بارگذاری وبسایت منتشر شده اند. تحقیقی انجام شده توسط گروه تحقیقاتی Aberdeen به این نتیجه رسید که ١ ثانیه تأخیر در بارگذاری وب سایت نتیجه ای برابر با ٧% کاهش در گفت و گوها، ١١% کاهش در نمایش دادن صفحه وب سایت و ١٦% کاهش در رضایت مشتری به همراه خواهد داشت.
همچنین مهم است که مدنظر داشته باشیم امروزه سرعت وبسایت یکی از فاکتور های اصلی در رتبه دهی گوگل است.

داشتن یک وب سایت با سرعت پایین می‌تواند تأثیر منفی بر روی موارد زیر داشته باشد:

- ترافیک و بازدید صفحه
- گفتگوها
- فروش
- تصویر نام تجاری و درک بیننده ها از کسب و کار شما

روش هایی که می توانند سرعت وب سایت شما را افزایش دهند:

١ - بهینه سازی و کاهش حجم عکس ها
عکس های بهینه سازی نشده می‌توانند حجم بسیار بالایی داشته باشند و بارگذاری آنها علاوه بر زمان زیادی که می گیرد، منابع سرور زیادی را نیز استفاده می کند. اگر میانگین حجم عکس ها بر روی وب سایت شما 1 مگابایت یا بیش از 2 مگابایت باشد، باید فکری جدی برای آن کنید. می توانید با اطمینان از پایین نیامدن کیفیت عکس، حجم عکس های خود را به طور قابل ملاحظه ای با استفاده از ابزارهای زیر کاهش دهید:
- WP Smush (برای کاربران WordPress)
- EWWW Image Optimizer (برای کاربران WordPress )
- Kraken (برای کاربران Joomla , Drupal)

٢ – بهینه سازی پایگاه داده به صورت منظم
یکی از روش هایی که اغلب در نظر گرفته نمی شود ولی تأثیر بسزایی بر سرعت وبسایت دارد بهینه سازی پایگاه داده به صورت منظم است. بخصوص اگر از WordPress و یا از سیستم کنترل محتوایی که به طور سنگین به حجم پایگاه داده تکیه می کنند استفاده شود.
بعضی از سیستم های کنترل محتوا و فایل های نصب شدنی وابسته به آنها، برای ذخیره داده ها به پایگاه داده شما تکیه می کنند. همان طور که شما از سیستم کنترل محتوا استفاده می کنید داده های ذخیره شده بر روی پایگاه داده شما افزایش می یابند و باعث پایین آمدن تدریجی سرعت وبسایت شما می شود.
شما می توانید با مرتب سازی پایگاه داده خود به صورت منظم سرعت وبسایت خود را بالا ببرید. همچنین می توانید به صورت خودکار با استفاده از WP-Optimize در صورت استفاده از WordPress پایگاه داده خود را تمیز و مرتب کنید.

٣ – کوچک و کم کردن فایل های JavaScript و CSS
اگر وب سایت شما از تعداد زیادی فایل های JavaScript و Css استفاده می کند، به احتمال زیاد وب سایت  به مرورگر بیننده هایتان می گوید که با این فایل ها به صورت تک تک برخورد کند. این مسئله منجر به درخواست های بسیار زیادی می شود که در نتیجه تأثیر منفی بر سرعت وبسایت شما خواهد داشت.
کوچک کردن فایل های JavaScript و Css ، تعداد فایل های تکی آنها را با قرار دادن شان در یک مکان کاهش می دهد و در نتیجه به صورت قابل توجهی سرعت وبسایت شما را افزایش می دهد.

٤ - استفاده از یک سیستم مدیریت محتوای (CMS) معتبر
سیستم مدیریت محتوای (CMS) شما اسکلت وبسایت شما است. اگر شما ازHTML ساده یا معروف و معتبری مانند WordPress یا Drupal استفاده می‌کنید ، خیالتان راحت باشد. اما اگر از سیستم کنترل محتوایی که معروف نیست یا ساخته خودتان است استفاده می کنید، ریسک بزرگی در داشتن وبسایت با سرعتی پایین کرده اید. مطمئن شوید که آزمون های مناسب و تحقیقات درستی برای معتبر بودن و پرسرعت بودن سیستم مدیریت محتوای (CMS) خود قبل از استفاده از آن انجام داده باشید.

٥ – تغییر هاست، استفاده از هاست بهتر
اگر تمام راه ها برای افزایش سرعت وبسایت خود را امتحان کرده اید و جواب نگرفته اید یا تأثیر بسیار کمی بر سرعت وبسایت خود دیده اید، شاید زمان آن رسیده است که هاست وبسایت خود را تغییر دهید.
در مقاله ای برای مجله Smashing ، مارکوس تایلور توضیح می دهد که یک هاست خوب چه تأثیر زیادی بر سرعت وبسایت می گذارد. طی این تحقیق دو سرویس گیرنده او با وبسایت های یکسان اما یکی هاست معتبر و دیگری هاستی ارزان و نامعتبر، اختلاف زیادی در سرعت وبسایت خود مشاهده می کردند. اختلاف بارگذاری در یکی از آنها ٧ میلی ثانیه و در دیگری ٢٥٠ میلی ثانیه حساب شد! اختلاف بسیار چشم گیر است.
در نتیجه هاست وبسایت یکی از مهمترین فاکتورها در طراحی سایت است پس در انتخاب آن دقت کنید.