مقالات طراحی سایت

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

فهرست مطالب

به چه وب سایتی ریسپانسیو (Responsive) میگوییم؟
وب سایت شما به چه استدلال بایستی ریسپانسیو باشد؟
ابزارهای تست ریسپانسیو سایت چیست؟
خطاهای رایج سرچ کنسول در هنگام استیناف ریسپانسیو بودن
ادامه لیست
به چه وب سایتی ریسپانسیو (Responsive) می گوییم؟
سایت های ریسپانسیو و گوشی فرندلی به وبسایت هایی گفته می شود که با دستگاه های مختلف مطابقت و همخوانی باشند و مشکلی برای نمایش سایت در آنان وجود نداشته باشد و استفاده کننده شل بتواند با آن ها شغل کند. در تارنما هایی که واکنشگرا نیستند مخاطب بدون چاره هست برای قرائت محتوای وب سایت و استفاده از تلاش های سایت، مدام ورقه را زوم کند و به جهات متفاوت اسکرول کند. این عمل برای هر کاربری خسته کننده میباشد و سبب ساز میشود خیلی زود وب سایت را ترک کند و به‌دنبال مورد های دیگر برود.

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

وب سایت شما به چه ادله می بایست ریسپانسیو باشد؟
شاید بپرسید چرا ریسپانسیو بودن سایت التفات دارد؟ در این قسمت خواهید فهمید استدلال اینکه وب سایت شما باید واکنشگرا باشد چیست.

✔️ تاثیر بر تجربیات کاربری
یک وب سایت ریسپانسیو تجربیات کاربری مناسبی برای بازدیدکنندگان رقم میزند. نمایش تارنما در دستگاه های هوشمند باید برای کاربر مطلوب باشد. مواردی که نشانه دهنده ریسپانسیو بودن یک تارنما هستند را درپی آورده ایم.

سازگاری با سایزهای گوناگون گوشی و تبلت
نمایش فونت به طور مطلوب
قابلیت تعامل وارفته استفاده کننده با کاغذ برای مثال امکان کلیک روی دکمه ها و غیره
نزدیک نبودن المان های گوناگون سایت
حذف اسکرول افقی
رسیدگی راحت نوشته‌ی علمی
✔️ تاثیر روی بهینه سازی وب سایت

درسال 2015 گوگل گفت که بیش از 51% جست و جوها با موبایل اجرا می شود که این آمار در سال های اخیر بیشتر گردیده است. ریسپانسیو بودن وبسایت روی بهینه سازی آن تاثیر مثبت می‌گذارد. زمانی که وبسایت شما با دستگاه های مختلف سرچ خواهد شد باعث ارتقا CTR و افزایش ترافیک ورودی می‌گردد که این مساله بهبود بهینه سازی شما را درپی دارااست. مرتبه وبسایت هایی که ریسپانسیو نیستند در نتایج گوگل تحت تر میباشد. در حالتی‌که سایت شما ریسپانسیو نباشد استفاده کننده آن را رخنه‌ می کند و این مساله سبب ساز به افزایش Bounce Rate می‌شود که تاثیر منفی روی بهینه سازی شما دارد.

✔️ قابلیت طراحی وب سایت برای تلفن همراه

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

✔️ ارتقاء نرخ تبدیل بازدید کننده به مشتری Conversion Rates با ارتقاء فروش

چنانچه کاربران بتوانند با تارنما شما به خیر تعامل برقرار کنند و بدون نقص‌ به بخش های متعدد آن بروند قابلیت تبدیل آن ها به مشتری بیشتر میگردد چون می‌توانند از وبسایت شما شل و ول خرید کنند. این مساله درآمد شما را ارتقاء میدهد.

ابزارهای تست ریسپانسیو وبسایت چیست؟
در‌این بخش میخواهیم ابزارهایی را معرفی کنیم که به شما یاری می کنند بدون هزینه ریسپانسیو بودن تارنما را در دستگاه های متعدد پژوهش فرمایید و برای بهبود آن سعی نمایید. این ابزارها محدوده وسیعی از اشکال دستگاه ها را در بر میگیرند.

ابزار Chrome Inspect

