طراحی سایت ریسپانسیو یک رویکرد توسعه وب است که بسته به اندازه صفحه نمایش و دستگاهی که برای مشاهده آن استفاده می شود ، تغییرات پویایی در ظاهر یک وب سایت ایجاد می کند.
طراحی سایت ریسپانسیو یا واکنش گرا روشی است که نشان می دهد طراحی و توسعه باید بر اساس اندازه صفحه نمایش ، پلتفرم و جهت گیری به رفتار و محیط کاربر پاسخ دهد.در طراحی ریسپانسیو، عناصر صفحه با بزرگ شدن یا کوچک شدن صفحه نمایش تغییر شکل می دهند. طراحی برای صفحه نمایش دسکتاپ سه ستونی ممکن است به دو ستون برای رایانه لوحی و یک ستون برای تلفن هوشمند تغییر یابد. طراحی وبسایت واکنش گرا برای تنظیم مجدد محتوا و عناصر طراحی به شبکه های مبتنی بر نسبت صفحه متکی است.طراحی سایت ریسپانسیو همچنین به عنوان یکی از عوامل تاثیرگذار در سئو وب سایت شناخته می شود.
طراحی واکنش گرا یک رویکرد برای طراحی وب است که باعث می شود محتوای وب شما با اندازه های مختلف صفحه با انواع دستگاه ها سازگار شود. بسیاری از اندازه های مختلف صفحه نمایش در تلفن ها ، رایانه های لوحی ، رایانه های رومیزی ، کنسول های بازی ، تلویزیون ها وجود دارد. اندازه صفحه نمایش همیشه در حال تغییر است ، بنابراین مهم است که سایت شما بتواند با هر اندازه صفحه نمایش ، امروز یا آینده مطابقت داشته باشد. علاوه بر این ، دستگاه ها ویژگی های متفاوتی دارند که ما با آنها تعامل داریم. برای مثال برخی از بازدیدکنندگان شما از صفحه لمسی استفاده می کنند. طراحی سایت ریسپانسیو ( Responsive Web Design ) یا طراحی پاسخگو مدرن همه این موارد را برای بهینه سازی تجربه کاربری برای همه اندازه ها در نظر می گیرد.
فهرست مطالب
در ساده ترین حالت ، طراحی سایت موبایل فرندلی به این معنی است که اطلاعات وب سایت شما - تصاویر ، متون ، فیلم ها ، پیوندها - به راحتی و به آسانی در همه سیستم عامل های مختلف و به ویژه در صفحه بسیار کوچکتر گوشی های هوشمند و رایانه های لوحی قابل دسترسی است.یک وب سایت سازگار با تلفن همراه باید اندازه و کدگذاری شود تا بتوانید بر روی یک دستگاه تلفن همراه تعامل آسان داشته باشید ، به این معنی که خواندن متن و حرکت در وبسایت آسان باشد (دکمه ها و پیوندها به اندازه ای بزرگ هستند که با انگشت به آنها ضربه بزنید).
ارائه وبسایت موبایل فرندلی یکی از موثرترین روش ها برای ماندگاری بیشتر بازدیدکنندگان در وب سایت ها است. افراد به احتمال زیاد در وب سایتی می مانند که استفاده از آن آسان است و احتمال اینکه آن را ترک کنند کاهش می یابد ، این برای شما به این معنی است که یک وب سایت سازگار با موبایل نرخ پرش (Bounce Rate) شما را کاهش می دهد.
با طراحی سایت ریسپانسیو، وبسایت شما باید در موبایل به درستی نشان داده شود.
1- سایت خود را با استفاده از ابزار Google's Mobile-Friendly آزمایش کنید.
2- از قالب وبسایت ریسپانسیو استفاده کنید.
3- هاست وب معتبر را انتخاب کنید.
4- سرعت وبسایت خود را بهبود بخشید.
5- پنجره های پاپ آپ خود را برای دستگاه های تلفن همراه دوباره طراحی کنید.
6- فعال کردن فناوری صفحات سریع تلفن همراه (AMP)
7- ایجاد یک برنامه موبایل
عوامل متعددی مانند ثبات ، رنگ ها ، تایپوگرافی ، تصاویر ، سادگی و عملکرد همه در طراحی وب سایت خوب نقش دارند. هنگام طراحی یک وب سایت ، عوامل کلیدی زیادی وجود دارد که به نحوه درک آن کمک می کند. یک وب سایت خوب طراحی شده می تواند به ایجاد اعتماد و راهنمایی بازدیدکنندگان برای اقدام (مثلا خرید) کمک کند.در حالی که اکثر مرورگرهای مدرن مشابه هستند ، کدگذاری آنها متفاوت است و مجموعه ویژگی های متنوعی دارند. در نتیجه ، یک وب سایت همیشه در همه مرورگرها یکسان به نظر نمی رسد یا عمل نمی کند. اگر فقط سایت خود را در Chrome مشاهده کرده اید و به Firefox یا Safari رفته اید ، ممکن است از تفاوت ها شگفت زده شوید.
طراحی ریسپانسیو یک ابزار است ، نه یک راه حل کامل. در حالی که استفاده از طراحی سایت ریسپانسیو هنگام طراحی در بین دستگاه ها دارای مزایای زیادی است ، استفاده از این تکنیک یک تجربه قابل استفاده را تضمین نمی کند (همانطور که استفاده از دستور غذاهای لذیذ باعث ایجاد یک غذای باشکوه نمی شود.) تیم های طراحی ریسپانسیو باید بر روی جزئیات محتوا ، طراحی و عملکرد به منظور پشتیبانی از کاربران در همه دستگاه ها تمرکز کنند.
از آنجا که طراحی سایت ریسپانسیو بر روی تغییر عناصر در سراسر صفحه متکی است ، طراحی و توسعه باید با یکدیگر همکاری نزدیک داشته باشند تا از تجربه قابل استفاده در دستگاه ها اطمینان حاصل شود. طراحی سایت ریسپانسیو اغلب به حل یک معما تبدیل می شود که چگونه می توان عناصر را در صفحات بزرگتر سازماندهی کرد تا در صفحات باریک تر ، طولانی تر یا برعکس قرار گیرد. با این حال ، اطمینان از تناسب عناصر در یک صفحه کافی نیست. برای موفقیت در طراحی سایت ریسپانسیو ، این طرح باید در تمام رزولوشن ها و اندازه های صفحه نیز قابل استفاده باشد.
در طراحی سایت ریسپانسیو، وبسایت شما در همه اندازه های صفحه نمایش به درستی نشان داده می شود.
با به وجود آمدن دستگاه های بیشتر ، وضوح صفحه نمایش ، تعاریف و جهت های متفاوتی وجود دارد. دستگاه های جدید با اندازه صفحه نمایش جدید هر روز در حال توسعه هستند و هر یک از این دستگاه ها ممکن است بتوانند تغییرات در اندازه ، عملکرد و حتی رنگ را مدیریت کنند. برخی بصورت افقی ، برخی دیگر به صورت عمودی ، برخی دیگر حتی کاملاً مربع هستند. همانطور که از محبوبیت روزافزون آیفون ، آیپد و تلفن های هوشمند پیشرفته می دانیم ، بسیاری از دستگاه های جدید به دلخواه کاربر می توانند از حالت عمودی به حالت افقی تبدیل شوند.از این رو اهمیت طراحی سایت ریسپانسیو روز به روز در حال افزایش است.
پاسخگو بودن یا عدم پاسخگویی سایت های وردپرس به قالب سایت وردپرسی شما بستگی دارد. قالب وردپرس معادل یک قالب برای وب سایت استاتیک است و طراحی و چیدمان محتوای شما را کنترل می کندبنابراین باید توجه کنید که از قالب های ریسپانسیو برای وبسایت خود استفاده کنید..با مقایسه ظاهر آن در دستگاه های مختلف یا استفاده از Chrome Developer Tools می توانید آزمایش کنید که آیا قالب شما واکنش گرا است یا خیر.
هنگامی که ما در مورد قالب های وب سایت واکنش گرا صحبت می کنیم ، در مورد یک طرح بندی وب سایت که دارای کدنویسی پاسخگو به دستگاه فعلی شخص در حال مشاهده باشد ، صحبت می کنیم.داشتن یک قالب بهینه شده برای رسیدن به یک طراحی سایت ریسپانسیو برای انواع دستگاه ها اهمیت بسیار زیادی دارد.
Google Mobile Friendly Test ابزاری است که به وبمستر ها اجازه می دهد آدرس اینترنتی خود را تایپ کرده و دریابند که از نظر گوگل وبسایت آنها چقدر موبایل فرندلی به نظر می رسد یا چقدر سایت آنها مناسب تلفن همراه است. این ابزار بررسی میکند که کاربران چقدر آسان می توانند بخوانند و از طریق دستگاه های تلفن همراه به سایت مراجعه کنند ، با نمره عدم موفقیت و پیشنهاداتی برای بهبود. این ابزار فرصت های بهینه سازی را به شما برای رسدون به یک وب سایت ریسپانسیو ارائه میکند.استفاده از ابزار تست Mobile-Friendly آسان است. به سادگی آدرس کامل صفحه وب را که می خواهید آزمایش کنید وارد کنید. نتایج آزمایش شامل تصویری از نحوه ظاهر شدن صفحه در Google در دستگاه تلفن همراه و همچنین فهرستی از مشکلات مربوط به قابلیت استفاده از تلفن همراه است.
صفحات بهینه شده برای موبایل (AMP) صفحاتی هستند که زمان بارگذاری سریع تری نسبت به اسناد استاندارد HTML5 دارند.این صفحات ارتباط نزدیکی به مبحث طراحی سایت ریسپانسیو دارند چرا که به طور اختصاصی دستگاه های موبایل را هدف قرار می دهند. وب سایت ها می توانند با پیاده سازی تگ rel = amphtml در HTML خود ، صفحات AMP را ارائه دهند. صفحات دارای کد AMP دارای پیکربندی AMP سه مرحله ای هستند:
HTML: نشانه گذاری خالی و منحصر به فرد کد HTML قدیمی با برچسب های منحصر به فرد.
JS: برای فراخوانی منابع و برای حذف رندر غیر ضروری استفاده می شود.
CDN: یک شبکه بهینه سازی شده برای ذخیره سازی صفحات و انطباق سریع آنها با کد AMP.
AMP همچنین نیاز به درخواست های CSS اضافی را کاهش می دهد و برخی از موارد اضافی در صفحه را حذف می کند ، از جمله تصاویر حجیم ، CTA ها در بسیاری از موارد و بسیاری از کدهای پشتیبان. این امر تأثیر زیادی در افزایش سرعت وبسایت دارد. در درجه اول ، AMP با فعال کردن ذخیره سازی ، زمان بارگذاری صفحه وب را تا یک ثانیه از سرعت بار کلی افزایش می دهد. اساساً ، Google با بارگیری اولیه اسناد AMP با استفاده از یک iFrame واحد در پس زمینه یک صفحه نتایج جستجو ، از این قابلیت استفاده می کند تا صفحات به صورت لحظه ای بارگیری شوند.ابزار Amp Test گوگل به بررسی صفحات بهینه شده برای موبایل می پردازد.
اولویت بندی محتوا یکی از جنبه های کلیدی برای انجام هر چه بهتر طراحی سایت ریسپانسیو است. محتوای بسیار بیشتری بدون اسکرول بر روی یک مانیتور رومیزی بزرگ قابل مشاهده است تا روی یک صفحه نمایش کوچک گوشی هوشمند. اگر کاربران فوراً آنچه را که می خواهند در مانیتور رومیزی مشاهده نکنند ، می توانند به راحتی به اطراف صفحه نگاه کرده و آن را کشف کنند. در تلفن های هوشمند ، کاربران ممکن است مجبور شوند بی وقفه حرکت کنند تا محتوای مورد علاقه خود را کشف کنند. اولویت بندی محتوای هوشمند به کاربران کمک می کند تا بهتر آنچه را که نیاز دارند پیدا کنند.
Viewport ناحیه قابل مشاهده کاربر در یک صفحه وب است و یکی از پارامترهای اصلی در طراحی سایت ریسپانسیو است. اندازه صفحه نمایش هر دستگاه متفاوت است و در تلفن همراه کوچکتر از صفحه کامپیوتر است. برای رفع این مشکل ، مرورگرهای آن دستگاه ها کل صفحه وب را متناسب با صفحه کوچک میکنند.از متاتگ viewport برای بهبود ارائه محتوای وب خود استفاده کنید. به طور معمول ، از متا تگ viewport برای تنظیم عرض و مقیاس اولیه Viewport استفاده میشود. به عنوان مثال ، اگر صفحه وب شما باریک تر از 980 پیکسل است ، باید عرض نمای نمایش را متناسب با محتوای وب خود تنظیم کنید.
صفحات بهینه شده برای دستگاه های مختلف باید دارای متاتگ viewport در قسمت Head باشند. یک متاتگ ویوپورت دستورالعمل هایی در مورد نحوه کنترل ابعاد و مقیاس بندی صفحه به مرورگر می دهد.برای تلاش برای ارائه بهترین تجربه ، مرورگرهای تلفن همراه صفحه را در عرض صفحه دسکتاپ ارائه می دهند (معمولاً حدود 980 پیکسل ، اگرچه این میزان در دستگاه ها متفاوت است) ، و سپس سعی کنید با افزایش اندازه فونت و مقیاس بندی محتوا متناسب با متن ، ظاهر آن را بهتر جلوه دهید. صفحه نمایش این بدان معناست که اندازه فونت ممکن است برای کاربران ناسازگار به نظر برسد ، زیرا ممکن است برای مشاهده و تعامل با محتوا مجبور شوند برای بزرگنمایی دوبار ضربه بزنند یا کوچک کنند.
استفاده از عبارت width = device-width به صفحه دستور می دهد تا با عرض صفحه در پیکسل های مستقل از دستگاه مطابقت داشته باشد. یک پیکسل مستقل از دستگاه (یا تراکم) نمایانگر یک پیکسل است که ممکن است در یک صفحه با تراکم بالا از تعداد زیادی پیکسل فیزیکی تشکیل شده باشد. این به صفحه اجازه می دهد تا محتوا را با اندازه های مختلف صفحه نمایش مطابقت دهد ، چه در یک تلفن همراه کوچک و چه در یک مانیتور رومیزی بزرگ نمایش داده شود.
برخی از مرورگرها هنگام چرخش به حالت افقی ، عرض صفحه را ثابت نگه می دارند و برای پر کردن صفحه بزرگنمایی نمی کنند. افزودن مقدار اولیه initial-scale=1 به مرورگرها دستور می دهد بدون در نظر گرفتن جهت دستگاه بین پیکسل های CSS و پیکسل های مستقل از دستگاه رابطه 1: 1 برقرار کنند و به صفحه اجازه می دهد از عرض کامل افقی استفاده کند.
با استفاده از این ابزار گوگل کروم می توانید به طراحی ریسپانسیو وب سایت خود کمک کنید.
DevTools را در گوگل کروم با فشار دادن F12 باز کنید.
روی "نوار ابزار تعویض دستگاه" موجود کلیک کنید.
دستگاهی را که می خواهید شبیه سازی کنید از لیست دستگاه های iOS و Android انتخاب کنید.
پس از انتخاب دستگاه مورد نظر ، نمای موبایل وب سایت را نمایش می دهد.
عناصر مختلفی وجود دارد که در طراحی وب واکنش گرا نقش دارند. بدون درک اولیه از HTML و CSS ، می توان به راحتی اشتباه کرد.اما از طریق آشنایی با اجزای مختلف ساختمان ، تجزیه و تحلیل نمونه ها با ابزارهای توسعه دهنده وب و آزمایش در حین استفاده از نمونه کد ، باید بتوانید وب سایت خود را بدون هیچ مشکل اساسی پاسخگو کنید.اگر رسیدن به این هدف طولانی به نظر می رسد ، همیشه می توانید یک توسعه دهنده وردپرس استخدام کنید یا به سادگی مطمئن شوید که قالب وبسایت شما ریسپانسیو است.
آخرین آپدیت : 23 شهریور 1400