چگونه وب سایت موجود را ریسپانسیو باشیم؟
در طی چند سال گذشته، طراحی وب ریسپانسیو (RWD) از یک روند طراحی ساده به جریان اصلی منتقل شده است. براساس یک نظرسنجی اخیر، بیش از 81 درصد مردم در استفاده از تکنیک طراحی ریسپانسیو برای ساختن سایت خود به تلفن همراه، به نفع خود هستند. دلیل اصلی این که چرا مردم ترجیح می دهند از RWD بر روی دو روش دیگر استفاده شوند سرویس پویا و آدرس های جداگانه توانایی آن برای سازگاری با دستگاه های مختلف و اندازه صفحه نمایش است.
در مورد تبدیل یک وب سایت موجود به یک ریسپانسیو یا ایجاد یک سایت ریسپانسیو از ابتدا، طراحی وب ریسپانسیو همیشه یک چالش بزرگ برای طراحان و طراحان است. این احتمالا به این دلیل است که آنها راه درست را برای ایجاد وب سایت ریسپانسیو نمی دانند. در این مقاله، به شما نشان خواهم داد که چگونه در وب سایت های موجود در شش مرحله آسان، یک وب سایت موجود را فعال کنید.
بیا شروع کنیم!
مرحله 1: تعریف نقطه های شکست و طرح بندی طرح
هنگام ساخت یک وبسایت پاسخگو، اولین چیزی که باید انجام دهید این است که تصمیم بگیرید که چقدر طرحهای مورد نیاز برای سایت غیر ریسپانسیو شما وجود دارد. از آنجا که دستگاه های مختلف نیاز به پوسته های مختلف دارند، شما باید یک طرح منحصر به فرد برای هر دستگاه که وب سایت شما در آن بازدید می شود، برنامه ریزی کنید.
برای برنامه ریزی طرح های متعدد برای دستگاه های مختلف، ابتدا باید نقطه توقف را تعیین کنید. این را می توان با بررسی طرح فعلی خود برای پیدا کردن نقاط که در آن به طور طبیعی تجزیه می شود. بر اساس محتویات سایت موجود شما، نقاط نقطهای مناسب را تعریف کرده و برنامه ریزی کنید که محتوا را متناسب با اندازه های مختلف صفحه تنظیم کنید.
مرحله 2: افزودن متا تگهای ریسپانسیو
هنگامی که با نقاط توقف و طرح بندی انجام می شود، چیز بعدی این است که طراحی پاسخگو در واقع در مرورگرهای تلفن همراه کار کند که صفحات وب را در حالت مشاهده کامل می کند و کاربران را با استفاده از قابلیت های پانچ به زوم برای محتوا که واقعا می خواهند به آن دسترسی پیدا کنند، . در صورت طراحی پاسخگو، شما مجبورید تغییر رفتار زوم برای مرورگرهای تلفن همراه را انجام دهید تا پرونده های رسانه ای بتوانند به درستی کار کنند. کد قطعه کد زیر را در بخش <head> وب سایت خود وارد کنید:
<meta name = "viewport" content = "width = device-width، initial-scale = 1.0">
تگ نمایش بالا در بالا نه تنها نمایش نسبت 1 × 1 برای تمام اندازه صفحه نمایش را تنظیم می کند، بلکه دستورالعمل های مرورگر را برای استفاده از عرض دستگاه به عنوان عرض عرض نمایش می دهد.
مرحله 3: درخواست های رسانه ای را اعمال کنید
پرس و جو رسانه ای، که قلب طراحی پاسخگو هستند، به شما اجازه می دهد سبک CSS را برای یک دستگاه خاص بر اساس ویژگی هایی مانند عرض صفحه نمایش و یا رزولوشن تعریف کنید. آنها را به عنوان یک ابزار قدرتمند "اگر این ابعاد، پس از این سبک" است که به شما اجازه می دهد طرح بندی های مختلف برای دستگاه های مختلف را تنظیم کنید.
اگر به دقت اجرا شود، پرس و جو های رسانه ای می تواند به شما در ارائه خدمات با کیفیت بالا به کاربران در تمام دستگاه های موجود کمک کند. برای پیدا کردن آنچه پرس و جو رسانه ای برای وب سایت شما مناسب است، تجزیه و تحلیل نقطه های شکست و طرح بندی که شما در ابتدا تعریف شده است. برای نتایج بهتر، با استفاده از پرس و جوهای رسانه ای برای صفحه نمایش کوچک و شروع به پرس و جو رسانه ها برای صفحه نمایش نسبتا بزرگتر شروع کنید.
مرحله 4: ناوبری و تایپوگرافی کامل
مدیریت و نگهداری تایپوگرافی در همه دستگاه ها، دو مورد شایع ترین چالش است که هر کسی در هنگام تبدیل یک وب سایت موجود به آن پاسخ می دهد. از سوی دیگر، از آنجا که ناوبری نیازمند داشتن بصری و خود توضیحی است، از سوی دیگر، تایپوگرافی باید قابل خواندن و قابل خواندن در همه دستگاهها از جمله تلفن همراه باشد.
برای فشرده سازی ناوبری خود و اینکه آن را به طور کامل در دستگاه های صفحه نمایش کوچک قابل دسترسی است، پیشنهاد میکنم از منوی کشویی یا منوی خالی استفاده کنید. برای رسیدن به خوانایی خوب، انعطاف پذیری و قابلیت خوانایی در تایپوگرافی در همه دستگاه ها، از Typography Responsive - یک رویکرد سازگار است که با استفاده از واحدهای CSS مانند em و rem به شما اجازه می دهد نوع قابل خواندن را در چندین دستگاه حفظ کنید.
مرحله 5: همه رسانه ها را انعطاف پذیر کنید
از آنجا که مهمترین جنبه طراحی وب سایت پاسخگو انعطاف پذیری است، اطمینان حاصل کنید که تمام رسانه ها - از جمله تصاویر و ویدیوها - به اندازه ای منطقی هستند. برای اینکه همه رسانه ها پاسخگو باشند، نه تنها باید از بهترین اندازه های رسانه ای برای سایت خود آگاهی داشته باشید، بلکه می توانید از رسانه های مناسب برای دستگاه هایی که وبسایت شما در حال مرور است خدمت کنید.
دلیل اینکه شما باید رسانه ها را در یک پروژه طراحی پاسخگو بهینه سازی کنید، طراحی وسیع دستگاه های مختلف است. صفحه نمایش تلفن معمولا کوچکتر است از سوی دیگر، دستگاه های دیگر مانند صفحه نمایش کامپیوتر یا تلویزیون دارای صفحه نمایش با رزولوشن بالاتر هستند. بنابراین بسیار مهم است که طرح بندی انعطاف پذیر را حفظ کنید، که ممکن است با جلوگیری از هر عنصر بزرگتر از ظرف آن باشد.
مرحله 6: آماده شدن برای انواع مختلف تعاملات
آخر، اما مطمئنا نه کم، سایت شما آماده برای تعاملات مختلف ارائه شده توسط دستگاه های مختلف است. در جایی که کاربران یک صفحه دسکتاپ سنتی با یک صفحه کلید و یک ماوس کار می کنند، برعکس، دستگاه های بالا پایان مانند اپل و گوشی های آندروید با استفاده از انگشتان دست به کار می شوند، زیرا از طریق لمس به عنوان یک روش ورودی اولیه عمل می کنند. این را درک کنید و سایت خود را برای اداره انواع مختلف تعامل آماده کنید.
این همیشه درست نیست که یک تعامل خوب روی کار کنداین دستگاه نیز به خوبی کار خواهد کرد. این عمدتا به این علت است که همه دستگاه ها در هر دو روش فرضی و عملی متفاوت هستند. در دسکتاپ معمولی ما با استفاده از اشاره گر صفحه کلید و ماوس در حالی که در دستگاه های تلفن همراه و قرص، ما چیزی بیش از انگشتان ما است که دقیق تر از اشاره گر ماوس است. بنابراین، در نظر داشتن وب سایت خود را به انگشتان دست بزنید.