یکی‌از امکانات گوگل کروم مورد Inspect است که یکی از ابزارهای استیناف ریسپانسیو وبسایت هست. برای پژوهش دقیق واکنشگرا بودن تارنما تان در سایزهای متفاوت می توانید روی وبسایت خود کلیک راست فرمایید و آیتم inspect را انتخاب فرمایید. آنگاه با فشار دکمه های Ctrl+Alt+M یا با زدن بخش 1 که در تصویر معلوم گردیده است وارد حالت ریسپانسیو می‌شوید. در بخش 2 می توانید مدل دستگاه و سایزهای پیش فرض را گزینش کنید و ریسپانسیو بودن را پژوهش فرمایید. به عنوان مثال درصورتی که iphone 6 را انتخاب فرمائید وبسایت دقیقا با سایز این دستگاه به شما نمایش داده میشود. با این ابزار می توانید به صورت دستی هم سایز انتخاب فرمائید.



نکته: قابلیت دارد با مورد Inspect و تعیین سایز در نوبت نخستین وبسایت را ریسپانسیو علامت ندهد، درین هنگام شما بایستی کاغذ را یک بار رفرش نمائید.
ابزار Firefox Responsive Design

مانند کروم، مرورگر فایرفاکس هم امکانی دارااست که دقیقا با فشردن کلیدهای Ctrl+Alt+M میتوانید سایت را در موقعیت ریسپانسیو ملاحظه کنید. از طریق منوی More Tools > Web Developer Tools نیز می توان به این قسمت دسترسی پیدا فرمایید. شما می توانید با به کارگیری از موشواره بعدها وبسایت را تغییر دهید تا مشاهده کنید روی رزولوشن های کوچک تر چه طور نشان داده میشود.

ابزار Mobile-Friendly Test

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

ابزار Mobile-Friendly Test برای تست ریسپانسیو بودن وب سایت

ابزار Am I Responsive

وارد سایت Am I responsive شده و آدرس دامنه خود را وارد فرمائید. این تارنما که از ابزارهای مطالعه ریسپانسیو وبسایت میباشد به شما قابلیت و امکان می دهد تا روی چهار دستگاه دسکتاپ، لپتاپ، تبلت و موبایل تارنما مورد نظر خود را از نگاه واکنشگرا بودن تست کنید.

ابزار Am I Responsive تست ریسپانسیو بودن وب سایت

ابزار Responsinator

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

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

فهرست مطالب

به چه وب سایتی ریسپانسیو (Responsive) میگوییم؟
وب سایت شما به چه استدلال بایستی ریسپانسیو باشد؟
ابزارهای تست ریسپانسیو سایت چیست؟
خطاهای رایج سرچ کنسول در هنگام استیناف ریسپانسیو بودن
ادامه لیست
به چه وب سایتی ریسپانسیو (Responsive) می گوییم؟
سایت های ریسپانسیو و گوشی فرندلی به وبسایت هایی گفته می شود که با دستگاه های مختلف مطابقت و همخوانی باشند و مشکلی برای نمایش سایت در آنان وجود نداشته باشد و استفاده کننده شل بتواند با آن ها شغل کند. در تارنما هایی که واکنشگرا نیستند مخاطب بدون چاره هست برای قرائت محتوای وب سایت و استفاده از تلاش های سایت، مدام ورقه را زوم کند و به جهات متفاوت اسکرول کند. این عمل برای هر کاربری خسته کننده میباشد و سبب ساز میشود خیلی زود وب سایت را ترک کند و به‌دنبال مورد های دیگر برود.

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

وب سایت شما به چه ادله می بایست ریسپانسیو باشد؟
شاید بپرسید چرا ریسپانسیو بودن سایت التفات دارد؟ در این قسمت خواهید فهمید استدلال اینکه وب سایت شما باید واکنشگرا باشد چیست.

✔️ تاثیر بر تجربیات کاربری
یک وب سایت ریسپانسیو تجربیات کاربری مناسبی برای بازدیدکنندگان رقم میزند. نمایش تارنما در دستگاه های هوشمند باید برای کاربر مطلوب باشد. مواردی که نشانه دهنده ریسپانسیو بودن یک تارنما هستند را درپی آورده ایم.

سازگاری با سایزهای گوناگون گوشی و تبلت
نمایش فونت به طور مطلوب
قابلیت تعامل وارفته استفاده کننده با کاغذ برای مثال امکان کلیک روی دکمه ها و غیره
نزدیک نبودن المان های گوناگون سایت
حذف اسکرول افقی
رسیدگی راحت نوشته‌ی علمی
✔️ تاثیر روی بهینه سازی وب سایت

