جداول یک عنصر طراحی وب سایت هستند که می توانند به شما کمک کنند تا با ظرافت زیادی اطلاعات را به صورت سازمان یافته نمایش دهید. آنها روی نمایشگرهای رایانه ای کاملاً خوب کار می کنند، اما اغلب می توانند تجربه نامطلوبی را در دستگاه های تلفن همراه ایجاد نمایند. خوشبختانه، چندین راه حل مناسب برای ایجاد جداول ریسپانسیو وجود دارد. استفاده از این شیوه های طراحی ریسپانسیو می تواند تجربه کاربر (UX) سایت شما را بهبود بخشد. این بدان معناست که بازدید کنندگان قادر خواهند بود داده های جداول شما را بدون در نظر گرفتن نوع دستگاهی که استفاده می کنند، با سهولت بیشتری مشاهده و به آنها دسترسی پیدا کنند.

در این مقاله، نگاهی خواهیم انداخت به معنی ریسپانسیو بودن جدول. سپس ما از دو روش برای ایجاد جداول ریسپانسیو در وردپرس استفاده خواهیم نمود. پس در ادامه با ما همراه باشید!

جداول ریسپانسیو چه هستند؟

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

هنگامی که یک جدول ریسپانسیو ایجاد می کنید، اساساً مجموعه ای از قوانین را برای جدول داده اصلی خود تنظیم می نمایید. این قوانین می توانند نقاط شکست را براساس اندازه صفحه نمایش تعیین کنند. این بدین معنی است که اگر کاربری به جدول موجود در یک دستگاه کوچکتر از نقطه تقسیم تعیین شده شما دسترسی پیدا کند، جدول با تغییر شکل متناسب با اندازه صفحه پاسخ می دهد.

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

تهیه یک جدول ریسپانسیو (بدون پلاگین)

اساساً دو روش برای ایجاد یک جدول ریسپانسیو در وردپرس وجود دارد. ابتدا نگاهی خواهیم انداخت که چگونه کار را بدون افزونه انجام دهیم. این کار به دانش رمزگذاری احتیاج دارد: به طور خاص، درک Cascading Style Sheets (CSS). ما همچنین توصیه می کنیم تا زمانی که جدولی را طراحی کنید که به طور قابل اعتمادی کار کند، در یک محیط صحنه سازی یا توسعه به جای وب سایت زنده خود کار کنید.

در مقالات بعدی نحوه ایجاد جداول ریسپانسیو را به شما کاربران گرامی می آموزیم.

آیا سایت وردپرس شما نیاز به ریسپانسیو بودن دارد؟

بیشتر از هر چیزی، پاسخ پیش فرض این سوال مثبت خواهد بود، به ویژه با دسترسی گسترده به تم های ریسپانسیو وردپرس. اگر سایت شما برای طراحی مجدد طراحی شده است یا در مرحله طراحی است، مهم است که به کاربران خود در هر دستگاهی که هستند، تجربه ای با کیفیت ارائه دهید.

برای این منظور، به سوالاتی که در ذهن خود و یا در ذهن شما ممکن است وجود داشته باشد و بخواهیم آنها را ارزیابی کنیم که آیا وردپرس شما باید ریسپانسیوی طراحی شود پاسخ می دهیم.

⭕  موارد استفاده از سایت شما چیست؟ آیا مصرف موبایل مهم خواهد بود؟ شانس این است که پاسخ این سوال بله است و هر ساله در حال افزایش است. استثناهایی وجود خواهد داشت، اما زیاد نیستند.

⭕  کاربران شما چه کسانی هستند؟ هرچه فنی تر باشند، برتری بیشتری خواهند داشت، به احتمال زیاد انتظار دارند برای هر برندی که با آن ارتباط برقرار می کنند، سایتی ریسپانسیو داشته باشند.

⭕  بودجه دارید؟ این یک مساله بزرگ است. ساخت سایت ریسپانسیو در ابتدا کمی گرانتر است، اما ساخت یک سایت ریسپانسیو تکی ارزان تر از برنامه ریزی برای ساخت دو نسخه جداگانه از سایت شما و سپس مدیریت نگهداری برای هر دو است.

⭕  آیا آماده یادگیری نوع جدیدی از طراحی هستید؟ طراحی ریسپانسیو بسیاری از مفاهیم جدید و روشهای درک محتوای دیجیتالی را به شما معرفی می کند. کار با تیم طراحی ای مهم است که نه تنها می تواند چیزی زیبا طراحی کند، بلکه شما را نیز در این راه آموزش دهد.

 ایجاد یک طراحی وب ریسپانسیو وردپرس

