امروزه معمول است که وب سایت یا برنامه ای بسازیم که رابط کاربری آن را بسته به مرورگر یا دستگاه تنظیم کند. برای دستیابی به این هدف دو رویکرد وجود دارد. اولین مورد شامل ایجاد نسخه های مختلف وب سایت یا برنامه شما برای دستگاه های مختلف است. اما ناکارآمد است و می تواند منجر به خطاهای غیرقابل پیش بینی شود.
در جستجوی رویکردی مطمئن و مقاوم در آینده ، طراحی پاسخگو-یا سازگار-طراحی شد. این برنامه بر ایجاد یک نسخه واحد از طرح شما تمرکز می کند که به طور خودکار با مرورگرها یا دستگاه های مختلف سازگار می شود.
در این مقاله ، ما با طراحی وب سایت ریسپانسیو و اصول اساسی که به شما در ایجاد یک وب سایت عالی کمک می کند آشنا می شویم.
ترکیبات طراحی سایت واکنش گرا
طراحی وب سایت واکنش گرا آنطور که به نظر می رسد پیچیده نیست. این مجموعه ای از شیوه هایی است که می توانید هنگام نوشتن CSS استفاده کنید ، نه یک فناوری جداگانه که باید از ابتدا یاد بگیرید. ممکن است در حال حاضر از چندین اصل یاد شده پیروی کنید بدون اینکه متوجه آن باشید. شما می توانید با بررسی چهار عنصر طراحی وب پاسخگو را درک کنید: طرح بندی روان ، واحدهای پاسخگو ، تصاویر انعطاف پذیر و پرس و جوهای رسانه ای.
طرح بندی سیالات
با یک طرح بندی روان ، می توانید صفحات وب ایجاد کنید که با عرض و ارتفاع نمای فعلی سازگار است. روش معمول شامل استفاده از ویژگی max-width به جای دادن عرض ثابت به یک عنصر است. همچنین ، استفاده از درصد ( ٪ ) ، ارتفاع نما ( vh ) ، یا عرض دید ( vw ) به بهبود سازگاری کمک می کند که با پیکسل ( px ) امکان پذیر نیست. بنابراین ، دفعه بعد که در حال طراحی یک طرح هستید ، مطمئن شوید که این تغییرات کوچک را معرفی کرده و از تکنیک های طراحی پاسخگو بهره مند شوید.
واحدهای پاسخگو
با حرکت به CSS پیشرفته ، اغلب از واحدهای rem و em برای طول به جای واحدهای px استفاده خواهید کرد. این به این دلیل است که واحد rem مقیاس بندی کل طرح را بسیار آسان می کند. به طور پیش فرض ، 1rem برابر با 16 پیکسل است زیرا متناسب با اندازه فونت عنصر <html> ، معمولاً 16 پیکسل است. با این حال ، می توانید 1rem را برابر با 10px (یا هر مقدار دیگر) برای محاسبه آسانتر ، با تنظیم اندازه فونت سطح بالا تنظیم کنید.
تصاویر انعطاف پذیر
هنگام طراحی حتی ابتدایی ترین طرح ، تصاویر یک نگرانی اصلی هستند. همیشه باید اندازه آنها را به درستی رعایت کنید تا متناسب با طرح باشند. همچنین ، به طور پیش فرض ، آنها را با تغییرات در Viewport مقیاس نمی کنند. بنابراین ، شما باید از ٪ برای ابعاد تصاویر خود ، همراه با ویژگی max-width استفاده کنید .
داستان های رسانه
با استفاده از پرس و جوهای رسانه می توانید سایت های پاسخگو را زنده کنید. شبکه های سیال برای شروع خوب است ، اما متوجه خواهید شد که چند نقطه وجود دارد که طرح شروع به خراب شدن می کند. افزودن نقاط شکست برای این عرض های نمای ، طرح بندی دستگاه های مختلف را تنظیم می کند. پرس و جوهای رسانه ای به شما کمک می کند تا CSS را بر اساس نتایج آزمایشات ویژگی رسانه استفاده کنید. می توانید ویژگی های جدید CSS را کشف کنید تا در زمان کمتری وب سایت پاسخگو ایجاد کنید .
اصول طراحی وب واکنش گرا
اگرچه طراحی وب سایت واکنش گرا در مورد مشکلات چند صفحه ای نجات دهنده است ، اما ممکن است محدودیت فیزیکی ثابتی برای مراجعه به آن نداشته باشید. بنابراین ، شش اصل اساسی طراحی سایت واکنش گرا وجود دارد که هنگام طراحی یک طرح پاسخگو باید شروع به کار کرد.
از نقاط شکست مبتنی بر محتوا استفاده کنید
یکی از اصول اساسی طراحی بیان می کند که طراحی وب سایت شما باید از محتوا پشتیبانی کند ، نه برعکس. محتوای رسانه ای مانند فیلم ، عکس و محتوای متنی مانند کپی وب طولانی و کوتاه باید به طور مطلوب در همه صفحه نمایش داده شود. نکته کلیدی در طراحی وب سایت واکنش گرا این است که از نقاط وقفه مبتنی بر محتوا استفاده کنیم تا نقاط مبتنی بر دستگاه.
فونت های وب و فونت های سیستم را عاقلانه انتخاب کنید
فونت های وب خیره کننده به نظر می رسند! شما گزینه های متعددی برای اصلاح طرح خود با فونت های وب زیبا دارید. اما باید بدانید که مرورگرها باید هر فونت وب را بارگیری کنند. فونت های وب بیشتر ، زمان بارگیری بیشتر. در مقابل ، فونت های سیستم بسیار سریع هستند. اگر کاربر فونت سیستم نامگذاری شده در دستگاه محلی خود نداشته باشد ، به فونت بعدی در پشته فونت-خانواده برمی گردد. بنابراین ، هنگام انتخاب فونت ، زمان بارگذاری و تقاضای طراحی را در نظر بگیرید.
بهینه سازی تصاویر و بردارهای Bitmap
آیا آیکون های متفاوتی در وب سایت خود دارید که از محتوا پشتیبانی می کند؟ اگر نمادهای شما دارای جزئیات زیاد هستند ، اغلب از فرمت bitmap استفاده می شود. از طرف دیگر ، فرمت های بردار راهی برای انتخاب نمادهایی هستند که به خوبی بالا و پایین می روند. بردارها اغلب کوچک هستند ، اما نکته منفی این است که برخی از مرورگرهای قدیمی ممکن است از آنها پشتیبانی نکنند. همچنین ، مواردی وجود دارد که بردارها سنگین تر از نقشه های بیت هستند ، مانند زمانی که تصویر بسیار دقیق است. بنابراین ، همیشه اطمینان حاصل کنید که تصاویر و بردارهای بیت مپ خود را قبل از آنلاین شدن بهینه کرده اید.
برای اولین بار پاسخگو ، آزمایش هایی را انجام دهید
اولین چین وب سایت ، نمایی است که بازدیدکنندگان هنگام بارگذاری برای اولین بار ، قبل از هرگونه پیمایش مشاهده می کنند. اغلب شامل بخش قهرمان با نوار ناوبری پاسخگو ، نسخه مقدماتی و رسانه و CTA است. پاسخگویی فقط به دستگاه های تلفن همراه محدود نمی شود. شما باید تبلت ها ، کنسول های بازی و سایر صفحه ها را نیز در نظر بگیرید. بنابراین ، نکته اصلی این است که حداقل برای اولین بار نمایش وب سایت ، آزمایشات مکرر انجام دهید. برای آزمایش کیفیت صفحه وب می توانید از Chrome DevTools ( Lighthouse ) استفاده کنید.
محتوا را در صفحه های کوچکتر پنهان نکنید
بسیاری از مردم تصور می کردند که کاربران تلفن همراه همیشه عجله دارند و به دنبال اطلاعاتی هستند ، در حالی که کاربران دسکتاپ بیشتر به دنبال محتوای طولانی هستند. ما اکنون تشخیص داده ایم که این در دنیای امروز صادق نیست. مردم در همه جا از دستگاه های تلفن همراه استفاده می کنند و به دنبال محتوای کامل و دسترسی کامل به همه خدمات هستند. باید اطمینان حاصل کنید که به جای پنهان کردن محتوا ، طرح و نقاط شکست را مدیریت می کنید تا بتوانید آن را به راحتی و بدون زحمت ارائه دهید.
مدیریت طرح بندی با استفاده از اشیاء تو در تو
ایجاد یک طرح بندی سایت و موقعیت یابی صحیح عناصر ، تلاش قابل توجهی می طلبد. همچنین ممکن است در مدیریت بسیاری از عناصر وابسته به یکدیگر دچار مشکل شده باشید. بنابراین ، باید بسته بندی عناصر مرتبط در یک ظرف یا <بخش> را در نظر بگیرید. این به شما کمک می کند تا وظیفه چیدمان چندین عنصر را به یکی که در آن تنها یک عنصر را تنظیم کرده اید ، کاهش دهید.
طراحی واکنش گرا: آیا ابتدا باید با دسکتاپ کار کنید یا موبایل؟
رویکرد اول دسکتاپ به این معنی است که شما CSS را برای صفحه های بزرگ می نویسید و سپس درخواست های رسانه ای را برای کوچک کردن طراحی صفحه های کوچکتر اعمال می کنید. در مقابل ، رویکرد تلفن همراه ابتدا شامل نوشتن CSS برای دستگاه های تلفن همراه ، با صفحه نمایش کوچکتر ، و سپس استفاده از پرس و جوهای رسانه ای برای گسترش طراحی صفحه های بزرگتر است. تمرکز اصلی این است که وب سایت و برنامه ها را به ضروریات اصلی کاهش دهید.
اگر به تازگی با توسعه وب پاسخگو شروع کرده اید ، باید به سراغ رویکرد اول دسکتاپ بروید ، زیرا در پایان روز ، باید ظرف را روی دستگاه های تلفن همراه روی هم قرار دهید. اگرچه این یک تصمیم کاملا شخصی است ، اولین رویکرد تلفن همراه به شما در ساختاردهی بهتر HTML در حالی که رویکرد اولین دسکتاپ به شما در چیدمان و تکنیک های فاصله کمک می کند ، کمک می کند.
