لطفا صبر کنید ...

پنج روش برای ساخت سریع یک وب سایت واکنشگرا

الهام غایب

توسط الهام غایب

دیدگاه ها: 0
بازدید ها : 58
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

با عرضه قابلیت mobile-first indexing در مارس سال ۲۰۱۸، گوگل برای همه آشکار کرد که کاربران موبایلی چقدر مهم هستند و چقدر برنامه ریزی برای تمرکز بر خدمات رسانی بهتر به آن‌ها در آینده انجام شده است.


۵ روش برای ساخت سریع یک وب سایت واکنشگرا

قابلیت mobile-first indexing عمدتا نسخه موبایل را برای رتبه دهی در میان صفحات نتیجه موتور جستجوی خود در نظر می‌گیرد. فاکتورهای اصلی برای رتبه دهی بهتر در ساز و کار mobile-first indexing شامل واکنشگرا بودن و سرعت است. در ادامه مقاله در لیداوب با پنج روش برای طراحی سایت واکنشگرا آشنا خواهید شد.

۱. یک Viewport اضافه کنید

هر صفحه وب، حتی سادهترینِ آن باید یک viewport داشته باشد. Viewport یک ابزار ضروری در توانمند سازی تجربه استفاده از وب سایت در دستگاه‌های مختلف است و بدون آن، سایت‌ها برای نمایش در هر صفحه نمایش غیر دسکتاپی با مشکل مواجه خواهند شد. کاربرد viewport این است که به مرورگر نشان دهد صفحه واکنشگرا باید با صفحه دستگاه مورد نظر منطبق شود. افزودن viewport بسیار ساده است چون فقط باید یک بار در بالای سند ذکر شود. توصیه می‌شود ابتدا با یک viewport باریک شروع کرده و سپس بعدا آن را بزرگ‌تر کنید.

۲. از Breakpoint استفاده کنید

گرچه viewport نقش فونداسیون یک وب سایت واکنشگرا را دارد اما breakpoint‌ها از ساختاری پشتیبانی می‌کنند که بقیه ساختار وب سایت به آن وابسته هستند. Breakpoint‌ها در اصل عرض مرورگر هستند که دارای یک بیان مدیا کوئری برای تغییر چینش صفحه در زمانی هستند که مرورگر درون طیف مشخصی قرار دارد. بیشتر وب سایت‌ها دارای میانگین دو breakpoint هستند که برای تبلت‌ها و موبایل‌ها به کار می‌روند. در زمان تعیین این breakpoint‌ها، اندازه صفحه نمایش آیفون‌ها و آیپدها به عنوان استاندارد در نظر گرفته می‌شود چون این دستگاه‌ها پر استفاده‌ترین دستگاه‌ها هستند.

۵ روش برای ساخت سریع یک وب سایت واکنشگرا

۳. از مدیا کوئری استفاده کنید

یکی از نکات مهم برای وب سایت‌هایی که تم واکنشگرا نداشته یا دارای وب سایت استاتیک HTML هستند این است که از مدیا کوئری استفاده کنند. مدیا کوئری یک کد در stylesheet است که به مرورگر روش نمایش سایت در رزولوشن‌های مختلف را نشان می‌دهد. وب سایت‌ها با استفاده از مدیا کوئری می‌توانند بر توانایی واکنشگرا بودن خود افزوده و به صورت مجزا برای هر دستگاه و هر مرورگری، استایل مشخصی داشته باشند. حتی این استایل‌ها هم می‌توانند با توجه به ویژگی‌های دستگاهی که محتوا بر روی آن نمایش می‌یابد، شامل عرض، نوع نمایش، جهت یابی و ارتفاع تغییر یابند.

مطالعه بیشتر:

۴. تصاویر را انعطاف پذیر سازید

یکی از روش‌های کار با تصاویر در طراحی واکنشگرا استفاده از breakpoint‌های متغیر و ذخیره اندازه‌های مختلف تصویر در دیتابیس برای رزولوشن‌های مختلف است. اما این جزء از طراحی واکنشگرا می‌تواند برای سرعت سایت یک مانع باشد چون پهنای باند را افزایش می‌دهد. دستگاه‌هایی که به پهنای باند قدرتمند دسترسی ندارند می‌توانند مدت‌ها درگیر بارگذاری یک سایت باشند. بنابراین، یک جایگزین بهتر برای این روش، انعطاف پذیر ساختن تصاویر از طریق استفاده از اندازه گیری انطباقی و تغییر اندازه عرض آن‌ها است. ابزارهای مفیدی مانند "Adaptive Images" می‌توانند برای دستیابی به این هدف به کار برده شوند. همچنین، توصیه می‌شود برای داشتن یک وب سایت سریع‌تر و واکنشگرا‌تر، تصاویر را بر‌اساس کاربران موبایل اندازه گذاری کنید.

۵. مدیریت محتوا

برای طراحی وب سایت واکنشگرا، کپی کردن نسخه دسکتاپ برای یک دستگاه موبایل می‌تواند برای کاربران تجربه ناخوشایندی ایجاد کند. تجربه موبایل باید بیشتر روی کاربر پسندی تکیه کند و آن هم از طریق مدیریت محتوا به روشی ساده‌تر انجام شود. برای مثال، محتوای وب سایت موبایل نباید با یک تصویر بزرگ در هدر آغاز شود چون کاربران مجبور می‌شوند برای مطالعه مطلب، صفحه را اسکرول کنند. از آنجایی که دستگاه‌های موبایل از اشارات لمسی بر روی صفحه استفاده می‌کنند، دکمه‌های Call to Action و راهبری باید چشمگیر و متمایز باشد تا کاربر با لمس اشتباه، پاسخ ناخواسته‌ای دریافت نکند. دستگاه‌های موبایل روز به روز سریع‌تر از قبل می‌شوند و با وجود گزینه‌های مختلف، کاربران برای استفاده از یک جایگزین بهتر، هرگز تامل نمی‌کنند. از نکات ذکر شده در این مقاله  استفاده کرده و وب سایتی کاربر پسند طراحی کنید تا رتبه بهتری در میان رقیبان به دست آورید. 

با مقالات طراحی سایت و سئو ما در لیداوب همراه باشید تا بتوانید روز به روز بر دانش خود در این زمینه بیافزایید.

منبع :

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند



متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین مطالب

آموزش در لیداوب

از مقالات و ویدیو های آموزشی خودتان کسب درآمد کنید!

جدیدترین سرویس ما برای دوستان متخصص و خوش بیان در زمینه طراحی وب ارائه شد. این سرویس به شما این امکان را می دهد که به آسانی مقالات و یا ویدیو های آموزشی خود را در لیداوب منتشر کنید. فرصت مناسبی است که بدون داشتن وب سایت و یا وبلاگ و مهم تر از همه بدون هزینه، مطالب خود را در لیداوب منتشر کنید و مهم تر از همه با فروش آنها کسب درآمد کنید. همین حالا شروع کنید و این فرصت استثنایی را از دست ندهید.