به همین دلیل، طراحانی که روی تم های واکنش گرا کار می کردند، شروع به تغییر رویکرد خود و استفاده از سیستم های شبکه ای انعطاف پذیر کردند.
برعکس، اگر از یک اندازه فونت ثابت برای دسکتاپ استفاده می‌کنید، برای دستگاه‌های تلفن همراه بسیار بزرگ خواهد بود و تجربه کاربر را خراب می‌کند.
بدون چنین سیستمی، سازندگان تم هیچ راهی برای اطمینان از ظاهر صفحات خود در دستگاه های مختلف ندارند، اما این همه کاری نیست که انجام می دهند.
به طور خلاصه، این سیستم ها شامل یک سری از شبکه ها و ستون ها هستند که از زبان CSS (Cascading Style Sheets) برای کنترل نحوه تنظیم آنها در دستگاه های مختلف استفاده می شود.
سنگ بنای هر تم پاسخگو، طرح‌بندی‌های شبکه‌ای انعطاف‌پذیر چارچوبی را فراهم می‌کند که به تم‌ها امکان می‌دهد طرح‌بندی خود را متناسب با نوع دستگاه و اندازه صفحه نمایش تغییر دهند.
به عنوان مثال، برخی از طراحان ممکن است تصمیم بگیرند که نقاط شکست زیادی را تعیین کنند که زمانی که کاربر حداقل تنظیمات را در اندازه مرورگر وب خود انجام می دهد، طرح وب سایت را تغییر می دهد. در مقابل، دیگران ممکن است تصمیم بگیرند که چیدمان فقط زمانی تغییر کند که تغییر اندازه قابل توجه باشد، مانند صفحه نمایش دسکتاپ به تلفن هوشمند.
به عبارت دیگر، به جای ساختن و آزمایش یک موضوع برای صفحه‌های دسکتاپ بزرگ‌تر و تنظیم دقیق آن برای اطمینان از کارکرد آن در تلفن هوشمند، بهتر است از سیستم شبکه انعطاف‌پذیر و نقاط شکست خود شروع کنید و کاربر تلفن همراه را در بهترین حالت خود تجربه کنید. اولویت.
شما بدون شک بارها و بارها «منوهای همبرگر» را دیده‌اید، حتی اگر نمی‌دانستید به این شکل نامیده می‌شوند. اساساً، این اصطلاح به سه خط تیره در یک سایت یا برنامه تلفن همراه اشاره دارد که شبیه ساخت یک همبرگر است و با کلیک کردن، دسترسی به منوی ناوبری را نشان می دهد.
ادامه مقاله در زیر
1. سیستم های شبکه انعطاف پذیر
در همین حال، بازدیدکنندگان سایت از تجربه کلی بهتری لذت می‌برند و اطمینان می‌دهند که تصاویر مانع اطلاعات مهم یا عملکردهای صفحه مانند فرم‌های تماس و Call to Action نمی‌شوند.
4. تایپوگرافی پاسخگو
در ابتدایی‌ترین مفهوم، یک پوسته وردپرس واکنشگرا به هر تمی گفته می‌شود که طراحی و طرح کلی آن را تغییر می‌دهد تا با هر دستگاهی که کاربر آن را مشاهده می‌کند مطابقت داشته باشد.
@media (حداکثر عرض: 480 پیکسل) {
کدام مؤلفه‌های ضروری تضمین می‌کنند که یک تم در هر دستگاهی بی‌عیب و نقص عمل می‌کند، و دقیقاً چگونه کار می‌کنند؟
به همین دلیل است که طراحان معمولاً به آنچه به عنوان “منوی همبرگر” معروف است روی می آورند.
جامع اپل دستورالعمل های رابط انسانی برای توسعه دهندگان توجه داشته باشید که میانگین ضربه زدن انگشت به اندازه 44 پیکسل در 44 پیکسل است، به این معنی که سازندگان تم باید دکمه هایی را حداقل در این اندازه ایجاد کنند.
عملی کردن ویژگی‌های کلیدی طراحی واکنشگرا: چرا رویکرد اول موبایل اهمیت دارد
چه صاحب وب سایتی باشید که می خواهید خود را با تمام دانشی که برای انتخاب بهترین قالب وردپرس ریسپانسیو نیاز دارید مسلح کنید، یا یک طراح مبتدی که برای ساخت اولین تم خود آماده می شود، ما همه چیزهایی را که باید در مورد ویژگی های کلیدی بدانید بیان کرده ایم. تم های پاسخگو
چه چیزی یک قالب وردپرس را واکنش گرا می کند؟
این شامل:
با 92٪ از کاربرانی که از طریق دستگاه های هوشمند به وب دسترسی دارند، این رویکرد عقل سلیم تضمین می کند که نیازهای بسیاری از بازدیدکنندگان خود را از کلمه “برو” برآورده کنید.
عرض: 100%;
}
به این ترتیب، عناصر قابل کلیک، مانند دکمه ها و پیوندهای متنی، هر دو باید به اندازه کافی بزرگ باشند.
این بدان معناست که اگر وب سایت خود را بر روی سه پلتفرم مختلف بارگذاری کنید (به عنوان مثال، رایانه رومیزی، آی پد و تلفن اندروید)، ممکن است در هر کدام متفاوت به نظر برسد اما بهترین تجربه ممکن را در آن دستگاه خاص به کاربران ارائه می دهد.
ویژگی های کلیدی یک تم واکنش گرا چیست؟
استفاده از منوهای ناوبری استانداردی که در سایت‌هایی که روی دسکتاپ مشاهده می‌شوند می‌بینید، اغلب می‌توانند برای استفاده در صفحه‌نمایش‌های کوچکتر چالش‌برانگیز باشند، که اغلب بر طراحی و چیدمان کلی فرآیند تأثیر منفی می‌گذارند.
به عنوان یک قانون کلی بهترین عملکرد، داشتن حداقل سه یا چهار نقطه شکست برای هر وب‌سایت برای اطمینان از پاسخگویی به متداول‌ترین اندازه‌های صفحه نمایش، ایده هوشمندانه‌ای است.
3. تصاویر سیال
سال 2023 است، به این معنی که طراحی وب ریسپانسیو دیگر یک گزینه نیست، بلکه یک ضرورت است.
دکمه ها یک جنبه اغلب نادیده گرفته شده اما اساساً مهم در طراحی تم پاسخگو با کیفیت خوب هستند.
با استفاده از تصاویر سیال، توسعه‌دهندگان تم نیازی به انجام فرآیند پرزحمت ایجاد تصاویر با اندازه‌های مختلف برای مرورگرهای مختلف و تعیین قوانینی برای استفاده از تصویر در هر اندازه صفحه ندارند. در عوض، آنها می توانند از یک تصویر استفاده کنند و پاسخگویی آن را با CSS کنترل کنند.
بنابراین، دقیقاً چه چیزی طراحی تم واکنشگرا را تشکیل می دهد؟
از آنجایی که استفاده از یک شبکه منعطف با CSS به این معنی است که همه سبک‌ها و طرح‌بندی‌های شما در کنار هم قرار می‌گیرند، رسیدگی به به‌روزرسانی‌ها و نگهداری مداوم بسیار آسان‌تر از زمانی است که در کد اصلی موضوع قرار داده شوند.
2. نقاط شکست
بنابراین، به طور طبیعی، این چیزی است که طراحان تم واکنش گرا واقعا باید به آن توجه کنند.
به همین دلیل، طراحان پوسته باید به تایپوگرافی واکنشگرا تکیه کنند و بار دیگر از قدرت برگه‌های سبک آبشاری برای تعیین مناسب‌ترین چهره و اندازه فونت برای هر اندازه صفحه استفاده کنند.
5. ناوبری مناسب برای موبایل
صفحات با طرح‌بندی ثابت معمولاً در آن دستگاه‌ها عالی به نظر نمی‌رسند، و حتی اگر هیچ مشکلی در زیبایی‌شناسی کلی وجود نداشته باشد، ناوبری و عملکردهای سایت اغلب می‌توانند بسیار کوچک یا به سادگی برای استفاده دشوار باشند.
این منوها با استفاده از ترکیبی از HTML برای ساختار، CSS برای سبک و موقعیت، و جاوا اسکریپت برای فعال کردن تعامل ضروری ساخته می‌شوند تا با ضربه زدن منو باز و بسته شود.
ظرف {
برای مثال، با استفاده از درخواست رسانه بالا، یک توسعه‌دهنده تم می‌تواند تعیین کند که وقتی اندازه صفحه نمایش 480 پیکسل یا کمتر است، طرح‌بندی به یک ستون کاهش می‌یابد.
در حالی که سیستم‌های شبکه انعطاف‌پذیر نحوه پاسخ‌دهی طرح کلی به اندازه‌های مختلف صفحه را دیکته می‌کنند، تصاویر سیال همان کار را با تصاویر روی صفحه انجام می‌دهند.
ناوبری کاربرپسند یکی از اجزای اساسی هر وب سایت است که به بازدیدکنندگان این امکان را می دهد تا بین صفحات شما بپرند تا اطلاعات یا خدمات مورد نیاز خود را بیابند.
به زبان ساده، نقطه شکست یک تم واکنشگرا، نقطه‌ای است که در آن طرح یک تم باید تغییر کند.
در رایانه رومیزی با مکان نما، ضربه زدن روی یک دکمه با دقت بسیار آسان است. در یک دستگاه تلفن همراه، کاربران با استفاده از انگشتان خود کلیک می کنند، که به سادگی آن سطح دقت را ارائه نمی دهد.
برای مثال، می‌توان از CSS برای تعیین اینکه یک وب‌سایت باید در چندین ستون روی یک مانیتور دسکتاپ پخش شود، اما به یک ستون در یک صفحه کوچکتر، مانند آیفون، ساده‌سازی شود، استفاده کرد.
پاسخ تمام این سوالات را در این راهنما خواهید یافت.
هنگامی که اکثر ما شروع به دور شدن از دسکتاپ و دسترسی به وب از طریق تبلت ها و تلفن های هوشمند کردیم، به زودی مشخص شد که این دیگر کار نمی کند.
در روزهای اولیه وب، طراحان از همان اصول صفحه‌آرایی که در نشریات چاپی استفاده می‌شد، پیروی می‌کردند و اندازه‌های ثابت و مطلق را برای صفحه‌آرایی‌های خود بر اساس پیکسل تعیین می‌کردند.
بر کسی پوشیده نیست که طراحی برای صفحه‌نمایش‌های کوچکتر، چالش‌ها و مشکلات کاربرد بیشتری نسبت به نمایشگرهای بزرگ‌تر دارد. با تمرکز بر روی تلفن همراه، توسعه دهندگان تم به خود این مزیت را می دهند که از همان ابتدا از بسیاری از این مشکلات جلوگیری کنند و در زمان لازم برای بازگشت به عقب و رفع آنها صرفه جویی کنند.
سه ویژگی ضروری برای انجام یک قالب وردپرس به صورت واکنش گرا وجود دارد.
با تمام آنچه گفته شد، یک تم واکنشگرا تنها چیزی نیست که می تواند به بهبود تجربه کاربر در صفحه نمایش های کوچکتر کمک کند. برای ابزارهای مفیدتر، راهنمای ما در مورد بهترین افزونه های وردپرس برای یک سایت سازگار با موبایل را ببینید.
در حالی که صاحبان وب‌سایت می‌توانند از انواع افزونه‌های برتر منوی موبایل مانند WP Mega Menu یا WP Mobile Menu برای بهبود سبک و عملکرد منوی تم خود استفاده کنند، طراحان پوسته معمولاً هنگام ایجاد ناوبری تلفن همراه کاملاً بهینه‌شده در موضوع خود به موفقیت بیشتری دست می‌یابند. در وهله اول.
6. طراحی دکمه بهینه
نه اینکه این تنها دلیل اولویت دادن به طراحی موبایل باشد.
مانند سیستم‌های شبکه، تصاویر سیال توسط CSS مدیریت می‌شوند، که در این مورد، اندازه‌های تصویر را بر اساس درصدی از ظرف آن به جای عرض ثابت تعیین می‌کند. در نتیجه، آن تصاویر به طور خودکار به اندازه و موقعیت بهینه برای صفحه نمایشی که در آن نمایش داده می شوند، تنظیم می شوند.
}
این نقاط شکست توسط پرس‌و‌جوهای رسانه‌ای CSS، دستورات خاصی که به موضوع می‌گویند چه زمانی یک طرح‌بندی متفاوت را نمایش دهد، تعیین می‌شوند.
البته، این فقط تصاویر شما نیستند که باید با اندازه های مختلف صفحه تنظیم شوند. متن شما هم همینطور است.
این رویکرد هم به نفع طراحان و هم برای کاربران نهایی است.
پس از همه، تصور کنید که ابتدا برای موبایل ساخته شده اید و از اندازه فونت مناسب برای دستگاه های اندروید و آیفون استفاده می کنید. هنگامی که کاربر سعی می کند از سایت شما در رایانه رومیزی یا لپ تاپ بازدید کند، احتمال اینکه متن برای خواندن درست آنقدر کوچک باشد وجود دارد.
در صنایع طراحی و توسعه یک اصل بسیار تکرار شده وجود دارد که هر محصول جدید، خواه یک قالب وردپرس، نرم افزار یا یک وب سایت سفارشی باشد، باید با استفاده از رویکرد اول موبایل طراحی شود.
