دیجیتال مارکتینگ و سئو

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

فوت وفن طراحی سایت intrinsic

هر صنعت یا زمینه تخصصی اصطلاحات و عبارات مخصوص به خود رو داره که تعریف اونا واسه آدمایی که در اون بخش فعال هستن مشخص و قابل درکه. ولی همین معنی ممکنه واسه کسائی که علم تخصصی در این بخش ندارن سخت یا نامفهوم باشه. طراحی سایت هم از این قانون مستثنی نیس. در این مقاله تلاش می کنیم معنی جدید Intrinsic Web Design یا “طراحی سایت ذاتی” که در طراحی سایت عادی شده رو به شما معرفی کنیم.

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

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

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

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

Intrinsic Web Design چیه؟

همه چیز در این فوت وفن جدید با معرفی ماژولای Flexbox و CSS Grid در CSS شروع شد. مدتا پیش به کار گیری Table واسه ایجاد ساختار و چیدمان سایت عادی بود ولی امروز کمتر کسی ازش استفاده میکنه.

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

فوت وفن طراحی سایت ذاتی با به کار گیری css grid

مثلا فریم ورک بوت استرپ در نسخه های ابتدایی خود و با به کار گیری float تونست ساختاری قابل قبول و کاربردی واسه طراحی صفحات وب ایجاد کنه. اما در نسخه ۴ بوت استرپ توجه خاص ای به flex و تکنیکای جدید چیدمان محتوا شده.

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

با معرفی ماژولای جدید در CSS دیگه احتیاجی به تکنیکای خلاقانه واسه طراحی چیدمان و جایگیری المانای صفحه نداریم. از این به بعد میتونیم خیلی راحت با به کار گیری دستورات عادی CSS ساختار مورد نظر خود رو طراحی کرده و در مورد چگونگی نمایش اون در موبایل و تبلت برنامه ریزی کنیم.

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

فرق طراحی سایت intrinsic با Responsive

در طراحی سایتای ریسپانسیو با استفاده Media Queries مشخص میکنیم که چگونگی نمایش سایت در سایزهای جور واجور به چه صورت باشه.

با به کار گیری ماژولای جدید مانند Grid و Flex دیگه شما احتیاجی به به کار گیری Media Queries و تقسیم بندی براساس اندازه صفحه دارید. با به کار گیری یه دستور مشخص می تونین چگونگی نمایش محتوا در سایزهای جورواجور رو خیلی راحت مدیریت کنین.

طراحی سایت انعطاف پذیر

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

طراحی سایت با به کار گیری css grid

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

در طراحی ذاتی با به کار گیری دستور object-fit میتونیم تصویر رو متناسب با فضایی که در اون قرار گرفته نمایش بدیم و خود مرورگر تصویر رو متناسب با ابعاد فضای مادر نمایش می ده.

چه وقتی از طراحی intrinsic استفاده کنیم؟

همین امروز، خیلی از طراحان وب در سراسر دنیا از تکنیکا و ماژولای جدید در طراحی صفحات وب بهره میبرن و در خیلی از پروژه های طراحی سایتای شرکتی جدید وبسیما می تونین نمونه هایی اجرا شده از اون رو ببینین.

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

بوت استرپ ۴ رو میشه یه مثال عینی از حرکت جهانی به سمت طراحی سایتای ذاتی یا intrinsic دونست. شاید نسخه ۵ به طور کامل از طراحی ریسپانسیو و استانداردهای اون فاصله گرفته باشه.

اگه دوست دارین اطلاعات بیشتری در مورد این ماژولای جدید به دست بیارین پیشنهاد میکنیم واسه آشنایی با Flex Box به سایت flexboxfroggy.com و واسه به دست آوردن جزییات بیشتر در مورد CSS Grid به سایت آموزشی cssgridgarden.com مراجعه کنین.

بنظر شما طراحی سایت با تکنیکا و وسایل جدید کار درستیه؟

میشه از این وسیله ها واسه ارتقای کار خود بهره بگیریم یا بهتره از همون تکنیکای قدیمی که بر اونا مسلط هستیم در پروژه های خود استفاده کنیم؟

 

 

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *