طراحی سایت ریسپانسیو چیست و چگونه انجام می شود؟

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

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

اما اگر بخواهیم به طور کلی بگوییم ریسپانسیو بودن یعنی چه می توان این گونه توصیف کرد که: 

با طراحی سایت ریسپانسیو، تقریبا می توانیم مطمئن شویم که وب سایتمان در تلفن‌های همراه، تبلت‌ها، لپ‌ تاپ‌ها و صفحات دسکتاپ بهترین عملکرد و نمایش را دارد. در واقع با ایجاد یک تجربه کاربری عالی برای سایت، می‌ توان باعث رشد تجارت خود در فضای مجازی شد.

در این مقاله هر آنچه که نیاز است شما در مورد طراحی وب سایت ریسپانسیو بدانید آورده شده است. پس تا انتهای مقاله همراه ما باشید:

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

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

طراحی سایت ریسپانسیو این امکان را فراهم می کند که بسته به اندازه صفحه بتوانید چندین طرح جداگانه از مطالب و محتوای سایت خود در دستگاه‌های مختلف ارائه دهید.

طراحی وب سایت ریسپانسیو در مقابل طراحی وب سایت انطباقی

تفاوت بین طراحی واکنش گرا (Responsive Design) و طراحی تطبیقی (Adaptive Design) برای سایت این است که در طراحی ریسپانسیو یک نسخه تک صفحه متناسب با دستگاه ارائه می گردد در حالیکه در طراحی وب انطباقی چندین نسخه کاملاً متفاوت از همان صفحه ارائه می شود.

هر دو این روندها در دنیای طراحی وب به مدیران سایت ‌ها کمک می کنند تا چگونگی ارائه محتوا و مطالب خود را در صفحه‌های مختلف کنترل نمایند، اما روش ارائه آنها با یکدیگر متفاوت است.

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

دلیل اهمیت طراحی سایت ریسپانسیو یا واکنش گرا چیست؟

اگر در زمینه طراحی و توسعه وب یا وبلاگ نویسی تازه وارد هستید، ممکن است از خود بپرسید که چرا طراحی سایت ریسپانسیو اینقدر مهم است؟ پاسخ خیلی ساده است! 

در حال حاضر طراحی وب سایت فقط برای یک دستگاه به تنهایی کافی نیست. ترافیک ورودی وب سایت ها از موبایل نسبت به دسکتاپ پیشی گرفته و هم اکنون 51 درصد بازید وب سایت ها از طریق دستگاه‌های تلفن همراه انجام می شود. 

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

در واقع طی چند سال گذشته، تلفن همراه به یکی از مهمترین کانال‌های تبلیغاتی تبدیل شده است. حتی پس از همه گیری کرونا، هزینه تبلیغات موبایل با رشد 4.8٪ به 91.52 میلیارد دلار در ایالات متحده رسیده است. چه تبلیغ در رسانه های اجتماعی را انتخاب کنید و چه از روش ارگانیک مانند سئو سایت استفاده نمائید، اکثریت بازدیدکنندگان شما افرادی هستند که از تلفن همراه استفاده می کنند، بنابراین چه در طراحی سایت شرکتی و چه در طراحی سایت فروشگاهی باید به اهمیت واکنش گرا بودن وب سایت برای کاربران بسیار توجه کرد.

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

بخش های تشکیل دهنده ی طراحی وب ریسپانسیو

در این قسمت از مقاله قصد داریم، طراحی سایت ریسپانسیو و بخش های مختلف ساختاری آن از نظر پایه و اساس توضیح دهیم، این بخش ها شامل موارد زیر است:

🔹 زبان نشانه گذاری: CSS  و HTML

🔹 مدیا کوئریز: Media Queries

🔹 چیدمان های سیال: Fluid Layouts

🔹 چیدمان فلکس باکس: Flexbox Layout

🔹 تصاویر ریسپانسیو: Responsive Images

🔹 سرعت: Speed

CSS و HTML

اساس طراحی سایت ریسپانسیو ترکیبی از دو زبان HTML و CSS است که دو زبان نشانه گذاری هستند و محتوا و طرح صفحه را در هر مرورگر وب ساماندهی می کنند. 

