طراحی سایت intrinsic (IWD) که به آن طراحی سایت داخلی یا ذاتی هم گفته می شود، در ابتدای سال 2018 ، به عنوان روش جدیدی برای طراحی سایت معرفی شد. جین یکی از طراحان موزیلا پیشنهاد کرد که ما در نقطه تکاملی جدیدی هستیم. اکنون زمان رشد است. او این رویکرد را طراحی سایت ذاتی (داخلی )می نامد که باعث ایجاد هماهنگی در جامعه طراحی سایت می شود.
هشت سال پیش در کنفرانس طراحی وب در مورد آخرین تغییرات طراحی وبسایت صحبت شد که پس از آن طراحی سایت ریسسپانسیو معرفی شد. از آن زمان تا کنون توجه و تمرکز اکثر طراحان وب بر روی طراحی سایت ریسپانسیو (RWD) است. در حالی که طرح بندی ریسپانسیو بر این موضوع تمرکز دارد که سایت ها بر روی صفحه نمایش با اندازه های گوناگون به درستی نمایش داده شوند، امروزه طراحی سایت ذاتی (IWD) یک گام از آن جلوتراست.
طراحی سایت داخلی
ویژگی مثبت طراحی سایت ذاتی این است که به طراحان این امکان را می دهد که با محتوا تعامل و واکنش به روش های جدید داشته باشند و هک های کمتر و جستار های رسانه ای کمتر ایجاد شود. با استفاده از ابزارهای جدید و قدرتمندی مانند CSS Grid و Flexbox می توانید طرح بندی ها را بر اساس اندازه های ذاتی ایجاد کنید به جای اینکه مجبور باشید ستون ها را به صورت دقیق تطبیق دهید.
به عنوان مثال، اکنون می توانید تصاویر را به صورت عمودی و یا افقی بدون ایجاد اختلال در ابعاد، تغییراندازه دهید. علاوه بر این css grid همچنین انعطاف پذیری بیشتری به ویژه در مورد اضافه کردن سطرها وستون ها و ایجاد طرح بندی محتوا و پوسته ها، دارد. طراحی IWD (داخلی)همچنین اجازه می دهد تا عناصر داخل صفحه بهتر با هم ارتباط برقرار کنند و این کار را از طریق نوعی سیستم ریسپانسیو چندگانه انجام می دهد.
طراحی سایت داخلی با یک ماژول grid آغاز می شود.همانطور که ما گفتیم استفاده از جداول برای طرح بندی، غیر عملی است، با استفاده از طراحی سایت داخلی این مشکل حل شده است.
طراحی سایت داخلی دقیقا چیست؟
این طراحی با استفاده از ماژول های css grid و flexbox شروع می شود. طراحی سایت ذاتی، در مورد چگونگی انجام طرح بندی در وب و چگونگی تغییر آن به طراحی وب سایت ریسپانسیو است.
جین طراح شرکت موزیلا در هشتمین سالگرد طراحی سایت ریسپانسیو، دوران جدیدی از طراحی سایت ریسپانسیو را اعلام کرد. او آن را "طراحی سایت داخلی" نامید. اما "طراحی سایت داخلی(IWD)" چیست؟ و چه تفاوتی با طراحی سایت ریسپانسیو دارد.
جین، مقالات بسیاری در طی این سال ها ارائه داده است. اما شرکت کنندگان در کنفرانس 2018 سیاتل اعلام کردند که او در مورد ارائه این نظریه خاص، بسیار تفکر کرد. مطمئنا او موضوع بسیار جسورانه و حساس برای ارائه دادن داشت. او می دانست که این می تواند نقطه جدیدی برای طراحی سایت در سال های آینده باشد.
طراحی سایت داخلی (IWD) یک رویکرد جدید طراحی سایت است که به محتوا اجازه می دهد تا از لایه بندی ها اطلاع پیدا کند. به عبارت دیگر به جای محدود بودن به نوع خاصی از روش ساخت سایت، طراحی سایت داخلی از ابزار های قدرتمند طرح بندی استفاده می کند، مانند CSS GRIDE ، و آنها را با تکنیک های محاسباتی سنتی و واقعی ادغام می کند. این روش فقط داشتن گزینه های بیشتر نیست بلکه یک تغییر شگفت انگیز در فلسفه طراحی وب است.
به جای استفاده از قوانین و ابزارهایی که در گذشته استفاده می کردیم، می توانیم از iwd استفاده کنیم . IWD از طراحان می خواهند که مطالب مهمتر را اول در نظر بگیرند و آنها را به بهترین روش در سایت نمایش دهند.
در حال حاضر ، نه تنها ما می توانیم کاری کنیم که این اتفاق بیفتد بلکه ما می توانیم با استفاده از کدهای کارآمد تر و ظریف ترراحت تر آن را مدیریت کنیم.
ایجاد پوسته های منحصر به فرد، برای وب سایت های داخلی به صورت خاص و با کدهای کمتری انجام می شود.
نوار منو به عنوان عنصر مهم در طراحی وب داخلی
وجود سیستم ناوبری کاربرپسند که بازدیدکنندگان را جذب کند باعث موفقیت بیشتر هر سایت می شود. ناوبری زیبا وقابل فهم به عنوان یک عنصر مهم در طراحی سایت، می باشد که کاربران به راحتی بتوانند اطلاعات مورد نیاز خود را پیدا کنند. اگر نوار منو نامناسب و ناخوشایند باشد، باعث می شود که کاربران سایت را ترک کنند. جای تعجب نیست که چنین تجربه ی تاسف باری به بازدیدکنندگان سایت آسیب می رساند.
یک وب سایت خوب که با ویژگی های منحصر به فرد طراحی شده است دارای یک نوارمنو منحصر به فرد است. ابتدا محتوا را ساخت و سازماندهی کنید سپس در مورد طراحی نوارمنو فکر کنید.
قرار دادن یک نوارمنوی کشویی خوب است، اما در واقع اگر تعداد آن بسیار بیشتر از حد هم شود می توان از آن نتیجه معکوس هم گرفت به ویژه اگر شما مقدار زیادی منو و زیر منو داشته باشید.
آمار می گوید برای یک وب سایت معمولی تجارت الکترونیک، اگر تعداد این رقم بیشتر از 8 عدد شود، کاربر گیج می شود و صفحه را ترک می کند. ترجیحا آن را در کمتر از 7 خط حفظ کنید.
آنچه که در نوار منو نمایش داده می شود باید کاملا قابل فهم باشد تا کاربر بتواند آن را به درستی درک کند و نباید از اصطلاحات و لغات شکسته استفاده شود. ممکن است که شما به اندازه کافی در استفاده از واژگان هنرمند باشید ولی کاربران نتوانند به درستی آن را درک کنند. سعی کنید از زبان ساده استفاده کنید و از کلمات غیر ضروری استفاده نکنید. توسعه کامل و زیبای وب به معنای ایجاد یک وب سایت کاربرپسند است.
امکان استفاده از اپلیکیشن فلش در بخش خاصی از توسعه وب بسیار هیجان انگیز است. اما باید مواظب باشید، استفاده بی جا از آن ممکن است باعث ناراحتی برخی از کاربران شود. خوشبختانه، طراحان این جایگزین فوق العاده را در طرح های CSS پیدا کرده اند. ترکیب گاه گاه فلش خوب است.
یک طراحی وب سایت خوب، نیاز به ایجاد ناوبری ساده و با کیفیت دارد. البته این به این معنا نیست که شما باید مشتقات پیچیده را امتحان کنید. بلکه اطمینان حاصل کنید که محتوای شما از این پیچیدگی پشتیبانی می کند.
نقطه جدیدی در طراحی وب در سال های آینده
در ابتدا فقط محتوا وجود داشت. هیچ گونه افکت در css و یا جاوا اسکریپت وجود نداشت. فقط محتوا به صورت خطی بود. سپس ساختارهای مبتنی بر جدول بندی ساخته شد که به طراحان اجازه داد تا بتوانند در کنار آن ستون ها و جداول را نیز طراحی کنند. در نهایت، لایه بندی های انعطاف پذیر ارائه شد که با استفاده از آن، اندازه محتوا با توجه به اندازه طول و عرض مرورگر تغییر سایز می دهد.
این روش به ما اجازه می دهد تا بتوانیم طراحی های ثابت با عرض مرورگر داشته باشیم.
رفع عیوب با استفاده از طراحی سایت ریسپانسیو
برای حل عادات بد، بزرگترین تغییر در تاریخ وب، طراحی وب سایت ریسپانسیو است.
طراحی سایت ریسپانسیو به عنوان ترکیبی از سه چیز است:
- شبکه های grid : که برای طراحان وب مفهوم آشنایی است.
- تصاویر انعطاف پذیر: تصاویر گرافیکی انعطاف پذیر که بر اساس اندازه های عناصر، تغییر اندازه می دهند.
- جستارهای رسانه ای: از css برای مشخص کردن تعیین پوسته های مختلف در نقطه های مختلف انفصال، استفاده می کند
نسخه های جدید وب سایت های موبایلی، جایگزین وب سایت های ریسپانسیو و انعطاف پذیر شده اند. آنها با توجه به محدودیت های همه نوع دستگاه های موبایل، دسکتاپ و غیره، طراحی شده اند.
هشت سال از به وجود آمدن طراحی های ریسپانسیو می گذرد. و اکنون ابزارهای جدید در دسترس می باشد.
طراحی سایت های ذاتی به چه صورت است؟
ما می توانیم در سال 2018 ، علاوه بر شبکه های grid ، تصاویر انعطاف پذیر و جستارهای رسانه ای مفاهیم اصلی را نیز به کار بگیریم.
برای مثال به جای استفاده از تصاویر فقط انعطاف پذیر می توانیم تصاویر را به صورت افقی و یا عمودی تغییر سایز دهیم بدون اینکه به قسمتی از آن ضربه ای وارد شود.
در مورد شبکه های grid چطور؟ بزرگترین تغییر در قابلیت های css در سال های اخیر css grid نامیده می شود. برخی از تحولات مهیج را به وجود آورده اند. مانند قابلیت طراحی طرح های دو بعدی در وب به جای ستون های انعطاف پذیر، همچنین می توان سطر های انعطاف پذیر نیز داشت.
امروزه محتوا می تواند با روش های جدید تری با الگوریتم های طرح بندی جدید و واحد اندازه گیری مناسب تری ارائه شود. فضاهای بزرگتر محتوا می توانند با توجه به نیاز خود اندازه هایشان را افزایش دهند. محتواهای کمتر، فضاهای کوچکتری را در بر می گیرند. محتوای ثابت همیشه می تواند مقدار مشخصی از فضا داشته باشد و می تواند هر اندازه محتوا را طوری تنظیم کند تا هر فضایی را پوشش دهد. تمام این عناصر متفاوت با هم هستند که می توانند با کدهای بسیار کمتری نسبت به قبل در کنار هم باشند .
همه چیز در مورد طراحی سایت که توسط جین سیمونز تغییر کرده است
در چند سال گذشته از زمانی که تلفن های همراه آمدند همه چیز تغییر کرد. در اینجا چند تغییر عمده که در طول تاریخ طراحی وب بوده است، گفته شده است:
Html ساده: فقط یک نوع طرح وجود داشت. هیچ css ای وجود ندارد. اما مرورگر هنوز فکر می کند که همه چیز در داخل جعبه است. متن به اندازه مورد نیازش فضا نیاز دارد.
فلش: دشوار است که html را در مرورگر های متعدد به کار ببریم. فلش برای این کار فوق العاده به نظر می رسد. و ما می توانیم کارهایی را انجام دهیم که قبلا فقط در cd-rom امکان پذیر بود را انجام دهیم. به عنوان یک طراح، یک عنصر را گرفته و آن را بر روی صفحه در هر جا که خواستید قرار دهید. ما سایت های زیادی را دیدیم که امکانات زیادی دارند ولی مشکل آنها عدم دسترسی ناوبری مناسب بود.
توضیحات کلی در مورد طراحی سایت داخلی
همانطور که گفتیم در طول 8 سال گذشته طراحی سایت ریسپانسیو (rwd)، بسیار مورد استقبال طراحان در کل جهان قرار گرفته است. اما امروز خانم جین سیمونز، مفهوم جدیدی را در طراحی سایت معرفی کرده است. مفهومی که او ارائه داده است همان طراحی سایت داخلی است. او می گوید: "من فکر نمی کنم که طراحی سایت داخلی، مفهوم جدیدی در صنعت وب باشد. انگار که قبلا این مفهوم وجود داشته و تکنولوژی جدیدی نیست ولی طراحی سایت داخلی می تواند توانایی های وب سایت را بالا ببرد."
تفاوت طراحی سایت داخلی و ریسپانسیو
ما بسیاری از ابزار های جدیدی را در اختیار داریم که با css های جدید می توانیم طرح های مختلف ، متفاوت و جدید در وب ایجاد کنیم که تا چند سال پیش امکان پذیر نبود. از این رو، همه این ها راه های مختلف جریان محتوا، روش های مختلف طراحی، تفاوت بین طراحی سایت ریسپانسیو و طراحی سایت داخلی، در واقع پلی است بین آنچه که طراحان می خواهند و آنچه که به صورت سنتی در وب وجود دارد. بنابراین ، امروزه همه این ها در حال نزدیک شدن به هم هستند و ما توانایی چندین نوع جدید از طراحی در وب را داریم که این واقعا هیجان انگیز است.
بنابراین، منظور ما این است که بعد سال ها طراحی سایت به صورت ریسپانسیو، می توانیم طراحی را از طراحی به صورت ریسپانسیو به طراحی داخلی انتقال دهیم.