راهنمای مبتدیان برای طراحی وب پاسخگو (نمونه های کد و نمونه های طرح بندی)

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

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

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

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

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

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

طراحی وب پاسخگو چیست؟ h2>

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

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

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

طراحی پاسخگو امکان ارائه طرح های مختلف و جداگانه از محتوای شما را فراهم می کند و بسته به اندازه صفحه روی دستگاههای مختلف طراحی کنید.
ظاهر وب سایت شما در صفحه رایانه کافی نیست. 🖥 تبلت ها ، لپ تاپ های 2 در 1 و تلفن های هوشمند بخشی از این معادله هستند … و این راهنما همه مواردی را که باید در مورد طراحی پاسخگو بدانید را پوشش می دهد 🤳 برای توییت کلیک کنید responsive adaptive design

پاسخگو در مقابل طراحی سازگار

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

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

چرا موضوعات طراحی پاسخگو مهم هستند h2>

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

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

Mobile, tablet, desktop market share

تلفن همراه ، رایانه لوحی ، سهم بازار دسک تاپ

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

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

Mobile search traffic

ترافیک جستجوی موبایل

سرانجام ، طی چند سال گذشته ، تلفن همراه به یکی از مهمترین کانالهای تبلیغاتی تبدیل شده است. حتی در یک بازار پس از همه گیری ، هزینه تبلیغات در حال رشد است a > 4.8٪ تا 91.52 میلیارد دلار.

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

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

آیا سایت های وردپرس پاسخگو هستند؟ h2>

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

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

اگر از قالب WordPress دیگری استفاده می کنید ، می توانید با مقایسه نحوه نمایش آن در دستگاه های مختلف یا استفاده از Chrome Developer Tools ، تست کنید که پاسخگو است یا نه.

بلوک های ساختاری طراحی وب پاسخگو h2>

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

CSS و HTML

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

html vs css

HTML در مقابل CSS (منبع تصویر: codingdojo.com)

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

  media queries - responsive web design 

می توانید یک “class” یا “id” تنظیم کنید که بعداً بتوانید با کد CSS مورد هدف قرار دهید.

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

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

یک سند HTML قرار داد ، یا به صورت جداگانه پرونده صفحه سبک .

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

  img {
عرض: 100٪
}  

یا می توانیم کلاس خاص “full-width-img” را با اضافه کردن یک دوره در جلو هدف قرار دهیم.

 . full-width-img {
عرض: 100٪
}  

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

نمایش داده های رسانه h3>

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

fluid layout - responsive web design

