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

Intrinsic Web Design تکنیکی است که که از آن برای طراحی صفحات وب ها استفاده می شود به این روش  طراحی سایت داخلی یا ذاتی هم می گویند.

استفاده از تکنیک intrinsic در ساخت سایت

Intrinsic Web Design تکنیکی است که که از آن برای طراحی وب سایت ها استفاده می شود و نمونه های موفقی از به کارگیری آن، وجود دارد. این عبارت که اولین بار توسط Jen Simmons مطرح شد، اصطلاح جدیدی است که میان طراحان  بسیار رایج شده است و توجه زیادی به آن می شود. این روش که به آن طراحی intrinsic سایت داخلی یا ذاتی هم می گویند، باعث ایجاد هماهنگی در طراحی سایت  می شود. تکنیک intrinsic در طراحی ، شیوه ای است که حتی از طراحی  ریسپانسیو هم فراتر می رود و از آن پیشی می گیرد.

اصطلاحات جدید و پیدایش آن ها:

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

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

پیدایش اصطلاح intrinsic :

اصطلاح intrinsic اولین بار درسال 2018 توسط Jen Simmons معرفی شد. Jen که یک طراح کاربری سایت است، از معروف ترین افراد در این زمینه می باشد که با شرکت هایی بزرگی مثل google، W3C ، دروپال و ... همکاری کرده است. او پروژه های بزرگی را به اتمام رسانده و از طراحان موزیلا است و رویکرد طراحی داخلی را، روشی نوین برای طرحی سایت می داند.

طراحی با تکنیک intrinsic :

پیدایش این تکنیک با معرفی ماژول های css grid  و  flexbox در CSS اتفاق افتاد. تا پیش از معرفی و استفاده از این تکنیک و طی چندین سال گذشته، برای چیدن عناصر سایت و آماده سازی ساختار یک سایت از Table  استفاده می شد. اما به مرور این روش جایگاه خود را از دست داد و دستور های fixed و Absolute برای تعیین عناصر صفحه و جایگاه آن مورد استفاده قرار گرفت و سایت هارا پیچیده تر و خاص تر کرد. برای طراحی با استفاده از این روش ها، نیاز به خلاقیت بالای طراح بود تا بتواند المان ها و عناصر را به بهترین شیوه سازمان دهی کند تا نمایش زیبایی داشه باشند و ساختاری مشخص برای المان ها وجود نداشت.

اما معرفی ماژول های مختلف Css  طراحی  را بسیار آسانتر کرد و دیگر نیازی به تکنیک های گوناگون برای سایت و تعیین عناصر صفحه نبود. چهار ماژول مختلف CSS (Multicolumn, Flow, Grid, Flex)  برای چیدمان عناصر صفحات وب، به شما کمک می کند و می توانید به آسانی از آن ها استفاده کرده و ساختار دوبعدی چیدمان محتوا در صفحات خودرا مشخص کنید و سایت های خودرا به صورت خاص و حرفه ای انجام دهید.

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

سایت intrinsic با Responsive چه تفاوتی دارد؟

سایت ، درباره شیوه طرح بندی در وب و شیوه تغییر آن به صورت طراحی وب سایت ریسپانسیو است.

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

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

در طراحی ریسپانسیو ما ستون بندی های شناور داریم یعنی بخش هایی که عرض آنها با تغییر سایز صفحه تغییر می کند. ولی در طراحی ذاتی با استفاده از Grid علاوه بر ستون ها می توانیم ردیف ها را نیز مدیریت کرده و محتوا و ابعاد آنها را شناور کنیم. تصویر زیر نمونه ای جذاب از کاربرد CSS grid در طراحی صفحات وب است.

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