سالهاست که ما در وب و طراحی وب به پیروی از طراحی گرافیک، از واحدهای پیکسلی برای مشخص کردن ابعاد و اندازه‌ها استفاده می‌کنیم. همونطوری که قبلا در مطلب تصاویر SVG آینده وب هستند گفتم، تکنولوژی داره به سمتی حرکت می‌کنه که توش پیکسل‌ها دائما در حال تغییر هستن. ما سال‌ها از صفحه‌های نمایش با فشردگی ۱ پیکسل استفاده کردیم و بعد با معرفی شدن صفحه‌نمایش رتینا از طرف اپل، این فشردگی به ۲ پیکسل تبدیل شد. به این معنی که تعداد پیکسل‌هایی که در یک اندازه واحد جا می‌گیرن ۲ برابر شد. بعد از صفحه‌نمایش رتینا، شرکت‌های مختلف فشردگی‌های پیکسلی جدید و بالاتری رو معرفی کردند و این مسئله کار رو برای ما طراح‌های وب خیلی سخت کرد؛ چرا که باید طرح‌های ما تو هر دستگاهی با هر سایز صفحه‌نمایش و فشردگی پیکسلی، عالی نمایش داده بشن. (لطفا برای توضیحات بیشتر در این مورد، مقاله‌ای که بالاتر بهش اشاره کردم رو بخونید.)

مشکلات طراحی پیکسلی

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

font: 14px/22px "Helvetica Neue", Arial, sans-serif;

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

مشکلات تایپوگرافی

تقریبا تمام مرورگرها به صورت پیشفرض یک فونت و یک اندازه قلم برای تمام صفحات وب تعیین می‌کنند که اگر صفحه‌ای در وب خودش فونت و سایز رو تعیین نکرده باشه، صفحه رو بشه راحت مشاهده کرد. اکثر مرورگرها برای قلم پیش‌فرض فونت Times و سایز ۱۶ پیکسل رو انتخاب می‌کنند و این به صورت یه استاندارد در اومده؛ ولی نکته مهم در این مورد این هست که کاربری که از اون مرورگر استفاده می‌کنه می‌تونه این پیش‌فرض رو تغییر بده. مثلا کسی که مشکل بینایی داره، می‌تونه به تنظیمات مرورگرش رو باز کنه و به جای ۱۶ پیکسل، ۳۲ پیکسل رو انتخاب کنه، در نتیجه این کار، همه چیز روی وب باید ۲ برابر بشه ولی این اتفاق نمی‌افته چون بیشتر جاها، طراح‌های وب بر اساس پیکسل همه چیز رو تعیین کردند.

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

مشکلات اجزای رابط کاربری

اگر موقع طراحی اجزای رابط کاربری (مانند دکمه‌ها، فرم‌ها و ...) از واحدهای پیکسلی استفاده بشه، باز هم مشکلاتی که بالاتر در موردشون حرف زدم اتفاق می‌افتن. اولا با تغییر سایز قلم پیش‌فرض ابعاد رابط کاربری تغییر نمی‌کنه و دوما اگر با قابلیت بزرگنمایی (Zoom) مرورگر این کار انجام بشه، امکان اینکه اجزا به هم بریزند خیلی زیاد هست.

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

مشکلات طراحی واکنش‌گرا (Responsive)

سومین مشکل عمده در طراحی پیکسلی، نقاط شکست (Break Point) در طراحی واکنش‌گرا هست. همونطور که می‌دونید ما بر اساس ابعاد صفحه‌نمایش‌های مختلف نقاط شکست طرح رو مشخص می‌کنیم. مثلا اینطور در نظر می‌گیریم که اگر عرض صفحه از ۷۶۸ پیکسل کوچک‌تر بود طرح توی تبلت (یا کامپیوترهای کوچیک) نمایش داده می‌شه و اگر از ۳۲۰ پیکسل کمتر بود، وارد محدوده صفحه نمایش موبایل می‌شیم. البته این تخمین‌ها معمولا خیلی وسیع‌تر شکل می‌گیرن مثلا ما می‌خوایم طرح رو به صورت جداگونه برای تبلت‌ها تو حالت افقی یا عمودی بهینه سازی کنیم و غیره.

