طراحی سایت ریسپانسیو از نگاه گوگل چه سایتی است؟

منتشرشده توسط فرزین اعتماد در تاریخ

طراحی سایت ریسپانسیو از نگاه گوگل 

طراحی وب سایت ریسپانسیو یا RWD که مخفف Responsive Web Design است ,یک فرایند طراحی وب سایت است که باعث می شود تا صفحات وب به خوبی بر روی انواع دستگاه ها و صفحات نمایش به مانند کامپیوتر ، تلفن همراه و تبلت ها به خوبی مشاهده شود و محتوای نمایشی و طراحی و عملکرد در تمام دستگاه ها مطابق با همان دستگاه می باشد.به طور تخصصی تر اگر بخواهیم طراحی سایت ریسپانسیو را از زبان گوگل تعریف کنیم ،راه اندازی فرآیندی است که در آن سرور همیشه یک کد HTML را به همه دستگاه ها ارسال می کند و CSS برای تغییر دادن رندر صفحه در دستگاه استفاده می شود .همچنین الگوریتم‌ های گوگل هم باید بتوانند این تنظیم را به طور خودکار تشخیص دهند، اگر همه عوامل از جمله کاربر و Googlebot مجاز به رندر صفحه و CSS ، جاوا اسکریپت و تصاویر باشند این یک طراحی ریسپانسیو بی نقص استطراحی  وب سایت ریسپانسیو در تمام دستگاه‌ها با همان کد است که فقط برای اندازه صفحه نمایش های مختلف تنظیم می‌شود.در این جا قصد داریم تا با طراحی سایت ریسپانسیو و چگونگی آن آشنا بشویم.

سایت تست رسپانسیو

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

متاتگ های سایت های ریسپانسیو Meta Tag

یکی از راه‌های طراحی ریسپانسیو استفاده از متا تگ‌ها  است به طور مثال از برچسب meta name = “viewport” استفاده کنید تا مرورگر نحوه تنظیم محتوا را بگوید.

با استفاده از meta name = “viewport”:

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

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

 

تگ‌های viewport  برای نمایش دستورالعمل‌های مرورگر را در مورد چگونگی تنظیم ابعاد و مقیاس صفحه به عرض دستگاه می‌دهد

هنگامی که عنصر meta viewport را حذف کنیم، مرورگرهای تلفن همراه به طور پیش فرض برای ارائه صفحه به عرض صفحه دسکتاپ (معمولاً حدود۹۸۰px هستند، هرچند این در دستگاه ها متفاوت است). سعی می‌کنند محتوا را با افزایش فونت‌ها ….افزایش دهند و یا محتوای پوسته را متناسب با صفحه ، نمایش دهند یا تنها بخشی از محتوای متناسب با صفحه نمایش را نشان دهند.

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

.

در سمت چپ  تصویر بالا یک صفحه بدون استفاده از تگ viewport مشخص شده است –  همان طور که مشاهده می‌شود مرورگر تلفن همراه به این ترتیب ، فقط عرض را در نظر می‌گیرد و صفحه را متناسب با اندازه صفحه سایت می‌کند.در تصویر سمت چپ خواندن محتوا بسیار سخت استدر سمت راست ، همان صفحه اما با استفاده از تگ viewport مشخص شده است که با عرض دستگاه مطابقت دارد مرورگر تلفن همراه صفحه را مقیاس نمی‌کند و محتوا کاملاً (بدون زوم کردن) قابل خواندن است.

 برای تصاویر ریسپانسیو، از تگ <picture>  استفاده می‌شود.

مزیت ها و دلایل طراحی سایت ریسپانسیو

به کاربران اجازه می‌دهد تا با یک تجربه کاربری ساده تر به محتوای شما دسترسی داشته باشند و بتوانند آنها را در شبکه های اجتماعی شان به اشتراک بگذارند !

به الگوریتم‌های گوگل کمک می‌کند تا به راحتی ویژگی‌های نمایه سازی را به صفحه اختصاص دهند ، نه اینکه نیاز به نشانه‌ای از صفحات مربوط به دسکتاپ و تلفن همراه داشته باشند.

نیاز به زمان کمتری برای نگهداری صفحات چندگانه برای محتوای مشابه نیاز دارد.

احتمال برخی از اشتباهات که روی سایت های تلفن همراه تأثیر می‌گذارد را کاهش می‌دهد.

نیازی به تغییر مسیر یا ریدایرکت برای کاربران برای نمایش بهینه سازی دستگاه نیست، که این امر زمان بارگیری را کاهش می‌دهد. همچنین، تغییر مسیر گاها مبتنی بر خطا است و می‌تواند باعث اذیت کاربران شود.

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

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