HTML به طور عمده ساختار، عناصر و محتوای یک صفحه وب را کنترل می کند. به عنوان مثال، برای افزودن تصویر به وب سایت، باید از کد HTML زیر استفاده کنید:

شما همچنین می توانید یک "class" یا "id" ایجاد نمائید که بعدا با کد CSS آن را ساماندهی کنید. همچنین می توانید ویژگی های اصلی مانند ارتفاع و عرض را با استفاده از HTML طراحی کنید. البته این روش دیگر بهترین راه برای طراحی وب سایت محسوب نمی‌شود.

در حال حاضر، از CSS برای طراحی و صفحه بندی عناصری که در صفحه با HTML قرار گرفته‌اند، استفاده می‌ شود. کد CSS را می توان در بخش <style> یک سند HTML یا به عنوان یک فایل جداگانه قرار داد. به عنوان مثال، شما می توانید عرض تمام تصاویر HTML را به صورت زیر ویرایش کنید:

img { width: 100%; }

یا می توانیم یک کلاس خاص "full-width-img" را با اضافه کردن یک دوره در فرانت سازماندهی کنیم:

با کمک CSS شما می توانید ویژگی هایی فراتر از ارتفاع، عرض و رنگ را کنترل کنید. در واقع استفاده از CSS با ادغام در تکنیکی به نام مدیا کوئری media query منجر به ایجاد وب سایت های ریسپانسیو می شود.

مدیا کوئری

مدیا کوئری بخش اساسی در زبان نشانه گذاری CSS3 است که به طراحان وب سایت این امکان را می دهد محتوای صفحه خود را با عوامل مختلفی مانند اندازه صفحه نمایش یا وضوح تصاویر سازگار کنند.

نحوه انجام این کار مشابه "if clause" در برخی از زبان های برنامه نویسی است. اساسا این روش بررسی می کند که آیا نمای دید صفحه سایت قبل از اجرای کد با عرض صفحه نمایشگر هماهنگ هست یا نه.

