تکنیک intrinsic یا طراحی سایت داخلی یا ذاتی در ابتدای سال 2018 ، به عنوان روش جدیدی برای طراحی سایت معرفی شد. پس از آن طراحی سایت ریسسپانسیو معرفی شد. از آن زمان تا کنون توجه و تمرکز اکثر طراحان وب بر روی طراحی سایت ریسپانسیو (RWD) است. در حالی که طرح بندی ریسپانسیو بر این موضوع تمرکز دارد که سایت ها بر روی صفحه نمایش با اندازه های گوناگون به درستی نمایش داده شوند، امروزه طراحی سایت ذاتی (IWD) یک گام از آن جلوتراست.
تکنیک Intrinsic چیست؟
در طراحی سایت، معمولا اصطلاحات زیادی وجود دارد. بعضی از آن ها مدت ها مورد استفاده و کاربرد قرار می گیرند و قدیمی تر و رایج تر هستند. اما درمورد اصطلاحات جدیدی که رواج می یابد، معمولا دو حالت وجود دارد. دسته ای از اصطلاحات که با پیدایش یک روش جدید و معرفی آن، باب می شوند و پس از آن مورد استفاده قرار می گیرند. مانند ریسپانسیوسازی که تا پیش از معرفی، چندان شناخته شده و مورداستفاده نبود.
دسته دیگر اصطلاحات، آن هایی هستند که طراحان و کدنویسان از آن تکنیک ها استفاده می کنند بدون اینکه عبارت خاصی که نشان دهنده آن باشد، مطرح شود. با رواج بیشتر این تکنیک ها، اسمی برای آن انتخاب می شود تا سرچ و صحبت درمورد آن، آسان تر شود. تکنیک Intrinsic هم از همین گروه است.
طراحی وب ذاتی، به جای محدود کردن طراحان و توسعه دهندگان به “قواعد از پیش تعیین‌شده” وب، به آنها انعطاف میدهد تا تکنیکهای ترکیب‌بندی سنتی، آزموده شده و ابزارهای چیدمان مدرن مانند CSS و Flexbox را ترکیب کنند، تا چیدمان منحصر به فرد براساس محتوای درونی وب سایت ایجاد شود، این رویکرد طراحی وب جدید به آنها کمک میکند تا محتوا را در یک صفحه وب به بهترین شکل ممکن نمایش دهند، و همچنین کدنویسی را تمیز و کارآمدتر نگه دارند. در ساده‌ترین شرایط، به جای این که طراحی محتوا نادیده گرفته شود، طراحی وب ذاتی تنها بر روی طراحی محتوا متمرکز است.
در واقع با این تکنیک با معرفی چهار ماژول Multicolumn ،Flow ،Flex و Grid در CSS توانست بسیاری از کدهایی که تا قبل از آن طراحان مجبور بودند به صورت دستی و خلاقانه ایجاد کنند را به صورت آماده در اختیار برنامه نویسان قرار دهد. در نتیجه طراحان دیگر مجبور نیستند تا ساعت ها وقت بگذارند و ریز به ریز کد های سایت را با تفکر خود ایجاد کنند. تنها با زدن چند دکمه ده ها کد آماده در اختیار آن ها قرار می گیرد تا بتوانند از طریق این کد ها طراحی سایت فوق حرفه ای خود را به اتمام برسانند.
اصول کلیدی طراحی سایت ذاتی (تکنیک intrinsic)
هر رویکرد طراحی وب دارای اصول خاص خود بوده، طراحی وب ذاتی نیز دارای اصول خاص خود می باشد. این رویکرد مبتنی بر چند اصل کلیدی زیر است:
تصاویر ثابت و ترکیب شده
قبل از این در طراحی وب، از تصاویر ثابت استفاده می کردیم ، که گاهی اوقات تصویر در خارج از محتوای خودشان قرار می گرفتند. برای حل این مساله از تصاویر انعطاف‌پذیر شروع کردیم که مطابق با اندازه محتوای خود رشد میکنند. در تکنیک طراحی وب ذاتی به جای استفاده از تصاویر انعطاف‌پذیر، استفاده از روش‌های ثابت را به طور همزمان وابسته به زمینه میکند. علاوه بر این، با در نظر گرفتن ویژگی های CSS، میتوانید هم اکنون اندازه تصاویرتان را هم به صورت عمودی و هم به صورت افقی تنظیم کنید. فقط تصویر را طوری تنظیم کنید که متناسب با هدف شما باشد.
مراحل آماده سازی
بزرگترین توسعه دهنده قابلیت های CSS امروزه بدون شک، ماژول CSS Grid است، که راه های جدیدی را برای چگونگی پاسخ دادن طرح، و محتوای اصلی معرفی می کند. طراحی سایت با تکنینک ذاتی، شما را به استفاده از ترکیبی از گزینه‌های مختلف توصیه می کند، تا با این کار به عناصر یک صفحه وب اجازه بدهد، بهتر با هم تعامل داشته باشند.
طرح بندی دو بعدی
با کمک CSS Gride، طراحی سایت ذاتی قابلیت توسعه طرح‌های دو بعدی را به شما میدهد. در این طرح بندی به جای ستون‌های انعطاف‌پذیر، شما همچنین میتوانید ردیف‌های انعطاف‌پذیر هم داشته باشید. هر مرحله از آماده سازی برای هر دو ردیف و هم ستون به خوبی عمل میکند. شما میتوانید هر دو ارتفاع و هم عرض را تعریف کنید. به عبارت دیگر، شما اکنون توانایی ایجاد فضای اطراف را دارید، و این کار هم به صورت عمودی و هم به صورت افقی قابل انجام است.
محتویات پوشه
با طراحی سایت ذاتی شما اکنون می توانید محتویات متفاوتی داشته باشید. هنگامی که از Flow Analysis استفاده می‌کنید ، اجسام شناور هرگز نمی‌توانند یک بافت قالب‌بندی جدید ایجاد کنند ، به همین دلیل است که از چرند و پرند نویسی استفاده می‌کنید . حالا دیگر نیازی به چنین مواردی وجود ندارد . در عوض ، شما میتوانید بهترین ابزار چیدمان را انتخاب کنید تا ” مدل انعطاف‌پذیری ” خود را برای وب سایت خود طراحی کنید . به عنوان مثال ، شما میتوانید از یک چیدمان شبکه حاوی عناصر flexbox داخل آن استفاده کنید . با استفاده از inspector مرورگرهایی مانند فایرفاکس و کروم می‌تواند به شما کمک کند هر نوع طرح را جداگانه بررسی کنید .
تفاوت طراحی سایت تکنیک intrinsic با Responsive
برای طراحی سایت های ریسپانسیو، با استفاده از Media Queries تعیین می کنیم که نمایش صفحات سایت در ابعاد مختلف به چه صورتی باشد و محتوای موردنظر در دستگاه های مختلف به چه شکلی نمایش داده شود. اما در صورت استفاده از ماژول های جدیدی مثل Flex، می توان بدون استفاده از Media Queries، تنها با یک دستور معین، چگونگی نمایش صفحات وب سایت در سایزها و دستگاه های گوناگون را به آسانی مشخص و مدیریت کنید.
در طراحی سایت ریسپانسیو، ستون بندی ها به صورت شناور هستند به این معنا که عرض آن ها با عوض شدن ابعاد صفحه تغییر می کند. اما در طراحی اینرینسیک یا ذاتی ، می توان با استفاده از Grid، ردیف ها را نیز مدیریت کرده و محتوا و سایزهای آن را شناور کنیم.
در طراحی ریسپانسیو، ما ستون بندی های شناور داریم یعنی بخش هایی که عرض آنها با تغییر سایز صفحه تغییر می کند. ولی در طراحی ذاتی با استفاده از Grid علاوه بر ستون ها می توانیم ردیف ها را نیز مدیریت کرده و محتوا و ابعاد آنها را شناور کنیم.
در بخش نمایش تصاویر، در طراحی ریسپانسیو، عکس هایی که بزرگ هستند از فضای مشخص شده خارج می شوند مگر در صورتیکه سایز آن ها را از قسمت عرض به ابعاد فضای بالایی محدود کنیم و ارتفاع آن به صورت خودکار محاسبه شود. اما در طراحی تکنیک intrinsic با استفاده از object-fit می توان تصویر را متناسب با سایزی که در آن قرار می گیرد نشان دهیم تا خود مرورگر تصویر را متناسب با ابعاد فضای مادر نشان دهد.
چه زمانی از طراحی تکنیک intrinsic استفاده کنیم؟
همین امروز، بسیاری از طراحان وب در سراسر دنیا از تکنیک ها و ماژول های جدید در طراحی صفحات وب بهره میبرند و در بسیاری از پروژه های طراحی سایت های شرکتی جدید میتوانید نمونه هایی اجرا شده از آن را مشاهده کنید. این مفهوم جدید تنها برای اشاره مستقیم و صریح به این تکنیک معرفی شده است و زمان مشخصی برای استفاده از آن در نظر گرفته نشده. طراحی سایت به مرور به سمت استفاده بیشتر از این ماژول های جدید خواهد رفت و چه بهتر که شما در این زمینه پیش رو باشید.
امیدوارم که این مطالب بتواند در طراحی سایت به شما کمک کند اگر به مشورت در این زمینه نیاز داشتید حتما با آژانس دیجیتال مارکتینگ آپکاد در تماس باشید و یا سوالات و نظرات خود را در کادر پایین این مطلب با ما در میان بگذارید.
