معرفی تکنیک های intrinsic در طراحی سایت

هر صنعتی دارای زبان و اصطلاحات خاص خود است،طراحی سایت نیز از این موضوع استثنا نیست، و افرادی که در این حوزه هستند، می دانند که طراحی وب دارای اصطلاحات تخصصی زیادی است. حتی اگر نیمی از عبارات تکمیل‌شده را عناوین بی ربط، و مهمل مربوط به حرفه خودمان تصور کنیم، باید برای همه این اصطلاحات، زبان مخصوص به خودمان را داشته باشیم. اصطلاحات نقش مهمی در حرفه طراحی سایت دارد، این اصطلاحات به ما کمک می کنند روابط مفیدی با سایر طراحان و توسعه دهندگان وب داشته باشیم. در این مقاله به معرفی تکنیک های intrinsic یا طراحی سایت ذاتی می پردازیم. گاهی اوقات ممکن است فردی با یک اصطلاح جدید ظاهر شود، که تا به حال کسی آن را نشنیده است، مانند طراحی سایت واکنش گرا (Responsive)؛ ممکن است در ابتدا به کار بردن اصطلاحات جدید افراد را گیج کند، ولی بعد ها با آن آشنا خواهند شد. همچنین ممکن است فردی اصطلاحاتی را به کار بگیرد که ما قبلا از آن استفاده کرده ایم، ولی نه به این عنوان و در حوزه طراحی سایت برای همه آشنا باشد.طراحی سایت ذاتی (intrinsic) جزو دسته دوم می باشد، ما قبلا با آن سر و کار داشته ایم، اما حالا ما یک اسم برای آن داریم.

طراحی intrinsic چیست 

این تکنیک با ماژول های CSS Gride و Flex box شروع می شود. طراحان سایت به این نتیجه رسیدند که استفاده از جداول برای چیدمان غیر عملی است، آن ها با استفاده از ویژگی های float، همراه با مقدار مناسب از دستورات absolute و fixed (مطلق و ثابت)، برای قرار دادن برای قرار دادن یک المان در صفحه مورد استفاده قرار گرفت. این مورد برای ما خوب عمل کرده‌است، اما امروزه دیگر مورد استفاده طراحان وب قرار نمی گیرد. در واقع این روش ، مجموعه ای از هک‌ها بود. سپس شروع کردیم به کنار هم گذاشتن چارچوب‌های CSS، بعد از آن افراد بسیار اشتباهی شروع به استفاده از جاوا اسکریپت کردند تا CSS پر از هک را بنویسند. تقریباً همه وب براساس کد های هکی ساخته شد، و ساختار وب به هم ریخته‌است.

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

تفاوت های طراحی سایت ذاتی و واکنش گرا

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

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

اصول کلیدی طراحی سایت ذاتی

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

• تصاویر ثابت و ترکیب شده: قبل از طراحی وب، از تصاویر ثابت استفاده کردیم، که گاهی اوقات در خارج از محتوای خودشان قرار گرفته اند. برای حل این مساله، سپس با استفاده از تصاویر انعطاف‌پذیر شروع کردیم که مطابق با اندازه محتوای خود رشد می‌کنند. طراحی وب واقعی به جای استفاده از تصاویر انعطاف‌پذیر، استفاده از روش‌های ثابت را به طور همزمان وابسته به زمینه می‌کند. علاوه بر این، در نظر گرفتن ویژگی های CSS، می‌توانید هم اکنون اندازه تصاویرتان را هم به صورت عمودی و هم به صورت افقی تنظیم کنید.  فقط تصویر را طوری تنظیم کنید که متناسب با هدف شما باشد.
• مراحل آماده سازی: بزرگترین توسعه دهنده قابلیت های CSS امروزه بدون شک، ماژول CSS Grid  است، که راه های جدیدی را برای چگونگی پاسخ دادن طرح، و محتوای اصلی معرفی می کند. طراحی سایت ذاتی، شما را به استفاده از ترکیبی از گزینه‌های مختلف توصیه می کند، تا با این کار به عناصر یک صفحه وب اجازه بدهد، بهتر با هم تعامل داشته باشند.
• طرح بندی دو بعدی: با کمک CSS Gride، طراحی سایت ذاتی قابلیت توسعه طرح‌های دو بعدی را به شما می‌دهد. در این طرح بندی به جای ستون‌های انعطاف‌پذیر، شما همچنین می‌توانید ردیف‌های انعطاف‌پذیر هم داشته باشید. هر مرحله از آماده سازی برای هر دو ردیف و هم ستون به خوبی عمل می‌کند. شما می‌توانید هر دو ارتفاع و هم عرض را تعریف کنید. به عبارت دیگر، شما اکنون توانایی ایجاد فضای اطراف را دارید، و این کار هم به صورت عمودی و هم به صورت افقی قابل انجام است.
• محتویات پوشه: با طراحی سایت ذاتی شما اکنون می توانید محتویات متفاوتی داشته باشید. هنگامی که از Flow Analysis استفاده می‌کنید ، اجسام شناور هرگز نمی‌تواند یک بافت قالب‌بندی جدید ایجاد کند ،  به همین دلیل است که از چرند و پرند نویسی استفاده می‌کنید . حالا دیگر نیازی به چنین مواردی وجود ندارد . در عوض ، شما می‌توانید بهترین ابزار چیدمان را انتخاب کنید تا ” مدل انعطاف‌پذیری ” خود را برای وب سایت خود طراحی کنید . به عنوان مثال ، شما می‌توانید از یک چیدمان شبکه حاوی عناصر flexbox داخل آن استفاده کنید . بازرس شبکه فایرفاکس  می‌تواند به شما کمک کند هر نوع طرح را جداگانه بررسی کنید .