طرح های ثابت موجود اغلب می توانند به مضامین ریسپانسیو تبدیل شوند. در اینجا چند مورد از عناصر مورد بررسی در طول فرآیند تبدیل وجود دارد:

📌  بزرگنمایی پیش فرض مرورگر

📌  عرض و ارتفاع عناصر سیال

📌  بهینه سازی تصویر

📌  نقاط شکست ویژه طراحی

📌  منوهای ریسپانسیو مجزا برای دستگاه های تلفن همراه

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

انتخاب قالب مناسب وردپرس

قبل از شروع جستجوی بیش از 10،000 موضوع WordPress که امروزه در دسترس هستند، بهتر است لیستی از ویژگی هایی را که می خواهید سایت شما داشته باشد را تهیه کنید و از آن لیست به عنوان نقطه شروع استفاده نمایید.

اگر از انواع ویژگی هایی که می خواهید جستجو کنید مطمئن نیستید، دو خط اساسی وجود دارد که می توانید تقاضا کنید که به شما در محدود کردن موارد کمک کنند: بهینه سازی موتور جستجو (SEO) و زمان بارگیری سریع صفحه (بدون در نظر گرفتن دستگاه) که هر موضوعی باید این دو مورد را داشته باشد. با وجود اینکه بسیاری از تم های وردپرس وجود دارند که این قابلیت داخلی را ندارند، اما کاربرد موضوعی که هر دو ویژگی را داشته باشد، تجربه کاربر نهایی در سایت شما را بسیار بهتر می کند.

 

برنامه های موبایل در مقابل سایت های ریسپانسیو

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

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

ملاحظات عملکردی برای سایت های ریسپانسیو

یک طراحی ریسپانسیو بر عملکرد کلی سایت شما تأثیر می گذارد. بارگیری تعداد زیادی CSS و اندازه های مختلف عکس به منظور ریسپانسیوسازی در اندازه های دستگاه از نظر پردازش درونمایه، گران است. به عنوان بخشی از ارزیابی طراحی ریسپانسیو، اولویت بندی عملکرد به عنوان یک ویژگی حائز اهمیت است. کاربران هنوز انتظار دارند که یک سایت موبایل کمی کندتر باشد، اما اگر بخواهند سایت شما را برای نشان دادن دوست یا تاریخ خود نشان دهند، بخشنده نیستند و باید بیش از چند ثانیه صبر کنند.

از نظر فنی، هنگام تحویل سایت خود به یک دستگاه تلفن همراه که از داده های تلفن همراه استفاده می کند، به شما به اندازه 5/0 ثانیه از شروع کار فرجه می دهد. به عنوان مثال، برای گرفتن 40KB  در 4G ، 700 میلی ثانیه در شرایط مطلوب طول می کشد. تأخیر شبکه و تغییرات موقعیتی نیز به زمان بارگذاری شما اضافه می کنند. شما قادر نیستید متغیرهای شبکه تلفن همراه را کنترل کنید، بنابراین بسیار مهم است که از همان ابتدا سایت ریسپانسیو خود را همراه با عملکرد به عنوان یک ویژگی بسازید.

به منظور اطمینان از بهینه سازی سایت خود برای تلفن همراه، اطمینان حاصل کنید که موارد زیر را انجام می دهید:

📢️ تصاویر خود را بهینه سازی نمایید: اندازه صفحه نمایش دستگاه را به صورت خودکار تشخیص دهید تا اندازه تصویر مناسب ایجاد شود، کچ شود و تحویل داده شود.

📢️ درخواست های HTTP خود را کاهش دهید: مقدار CSS و JavaScript مورد نیاز خود را به حداقل برسانید و سپس سایر موارد را در حافظه پنهان نمایید.

📢️ دارایی های مشروط را بارگذاری کنید: دکمه های بزرگ رسانه های اجتماعی، تصاویر و موارد مشابه برای دستگاه بزرگتر عالی هستند، اما برای نمونه های کوچکتر، بر تجربه کاربر تأثیر نمی گذارد. طراحی خود را طوری برنامه ریزی نمایید که فقط موارد ضروری را بارگیری کند.

📢️ Lazy Loading (لود تنبل): اگر می توانید با بارگیری دارایی های خاص، به ویژه JavaScript ، پس از مهمترین عناصر صفحه از پس آن برآیید، این کار را انجام دهید. تا زمانی که کاربران شما محتوای مورد نظر خود را مصرف کنند، سایر دارایی ها بارگیری می شوند.