فناوری توسعه وب سایت یک فرآیند بسیار چند وجهی است. اما هنوز، تمام مراحل آن را می توان به دو جزء اصلی تقسیم کرد - پوسته کاربردی و بیرونی. یا همانطور که در بین وب مسترها مرسوم است به ترتیب back-end و front-end. افرادی که وب سایت های خود را از استودیوهای توسعه وب سفارش می دهند اغلب ساده لوحانه معتقدند که ارزش آن را دارد که فقط بر روی عملکرد تمرکز کنید و این تصمیم درستی خواهد بود. اما این در موارد بسیار بسیار نادری صادق است، معمولاً برای پروژه های راه اندازی در مرحله آزمایش بتا. در غیر این صورت، طراحی گرافیکی و رابط کاربری به سادگی لازم است تا با استانداردهای توسعه وب مطابقت داشته باشد و راحت باشد.
نخستین سنگ بنای که طراح رابط یا طراح با آن روبروست، عرض طرح سایت است. از این گذشته ، برای آن لازم است رابط ها ترسیم شوند. به طور کاملاً شهودی، دو رویکرد بوجود می‌آیند - یا طرح‌بندی‌های جداگانه برای هر وضوح صفحه نمایش محبوب ایجاد کنید، یا یک نسخه از سایت را برای همه نمایش‌ها ایجاد کنید. و هر دو گزینه اشتباه خواهند بود، اما اول از همه.
عرض استاندارد وب سایت بر حسب پیکسلبرای Runet
قبل از توسعه layout تطبیقی، توسعه سایتی با عرض هزار پیکسل یک پدیده انبوه بود. این رقم به یک دلیل ساده انتخاب شد - به طوری که سایت در هر صفحه ای قرار می گیرد. و این منطق خاص خود را دارد، اما بیایید فرض کنیم که یک شخص هنوز حداقل یک مانیتور HD روی دسکتاپ دارد. در این حالت، چیدمان شما مانند یک نوار کوچک در وسط صفحه به نظر می رسد، جایی که همه چیز در یک پشته به هم چسبیده است و در طرفین یک فضای بزرگ بدون استفاده وجود دارد. حال فرض می کنیم که شخصی در تبلتی با صفحه نمایش 800 پیکسلی به وب سایت شما دسترسی داشته باشد و «نمایش وب سایت کامل» در تنظیمات علامت زده شود. در این صورت، سایت شما نیز به اشتباه نمایش داده می شود، زیرا به سادگی در صفحه جا نمی شود.
از این ملاحظات می توان نتیجه گرفت که یک عرض ثابت برای چیدمان قطعا برای ما مناسب نیست و باید به دنبال راه دیگری باشیم. بیایید ایده یک طرح بندی جداگانه برای هر عرض صفحه را تجزیه و تحلیل کنیم.
چیدمان برای همه موارد
اگر به عنوان یک استراتژی برای ایجاد طرح بندی برای همه اندازه های صفحه نمایش در بازار انتخاب کرده اید، سایت شما منحصر به فردترین سایت در کل اینترنت خواهد بود. از این گذشته، امروزه پوشش دادن کل طیف دستگاه ها، تلاش برای تنظیم دقیق هر گزینه، به سادگی غیرممکن است. اما اگر روی محبوب ترین وضوح نمایشگرها و صفحه نمایش دستگاه ها تمرکز کنید، ایده بدی نیست. تنها عیب آن هزینه های مالی است. به هر حال، زمانی که یک طراح رابط، یک طراح و یک کدنویس مجبور شوند یک کار را 5 یا 6 بار انجام دهند، پروژه هزینه خواهد داشت.به طور نامتناسبی بالاتر از قیمت بودجه اولیه است.
بنابراین، فقط سایت‌های تک صفحه‌ای می‌توانند به نسخه‌های فراوانی برای صفحه‌های مختلف ببالند که هدف آن فروش یک محصول و اطمینان از انجام آن به خوبی است. خوب، اگر یکی از این فرودها را ندارید، بلکه یک سایت چند صفحه ای دارید، پس باید بیشتر فکر کنید.
معروف‌ترین اندازه‌های سایت
مصالحه بین دو حالت افراطی، ارائه طرح‌بندی برای سه یا چهار اندازه صفحه نمایش است. در میان آنها، یکی باید یک طرح برای دستگاه های تلفن همراه باشد. بقیه باید برای نمایشگرهای دسکتاپ کوچک، متوسط و بزرگ تطبیق داده شوند. چگونه عرض سایت را انتخاب کنیم؟ در زیر آمار سرویس HotLog برای ماه می 2017 را ارائه می دهیم که توزیع محبوبیت رزولوشن های مختلف صفحه نمایش دستگاه و همچنین پویایی این شاخص را به ما نشان می دهد.
از جدول می توانید نحوه تعیین اندازه سایتی که می خواهید استفاده کنید را دریابید. علاوه بر این، می توان نتیجه گرفت که رایج ترین فرمت امروزی صفحه نمایش 1366 در 768 پیکسل است. چنین صفحه نمایش هایی در لپ تاپ های ارزان قیمت نصب می شوند، بنابراین محبوبیت آنها طبیعی است. محبوب‌ترین مانیتور فول اچ‌دی است که استاندارد طلایی برای فیلم‌ها، بازی‌ها و در نتیجه ایجاد طرح‌بندی وب‌سایت است. در ادامه جدول رزولوشن دستگاه های موبایل 360 در 640 پیکسل و همچنین گزینه های مختلف برای صفحه نمایش دسکتاپ و موبایل بعد از آن را مشاهده می کنیم.
طراحی چیدمان
پسپس از تجزیه و تحلیل آمار، می توان نتیجه گرفت که عرض سایت بهینه دارای 4 تغییر است:
- نسخه لپ تاپ با عرض 1366 پیکسل.
- نسخه فول اچ دی.
- چیدمان عریض 800 پیکسل برای نمایش در مانیتورهای رومیزی کوچک.
- نسخه تلفن همراه سایت - عرض 360 پیکسل.
بگذارید بگوییم تصمیم گرفته‌ایم از چه اندازه برای منبع تولید شده برای سایت استفاده کنیم. اما چنین پروژه ای همچنان پرهزینه خواهد بود. بنابراین بیایید به گزینه های بیشتری نگاه کنیم، این بار بدون استفاده از عرض ثابت.
منعطف کردن چیدمان
رویکرد جایگزینی وجود دارد، زمانی که ارزش آن را دارد که فقط با حداقل اندازه صفحه تطبیق داده شود و خود اندازه سایت با درصد تعیین می شود. در عین حال، عناصر رابط مانند منوها، دکمه‌ها و لوگو را می‌توان در مقادیر مطلق با تمرکز بر حداقل اندازه عرض صفحه نمایش بر حسب پیکسل تنظیم کرد. برعکس، بلوک های دارای محتوا با توجه به درصد مشخص شده از عرض صفحه نمایش کشیده می شوند. این رویکرد به شما امکان می دهد اندازه سایت ها را به عنوان یک محدودیت برای طراح تلقی نکنید و به طرز ماهرانه ای این تفاوت های ظریف را شکست دهید.
نسبت طلایی چیست و چگونه می توان آن را در طرح بندی صفحه وب اعمال کرد؟
حتی در دوره رنسانس، بسیاری از معماران و هنرمندان تلاش کردند تا شکل و تناسب کاملی به آثار خود بدهند. برای پاسخ به سؤالات در مورد مقادیر چنین نسبتی، آنها به ملکه همه علوم - ریاضیات روی آوردند.
از دوران باستان، نسبتی اختراع شده است که چشم ما آن را طبیعی ترین و ظریف ترین می داند،زیرا در طبیعت در همه جا وجود دارد. کاشف فرمول چنین نسبتی یک معمار با استعداد یونان باستان به نام فیدیاس بود. او محاسبه کرد که اگر قسمت بزرگتر مربوط به نسبت کوچکتر باشد همانطور که کل مربوط به بزرگتر است، آنگاه چنین نسبتی بهترین به نظر می رسد. اما اگر بخواهید جسم را به صورت نامتقارن تقسیم کنید، این چنین است. این نسبت بعداً بخش طلایی نامیده شد که هنوز اهمیت آن را برای تاریخ فرهنگ جهانی دست بالا نمی‌گیرد.
بازگشت به طراحی وب
بسیار ساده است - با استفاده از نسبت طلایی، می توانید صفحاتی را طراحی کنید که تا حد امکان برای چشم انسان دلپذیر باشند. با محاسبه طبق تعریف فرمول نسبت طلایی، عدد غیر منطقی 1، 6180339887 … را به دست می آوریم، اما برای راحتی، می توانیم از مقدار گرد شده 1، 62 استفاده کنیم. این بدان معنی است که بلوک های صفحه ما باید 62 باشد. ٪ و 38٪ از کل، بدون توجه به اندازه منبع تولید شده برای سایتی که استفاده می کنید. شما می توانید یک مثال را در این نمودار ببینید:
استفاده از فناوری های جدید
فناوری های چیدمان وب سایت مدرن امکان انتقال دقیق ایده یک برنامه ریز و طراح را فراهم می کند، بنابراین اکنون می توانید از عهده اجرای ایده های جسورانه تری نسبت به طلوع فناوری های اینترنت برآیید. دیگر نیازی نیست در مورد اندازه سایت فکر کنید. با ظهور مواردی مانند طرح بندی تطبیقی بلوک، بارگذاری پویا محتوا و فونت ها، توسعه وب سایت بسیار دلپذیرتر شده است. پس از همه، این فن آوری ها هستندمحدودیت‌های کمتر، اگرچه هنوز وجود دارد. اما همانطور که می دانید، بدون محدودیت هیچ هنری وجود نخواهد داشت. ما به شما پیشنهاد می کنیم از یک رویکرد طراحی واقعا خلاقانه استفاده کنید - نسبت طلایی. با آن، بدون توجه به اندازه سایتی که در قالب های خود تنظیم می کنید، می توانید به طور موثر و زیبایی فضای کاری را پر کنید.
چگونه فضای کاری سایت را افزایش دهیم
احتمال زیادی وجود دارد که فضای کافی برای قرار دادن تمام عناصر UI در یک طرح بندی کوچک نداشته باشید. در این صورت، باید خلاقانه یا حتی خلاقانه‌تر از قبل فکر کنید.
با پنهان کردن پیمایش در منوی بازشو، حداکثر فضای سایت را آزاد کنید. منطقی است که از این روش نه تنها در دستگاه های تلفن همراه، بلکه در رایانه های رومیزی نیز استفاده کنید. از این گذشته ، کاربر نیازی ندارد همیشه به سرفصل های سایت شما نگاه کند - او برای محتوا آمده است. و خواسته های کاربر باید رعایت شود.
نمونه ای از یک روش خوب برای پنهان کردن منو، طرح زیر است (عکس زیر).
در گوشه بالای ناحیه قرمز، می توانید یک ضربدر را مشاهده کنید که با کلیک روی آن، منو در یک نماد کوچک پنهان می شود و کاربر را با محتوای وب سایت تنها می گذارد.
با این حال، این اختیاری است، می توانید ناوبری را ترک کنید، که همیشه در معرض دید خواهد بود. اما شما می توانید آن را به یک عنصر طراحی زیبا تبدیل کنید، و نه فقط لیستی از لینک های محبوب در سایت. علاوه بر یا حتی به جای پیوندهای متنی، از نمادهای بصری استفاده کنید. این همان استبه سایت شما این امکان را می دهد که از فضای صفحه نمایش دستگاه کاربر کارآمدتر استفاده کند.
بهترین وب سایت واکنش گرا است
اگر نمی دانید چه طرحی را برای سایت انتخاب کنید، پس همه چیز برای شما ساده است. برای صرفه جویی در هزینه های توسعه و در عین حال عدم از دست دادن مخاطبان خود به دلیل چیدمان ضعیف برای برخی دستگاه ها، از طراحی واکنش گرا استفاده کنید.
طراحی واکنشگرا طراحی است که در دستگاه های مختلف به همان اندازه خوب به نظر می رسد. این رویکرد به سایت شما امکان می دهد حتی در لپ تاپ، حتی بر روی تبلت، حتی در گوشی هوشمند قابل درک و راحت باشد. این اثر با تغییر خودکار عرض ناحیه کار صفحه نمایش به دست می آید. با استفاده از شیوه نامه های واکنش گرا برای سایت خود، بهترین تصمیم ممکن را می گیرید.
تفاوت بین طراحی ریسپانسیو و نسخه های وب سایت چیست
طراحی ریسپانسیو با نسخه موبایل سایت تفاوت دارد زیرا در حالت دوم، کاربر یک کد html متفاوت از دسکتاپ دریافت می کند. این یک نقطه ضعف از نظر بهینه سازی عملکرد سرور و همچنین بهینه سازی موتور جستجو است. علاوه بر این، محاسبه آمار برای نسخه های مختلف سایت دشوارتر می شود. رویکرد تطبیقی این معایب را ندارد.
پاسخگویی برای دستگاه‌های مختلف از طریق طرح‌بندی با درصدی از عرض مشخص شده یا با انتقال بلوک‌ها به فضای موجود (در صفحه عمودی در تلفن هوشمند به جایافقی روی دسکتاپ)، یا ایجاد طرح‌بندی‌های جداگانه برای صفحه‌های مختلف.
در مورد طراحی و توسعه واکنشگرا در آموزش های ما بیشتر بیاموزید.