اما تا کی می‌خوایم این راه رو ادامه بدیم؟ هر روز دستگاه‌های جدیدتری تولید می‌شن که صفحه‌نمایش‌های مختلف با ابعاد مختلف دارن. سایت‌ها ما ممکنه تو صفحه نمایش‌های ۳ اینچی دیده بشن یا صفحه‌های ۲۷ اینچی و بزرگتر که هر کدوم فشردگی پیکسلی و ابعاد پیکسلی متفاوتی دارن. ما اگر بخوایم بر اساس پیکسل تصمیم بگیریم، باید حداقل ۳۰ ترکیب مختلف توی طراحی در نظر بگیریم تا در نتیجشون طرحمون همه جا خوب دیده بشه. و این کار خیلی سخت هست و تقریبا غیر ممکنه.

رهایی از پیکسل

قبل از همه چیز می‌خوام در مورد دو واحد em و rem توضیح بدم.

واحد em

وقتی شما سایز متن رو بر اساس پیکسل مشخص می‌کنید، در واقع دارید ابعاد حرف M بزرگ رو بر اساس قلم جاری تعیین می‌کنید. مثلا اگر شما سایز قلم رو ۱۶ پیکسل انتخاب کردید، اندازه M بزرگ ۱۶ پیکسل در ۱۶ پیکسل هست. واحد em به همین موضوع اشاره داره: یک em برابر هست با ابعاد M بزرگ. حالا واحد em از کجا می‌فهمه که این ابعاد چقدر در چقدر هست؟ از عنصر والدش (Parent Element) این اندازه رو به ارث می‌بره. برای مثل این ساختار HTML رو ببینید:

<div class="parent">
    First Text.
    <div class="child">
        Second Text.
    </div>
</div>

و این کد CSS:

.parent{
    font-size: 18px;
}
.child{
    font-size: 1.5em;
}

و این نتیجه کد هست (می‌تونید باهاش بازی کنید):

همونطوری که توی نتیجه مشخص هست، سایز متن عنصر والد ۱۸ پیکسل هست و عنصر مد نظر سایز 1.5em داره. این رابطه به این معنی هست که عنصری که بر اساس em سایز داره، سایزش رو از عنصر والد ینی عنصری که پیکسلی سایز داره دریافت می‌کنه. 1.5em برابر هست با ۲۷ پیکسل (۱.۵ × ۱۸ = ۲۷). هرچقدر عناصر رو تودرتو کنیم، باز هم همین قانون پا بر جاست. حتی اگر عنصر والد هم سایزش بر اساس em باشه. این مثال رو ببینید:

می‌بینید که هر کدوم از متن‌ها سایزش رو از والدش می‌گیره و بر اساس اون محاسبه می‌شه. حالا اگر والد مستقیمش سایز نداشته باشه چی می‌شه؟ از نزدیک‌ترین والدی که سایز داره سایزش رو میگیره و بر اساس اون محسابه می‌شه.

حالا اگر هیچ عنصری در صفحه بر اساس پیکسل سایز نگرفته باشه چی؟ اگر یادتون باشه بالاتر گفتم که اکثر مرورگرها یک سایز پیش‌فرض برای صفحات در نظر می‌گیرن که عموما ۱۶ پیکسل هست. بنابراین ما می‌تونیم تمام عناصر صفحه رو بر اساس em طراحی کنیم. مهم‌تر از همه اون‌ها، سایز قلم اصلی صفحه رو که معمولا روی عنصر body یا html قرار می‌گیره (و بالا مثال پیکسلیش رو دیدید) می‌تونیم بر اساس em انتخاب کنیم:

body{
    font: 1em/1.5 "Helvetica Neue", Arial, sans-serif;
}

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

واحد rem

مشکلی که در مورد واحد em وجود داره اینه که همیشه بر اساس والد مستقیمش محاسبه می‌شه. ینی اگر یه عنصر سایز 1.2em گرفت، دیگه همه عناصر داخل اون عنصر مبناشون این سایز جدید هست، حتی اگر اون‌ها سایزشون 1em باشه، ابعاد M بزرگ رو از مستقیم‌ترین والدشون دریافت می‌کنن. ولی ما همیشه این رو نیاز نداریم و بیشتر مواقع می‌خوایم که سایز بر اساس سایز اصلی صفحه که همون 1em که روی body یا html تعیین کرده بودیم محاسبه بشه.

