طراحی ریسپانسیو
استفاده از تلفن همراه برای گشت و گذار در وب موردی ست که روز به روز با سرعتی نجومی در حال رشد است . این دستگاه ها به علت سایز صفحه نمایش کوچکی که دارند ، دارای محدودیت هایی هستند .که اگر در طراحی سایت به آنها توجه نشود و برای آنها چیدمان متفاوتی طراحی نشود ، کاربران سایت تجربه ی کاربری خوبی را از گشت و گذار در سایت تجربه نخواهند کرد .
حتما برای شما هم پیش آمده که وارد وبسایتی شده باشید و برای گشت و گذار در آن و استفاده از مطالب آن مدام نیاز به زوم کردن و یا اینور آنور رفتن داشته باشید . مطمئنا پس از این تجربه ناخوشایند نسبت به طراحی ریسپانسیو سایت های دیگر حدالامکان شما دیگر پا به آن سایت نخواهید گذاشت .
طراحی ریسپانسیو یا واکنش گرا نوعی از طراحی سایت است که باعث می شود صفحات وب سایتها بر روی انواع دستگاه ها با اندازه صفحه یا پنجره مختلف ، به خوبی نمایش داده شوند.
در واقع سایت با مشخصه ریسپانسیو سایتی است که روی تمامی نمایشگر ها واکنش نشان داده و به خوبی نمایش داده می شوند . سایت های ریسپانسیو قادرند به طول و عرض صفحه نمایش هر کاربرو نوع دستگاه استفاده شده توسط کاربر (موبایل، تبلت و یا کامپیوتر رومیزی یا لپ تاپ) و با انواع مختلف سیستم عامل ها بخوبی واکنش داده و تصویر مناسبی را ارئه نماید . کد نویسی و یا طراحی قالب در طراحی ریسپانسیو بنحوی انجام میشود که محتوا و چیدمان آن ها در مرورگرهای مختلف و همچنین در دستگاه هایی با اندازه های مختلف به هم نریخته و تصویری مناسب برای کاربر به نمایش گذاشته شود.
نحوه طراحی و کدنویس اینگونه سایتها بر اساس سایز مانیتورها ، تبلت ها ، گوشهای موبایل و با استفاده از توانایی های زبانهای برنامه نویسی تحت وب انجام میگردد. مثلا با دانستن اینکه عرض های حدودا کوچکتر از 360 پیکسل ، جهت نسخه های موبایل ، عرض های مابین 1024 پیکسل و 700 جهت تبلت و لب تاب های کوچک و عرض بزرگتر از 1024 پیکسل میتوان برنامه نویسی مناسبی جهت ریسپانسیو طراحی نمودن قالب مورد نظر ارائه نمود.
چطور میتوان سایت را ریسپانسیو کرد ؟
صفحات واکنش گرا به انواع نمایشگر ها باید حاوی تگ meta viewport باشند . تگ متا ویوپورت دستورالعمل هایی را برای کنترل ابعاد و مقیاس بندی صفحه به مرورگر می دهد .
به عنوان تلاشی برای ارائه تجربه کاربری بهتر از سایت ها ، مرورگر های تلفن های همراه صفحه را به عرض صفحه نمایش دسکتاپ ارائه می دهند ( معمولا در حدود 980 پیکسل ، هرچند که در دستگاه های مختلف متفاوت است ) ،و سپس سعی میکنند با افزایش اندازه فونت و مقیاس بندی متناسب با صفحه نمایش ، محتوا را بهتر نمایش دهند . این به این معناست که چون سایز سایت به اندازه دسکتاپ است ، کاربران مدام برای تعامل و دیدن محتوا دو بار به صفحه نمایش خود ضربه بزنند و یا بزرگنمایی کنند و این افزایش فونت برای آنها نامناسب دیده می شود .
<!DOCTYPE html>
<html lang=”en”>
<head>
…
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
…
</head>
استفاده از تگ meta viewport و مقداردهی width=device-width موجب تناسب صفحه سایت با سایز صفحه نمایش گوشی موبایل با مقیاس بندی واحدی که از تراکم صفحه مستقل (density-independent pixel) است ، می شود .
dp واحدی مجازی و جایگزین پیکسل است که هدف از تعریف آن ایجاد واحدی مستقل از تراکم از صفحه نمایش است . تا بتوانیم با استفاده از این واحد در تمامی صفحات نمایش اندازه یکسانی داشته باشیم . استفاده از آن باعث میشود محتوای سایت همیشه متناسب با اندازه صفحه نمایش دستگاه مقصد باشد چه در یک تلفن همراه کوچک و یا یک مانیتور بسیار بزرگ .
تصویر زیر مثالی از صفحه ایست که در آن از تگ متا ویوپورت استفاده نشده است .
و این تصویر صفحه لود شده ای ایست که در آن از تگ متا ویوپورت استفاده شده است .
برخی مرورگر ها هنگام چرخش دستگاه به حالت افقی ، عرض صفحه را ثابت نگه میدارند و به جای برقراری تناسب ، محتوای صفحه را بزرگنمایی میکنند . افزودن initial-scale=1 به تگ متا ویوپورت به مرورگر ها دستور میدهد که بین پیکسل های css و پیکسل های مستقل از تراکم صفحه (dp) بدون در نظر گرفتن جهت دستگاه تناسب 1 به 1 برقرار کنند و به صفحه اجازه می دهد از عرض کامل افقی نیز استفاده کند و کاملا ریپانسیو باشد .
در دنیا و عصر حاضر با فراگیر شدن روز افزون تکنولوژیهای ارتباطی و مخابراتی ، و استفاده زیاد کاربران از گوشی های هوشمند به جرات میتوان گفت اکثر وبگردیها از طریق این گوشی های هوشمند انجام میگردد که خود دلیلی برای ریسپانسیو بودن قالب سایتها میباشد.چرا که در غیر این صورت و با توجه به عدم امکان استفاده صحیح از مطالب وب سایتها ماندگاری و مراجعه مجدد کاربران در سایت ما بشدت کاهش می یابد که اینمورد خود منجر به کاهش فروش کالا ، خدمات و یا سرویسهای ارائه شده در وب سایتمان میگردد.چیزی که اصلا مطلوب تجارت آن هم از نوع آنلاین نمیباشد.
در پایان لازم بذکر است کلیه قالبهای ارائه شده توسط میهن پلن این خصوصیت بارز را داشته و در تمامی دستگاهها تصاویر مناسبی را ارائه میدهند.