نمایش داده های رسانه برای دسک تاپ ، تبلت ، تلفن هوشمند

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

  صفحه نمایش @ و (min-width: 780px) {
. full-width-img {
حاشیه: خودکار؛
عرض: 90٪؛
}  

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

طرح بندی مایعات h3>

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

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

flexbox justify

نمونه طرح مایع

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

طرح Flexbox h3>

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

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

mobile first - responsive web design

ظرف فلکس باکس

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

تصاویر پاسخگو h3>

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

  img {
عرض: 100٪
}  

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

مشكل این روش این است كه هر كاربری مجبور است تصویر كاملاً بزرگ را حتی در تلفن همراه بارگیری كند.

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

  bootstrap responsive breakpoints 

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

سرعت h3>

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

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

روش شما برای پاسخگویی نباید اولین ارائه صفحه شما را بیش از آنچه لازم است مسدود یا به تأخیر بیندازد.

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

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

نقاط شکست پاسخگو معمول h2>

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

اندازه صفحه رایج h3>

  • موبایل: 360 x 640
  • موبایل: 375 66 667
  • موبایل: 360 7 720
  • iPhone X: 375 x 812
  • Pixel 2: 411 x 731
  • قرص: 1024 x 768
  • لپ تاپ: 66۶۸ 13 ۱۳۶۶
  • لپ تاپ یا دسکتاپ با وضوح بالا: 1920 10 1080

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

common website layout

طرح اول موبایل (تصویر منبع: silocreativo.com)

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

Bootstrap’s Responseive Breakpoints

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

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

2 scatter plot font size opt

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

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

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

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

دامنه های جستجوی رسانه خود را تنظیم کنید (نقاط شکست پاسخگو) h3>

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

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

عناصر چیدمان اندازه با درصد یا یک چیدمان شبکه CSS ایجاد کنید h3>

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

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

Google’s Mobile-Friendly Test

چیدمان مشترک

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

  # wrapper {width: 95٪؛ حاشیه: 0 خودکار؛ }

#header {width: 100٪؛ }

# محتوا {عرض: 100٪؛ }

# نوار کناری {عرض: 100٪؛ }

# فوتور {عرض: 100٪؛ }

// دستگاه های کوچک (تلفن های افقی ، 576 پیکسل و بالاتر)

media (عرض حداقل: 576 پیکسل) {

// دستگاه های متوسط ​​(تبلت ، 768 پیکسل به بالا)

media (عرض حداقل: 768 پیکسل) {

# پوشاننده {عرض: 90٪؛ حاشیه: 0 خودکار؛ }

# محتوا {عرض: 70٪؛ شناور به سمت چپ؛ }

# نوار کناری {عرض: 30٪؛ شناور: درست؛ }

// دستگاه های بزرگ (دسک تاپ ، 992px به بالا)

media (عرض حداقل: 992px) {...}

}

// دستگاه های فوق العاده بزرگ (دسک تاپ های بزرگ ، 1200 پیکسل به بالا)

media (عرض حداقل: 1200px) {

# پوشاننده {عرض: 90٪؛ حاشیه: 0 خودکار؛ }

}  

در یک روش مبتنی بر درصد ، ویژگی “float” کنترل می کند که کدام عنصر از صفحه نمایش ، چپ یا راست نمایش داده شود.

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

پیاده سازی تصاویر پاسخگو h3>

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

  img {
عرض: 100٪
}  

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

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

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

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

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

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

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

Testing responsive layouts in Chrome

اندازه قلم در مقابل نقاط پراکندگی اندازه نمایش

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

  @ media (min-width: 992px) {

بدنه ، p ، a ، h4 {

اندازه قلم: 14px؛

}

}  

پاسخگویی آزمون h3>

ابتدا ، شما می خواهید موبایل پسند بودن سایت خود را با مورد آزمایش قرار دهید. تست تلفن همراه گوگل . به سادگی URL وب سایت خود را وارد کنید و برای دریافت نتایج بر روی دکمه “URL test” کلیک کنید.

nyt responsive design

تست سازگار با موبایل Google

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

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

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

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

chris guillebeau responsive design 2

تست طرح های پاسخگو و موبایل در Chrome

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

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

واحدها و مقادیر CSS برای طراحی پاسخگو h2>

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

PX vs EM vs REM vs Viewport Unit برای طراحی پاسخگو h3>

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

یک طراح یا توسعه دهنده وب جدید احتمالاً باید با پیکسل هایی برای متن همراه باشد زیرا آنها مستقیم ترین واحد طول CSS هستند.

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

نمونه های طراحی پاسخگو h2>

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

1 روزنامه آنلاین: نیویورک تایمز h3>

amazon responsive design 1

NYT در موبایل ، تبلت و لپ تاپ

2.

3

4

5.

خلاصه h2>


اگر از این مقاله لذت بردید ، پس از آن دوست دارید Kinsta’s WordPress platform hosting. وب سایت خود را توربوشارژ کرده و از تیم پیشکسوت وردپرس ما پشتیبانی 24/7 ساعته دریافت کنید. زیرساختهای Google Cloud ما بر مقیاس گذاری خودکار ، عملکرد و امنیت تمرکز دارند. بگذارید تفاوت Kinsta را به شما نشان دهیم! برنامه های ما را بررسی کنید a >

منبع:
https://kinsta.com/blog/responsive-web-design/.

دیدگاهتان را بنویسید