برای حل این مشکل می‌تونیم از واحد rem (که مخفف root em هست) استفاده کنیم. می‌دونید که root به معنی ریشه هست، بنابراین وقتی بر اساس rem به عنصری سایز می‌دید، سایز اون عنصر بر اساس ریشه‌ای ترین عنصر صفحه محاسبه می‌شه (مثلا body یا html) و از والد مستقیمشون تاثیر نمی‌گیرن. اگر ریشه‌ای‌ترین عنصر صفحه سایز مشخصی نداشته باشه، سایز بر اساس پیش‌فرض مرورگر که قبلا در موردش صحبت کردیم محاسبه می‌شه. برای واحد rem فرقی نمی‌کنه که چقدر توی ساختار عناصر پایین رفته باشیم یا تودرتو باشه، همیشه از ریشه‌ای‌ترین عنصر سایزش رو میگیره و این خیلی توی تایپوگرافی خوب برای وب به ما کمک می‌کنه. برای بازی با این واحد نمونه زیر رو ببینید:

تو این مثال می‌بینید که اون متن Forth Text با وجود اینکه داخل چند تا عنصر دیگه با سایزهای متن مختلف هست ولی چون با rem بهش سایز دادیم، اندازش با اون Normal Text که هیچ سایزی نداره برابره.

حل مشکلات طراحی پیکسلی

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

حل مشکل تایپوگرافی

اگر برای تعیین سایز تمام متن‌هایی که در صفحه وجود دارن از واحدهای em و rem استفاده بشه، دیگه هیچ مشکلی در نمایش صحیح صفحه به وجود نمیاد. توی مثال قبلی که دیدید، چون سایز عنصر html در صفحه 1em تعیین شده و بقیه عناصر داخل صفحه از اون تبعیت می‌کنن، اگر برید تو تنظیمات مرورگرتون و سایز پیش‌فرض رو از ۱۶ پیکسل به ۳۲ پیکسل تغییر بدید، همه چی به درستی بزرگنمایی می‌شه و دقیقا همون اتفاق‌هایی می‌فته که اتنظار داشتید: تمام متن‌ها ۲ برابر می‌شن.

حل مشکل اجزای رابط کاربری

شما می‌تونید از واحدهای em و rem به تنها برای متون داخل صفحه، بلکه برای تمام واحدهایی که توی CSS وجود دارن استفاده کنید. مثلا برای width, height, padding, margin و غیره.

برای مثلا من دکمه‌های زیر رو درست کردم:

تو این مثال برای تمام واحدهای موجود در صفحه از rem و em استفاده شده. حتی برای گوشه‌های گرد. می‌بینید که فقط با تغییر سایز متن دکمه می‌شه تمام اجزای اون رو به صورت متناسب بزرگ و کوچیک کرد. کاری که با پیکسل خیلی سخت و خسته کننده هست (مثال بالا یه نمونه خیلی کوچیک هست از این موضوع).

با مثال بالا بازی کنید و مثلا سایز متن اصلی صفحه که روی تگ html ست شده رو زیاد و کم کنید (مثلا 1.2em). می‌بینید که دکمه‌ها هم به همین نسبت بزرگ می‌شن و ظاهرشون خراب نمی‌شه. اگر همه اجزای رابط کاربری‌تون رو بر اساس این واحدها طراحی کنید، رابط کاربری شما مقایس پذیر می‌شه و خیلی راحت می‌تونید تغییرات مد نظرتون رو روش اعمال کنید.

نکته: توجه کنید که تمام خصوصیت‌های CSS که سایزشون بر اساس rem و em تعیین می‌شه، سایزشون رو از خصوصیت font-size عنصر جاری دریافت می‌کنن. برای همین هست که تونستیم فقط با تغییر font-size در مثال بالا حتی padding رو هم زیاد و کم کنیم به صورت خودکار و دیگه نیاز به تعیین دوبارش نباشه.