درسال 2015 گوگل گفت که بیش از 51% جست و جوها با موبایل اجرا می شود که این آمار در سال های اخیر بیشتر گردیده است. ریسپانسیو بودن وبسایت روی بهینه سازی آن تاثیر مثبت می‌گذارد. زمانی که وبسایت شما با دستگاه های مختلف سرچ خواهد شد باعث ارتقا CTR و افزایش ترافیک ورودی می‌گردد که این مساله بهبود بهینه سازی شما را درپی دارااست. مرتبه وبسایت هایی که ریسپانسیو نیستند در نتایج گوگل تحت تر میباشد. در حالتی‌که سایت شما ریسپانسیو نباشد استفاده کننده آن را رخنه‌ می کند و این مساله سبب ساز به افزایش Bounce Rate می‌شود که تاثیر منفی روی بهینه سازی شما دارد.

✔️ قابلیت طراحی وب سایت برای تلفن همراه

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

✔️ ارتقاء نرخ تبدیل بازدید کننده به مشتری Conversion Rates با ارتقاء فروش

چنانچه کاربران بتوانند با تارنما شما به خیر تعامل برقرار کنند و بدون نقص‌ به بخش های متعدد آن بروند قابلیت تبدیل آن ها به مشتری بیشتر میگردد چون می‌توانند از وبسایت شما شل و ول خرید کنند. این مساله درآمد شما را ارتقاء میدهد.

ابزارهای تست ریسپانسیو وبسایت چیست؟
در‌این بخش میخواهیم ابزارهایی را معرفی کنیم که به شما یاری می کنند بدون هزینه ریسپانسیو بودن تارنما را در دستگاه های متعدد پژوهش فرمایید و برای بهبود آن سعی نمایید. این ابزارها محدوده وسیعی از اشکال دستگاه ها را در بر میگیرند.

ابزار Chrome Inspect

یکی‌از امکانات گوگل کروم مورد Inspect است که یکی از ابزارهای استیناف ریسپانسیو وبسایت هست. برای پژوهش دقیق واکنشگرا بودن تارنما تان در سایزهای متفاوت می توانید روی وبسایت خود کلیک راست فرمایید و آیتم inspect را انتخاب فرمایید. آنگاه با فشار دکمه های Ctrl+Alt+M یا با زدن بخش 1 که در تصویر معلوم گردیده است وارد حالت ریسپانسیو می‌شوید. در بخش 2 می توانید مدل دستگاه و سایزهای پیش فرض را گزینش کنید و ریسپانسیو بودن را پژوهش فرمایید. به عنوان مثال درصورتی که iphone 6 را انتخاب فرمائید وبسایت دقیقا با سایز این دستگاه به شما نمایش داده میشود. با این ابزار می توانید به صورت دستی هم سایز انتخاب فرمائید.



نکته: قابلیت دارد با مورد Inspect و تعیین سایز در نوبت نخستین وبسایت را ریسپانسیو علامت ندهد، درین هنگام شما بایستی کاغذ را یک بار رفرش نمائید.
ابزار Firefox Responsive Design

مانند کروم، مرورگر فایرفاکس هم امکانی دارااست که دقیقا با فشردن کلیدهای Ctrl+Alt+M میتوانید سایت را در موقعیت ریسپانسیو ملاحظه کنید. از طریق منوی More Tools > Web Developer Tools نیز می توان به این قسمت دسترسی پیدا فرمایید. شما می توانید با به کارگیری از موشواره بعدها وبسایت را تغییر دهید تا مشاهده کنید روی رزولوشن های کوچک تر چه طور نشان داده میشود.

ابزار Mobile-Friendly Test

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

ابزار Mobile-Friendly Test برای تست ریسپانسیو بودن وب سایت

ابزار Am I Responsive

وارد سایت Am I responsive شده و آدرس دامنه خود را وارد فرمائید. این تارنما که از ابزارهای مطالعه ریسپانسیو وبسایت میباشد به شما قابلیت و امکان می دهد تا روی چهار دستگاه دسکتاپ، لپتاپ، تبلت و موبایل تارنما مورد نظر خود را از نگاه واکنشگرا بودن تست کنید.

ابزار Am I Responsive تست ریسپانسیو بودن وب سایت

ابزار Responsinator

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