راهنمای طراحی ریسپانسیو سایت

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

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

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

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

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

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

تفاوت وب سایت واکنش گرا با وب سایت تطبیقی

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

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

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

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

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

آیا سایت های وردپرس واکنش گرا هستند؟

پاسخگو بودن یا نبودن سایت های وردپرس به موضوع سایت وردپرسی شما بستگی دارد. قالب وردپرس  معادل یک قالب برای یک وب سایت ثابت است و طراحی و چیدمان محتوای شما را کنترل می کند.

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

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

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

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

<img src="image.gif" alt="image" class=”full-width-img”>

می‌توانید یک «کلاس» یا «id» تنظیم کنید که بعداً می‌توانید با کد CSS هدف‌گیری کنید .

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

به عنوان مثال، می‌توانیم عرض تمام تصاویر HTML را در سطح عنصر به صورت زیر ویرایش کنیم:

img {
width: 100%;
}

یا می‌توانیم با اضافه کردن یک نقطه در جلو، کلاس خاص «full-width-img» را هدف قرار دهیم.

.full-width-img {
width: 100%;

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

داستان های رسانه

پرس و جو رسانه بخشی اساسی از CSS3 است که به شما امکان می دهد محتوا را برای انطباق با عوامل مختلف مانند اندازه صفحه یا وضوح نمایش دهید. این کار به روشی مشابه “if clause” در برخی از زبان‌های برنامه‌نویسی عمل می‌کند ، اساساً بررسی می‌کند که آیا  نمای صفحه به اندازه کافی گسترده است یا بیش از حد عریض قبل از اجرای کد مناسب.

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

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

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

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

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

طرح بندی فلکس باکس

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

یک ظرف انعطاف ‌پذیر، اقلام را برای پر کردن فضای آزاد موجود گسترش می‌دهد یا برای جلوگیری از سرریز شدن آنها را کوچک می‌کند. این کانتینرهای انعطاف پذیر دارای تعدادی ویژگی منحصر به فرد مانند justify-content هستند که نمی توانید با یک عنصر HTML معمولی آنها را ویرایش کنید.

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

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

img {
width: 100%;
}

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

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

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

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

سرعت

هنگامی که می خواهید یک طراحی ریسپانسیو برای وب سایت خود ایجاد کنید، سرعت بارگذاری باید در اولویت باشد . صفحاتی که در ۲ ثانیه بارگیری می‌شوند، میانگین نرخ پرش ۹٪ دارند ، در حالی که صفحاتی که ۵ ثانیه طول می ‌کشند به نرخ پرش ۳۸٪ منجر می ‌شوند.

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

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

مشتریان Kinsta با استفاده از ویژگی کوچک‌ سازی کد که مستقیماً در داشبورد MyKinsta تعبیه شده است ، به یک راه سریع و آسان برای انجام این کار دسترسی دارند و به مشتریان این امکان را می‌دهد تا با یک کلیک ساده، کوچک‌سازی خودکار CSS و جاوا اسکریپت را فعال کنند. 

همچنین می‌توانید سعی کنید Google AMP را برای صفحات تلفن همراه خود پیاده‌سازی کنید، اما در مطالعه موردی Google AMP ما ، سرنخ‌های تلفن همراه ما تا 59 درصد کاهش یافت.

نقاط شکست متداول پاسخگو

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

اندازه های رایج صفحه نمایش
•    موبایل: 360 x 640
•    موبایل: 375 x 667
•    موبایل: 360 x 720
•    iPhone X: 375 x 812
•    پیکسل 2: 411 x 731
•    تبلت: 768 x 1024
•    لپ تاپ: 1366 x 768
•    لپ تاپ یا دسکتاپ با وضوح بالا: 1920 x 1080

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

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

نقاط شکست پاسخگو Bootstrap

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

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

چگونه وب سایت خود را ریسپانسیو کنیم

اکنون که با بلوک های ساختمانی آشنا شدید، زمان آن رسیده است که وب سایت خود را ریسپانسیو کنید.

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

•    576 پیکسل برای تلفن های پرتره
•    768 پیکسل برای تبلت ها
•    992 پیکسل برای لپ تاپ
•    1200 پیکسل برای دستگاه های بزرگ

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

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

•    لفاف یا ظرف
•    سرتیتر
•    محتوا
•    نوار کناری
•    پاورقی

با استفاده از رویکرد اول موبایل ، می‌توانید عناصر چیدمان اصلی را مانند این استایل کنید (بدون درخواست رسانه برای سبک‌های اصلی تلفن‌های همراه):

#wrapper {width:95%;  margin: 0 auto; }

#header {width:100%; }

#content {width:100%; }

#sidebar {width:100%; }

#footer {width:100%; }

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) {

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) {

#wrapper {width:90%;  margin: 0 auto; }

#content {width:70%; float:left; }

#sidebar {width:30%; float:right; }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

}

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) {

#wrapper {width:90%;  margin: 0 auto; }

}

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

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

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

img {
width: 100%;
}

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

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

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

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

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

@media (min-width: 992px) {

body, p, a, h4 {

font-size: 14px;

}

}

پاسخگویی تست

ابتدا، می‌خواهید با تست موبایل ‌فرندل Google تست کنید که آیا سایت شما برای موبایل مناسب است یا خیر . به سادگی آدرس وب سایت خود را وارد کنید و روی دکمه "آدرس URL" کلیک کنید تا نتایج را دریافت کنید.

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

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

CTRL + Shift + I را در رایانه های ویندوزی یا Command + Option + I را در Mac فشار دهید تا نمای دستگاه مربوطه باز شود. از اینجا، می‌توانید دستگاه تلفن همراه یا تبلت مورد نظر خود را برای تست واکنش‌پذیری طراحی خود انتخاب کنید.

چند سوال وجود دارد که می خواهید هنگام انجام این فرآیند به آنها پاسخ دهید.

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

واحدها و مقادیر CSS برای طراحی ریسپانسیو

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

PX در مقابل EM در مقابل واحدهای REM در مقابل Viewport برای طراحی پاسخگو

•    PX - یک پیکسل
•    EM - واحد نسبی بر اساس اندازه فونت عنصر.
•    REM - واحد نسبی بر اساس اندازه فونت عنصر.
•    VH، VW – % از ارتفاع یا عرض درگاه دید.
•    % – درصد عنصر والد.

یک طراح یا توسعه‌دهنده وب جدید احتمالاً باید از پیکسل‌ها برای متن استفاده کند، زیرا آنها ساده‌ترین واحد طول در CSS هستند. اما هنگام تنظیم عرض و حداکثر عرض تصاویر و سایر عناصر، استفاده از % بهترین راه حل است. این رویکرد مطمئن می شود که اجزا با اندازه صفحه نمایش هر دستگاه تنظیم می شوند.

خلاصه

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

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

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

منبع: kinsta.com