حل مشکلات طراحی واکنش‌گرا (Responsive)

مشکلی که بالاتر در موردش حرف زدم رو راحت می‌شه با واحد em برطرف کرد. ولی باید قبلش مفهوم طراحی واکنش‌گرا رو توی ذهنتون تغییر بدید:

صفحه‌نمایش‌های مختلف و دستگاه‌های مختلف رو فراموش کنید و مرکز توجهتون رو «محتوی» قرار بدید. اینکه محتوای صفحه شما چه عرضی داشته باشه خوب نشون داده می‌شه؟ مثلا اگر سایت روی یه صفحه نمایش کوچیک نمایش داده بشه، شما فضای خیلی کمی برای نمایش دارید، برای همین شما باید تصمیم بگیرید که تو بازه‌های مختلف چه چیزهایی رو از صفحه حذف کنید یا نمایش بدید. برای اینکار صفحه رو کوچیک و بزرگ کنید و تعیین کنید که تو چه عرض‌هایی که دیگه طرحتون خوشگل نیست (مثلا زیادی خلوته یا زیادی شلوغه) و دقیقا اون عرض میشه نقطه شکست (Break Point) شما.

عرض‌هایی که مشخص می‌کنید رو بر اساس پیکسل تعیین نکنید، در عوض از واحد em استفاده کنید. اوایل کار ممکنه این کار براتون سخت باشه برای همین می‌تونید یه عددی رو به عنوان پیش‌فرض صفحه (همون پیش‌فرض مرورگر که ۱۶ پیکسل هست مثلا) در نظر بگیرید و عرض پیکسلی مورد نظرتون رو تقسیم بر اون عدد (مثلا ۱۶) کنید تا مقدار em به دست بیاد. برای مثال صفحه رو کوچیک کنید تا جایی که همه چیز به هم بریزه و اون جا متوقف بشید و ببینید که عرض چقدر هست، مثلا عرض ۵۶۰ پیکسل کمتر صفحه شما شلوغ می‌شه. حالا این عدد رو تقسیم رو ۱۶ کنید، عدد 35em به دست میاد و می‌تونید این رو به عنوان یه نقطه شکست تو طرحتون اضافه کنید. مثلا من تو یکی از طرحای اخیرم ۳ نقطه شکست تعیین کردم: معمولی، متوسط و کوچیک. نتیجه این شد:

/* -- Breakpoint (.bp1)
------------------------------------------------------------- */            
@media only screen and (max-width: 30em) {

}

/* -- Breakpoint 2 (.bp2)
------------------------------------------------------------- */            
@media only screen and (max-width: 48em) {

}

/* -- Breakpoint 3 (.bp3)
------------------------------------------------------------- */            
@media only screen and (max-width: 60em) {

}

حالا داخل این Media Query ها تغییراتی که روی رابط کاربری می‌خوام رو می‌دم. البته بهتر هست که برای طراحی واکنش‌گرا از راه‌حل Mobile First استفاده بشه که شرحش تو این مطلب نمی‌گنجه.

استفاده از em به جای پیکسل چند تا خاصیت داره:

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

۲- (همینطور که چند بار بالاتر توضیح دادم) اگر کاربر سایز متن پیش‌فرض مرورگرش رو از عدد ۱۶ پیکسل تغییر بده و عدد بزرگتر یا کوچیکتری رو انتخاب کنه، با توجه به اینکه متن‌ها همه بزرگ می‌شن (اگر بر اساس چیزهایی که قبلا گفتم عمل شده باشه)، طرح هم واکنش نشون می‌ده. مثلا اگر کاربر سایز پیش‌فرض مرورگر رو ۴۰ پیکسل به جای ۱۶ پیکسل انتخاب کرده باشه، طرح می‌فهمه که این متن‌های بزرگ توی نقطه شکست فعلی جا نمی‌گیره و می‌ره رو نقطه شکست بعدی. مثلا نسخه مخصوص صفحات کوچیک رو روی صفحه معمولی نمایش می‌ده که طرح به هم نریزه.

جمع بندی

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

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

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