media screen and (min-width: 780px) { .full-width-img { margin: auto; width: 90%; }@

اگر صفحه حداقل 780 پیکسل عرض داشته باشد، کلاس تصاویر "full-width-img" باید 90 درصد صفحه را اشغال کند و در مرکز قرار گیرد و حاشیه های موجود در صفحه سایت باید به طور خودکار خود را با این تغییر سازگار کنند. 

چیدمان های سیال

چیدمان های سیال بخشی اساسی در طراحی سایت ریسپانسیو  به صورت مدرن و امروزی است. در گذشته، شما برای هر عنصر HTML یک مقدار ثابت مانند 600 پیکسل تعیین می کردید. در حالی که یک طرح سیال به مقادیر پویا مانند درصدی از عرض منطقه قابل نمایش کاربر (viewport) متکی است.

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

چیدمان فلکس باکس

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

یک عنصر نگهدارنده (container) فلکس، آیتم‌ها را برای پر کردن فضای خالی موجود در صفحه گسترش می دهد یا برای جلوگیری از پرشدن صفحه، آنها را کوچک می کند. این عناصر نگهدارنده فلکس دارای تعدادی ویژگی خاص مانند جاستیفای کردن متن محتوا هستند که نمی توانید با یک عنصر HTML معمولی آن را ویرایش کنید.

این نوع چیدمان کمی پیچیده است، بنابراین اگر می خواهید از آن در طراحی خود استفاده کنید، باید راهنمای flexbox CSS Tricks را مطالعه کنید.

تصاویر ریسپانسیو

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

img { width: 100%; }

واحد % یک درصد از عرض یا ارتفاع صفحه را تخمین می زند و اطمینان حاصل می کند که تصویر متناسب با صفحه باقی بماند. مشکلی که در این روش وجود دارد این است که هر کاربر مجبور است تصویر را به صورت full-sized حتی در تلفن همراه دانلود کند.

برای ارائه نسخه‌های مختلف برای دستگاه‌هایی که اندازه صفحات متفاوت دارند، باید از ویژگی HTML srcset در تگ‌های تصاویر خود استفاده کنید تا بیش از یک اندازه تصاویر را بتوانید انتخاب نمائید.

</"img srcset="large-img.jpg 1024w, middle-img.jpg 640w, small-img.jpg  320w" src="small.jpg">

وردپرس به طور خودکار از این قابلیت برای تصاویر موجود در پست ها یا صفحات استفاده می کند.

سرعت

وقتی می خواهید طرحی ریسپانسیو برای وب سایت خود ایجاد کنید، سرعت بارگیری باید اولویت اصلی شما باشد. صفحاتی که در 2 ثانیه بارگیری می شوند به طور متوسط 9٪ نرخ پرش دارند، در حالیکه صفحاتی که 5 ثانیه طول می کشد بارگیری شوند، نرخ پرش آنها به 38 درصد افزایش می یابد.

روش شما برای ریسپانسیو کردن سایت نباید به نحوی باشد که بارگیری صفحه را به تاخیر بیندازد. چندین روش وجود دارد که با استفاده از آن می توانید بارگیری صفحه خود را سریعتر کنید. بهینه سازی تصاویر، کشینگ حافظه پنهان، خلاصه سازی کد منبع، استفاده از طرح کارآمدتر CSS، پیشگیری از رندرینگ JS  و بهبود مسیر رندر وب سایتتان ایده های خوبی هستند که باید در نظر بگیرید. شما همچنین می توانید گوگل AMP را برای صفحات تلفن همراه خود پیاده سازی کنید. 

نقاط انقطاع رایج در طراحی سایت ریسپانسیو یا واکنش گرا

اگر بخواهید از مدیا کوئری استفاده کنید، باید ابتدا در مورد نقاط انقطاع طراحی ریسپانسیو یا نقاط انقطاع اندازه صفحه تصمیم بگیرید. 

نقطه انقطاع یا همان نقطه شکست میزان عرض صفحه ای است که شما در آن از یک مدیا کوئری برای اجرای یک استایل CSS استفاده می کنید.

اندازه های معمول صفحه نمایش:

🚩 موبایل: 360 * 640

🚩 موبایل: 375 * 667

🚩 موبایل: 360 * 720

🚩 آیفون X: 375 * 812

🚩 پیکسل 2: 411 * 731

🚩 تبلت: 768 * 1024

🚩 لپ تاپ: 1366 * 768

🚩 لپ تاپ یا دسکتاپ با وضوح بالا: 1920 * 1080

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

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

نقاط انقطاع ریسپانسیو در بوت استرپ

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

طراحان در بوت استرپ از مدیا کوئری برای ساماندهی تصاویر 576 پیکسلی برای تلفن همراه، 768 پیکسلی برای تبلت ها، 992 پیکسلی برای لپتاپ ها و 1200 پیکسل برای صفحات نمایشگر دسکتاپ های فوق العاده بزرگ استفاده می کنند.

چگونگی طراحی سایت ریسپانسیو

اکنون که با بخش های تشکیل دهنده طراحی ریسپانسیو آشنا شدید، وقت آن است که طراحی وب سایت خود را ریسپانسیو کنید.

تنظیم دامنه مدیا کوئری (نقاط انقطاع ریسپانسیو)

طراحی سایز عناصر با درصد یا ایجاد یک طرح شبکه CSS 

پیاده سازی تصاویر ریسپانسیو  

ایجاد تایپوگرافی ریسپانسیو برای متن وب سایت خود 

تست ریسپانسیو بودن سایت

تنظیم دامنه مدیا کوئری (نقاط انقطاع ریسپانسیو)

دامنه مدیا کوئری را بر اساس نیازهای منحصر به فرد طراحی سایت خود تنظیم کنید. به عنوان مثال، اگر می خواهید از استانداردهای بوت استرپ برای طراحی خود پیروی کنید، از مدیا کوئری زیر باید استفاده کنید:

576 پیکسل برای تلفن های همراه

768 پیکسل برای تبلت ها

992 پیکسل برای لپ تاپ

1200 پیکسل برای دستگاه های بزرگ

طراحی سایز عناصر با درصد یا ایجاد یک طرح شبکه CSS

اولین و مهمترین مرحله تنظیم اندازه های متفاوت برای عناصر مختلف طرح وب سایتتان بسته به مدیا کوئری یا نقطه انقطاع صفحه است.

تعداد عناصر نگهدارنده وب سایتتان به طراحی شما بستگی دارد. البته بیشتر وب سایت ها بر روی عناصر ذکر شده در زیر تمرکز دارند:

✔️ عناصر نگهدارنده یا Wrapper

✔️ هدر

✔️ محتوا صفحه اصلی

✔️ ساید بار

✔️ فوتر

در یک روش مبتنی بر درصد، ویژگی " float" کنترل می کند که کدام عنصر روی صفحه از چپ یا راست نشان داده شود. اگر می خواهید فراتر از اصول اولیه بروید و یک طراحی ریسپانسیو و پیشرفته ایجاد کنید، باید با طراحی فلکس باکس CSS و ویژگی های آن مانند اندازه باکس و فلکس آشنا شوید.

پیاده سازی تصاویر ریسپانسیو   

همانطور که قبلاً توضیح دادیم، یک روش برای اطمینان از انقطاع تصاویر وب سایت شما این است که صرفاً از یک مقدار پویا برای همه تصاویر استفاده کنید:

img { width: 100%; }

اما در این حالت حجم میزان بارگیری بر روی تلفن همراه بازدیدکنندگان هنگام نمایش وب سایتتان کم نمی شود. هنگام افزودن تصاویر به صفحات خود، حتماً یک srcset همراه با اندازه های مختلف عکس خود قرار دهید. انجام این کار به صورت دستی می تواند بسیار زمانبر باشد، اما با CMS مانند وردپرس، هنگام بارگذاری فایل های مدیا این روند به طور خودکار اتفاق می افتد.

ایجاد تایپوگرافی ریسپانسیو برای متن وب سایت خود 

تمرکز اصلی طراحی وب ریسپانسیو بر روی واکنش پذیری چیدمان بلوک ها، عناصر و رسانه ها است. متن اغلب به عنوان اولویت دوم تلقی می شود، اما برای یک طراحی کاملاً ریسپانسیو، باید اندازه قلم را نیز متناسب با اندازه صفحه تنظیم کنید. ساده ترین راه برای این کار این است که یک مقدار ثابت برای اندازه قلم مانند 22 پیکسل تنظیم کنید و آن را با هر مدیا کوئری سازگار کنید.

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

تست ریسپانسیو بودن سایت

ابتدا موبایل فرندلی بودن سایت خود را با تست موبایل فرندلی گوگل (Google’s mobile-friendly test) انجام دهید. برای این کار فقط کافی است که آدرس URL وب سایت خود را در این سایت وارد کرده و بر روی دکمه "URL test" کلیک کنید تا نتایج به شما نشان داده شود.

اگر بررسی سایت شما مدتی طول کشید نگران نباشید. این سرعت بارگیری صفحه شما را نشان نمی دهد. اگر مراحل ذکر شده در این مقاله را دنبال کردید، مطمئنا یک وب سایت مناسب موبایل دارید. 

چند سوال وجود دارد که در طی این مراحل باید به آنها پاسخ دهید:

آیا ستون های وب سایت متناسب با اندازه صفحه تنظیم شد؟

آیا محتوا به خوبی در داخل عناصر نگهدارنده قرار گرفته است؟

آیا اندازه فونت ها متناسب با هر صفحه است؟

نتیجه گیری

عناصر مختلف بسیاری در طراحی سایت ریسپانسیو وجود دارد که بدون درک اساسی از HTML و CSS به راحتی اشتباه می کنید، اما از طریق آشنایی با بلوک های مختلف ساختاری، تجزیه و تحلیل مثال ها با ابزارهای توسعه وب و آزمایش با استفاده از کد های نمونه، می توانید وب سایت خود را بدون هیچ مشکل اساسی ریسپانسیو کنید.