با افزایش تعداد کاربران تلفن همراه در اینترنت، برای طراحان وب، چیدمان محتوا به شیوه‌ای که برای اندازه‌های مختلف صفحه نمایش به خوبی کار کند، اهمیت بیشتری پیدا کرده است. طراحی وب واکنش‌گرا، که در ابتدا توسط Ethan Marcotte در کتاب A List Apart تعریف شد، یک استراتژی طراحی است که با تغییر چیدمان سایت برای مطابقت با دستگاه مورد استفاده، به نیازهای کاربران و قابلیت‌های دستگاه‌های آنها پاسخ می‌دهد. به عنوان مثال، یک سایت واکنش‌گرا ممکن است محتوا را در نمای تک ستونی در تلفن، دو ستون در تبلت و سه یا چهار ستون در رایانه رومیزی نشان دهد.
از آنجا که دستگاه‌های متصل به اینترنت اندازه‌های صفحه نمایش بسیار متنوعی دارند، مهم است که سایت شما با هر اندازه صفحه نمایش موجود یا آینده سازگار شود. طراحی واکنش‌گرای مدرن همچنین حالت‌های تعاملی مانند صفحه نمایش‌های لمسی را در نظر می‌گیرد. هدف، بهینه‌سازی تجربه برای همه است.
تنظیم دریچه دید
صفحاتی که برای دستگاه‌های مختلف بهینه شده‌اند، باید شامل یک تگ متا viewport در بالای سند باشند. این تگ به مرورگر می‌گوید که چگونه ابعاد و مقیاس‌بندی صفحه را کنترل کند.
برای ارائه بهترین تجربه، مرورگرهای موبایل صفحه را با عرض صفحه دسکتاپ (معمولاً حدود 980px ، هرچند این مقدار در دستگاه‌های مختلف متفاوت است) رندر می‌کنند و سپس سعی می‌کنند با افزایش اندازه فونت‌ها و مقیاس‌بندی محتوا برای تناسب با صفحه، ظاهر محتوا را بهتر کنند. این امر می‌تواند باعث شود فونت‌ها ناهماهنگ به نظر برسند و کاربران برای دیدن و تعامل با محتوا، مجبور به بزرگنمایی شوند.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
استفاده از مقدار width=device-width در متا ویوپورت، به صفحه می‌گوید که با عرض صفحه نمایش در پیکسل‌های مستقل از دستگاه (DIP)، یک واحد پیکسل بصری استاندارد (که می‌تواند از پیکسل‌های فیزیکی زیادی در یک صفحه نمایش با چگالی بالا تشکیل شود) مطابقت داشته باشد. این به صفحه اجازه می‌دهد تا محتوای خود را برای مطابقت با اندازه‌های مختلف صفحه نمایش، دوباره جریان دهد.
بعضی از مرورگرها هنگام چرخش به حالت افقی، عرض صفحه را ثابت نگه می‌دارند و به جای تغییر جهت صفحه، بزرگنمایی می‌کنند تا صفحه را پر کنند. اضافه کردن مقدار initial-scale=1 به مرورگرها می‌گوید که صرف نظر از جهت دستگاه، رابطه ۱:۱ بین پیکسل‌های CSS و پیکسل‌های مستقل از دستگاه برقرار کنند و به صفحه اجازه دهند از عرض کامل افقی استفاده کند.
تگ <meta name="viewport"> با width یا initial-scale ندارد. ممیزی Lighthouse می‌تواند به شما کمک کند تا فرآیند اطمینان از استفاده صحیح اسناد HTML از متا تگ viewport را خودکار کنید.
اندازه محتوا را به نمای دید (viewport) تغییر دهید
در هر دو دستگاه دسکتاپ و موبایل، کاربران عادت دارند وب‌سایت‌ها را به صورت عمودی اسکرول کنند، نه افقی. مجبور کردن کاربر به اسکرول افقی یا کوچک‌نمایی برای دیدن کل صفحه، باعث ایجاد یک تجربه کاربری ضعیف می‌شود.
هنگام توسعه یک سایت موبایل با استفاده از متا تگ viewport، ایجاد تصادفی محتوای صفحه که کاملاً در viewport مشخص شده قرار نمی‌گیرد، امری رایج است. به عنوان مثال، تصویری که عریض‌تر از viewport نمایش داده می‌شود، می‌تواند باعث پیمایش افقی شود. برای جلوگیری از این امر، محتوای خود را طوری تنظیم کنید که در viewport جا شود.
محتوا به درستی برای viewport اندازه گیری نشده است. بررسی Lighthouse می تواند به شما در خودکارسازی فرآیند تشخیص محتوای سرریز شده کمک کند.
تصاویر
تصویری با ابعاد ثابت اگر بزرگتر از اندازه نمایشگر باشد، باعث اسکرول شدن صفحه می‌شود. توصیه می‌کنیم به همه تصاویر max-width 100% را اختصاص دهید، که تصاویر را کوچک می‌کند تا با فضای موجود متناسب شود و در عین حال از کشیده شدن آنها فراتر از اندازه اولیه‌شان جلوگیری می‌کند.
در بیشتر موارد، می‌توانید این کار را با اضافه کردن موارد زیر به برگه سبک خود انجام دهید:
img {
max-width: 100%;
display: block;
}
ابعاد تصویر را به عنصر img اضافه کنید
حتی وقتی max-width: 100% تنظیم می‌کنید، ما همچنان توصیه می‌کنیم ویژگی‌های width و height را به تگ‌های <img> خود اضافه کنید تا مرورگر بتواند قبل از بارگذاری تصاویر، فضایی را برای آنها رزرو کند. این کار به جلوگیری از تغییر طرح‌بندی کمک می‌کند.
طرح بندی
از آنجا که ابعاد و عرض صفحه نمایش در پیکسل‌های CSS بین دستگاه‌ها (مثلاً بین تلفن‌ها و تبلت‌ها و حتی بین تلفن‌های مختلف) بسیار متفاوت است، محتوا نباید برای رندر شدن خوب به عرض خاصی از نمایشگر متکی باشد.
در گذشته، این کار نیاز به تنظیم عناصر طرح‌بندی بر حسب درصد داشت. استفاده از اندازه‌گیری پیکسلی مستلزم آن است که کاربر در صفحات کوچک به صورت افقی اسکرول کند:
استفاده از درصد، ستون‌ها را در صفحه نمایش‌های کوچک‌تر باریک‌تر می‌کند، زیرا هر ستون همیشه درصد یکسانی از عرض صفحه نمایش را اشغال می‌کند:
تکنیک‌های مدرن طرح‌بندی CSS مانند flexbox، طرح‌بندی grid و multicol، ایجاد این شبکه‌های انعطاف‌پذیر را بسیار آسان‌تر می‌کنند.
فلکس‌باکس
از Flexbox زمانی استفاده کنید که مجموعه‌ای از آیتم‌ها با اندازه‌های مختلف دارید و می‌خواهید آنها به راحتی در یک یا چند ردیف قرار بگیرند، به طوری که آیتم‌های کوچک‌تر فضای کمتری و آیتم‌های بزرگتر فضای بیشتری را اشغال کنند.
.items {
display: flex;
justify-content: space-between;
}
شما می‌توانید از Flexbox برای نمایش آیتم‌ها به صورت یک ردیف یا با کاهش فضای موجود، آنها را در چندین ردیف نمایش دهید.
درباره فلکس باکس بیشتر بخوانید .
طرح بندی شبکه ای CSS
طرح‌بندی شبکه‌ای CSS، شبکه‌های انعطاف‌پذیری ایجاد می‌کند. می‌توانید مثال شناور قبلی را با استفاده از طرح‌بندی شبکه‌ای و واحد fr که نشان‌دهنده بخشی از فضای موجود در ظرف است، بهبود بخشید.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
همچنین می‌توانید از گرید برای ایجاد طرح‌بندی‌های گرید منظم با حداکثر تعداد آیتم‌های قابل جایگذاری استفاده کنید. تعداد مسیرهای موجود با کاهش اندازه صفحه نمایش کاهش می‌یابد. دموی زیر گریدی را نشان می‌دهد که شامل حداکثر تعداد کارت‌های مناسب در هر ردیف است و حداقل اندازه آن 200px است.
درباره طرح‌بندی شبکه‌ای CSS بیشتر بخوانید
طرح‌بندی چند ستونی
برای برخی از انواع طرح‌بندی، می‌توانید از طرح‌بندی چند ستونی (Multicol) استفاده کنید که با استفاده از ویژگی column-width تعداد ستون‌های واکنش‌گرا ایجاد می‌کند. در دموی زیر، صفحه زمانی ستون‌ها را اضافه می‌کند که فضای کافی برای ستون 200px دیگری وجود داشته باشد.
از کوئری‌های رسانه‌ای CSS برای واکنش‌گرایی استفاده کنید
گاهی اوقات ممکن است لازم باشد تغییرات گسترده‌تری در طرح‌بندی خود ایجاد کنید تا از اندازه‌های خاص صفحه نمایش پشتیبانی کند، تغییراتی که تکنیک‌های توضیح داده شده قبلی اجازه نمی‌دهند. اینجاست که کوئری‌های رسانه‌ای مفید واقع می‌شوند.
کوئری‌های رسانه‌ای فیلترهای ساده‌ای هستند که می‌توانید بر روی استایل‌های CSS اعمال کنید تا آن استایل‌ها را بر اساس نوع دستگاهی که محتوا را رندر می‌کند تغییر دهید. آنها همچنین می‌توانند استایل‌بندی را بر اساس ویژگی‌های دستگاه از جمله عرض، ارتفاع، جهت‌گیری و اینکه آیا دستگاه به عنوان صفحه لمسی استفاده می‌شود یا خیر، تغییر دهند.
برای ارائه سبک‌های مختلف برای چاپ، می‌توانید یک نوع خروجی را هدف قرار دهید و یک برگه سبک برای سبک‌های چاپ درج کنید:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
همچنین می‌توانید از یک کوئری رسانه‌ای برای گنجاندن استایل‌های چاپی در استایل‌شیت اصلی خود استفاده کنید:
@media print {
/* print styles go here */
}
برای طراحی وب واکنش‌گرا، رایج‌ترین سوالات مربوط به ویژگی‌های دستگاه است، بنابراین می‌توانید طرح‌بندی خود را برای صفحات لمسی یا کوچک‌تر سفارشی کنید.
پرس و جوهای رسانه‌ای بر اساس اندازه نمایشگر
کوئری‌های رسانه‌ای به شما امکان می‌دهند یک تجربه واکنش‌گرا ایجاد کنید که سبک‌های خاصی را برای اندازه صفحه نمایش خاص اعمال می‌کند. کوئری‌های مربوط به اندازه صفحه نمایش می‌توانند موارد زیر را آزمایش کنند:
-
width(min-width،max-width) -
height(min-height،max-height) -
orientation -
aspect-ratio
پرس‌وجوهای رسانه‌ای بر اساس قابلیت دستگاه
با توجه به طیف وسیعی از دستگاه‌های موجود، توسعه‌دهندگان نمی‌توانند فرض کنند که هر دستگاه بزرگی یک کامپیوتر رومیزی یا لپ‌تاپ معمولی است، یا هر دستگاه کوچکی از صفحه لمسی استفاده می‌کند. برخی از اضافات جدیدتر در مشخصات کوئری‌های رسانه‌ای به شما امکان می‌دهد ویژگی‌هایی مانند نوع اشاره‌گر مورد استفاده برای تعامل با دستگاه و اینکه آیا کاربر می‌تواند اشاره‌گر را روی عناصر نگه دارد یا خیر را آزمایش کنید.
-
hover -
pointer -
any-hover -
any-pointer
سعی کنید این نسخه آزمایشی را در دستگاه‌های مختلف، مانند رایانه رومیزی معمولی و تلفن یا تبلت، مشاهده کنید.
این ویژگی‌های جدیدتر در همه مرورگرهای مدرن به خوبی پشتیبانی می‌شوند. برای اطلاعات بیشتر در مورد hover ، any-hover ، pointer و any-pointer به صفحات MDN مراجعه کنید.
any-hover و any-pointer استفاده کنید
ویژگی‌های any-hover و any-pointer بررسی می‌کنند که آیا کاربر می‌تواند اشاره‌گر را روی عناصر نگه دارد (که اغلب hovering نامیده می‌شود) یا اصلاً از اشاره‌گر استفاده کند، حتی اگر این روش اصلی تعامل او با دستگاهش نباشد. هنگام استفاده از این ویژگی‌ها بسیار مراقب باشید، به عنوان مثال برای جلوگیری از مجبور کردن کاربر صفحه لمسی به استفاده از ماوس. با این حال، any-hover و any-pointer می‌توانند مفید باشند اگر تعیین نوع دستگاه کاربر مهم باشد. به عنوان مثال، یک لپ‌تاپ با صفحه لمسی و ترک‌پد باید علاوه بر قابلیت hover، اشاره‌گرهای درشت و ریز را نیز مطابقت دهد.
نحوه انتخاب نقاط شکست
نقاط شکست را بر اساس کلاس‌های دستگاه، یا هر محصول، نام تجاری یا سیستم عامل تعریف نکنید. این کار نگهداری کد شما را دشوار می‌کند. در عوض، اجازه دهید محتوا تعیین کند که طرح‌بندی آن چگونه تغییر می‌کند تا با کانتینر متناسب شود.
با شروع از نقاط کوچک، نقاط شکست اصلی را انتخاب کنید و سپس آنها را افزایش دهید.
ابتدا محتوا را طوری طراحی کنید که در اندازه صفحه نمایش کوچک جا شود، سپس صفحه را تا زمانی که به یک نقطه توقف نیاز باشد، گسترش دهید. این به شما امکان می‌دهد تعداد نقاط توقف در صفحه خود را به حداقل برسانید و آنها را بر اساس محتوا بهینه کنید.
مثال زیر، نمونه ویجت پیش‌بینی آب و هوا در ابتدای این صفحه را بررسی می‌کند. اولین قدم این است که پیش‌بینی را در صفحه نمایش کوچک به خوبی نمایش دهیم:
در مرحله بعد، اندازه مرورگر را تغییر دهید تا فضای خالی زیادی بین عناصر وجود داشته باشد تا ویجت خوب به نظر برسد. این تصمیم سلیقه‌ای است، اما مطمئناً بیش از 600px خیلی عریض است.
برای قرار دادن یک نقطه توقف در 600px ، دو کوئری رسانه‌ای در انتهای CSS خود برای کامپوننت ایجاد کنید: یکی برای زمانی که مرورگر 600px یا باریک‌تر است و دیگری برای زمانی که از 600px عریض‌تر است.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
در نهایت، CSS را اصلاح کنید. در داخل کوئری مدیا برای max-width 600px ، CSS مربوط به صفحات نمایش کوچک را اضافه کنید. در داخل کوئری مدیا برای min-width 601px CSS مربوط به صفحات نمایش بزرگتر را اضافه کنید.
در صورت لزوم، نقاط شکست جزئی را انتخاب کنید
علاوه بر انتخاب نقاط شکست اصلی در هنگام تغییرات قابل توجه طرح‌بندی، تنظیم تغییرات جزئی نیز مفید است. به عنوان مثال، بین نقاط شکست اصلی، تنظیم حاشیه‌ها یا فاصله‌گذاری روی یک عنصر یا افزایش اندازه فونت برای طبیعی‌تر جلوه دادن آن در طرح‌بندی می‌تواند مفید باشد.
این مثال از همان الگوی قبلی پیروی می‌کند و با بهینه‌سازی طرح‌بندی‌های صفحه نمایش کوچک‌تر شروع می‌شود. ابتدا، وقتی عرض صفحه نمایش بیشتر از 360px است، فونت را تقویت کنید. پس از آن، وقتی فضای کافی وجود دارد، می‌توانید دمای بالا و پایین را از هم جدا کنید تا در یک خط قرار گیرند و آیکون‌های آب و هوا را بزرگتر کنید.
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
برای صفحه نمایش‌های بزرگ، توصیه می‌کنیم حداکثر عرض پنل پیش‌بینی را محدود کنید تا از کل عرض صفحه استفاده نکند.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
بهینه سازی متن برای خواندن
نظریه کلاسیک خوانایی بیان می‌کند که یک ستون ایده‌آل باید شامل ۷۰ تا ۸۰ کاراکتر در هر خط باشد (حدود ۸ تا ۱۰ کلمه در انگلیسی). هر بار که عرض یک بلوک متنی از حدود ۱۰ کلمه بیشتر می‌شود، یک نقطه شکست اضافه کنید.
در این مثال، فونت Roboto با 1em در هر خط در صفحه نمایش کوچک‌تر ۱۰ کلمه تولید می‌کند، اما در صفحه نمایش‌های بزرگتر به یک نقطه توقف نیاز است. در این حالت، اگر عرض مرورگر بیشتر از 575px باشد، عرض ایده‌آل محتوا 550px است.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
از پنهان کردن محتوا خودداری کنید (:#avoid-hiding-content)
هنگام انتخاب محتوایی که می‌خواهید پنهان یا نمایش دهید، بسته به اندازه صفحه نمایش، مراقب باشید. محتوا را فقط به این دلیل که نمی‌توانید آن را در صفحه جا دهید، پنهان نکنید. اندازه صفحه نمایش پیش‌بینی نمی‌کند که کاربر چه چیزی را می‌خواهد ببیند. به عنوان مثال، حذف تعداد گرده‌ها از پیش‌بینی آب و هوا می‌تواند برای مبتلایان به آلرژی بهاری که به این اطلاعات نیاز دارند تا تصمیم بگیرند که آیا می‌توانند بیرون بروند یا خیر، یک مشکل جدی باشد.
مشاهده نقاط توقف کوئری رسانه در Chrome DevTools
بعد از اینکه نقاط شکست کوئری رسانه‌ای خود را تنظیم کردید، بررسی کنید که چگونه بر ظاهر سایت شما تأثیر می‌گذارند. می‌توانید اندازه پنجره مرورگر خود را تغییر دهید تا نقاط شکست فعال شوند، اما Chrome DevTools یک ویژگی داخلی دارد که نشان می‌دهد یک صفحه تحت نقاط شکست مختلف چگونه به نظر می‌رسد.
To view your page under different breakpoints:
- ابزار توسعه (DevTools) را باز کنید .
- حالت دستگاه را روشن کنید. این به طور پیش‌فرض در حالت واکنش‌گرا باز می‌شود.
- برای دیدن کوئری‌های رسانه‌ای خود، منوی حالت دستگاه (Device Mode) را باز کنید و نمایش کوئری‌های رسانه‌ای (Show media queries) را انتخاب کنید. این کار نقاط توقف (breakpoints) شما را به صورت نوارهای رنگی در بالای صفحه نشان می‌دهد.
- برای مشاهده صفحه خود در حالی که آن کوئری رسانه‌ای فعال است، روی یکی از نوارها کلیک کنید. برای پرش به تعریف آن کوئری رسانه‌ای، روی یک نوار کلیک راست کنید.