یکی دیگر از مزیت‌های طراحی وب سایت ریسپانسیو تبدیل بازدید کنندگان سایت به مشتری است به این خاطر که بسیاری از افرادی که با تلفن همراه خود سایت‌ها را مشاهده می‌کنند و نیاز خود را درون وب سایت مورد نظر می‌بیند و پس از بازدید به خریدار تبدیل می‌شود.

 

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

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

پیکربندی های جاوا اسکریپت:

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

  • Combined detection
  • JavaScript-adaptive
  • Dynamically-served JavaScript

وقتی جاوا اسکریپت بر روی دستگاه اجرا می شود، رندر یا رفتار سایت تغییر می کند اگر یک وب سایت نیاز به جاوا اسکریپت دارد، این پیکربندی توصیه شده گوگل است.

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

موارد بالا سه نوع از پیاده سازی های جاوا اسکریپت است که در این قسمت به تحلیل و توضیح هر کدام از این پیاده سازی ها میپردازیم:

JavaScript-adaptive:

در این پیکربندی، یک URL در همان محتویات HTML)، CSS، جاوا اسکریپت،یک تصویر) به همه دستگاه‌ها ارائه میشود و فقط زمانی که جاوا اسکریپت بر روی دستگاه اجرا می‌شود، رندر کردن یا رفتار سایت تغییر میکنداین شبیه به چگونگی طراحی وب ریسپانسیو با استفاده از پرس و جوهای رسانهCSS ، کار می‌کند.

به عنوان مثال، در یک صفحه در تمام دستگاه‌ها همان HTML اجرا می‌شود که شامل یک عنصر <script> است که درخواست یک URL خارجی که به جاوا اسکریپت نیاز داردتمام دستگاه‌هایی که درخواست URL را دریافت می‌کنند همان کد را دریافت می‌کنندهنگامی که اعلام شد، جاوا اسکریپت دستگاه را تشخیص می‌دهد و تصمیم می‌گیرد چیزی را در مورد صفحه تغییر دهد، مثلاً می‌توان یک تصویر یا کد تبلیغی را به جای گزینه‌های دسکتاپ اضافه کرد

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

Combined detection:

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

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

. با توجه به این که سرور یک متن متفاوت را به متدهای مختلف کاربر باز می‌کند، تشخیص ترکیبی یک نوع پیکربندی سرویس پویا در نظر گرفته می‌شود. اما خلاصه می‌شود، وب سایت باید حاوی هدر پاسخ HTTP “Vary: User-agent” باشد، در صورتی که یک URL که محتوای متفاوتی از HTML را در اختیار کاربرهای مختلف قرار می‌دهد درخواست شود.

جاوا اسکریپت به صورت داینامیک 

Dynamically-served JavaScript

در این پیکربندی، تمام دستگاه‌ها همان HTML را شامل می‌شوند که شامل یک عنصر <script> برای یک فایل جاوا اسکریپت خارجی است که می‌تواند محتوای متفاوت را بسته به عامل کاربر درخواست کندبه عبارت دیگر، کد جاوا اسکریپت به صورت پویا خدمت می‌شود.

در این مورد، توصیه می کنیم که فایل جاوا اسکریپت با هدر HTTP “Vary: User-agent” ارائه شود. این یک سیگنال برای حافظه های اینترنت و Googlebot است که جاوا اسکریپت برای عوامل مختلف کاربر متفاوت است و یک سیگنال برای Googlebot برای خالی کردن فایل جاوا اسکریپت با استفاده از عوامل مختلف کاربر Googlebot است.

طراحی سایت ریسپانسیو
  • کیفیت محتوا
5

خلاصه محتوا

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

Sending
User Review
0 (0 votes)
Comments Rating 0 (0 reviews)

فرزین اعتماد

درود من فرزین اعتماد هستم - متخصص سئو محتوا و سئو سایت / مدرس دوره های سئو و بازاریابی محتوا / +متخصص وبمسترتولز (کنسول گوگل) و گوگل آنالیتیک (سرتیفیکیت گوگل) / بخشی از مطالبی که قرار میدم دستخط خودمه و بخشی دیگه از سایت های بزرگ و معتبر سئو گرفته و ترجمه شده/ توی اینستاگرامم همیشه ریز نکات سئو و جدیدترین اخبار بهینه سازی رو قرار میدم. https://instagram.com/farzinetemad / باعث افتخاره که مهمانم هستید / ♥ وب اپراتور ♥

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Sending

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.