Role of Responsive Design in Web Application Development.pdf

Mohammad Omid Khairandish
Mohammad Omid KhairandishDean of computer Science Faculty à Hariwa Institute of Higher Education
Islamic Emirate of Afghanistan
Ministry of Higher Education
Directory of Private Students’Affairs
Hariwa Institute of Higher Education
Computer Science Faculty
‫دهنده‬ ‫ارایه‬
:
،‫چهارم‬ ‫سمستر‬ ،‫شریفی‬ ‫جواد‬
392
‫نظر‬ ‫تحت‬
:
‫خیراندیش‬ ‫امید‬ ‫محمد‬
‫گرای‬‫واکنش‬ ‫قابلیت‬ ‫استفاده‬ ‫اهمیت‬
(
(RESPONSIVE
‫سایت‬‫ویب‬ ‫طراحی‬ ‫در‬
‫ریسپانسیو‬ ‫سایت‬ ‫طراحی‬
(
‫گرا‬ ‫واکنش‬
)
‫دارد؟‬ ‫ضرورتی‬ ‫چه‬ ‫و‬ ‫چیست‬
‫ریسپانسیو‬ ‫سایت‬ ‫وب‬
(RESPONSIVE)
‫چیست؟‬
•
‫در‬ ‫گذار‬ ‫و‬ ‫گشت‬ ‫برای‬ ‫جذاب‬ ‫و‬ ‫جدید‬ ‫راه‬ ‫یک‬ ،‫شد‬ ‫معرفی‬ ‫جهان‬ ‫به‬ ‫تبلت‬ ‫و‬ ‫هوشمند‬ ‫گوشی‬ ‫که‬ ‫زمانی‬
‫کامپیوترها‬ ‫مانیتور‬ ‫صفحۀ‬ ‫در‬ ‫شدن‬ ‫دیده‬ ‫برای‬ ‫ها‬ ‫سایت‬ ‫که‬ ‫بود‬ ‫اینجا‬ ‫مسئله‬ ‫اما‬ ‫کردیم؛‬ ‫پیدا‬ ‫اینترنت‬
‫بودند‬ ‫شده‬ ‫طراحی‬
.
‫راحت‬ ‫چندان‬ ‫آنها‬ ‫با‬ ‫کار‬ ،‫داشتند‬ ‫کوچکی‬ ‫صفحه‬ ‫که‬ ‫موبایل‬ ‫های‬‫گوشی‬ ‫در‬ ‫بنابراین‬
‫نبود‬
.
•
‫بودن‬ ‫ریسپانسیو‬ ‫یا‬ ‫گرایی‬ ‫واکنش‬ ‫قابلیت‬ ‫که‬ ‫بود‬ ‫اینجا‬
(responsive)
‫بسیار‬ ‫اهمیت‬ ‫سایت‬ ‫طراحی‬ ‫در‬ ،
‫کرد‬ ‫پیدا‬ ‫زیادی‬
.
‫دهد‬ ‫تطبیق‬ ‫گوناگون‬ ‫های‬‫دستگاه‬ ‫صفحه‬ ‫با‬ ‫را‬ ‫خودش‬ ‫بتواند‬ ‫سایت‬ ‫وب‬ ‫یک‬ ‫اینکه‬ ‫یعنی‬
،‫کرد‬ ‫باز‬ ‫را‬ ‫سایت‬ ‫که‬ ‫دستگاهی‬ ‫هر‬ ‫با‬ ،‫کاربری‬ ‫هر‬ ‫تا‬
‫به‬
‫راح‬
‫ت‬
‫ی‬
‫تجربه‬ ‫هم‬ ‫باز‬ ‫و‬ ‫کند‬ ‫استفاده‬ ‫آن‬ ‫از‬ ‫بتواند‬
‫باشد‬ ‫داشته‬ ‫خوبی‬
.
‫اگر‬
‫به‬
‫تصاویر‬
‫زیر‬
‫نگاه‬
،‫کنید‬
‫بهتر‬
‫متوجه‬
‫موضوع‬
‫شوید‬
.
‫وب‬
‫سایت‬
‫سازمان‬
‫سنجش‬
‫که‬
‫در‬
‫تصویر‬
‫سمت‬
‫چپ‬
‫باز‬
،‫شده‬
‫هیچ‬
‫تفاوتی‬
‫با‬
‫نسخه‬
‫کامپیوترش‬
‫ندارد‬
.
‫همین‬
‫موضوع‬
‫باعث‬
‫شده‬
،‫ها‬‫عکس‬
،‫ها‬‫دکمه‬
‫ها‬‫نوشته‬
‫و‬
...
‫ریز‬
‫نمایش‬
‫داده‬
‫شوند‬
‫و‬
‫کار‬
‫را‬
‫سخت‬
‫کنند‬
.
‫اما‬
‫در‬
‫تصویر‬
‫سمت‬
‫راست‬
،
‫چیز‬‫همه‬
‫کامال‬
‫با‬
‫اندازه‬
‫صفحه‬
‫هماهنگ‬
‫شده‬
‫است‬
‫و‬
‫به‬
‫زوم‬
‫کردن‬
‫صفحه‬
‫نیازی‬
‫نیست‬
.
‫این‬
‫است‬
‫هنر‬
‫طراحی‬
‫سایت‬
‫ریسپانسیو‬
!
‫حاال‬
‫بیایید‬
‫یک‬
‫سایت‬‫وب‬
‫را‬
‫در‬
‫نظر‬
‫بگیریم‬
‫که‬
‫در‬
‫مانیتورهای‬
‫معمولی‬
‫سه‬
ِ‫ن‬‫ستو‬
‫محتوا‬
‫دارد‬
.
‫اگر‬
‫این‬
‫سایت‬‫وب‬
‫واکنش‬
‫گرا‬
،‫باشد‬
‫در‬
‫تبلت‬
‫که‬
‫آن‬
‫را‬
‫باز‬
،‫کنید‬
‫تمام‬
‫محتواها‬
‫در‬
‫دو‬
‫ستون‬
‫به‬
‫شما‬
‫ارائه‬
‫شود‬‫می‬
.
‫زمانی‬
‫هم‬
‫که‬
‫آن‬
‫را‬
‫با‬
‫گوشی‬
‫باز‬
،‫کنید‬
‫همه‬
‫چیز‬
‫در‬
‫یک‬
‫ستون‬
‫قرار‬
‫گیرد‬‫می‬
.
‫عالوه‬
‫بر‬
،‫این‬
‫حتی‬
‫ممکن‬
‫است‬
‫برخی‬
‫اطالعات‬
‫ّت‬‫ی‬‫اهم‬‫بی‬
‫در‬
‫نسخه‬
‫گوشی‬
‫حذف‬
‫شوند‬
‫یا‬
‫حتی‬
‫اطالعاتی‬
‫مخصوص‬
‫گوشی‬
‫اضافه‬
‫شود‬
.
‫چیست؟‬ ‫ریسپانسیو‬ ‫سایت‬ ‫طراحی‬ ‫اهمیت‬
•
‫بسیاری‬
‫از‬
‫مشتریانی‬
‫که‬
‫برای‬
‫طراحی‬
‫سایت‬
‫یا‬
‫فروشگاه‬
‫اینترنتی‬
‫تماس‬
،‫گیرند‬‫می‬
‫در‬
‫مورد‬
‫ریسپانسیو‬
‫بودن‬
‫ها‬‫سایت‬
‫پرسند‬‫می‬
.
‫خواهیم‬‫می‬
‫دلیل‬
‫اهمیت‬
‫و‬
‫ضرورت‬
‫زیاد‬
‫این‬
‫موضوع‬
‫را‬
‫بدانیم‬
.
‫میزان‬
‫بازدید‬
‫و‬
‫رتبۀ‬
‫تان‬‫سایت‬
‫افزایش‬
‫یابد‬‫می‬
•
‫نگاهی‬
‫به‬
‫اطراف‬
‫خود‬
‫بیاندازید‬
.
‫ها‬‫آدم‬
ً‫ال‬‫معمو‬
‫از‬
‫چه‬
‫دستگاهی‬
‫برای‬
‫وصل‬
‫شدن‬
‫به‬
‫اینترنت‬
‫استفاده‬
‫کنند؟‬‫می‬
،‫کامپیوتر‬
‫لپ‬
،‫تاپ‬
‫تبلت‬
‫یا‬
‫موبایل؟‬
‫اگر‬
‫جواب‬
‫شما‬
‫موبایل‬
،‫است‬
‫پس‬
‫درست‬
‫فکر‬
‫کنید‬‫می‬
.
•
‫در‬
‫سال‬
2015
‫بود‬
‫که‬
‫گوگل‬
‫اعالم‬
‫کرد‬
‫جستجوهای‬
‫انجام‬
‫شده‬
‫با‬
‫موبایل‬
‫بیش‬
‫از‬
51
%
‫کل‬
‫جستجوهای‬
‫گوگل‬
‫را‬
‫شامل‬
‫شوند‬‫می‬
.
‫و‬
ً‫ال‬‫کام‬
‫طبیعی‬
‫است‬
‫که‬
‫این‬
‫موضوع‬
‫در‬
‫اکثر‬
‫های‬‫سایت‬
‫دیگر‬
‫نیز‬
‫صادق‬
‫باشد‬
.
‫در‬
،‫واقع‬
‫خود‬
‫ما‬
‫هم‬
‫تا‬
‫به‬
‫حال‬
‫آمار‬
‫های‬‫سایت‬
‫بسیار‬
‫مختلفی‬
‫را‬
‫ایم‬‫دیده‬
‫و‬
‫به‬
‫ندرت‬
‫به‬
‫سایتی‬
‫ایم‬‫برخورده‬
‫که‬
‫ورودی‬
‫موبایل‬
‫آن‬
‫کمتر‬
‫از‬
‫کامپیوتر‬
‫باشد‬
.
‫به‬ ‫شدن‬ ‫وصل‬ ‫برای‬ ‫موبایل‬ ‫از‬ ‫استفاده‬ ‫محبوبیت‬ ‫صعودی‬ ‫روند‬ ‫زیر‬ ‫نمودار‬
‫شما‬ ‫به‬ ‫را‬ ‫اینترنت‬
‫دهد‬‫می‬ ‫نشان‬
.
‫باشد‬ ‫جالب‬ ‫شما‬ ‫برای‬ ‫نمودار‬ ‫این‬ ‫بررسی‬ ‫کنم‬‫می‬ ‫فکر‬
.
‫در‬ ،‫بینید‬‫می‬ ‫که‬ ‫همانطور‬
‫سال‬
2018
‫لپ‬ ‫یا‬ ‫دسکتاپ‬ ‫برابر‬ ‫دو‬ ‫حدود‬ ‫چیزی‬ ،‫جستجو‬ ‫برای‬ ‫موبایل‬ ‫از‬ ‫استفاده‬ ،
‫است‬ ‫تاپ‬
.
‫دیگر‬ ‫های‬‫نسخه‬ ‫از‬ ‫بیشتر‬ ،‫سایت‬ ‫وب‬ ‫یک‬ ‫موبایل‬ ‫نسخه‬ ‫اگر‬ ،‫وجود‬ ‫این‬ ‫با‬
‫حداقل‬ ،‫باشد‬ ‫نداشته‬ ‫اهمیت‬ ‫آن‬
‫ندارد‬ ‫هم‬ ‫کمتر‬
.
‫موبایل‬ ‫برای‬ ‫را‬ ‫خود‬ ‫سایت‬ ‫باید‬ ً‫ا‬‫حتم‬ ‫شما‬
(
‫صفحه‬ ‫های‬‫اندازه‬ ‫دیگر‬ ‫کنار‬ ‫در‬
)
‫کنید‬ ‫بهینه‬
‫کنند‬‫می‬ ‫استفاده‬ ‫شما‬ ‫سایت‬ ‫از‬ ‫خوبی‬ ‫به‬ ‫کاربران‬ ‫همه‬ ‫شوید‬ ‫مطمئن‬ ‫تا‬
.
‫تاثیر‬ ‫گوگل‬ ‫رتبه‬ ‫در‬ ‫سایت‬ ‫بودن‬ ‫ریسپانسیو‬
‫دارد‬
!
•
‫ایجاد‬ ‫کاربران‬ ‫برای‬ ‫بهتر‬ ‫تجربه‬ ‫یک‬ ‫تواند‬‫می‬ ‫شما‬ ‫سایت‬ ‫وب‬ ‫گرایی‬ ‫واکنش‬
‫کند‬
...
‫شود‬‫نمی‬ ‫ختم‬ ‫همینجا‬ ‫به‬ ‫قضیه‬ ‫اما‬
.
‫بلکه‬
‫شود‬‫می‬ ‫هم‬ ‫گوگل‬ ‫در‬ ‫بهتری‬ ‫های‬‫رتبه‬ ‫کسب‬ ‫باعث‬ ‫سایت‬ ‫بودن‬ ‫ریسپانسیو‬ ،‫این‬ ‫بر‬ ‫عالوه‬
‫تر‬‫تخصصی‬ ‫کمی‬ ‫بخواهیم‬ ‫اگر‬ ‫یا‬
‫در‬ ،‫کنیم‬ ‫صحبت‬
‫سئو‬
‫بود‬ ‫خواهد‬ ‫تاثیرگذار‬ ‫هم‬ ‫شما‬
).
‫چگونه؟‬ ‫اما‬
•
‫دهد‬ ‫نمایش‬ ‫آنها‬ ‫به‬ ‫را‬ ‫نتایج‬ ‫بهترین‬ ‫کند‬‫می‬ ‫تالش‬ ‫بنابراین‬ ‫باشد؛‬ ‫داشته‬ ‫را‬ ‫خود‬ ‫کاربران‬ ‫هوای‬ ،‫خواهد‬‫می‬ ‫گوگل‬ ً‫ا‬‫طبیعت‬
.
‫پس‬
‫بدهد؛‬ ‫ریسپانسیو‬ ‫های‬‫سایت‬ ‫به‬ ‫را‬ ‫اولویت‬ ،‫کرد‬ ‫جستجو‬ ‫گوگل‬ ‫در‬ ‫خود‬ ‫موبایل‬ ‫گوشی‬ ‫با‬ ‫کاربری‬ ‫وقتی‬ ‫که‬ ‫است‬ ‫طبیعی‬ ً‫ال‬‫کام‬
(
‫است‬ ‫متفاوت‬ ‫هم‬ ‫با‬ ً‫ال‬‫معمو‬ ‫موبایل‬ ‫و‬ ‫کامپیوتر‬ ‫در‬ ‫کلمه‬ ‫یک‬ ‫جستجو‬ ‫نتایج‬ ،‫واقع‬ ‫در‬
).
‫ریسپانسیو‬ ‫شما‬ ‫سایت‬ ‫اگر‬ ‫یعنی‬ ‫این‬
‫کنید‬ ‫کسب‬ ‫رتبه‬ ‫توانید‬‫می‬ ‫موبایل‬ ‫نتایج‬ ‫در‬ ‫سخت‬ ‫خیلی‬ ،‫نباشد‬
.
‫بزنید‬ ‫را‬ ‫خود‬ ‫بازدیدکنندگان‬ ‫از‬ ‫بسیاری‬ ‫قید‬ ‫باید‬ ‫بنابراین‬
.
‫به‬
‫گوییم‬‫می‬ ‫همین‬ ‫خاطر‬
:
‫گوگل‬ ‫از‬ ‫گرفتن‬ ‫ورودی‬ ‫برایتان‬ ‫اگر‬
(
‫سئو‬
)
‫باشید‬ ‫داشته‬ ‫ریسپانسیو‬ ‫سایت‬ ‫یک‬ ‫باید‬ ً‫ا‬‫حتم‬ ،‫است‬ ‫مهم‬
.
‫کرده‬ ‫بهینه‬ ‫را‬ ‫ها‬‫هزینه‬ ‫ریسپانسیو‬ ‫سایت‬
‫است‬
!
•
،‫شدند‬ ‫می‬ ‫زیادی‬ ‫های‬ ‫هزینه‬ ‫متحمل‬ ‫نمودند‬ ‫می‬ ‫سایت‬ ‫طراحی‬ ‫به‬ ‫اقدام‬ ‫که‬ ‫زمانی‬ ‫گذشته‬ ‫عصر‬ ‫در‬ ‫بازاریابان‬
‫کردند‬ ‫می‬ ‫آن‬ ‫طراحی‬ ‫و‬ ‫سایت‬ ‫صرف‬ ‫جداگانه‬ ‫طور‬ ‫به‬ ‫را‬ ‫ای‬ ‫هزینه‬ ‫که‬ ‫صورت‬ ‫این‬ ‫به‬
.
‫نیز‬ ‫را‬ ‫ای‬ ‫هزینه‬ ‫طرفی‬ ‫از‬
‫نمودند‬ ‫می‬ ‫همراه‬ ‫تلفن‬ ‫های‬ ‫دستگاه‬ ‫برای‬ ،‫موبایل‬ ‫ورژن‬ ‫عنوان‬ ‫تحت‬ ‫دیگر‬ ‫سایتی‬ ‫برای‬
.
‫هزینۀ‬ ‫این‬ ‫االن‬ ‫اما‬
‫اعمال‬ ‫شما‬ ‫اینترنتی‬ ‫فروشگاه‬ ‫یا‬ ‫سایت‬ ‫روی‬ ‫را‬ ‫قابلیت‬ ‫این‬ ‫سایت‬ ‫طراحان‬ ‫از‬ ‫بعضی‬ ‫و‬ ‫است‬ ‫شده‬ ‫حذف‬ ‫اضافی‬
‫کنند‬‫می‬
.
‫است؟‬ ‫شدنی‬ ‫ها‬‫سایز‬ ‫تمام‬ ‫برای‬ ‫ریسپانسیو‬ ‫سایت‬ ‫طراحی‬ ‫آیا‬
•
‫شما‬
‫زمانی‬
‫که‬
‫دنبال‬‫به‬
‫یک‬
‫سایت‬
‫ریسپانسیو‬
،‫هستید‬
‫یک‬
‫مانع‬
‫بزرگ‬
‫بر‬
‫سر‬
‫راه‬
‫شما‬
‫قرار‬
‫خواهد‬
‫گرفت‬
:
‫هزاران‬
‫مدل‬
،‫مانیتور‬
،‫تاپ‬‫لپ‬
‫تبلت‬
‫و‬
‫موبایل‬
‫در‬
‫دنیا‬
‫وجود‬
‫دارد‬
‫و‬
‫در‬
،‫نتیجه‬
‫تنوع‬
‫های‬‫اندازه‬
‫صفحه‬
‫بسیار‬
‫باالست‬
.
‫حاال‬
‫سوال‬
‫پیش‬
،‫آید‬‫می‬
ً‫ال‬‫اص‬
‫چطور‬
‫باید‬
‫سایت‬
‫خود‬
‫را‬
‫برای‬
‫این‬
‫همه‬
‫این‬
‫ها‬‫اندازه‬
‫آماده‬
‫کنید؟‬
‫آیا‬
‫خواهید‬‫می‬
‫تک‬
‫تک‬
‫آنها‬
‫را‬
‫بررسی‬
‫کنید‬
‫و‬
‫مطمئن‬
‫شوید‬
‫که‬
‫سایت‬
‫شما‬
‫در‬
‫هر‬
‫ای‬‫اندازه‬
‫درست‬
‫نمایش‬
‫داده‬
‫شود؟‬‫می‬
ً‫ا‬‫قطع‬
‫این‬
‫مساله‬
‫حتی‬
‫اگر‬
‫ممکن‬
،‫باشد‬
‫چیزی‬
‫شبیه‬
‫به‬
‫دیوانگی‬
‫است‬
.
•
‫بهینه‬
‫کردن‬
‫یک‬
‫سایت‬
‫برای‬
‫تمام‬
‫های‬‫اندازه‬
‫صفحه‬
‫چندان‬
‫عملی‬
‫نیست‬
.
‫بنابراین‬
‫بهتر‬
‫است‬
‫قبل‬
‫از‬
‫هر‬
،‫کار‬
‫های‬‫اولویت‬
‫خود‬
‫را‬
‫مشخص‬
‫کنیم‬
.
‫چگونه؟‬
‫کافی‬
‫است‬
‫به‬
‫آمار‬
‫مختلف‬
‫رجوع‬
‫کنیم‬
.
‫گوگل‬ ‫در‬ ‫شده‬ ‫انجام‬ ‫های‬‫جستجو‬ ‫تعداد‬ ‫که‬ ‫دهد‬‫می‬ ‫نشان‬ ‫ما‬ ‫به‬ ‫زیر‬ ‫آمار‬
‫با‬
‫است‬ ‫چقدر‬ ‫دستگاه‬ ‫نوع‬ ‫به‬ ‫توجه‬
:
•
‫موبایل‬
:
51
‫درصد‬
•
‫تاپ‬‫لپ‬ ‫و‬ ‫دسکتاپ‬
:
45
‫درصد‬
•
‫تبلت‬
:
3.5
‫درصد‬
•
‫غیره‬ ‫و‬ ‫هوشمند‬ ‫های‬‫تلویزیون‬
:
0.5
‫درصد‬
‫دستگاه‬ ‫سایر‬ ‫از‬ ‫بیش‬ ‫گردی‬‫وب‬ ‫برای‬ ‫تاپ‬‫لپ‬ ‫و‬ ‫کامپیوتر‬ ،‫موبایل‬ ‫از‬ ‫استفاده‬ ‫میزان‬ ،‫بینید‬‫می‬ ‫که‬ ‫همانطور‬
‫ها‬
‫می‬
‫باشد‬
.
‫و‬ ‫کنید‬ ‫ها‬‫دستگاه‬ ‫این‬ ‫برای‬ ‫سایت‬ ‫کردن‬ ‫گرا‬ ‫واکنش‬ ‫صرف‬ ‫را‬ ‫خود‬ ‫گرانبهای‬ ‫وقت‬ ‫است‬ ‫بهتر‬ ‫پس‬
‫نگذارید‬ ‫ها‬‫دستگاه‬ ‫سایر‬ ‫یا‬ ‫تبلت‬ ‫برای‬ ‫را‬ ‫چندانی‬ ‫وقت‬
.
•
‫شویم‬ ‫دقیق‬ ‫موبایل‬ ‫های‬‫دستگاه‬ ‫در‬ ‫کمی‬ ‫بیایید‬ ‫حاال‬
.
‫مواجه‬ ‫تنوع‬ ‫با‬ ‫هم‬ ‫باز‬ ‫اینجا‬ ‫در‬
‫شویم‬‫می‬
.
‫متفاوتند‬ ‫هم‬ ‫با‬ ‫نیز‬ ‫موبایل‬ ‫های‬‫صفحه‬ ‫سایز‬ ‫یعنی‬
.
‫راه‬ ‫بهترین‬ ‫هم‬ ‫باز‬ ‫پس‬
‫برویم‬ ‫بازار‬ ‫رایج‬ ‫های‬‫صفحه‬ ‫اندازه‬ ‫و‬ ‫ها‬‫گوشی‬ ‫سراغ‬ ‫به‬ ‫که‬ ‫است‬ ‫این‬
.
‫یعنی‬ ‫این‬
‫مطرح‬ ‫های‬ ‫گوشی‬ ‫در‬ ‫را‬ ‫خود‬ ‫گرایی‬ ‫واکنش‬
(
‫همینطور‬ ‫و‬ ‫آیفون‬ ‫سری‬ ‫مثال‬ ‫برای‬
‫سامسونگ‬ ‫های‬‫موبایل‬
)
‫کنید‬ ‫تست‬
.
‫شد‬ ‫تر‬‫دقیق‬ ‫توان‬‫می‬ ‫هم‬ ‫این‬ ‫از‬ ‫حتی‬ ‫اما‬
.
‫طبق‬
،‫ها‬‫گوشی‬ ‫در‬ ‫صفحه‬ ‫اندازۀ‬ ‫ترین‬‫رایج‬ ،‫آمار‬
1366
*
768
‫است‬
.
‫خواهید‬‫نمی‬ ‫اگر‬ ‫پس‬
‫بررسی‬ ‫سایز‬ ‫این‬ ‫در‬ ‫را‬ ‫خود‬ ‫سایت‬‫وب‬ ‫بودن‬ ‫ریسپانسیو‬ ‫حداقل‬ ،‫بگذارید‬ ‫وقت‬ ‫خیلی‬
‫کنید‬
.
‫واکنش‬ ‫از‬ ‫چطور‬
‫شوید؟‬ ‫مطمئن‬ ‫خود‬ ‫سایت‬ ‫بودن‬ ‫گرا‬
•
‫آید‬‫نمی‬ ‫بر‬ ‫آن‬ ‫پس‬ ‫از‬ ‫معمولی‬ ‫کاربر‬ ‫یک‬ ،‫دارد‬ ‫نیاز‬ ‫کدنویسی‬ ‫مهارت‬ ‫به‬ ‫ریسپانسیو‬ ‫سایت‬ ‫طراحی‬ ‫که‬ ‫جا‬‫آن‬ ‫از‬
.
ً‫ا‬‫قطع‬ ،‫سایت‬‫وب‬ ‫یک‬ ‫صاحب‬ ‫عنوان‬ ‫به‬ ‫اما‬
‫توانید‬‫می‬
‫بگیرید‬ ‫نظر‬ ‫در‬ ‫را‬ ‫گرایی‬ ‫واکنش‬ ‫مساله‬ ،‫سایت‬ ‫طراحی‬ ‫هنگام‬
‫شوید‬ ‫مطمئن‬ ‫خود‬ ‫سایت‬ ‫بودن‬ ‫ریسپانسیو‬ ‫از‬ ‫و‬
.
‫می‬
‫پرسید‬
‫چگونه؟‬
•
‫کنید‬ ‫چک‬ ‫را‬ ‫خود‬ ‫سایت‬ ‫گرایی‬‫واکنش‬ ،‫بتوانید‬ ‫آن‬ ‫وسیلۀ‬‫به‬ ‫که‬ ‫کنیم‬‫می‬ ‫معرفی‬ ‫کاربردی‬ ‫راه‬ ‫چند‬ ‫شما‬ ‫به‬ ‫ادامه‬ ‫در‬
( .
‫را‬ ‫خود‬ ‫سایت‬ ‫باشد‬ ‫نیاز‬ ‫اینکه‬ ‫بدون‬
‫باز‬ ‫تبلت‬ ‫یا‬ ‫موبایل‬ ‫گوشی‬ ‫در‬
‫کنید‬
).
•
‫سایت‬‫وب‬ ‫یک‬ ‫بودن‬ ‫ریسپانسیو‬ ‫بررسی‬ ‫برای‬ ‫ساده‬ ‫راه‬ ‫دو‬

‫بشناسیم‬ ‫را‬ ‫سایت‬ ‫وب‬ ‫یک‬ ‫گرایی‬ ‫واکنش‬ ‫کردن‬ ‫چک‬ ‫برای‬ ‫راحت‬ ‫مسیر‬ ‫دو‬ ‫بگذارید‬ ‫ابتدا‬ ‫در‬
:
.1
‫سایت‬‫وب‬
Am I Responsive:
‫سایت‬ ‫به‬
Am I Responsive
‫مراجعه‬
‫کنید‬ ‫وارد‬ ‫را‬ ‫خود‬ ‫سایت‬ ‫آدرس‬ ‫و‬ ‫کنید‬
.
‫چهار‬ ‫سرعت‬ ‫به‬ ‫سایت‬ ‫این‬
‫ک‬ ‫تست‬ ‫را‬ ‫آن‬ ‫گرایی‬ ‫واکنش‬ ‫توانید‬‫می‬ ‫راحتی‬ ‫همین‬ ‫به‬ ‫و‬ ‫داد‬ ‫خواهد‬ ‫نمایش‬ ‫برایتان‬ ‫را‬ ‫شما‬ ‫سایت‬ ‫از‬ ‫موبایل‬ ‫و‬ ‫تبلت‬ ،‫تاپ‬‫لپ‬ ،‫کامپیوتر‬ ‫نسخه‬
‫نید‬
.
.2
‫مرورگر‬ ‫صفحه‬ ‫اندازۀ‬ ‫تغییر‬
:
‫کنید‬ ‫خارج‬ ‫صفحه‬ ‫تمام‬ ‫حالت‬ ‫از‬ ‫را‬ ‫خود‬ ‫مرورگر‬ ‫توانید‬‫می‬ ،‫کنید‬ ‫بررسی‬ ‫را‬ ‫مختلف‬ ‫های‬‫نسخه‬ ‫تر‬‫دقیق‬ ‫خواهید‬ ‫می‬ ‫اگر‬
‫کنید‬ ‫کوچک‬ ‫و‬ ‫بزرگ‬ ‫دلخواه‬ ‫به‬ ‫را‬ ‫آن‬ ‫صفحه‬ ‫با‬ ‫و‬
.
،‫ترتیب‬ ‫این‬ ‫به‬ ‫داد؛‬ ‫خواهد‬ ‫تطبیق‬ ‫را‬ ‫خودش‬ ‫شما‬ ‫سایت‬ ،‫دهید‬‫می‬ ‫تغییر‬ ‫را‬ ‫مرورگر‬ ‫اندازه‬ ‫شما‬ ‫وقتی‬
‫شوید‬‫می‬ ‫مطمئن‬ ‫ها‬‫اندازه‬ ‫تمام‬ ‫در‬ ‫آن‬ ‫درست‬ ‫نمایش‬ ‫از‬
.
‫وب‬ ‫بودن‬ ‫ریسپانسیو‬ ‫کردن‬ ‫چک‬ ‫برای‬ ‫تخصصی‬ ‫راه‬
‫سایت‬
•
‫اگر‬
‫قصد‬
‫روش‬ ‫یک‬ ،‫کنید‬ ‫بررسی‬ ‫دقیق‬ ‫سایزهای‬ ‫در‬ ‫را‬ ‫آن‬ ‫و‬ ‫بپردازید‬ ‫خود‬ ‫سایت‬ ‫بررسی‬ ‫به‬ ‫تر‬‫دقیق‬ ‫دارید‬
‫دارد‬ ‫وجود‬ ‫شما‬ ‫برای‬ ‫ای‬‫حرفه‬
.
‫کلیدهای‬ ‫و‬ ‫کنید‬ ‫باز‬ ‫را‬ ‫خود‬ ‫سایت‬
Ctrl+Shift+I
‫بر‬ ‫اینکه‬ ‫یا‬ ،‫دهید‬ ‫فشار‬ ‫را‬
‫گزینه‬ ‫و‬ ‫کرده‬ ‫راست‬ ‫کلیک‬ ‫خود‬ ‫سایت‬ ‫روی‬
inspect (
‫یا‬
inspect
element)
‫را‬
‫کنید‬ ‫انتخاب‬
.
‫حاال‬
‫های‬‫دکمه‬
Ctrl+Shift+M
‫کنید‬ ‫کلیک‬ ‫تصویر‬ ‫در‬ ‫شده‬ ‫مشخص‬ ‫آیکون‬ ‫روی‬ ‫بر‬ ‫یا‬ ‫دهید‬ ‫فشار‬ ‫را‬
.
‫شما‬ ‫سایت‬
‫شود‬‫می‬ ‫ریسپانسیو‬ ‫حالت‬ ‫وارد‬ ‫اینکار‬ ‫با‬
.
•
‫سایت‬ ‫تا‬ ،‫کنید‬ ‫انتخاب‬ ‫را‬ ‫خود‬ ‫نظر‬ ‫مورد‬ ‫مدل‬ ،‫بازار‬ ‫مطرح‬ ‫های‬‫تبلت‬ ‫و‬ ‫ها‬‫گوشی‬ ‫بین‬ ‫از‬ ‫توانید‬‫می‬ ‫شما‬ ‫حاال‬
‫شود‬ ‫داده‬ ‫نمایش‬ ‫خاص‬ ‫مدل‬ ‫این‬ ‫صفحه‬ ‫اندازه‬ ‫در‬ ‫شما‬
.
‫خواهید‬ ‫موضوع‬ ‫متوجه‬ ‫بهتر‬ ،‫زیر‬ ‫تصویر‬ ‫به‬ ‫نگاه‬ ‫با‬
‫شد‬
.
Role of Responsive Design in Web Application Development.pdf
ANY QUESTION
1 sur 15

Recommandé

معرفی بهترین سایت سازهای ایران.docx par
معرفی بهترین سایت سازهای ایران.docxمعرفی بهترین سایت سازهای ایران.docx
معرفی بهترین سایت سازهای ایران.docxmasod2
70 vues4 diapositives
علت نیاز به سئو و تبلیغ گوگل par
علت نیاز به سئو و تبلیغ گوگلعلت نیاز به سئو و تبلیغ گوگل
علت نیاز به سئو و تبلیغ گوگلطراحی وب سایت فکر برتر
49 vues3 diapositives
تفکر واکنش‌گرا و ارتباط آن با مشتریان یک سیستم par
تفکر واکنش‌گرا و ارتباط آن با مشتریان یک سیستمتفکر واکنش‌گرا و ارتباط آن با مشتریان یک سیستم
تفکر واکنش‌گرا و ارتباط آن با مشتریان یک سیستمWeb Standards School
1.4K vues24 diapositives
Support site-پشتیبانی سایت par
Support site-پشتیبانی سایتSupport site-پشتیبانی سایت
Support site-پشتیبانی سایتwebnoosh web
69 vues10 diapositives
تحلیل سئو سایت تلوبیون - تلوزیون جیبی قدرتمند par
تحلیل سئو سایت تلوبیون - تلوزیون جیبی قدرتمندتحلیل سئو سایت تلوبیون - تلوزیون جیبی قدرتمند
تحلیل سئو سایت تلوبیون - تلوزیون جیبی قدرتمندAmirhoseinArshad1
274 vues14 diapositives

Contenu connexe

Similaire à Role of Responsive Design in Web Application Development.pdf

Afzayesh bazdid-site(kafeniaz.com) par
Afzayesh bazdid-site(kafeniaz.com)Afzayesh bazdid-site(kafeniaz.com)
Afzayesh bazdid-site(kafeniaz.com)kafeniaz
18 vues84 diapositives
Why seo is important for my business par
Why seo is important for my businessWhy seo is important for my business
Why seo is important for my businessmarzieh shahbazi
74 vues15 diapositives
طراحی سایت par
طراحی سایتطراحی سایت
طراحی سایتhttp://www.novinwebsite.com
191 vues5 diapositives
بازدید سایت با آی پی خارج par
بازدید سایت با آی پی خارجبازدید سایت با آی پی خارج
بازدید سایت با آی پی خارجclickaval1
12 vues2 diapositives
Seo -google -http://seofirstpage.ir-هانیه غفرانی par
Seo -google -http://seofirstpage.ir-هانیه غفرانیSeo -google -http://seofirstpage.ir-هانیه غفرانی
Seo -google -http://seofirstpage.ir-هانیه غفرانیHanieh Ghofrani
138 vues10 diapositives
Seo alguritm-google [www.irpdf.com] par
Seo alguritm-google [www.irpdf.com]Seo alguritm-google [www.irpdf.com]
Seo alguritm-google [www.irpdf.com]Hanieh Ghofrani
73 vues10 diapositives

Similaire à Role of Responsive Design in Web Application Development.pdf(20)

Afzayesh bazdid-site(kafeniaz.com) par kafeniaz
Afzayesh bazdid-site(kafeniaz.com)Afzayesh bazdid-site(kafeniaz.com)
Afzayesh bazdid-site(kafeniaz.com)
kafeniaz18 vues
بازدید سایت با آی پی خارج par clickaval1
بازدید سایت با آی پی خارجبازدید سایت با آی پی خارج
بازدید سایت با آی پی خارج
clickaval112 vues
Seo -google -http://seofirstpage.ir-هانیه غفرانی par Hanieh Ghofrani
Seo -google -http://seofirstpage.ir-هانیه غفرانیSeo -google -http://seofirstpage.ir-هانیه غفرانی
Seo -google -http://seofirstpage.ir-هانیه غفرانی
Hanieh Ghofrani138 vues
افزایش بازدید رپورتاژ par clickaval1
افزایش بازدید رپورتاژافزایش بازدید رپورتاژ
افزایش بازدید رپورتاژ
clickaval16 vues
Behine saze site par danesh_fd
Behine saze siteBehine saze site
Behine saze site
danesh_fd248 vues
آموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایت par Hanieh Ghofrani
آموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایتآموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایت
آموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایت
Hanieh Ghofrani99 vues
آموزش سئو-سایت-seo training-هانیه غقرانی par Hanieh Ghofrani
آموزش سئو-سایت-seo training-هانیه غقرانیآموزش سئو-سایت-seo training-هانیه غقرانی
آموزش سئو-سایت-seo training-هانیه غقرانی
Hanieh Ghofrani57 vues
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت par Hanieh Ghofrani
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایتhttp://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
Hanieh Ghofrani54 vues
آنچه که یک وب سایت عالی نیاز دارد.pdf par mmoghadari
آنچه که یک وب سایت عالی نیاز دارد.pdfآنچه که یک وب سایت عالی نیاز دارد.pdf
آنچه که یک وب سایت عالی نیاز دارد.pdf
mmoghadari1 vue
بهترین هاست bememim.com.docx par KOBI HAMOO
بهترین هاست bememim.com.docxبهترین هاست bememim.com.docx
بهترین هاست bememim.com.docx
KOBI HAMOO4 vues
نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N... par davood dehghan
نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...
نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...
davood dehghan568 vues
آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو... par Hanieh Ghofrani
آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...
آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...
Hanieh Ghofrani157 vues
هانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایت par Hanieh Ghofrani
هانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایتهانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایت
هانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایت
Hanieh Ghofrani215 vues

Role of Responsive Design in Web Application Development.pdf

  • 1. Islamic Emirate of Afghanistan Ministry of Higher Education Directory of Private Students’Affairs Hariwa Institute of Higher Education Computer Science Faculty ‫دهنده‬ ‫ارایه‬ : ،‫چهارم‬ ‫سمستر‬ ،‫شریفی‬ ‫جواد‬ 392 ‫نظر‬ ‫تحت‬ : ‫خیراندیش‬ ‫امید‬ ‫محمد‬ ‫گرای‬‫واکنش‬ ‫قابلیت‬ ‫استفاده‬ ‫اهمیت‬ ( (RESPONSIVE ‫سایت‬‫ویب‬ ‫طراحی‬ ‫در‬
  • 2. ‫ریسپانسیو‬ ‫سایت‬ ‫طراحی‬ ( ‫گرا‬ ‫واکنش‬ ) ‫دارد؟‬ ‫ضرورتی‬ ‫چه‬ ‫و‬ ‫چیست‬ ‫ریسپانسیو‬ ‫سایت‬ ‫وب‬ (RESPONSIVE) ‫چیست؟‬ • ‫در‬ ‫گذار‬ ‫و‬ ‫گشت‬ ‫برای‬ ‫جذاب‬ ‫و‬ ‫جدید‬ ‫راه‬ ‫یک‬ ،‫شد‬ ‫معرفی‬ ‫جهان‬ ‫به‬ ‫تبلت‬ ‫و‬ ‫هوشمند‬ ‫گوشی‬ ‫که‬ ‫زمانی‬ ‫کامپیوترها‬ ‫مانیتور‬ ‫صفحۀ‬ ‫در‬ ‫شدن‬ ‫دیده‬ ‫برای‬ ‫ها‬ ‫سایت‬ ‫که‬ ‫بود‬ ‫اینجا‬ ‫مسئله‬ ‫اما‬ ‫کردیم؛‬ ‫پیدا‬ ‫اینترنت‬ ‫بودند‬ ‫شده‬ ‫طراحی‬ . ‫راحت‬ ‫چندان‬ ‫آنها‬ ‫با‬ ‫کار‬ ،‫داشتند‬ ‫کوچکی‬ ‫صفحه‬ ‫که‬ ‫موبایل‬ ‫های‬‫گوشی‬ ‫در‬ ‫بنابراین‬ ‫نبود‬ . • ‫بودن‬ ‫ریسپانسیو‬ ‫یا‬ ‫گرایی‬ ‫واکنش‬ ‫قابلیت‬ ‫که‬ ‫بود‬ ‫اینجا‬ (responsive) ‫بسیار‬ ‫اهمیت‬ ‫سایت‬ ‫طراحی‬ ‫در‬ ، ‫کرد‬ ‫پیدا‬ ‫زیادی‬ . ‫دهد‬ ‫تطبیق‬ ‫گوناگون‬ ‫های‬‫دستگاه‬ ‫صفحه‬ ‫با‬ ‫را‬ ‫خودش‬ ‫بتواند‬ ‫سایت‬ ‫وب‬ ‫یک‬ ‫اینکه‬ ‫یعنی‬ ،‫کرد‬ ‫باز‬ ‫را‬ ‫سایت‬ ‫که‬ ‫دستگاهی‬ ‫هر‬ ‫با‬ ،‫کاربری‬ ‫هر‬ ‫تا‬ ‫به‬ ‫راح‬ ‫ت‬ ‫ی‬ ‫تجربه‬ ‫هم‬ ‫باز‬ ‫و‬ ‫کند‬ ‫استفاده‬ ‫آن‬ ‫از‬ ‫بتواند‬ ‫باشد‬ ‫داشته‬ ‫خوبی‬ .
  • 3. ‫اگر‬ ‫به‬ ‫تصاویر‬ ‫زیر‬ ‫نگاه‬ ،‫کنید‬ ‫بهتر‬ ‫متوجه‬ ‫موضوع‬ ‫شوید‬ . ‫وب‬ ‫سایت‬ ‫سازمان‬ ‫سنجش‬ ‫که‬ ‫در‬ ‫تصویر‬ ‫سمت‬ ‫چپ‬ ‫باز‬ ،‫شده‬ ‫هیچ‬ ‫تفاوتی‬ ‫با‬ ‫نسخه‬ ‫کامپیوترش‬ ‫ندارد‬ . ‫همین‬ ‫موضوع‬ ‫باعث‬ ‫شده‬ ،‫ها‬‫عکس‬ ،‫ها‬‫دکمه‬ ‫ها‬‫نوشته‬ ‫و‬ ... ‫ریز‬ ‫نمایش‬ ‫داده‬ ‫شوند‬ ‫و‬ ‫کار‬ ‫را‬ ‫سخت‬ ‫کنند‬ . ‫اما‬ ‫در‬ ‫تصویر‬ ‫سمت‬ ‫راست‬ ، ‫چیز‬‫همه‬ ‫کامال‬ ‫با‬ ‫اندازه‬ ‫صفحه‬ ‫هماهنگ‬ ‫شده‬ ‫است‬ ‫و‬ ‫به‬ ‫زوم‬ ‫کردن‬ ‫صفحه‬ ‫نیازی‬ ‫نیست‬ . ‫این‬ ‫است‬ ‫هنر‬ ‫طراحی‬ ‫سایت‬ ‫ریسپانسیو‬ !
  • 4. ‫حاال‬ ‫بیایید‬ ‫یک‬ ‫سایت‬‫وب‬ ‫را‬ ‫در‬ ‫نظر‬ ‫بگیریم‬ ‫که‬ ‫در‬ ‫مانیتورهای‬ ‫معمولی‬ ‫سه‬ ِ‫ن‬‫ستو‬ ‫محتوا‬ ‫دارد‬ . ‫اگر‬ ‫این‬ ‫سایت‬‫وب‬ ‫واکنش‬ ‫گرا‬ ،‫باشد‬ ‫در‬ ‫تبلت‬ ‫که‬ ‫آن‬ ‫را‬ ‫باز‬ ،‫کنید‬ ‫تمام‬ ‫محتواها‬ ‫در‬ ‫دو‬ ‫ستون‬ ‫به‬ ‫شما‬ ‫ارائه‬ ‫شود‬‫می‬ . ‫زمانی‬ ‫هم‬ ‫که‬ ‫آن‬ ‫را‬ ‫با‬ ‫گوشی‬ ‫باز‬ ،‫کنید‬ ‫همه‬ ‫چیز‬ ‫در‬ ‫یک‬ ‫ستون‬ ‫قرار‬ ‫گیرد‬‫می‬ . ‫عالوه‬ ‫بر‬ ،‫این‬ ‫حتی‬ ‫ممکن‬ ‫است‬ ‫برخی‬ ‫اطالعات‬ ‫ّت‬‫ی‬‫اهم‬‫بی‬ ‫در‬ ‫نسخه‬ ‫گوشی‬ ‫حذف‬ ‫شوند‬ ‫یا‬ ‫حتی‬ ‫اطالعاتی‬ ‫مخصوص‬ ‫گوشی‬ ‫اضافه‬ ‫شود‬ .
  • 5. ‫چیست؟‬ ‫ریسپانسیو‬ ‫سایت‬ ‫طراحی‬ ‫اهمیت‬ • ‫بسیاری‬ ‫از‬ ‫مشتریانی‬ ‫که‬ ‫برای‬ ‫طراحی‬ ‫سایت‬ ‫یا‬ ‫فروشگاه‬ ‫اینترنتی‬ ‫تماس‬ ،‫گیرند‬‫می‬ ‫در‬ ‫مورد‬ ‫ریسپانسیو‬ ‫بودن‬ ‫ها‬‫سایت‬ ‫پرسند‬‫می‬ . ‫خواهیم‬‫می‬ ‫دلیل‬ ‫اهمیت‬ ‫و‬ ‫ضرورت‬ ‫زیاد‬ ‫این‬ ‫موضوع‬ ‫را‬ ‫بدانیم‬ . ‫میزان‬ ‫بازدید‬ ‫و‬ ‫رتبۀ‬ ‫تان‬‫سایت‬ ‫افزایش‬ ‫یابد‬‫می‬ • ‫نگاهی‬ ‫به‬ ‫اطراف‬ ‫خود‬ ‫بیاندازید‬ . ‫ها‬‫آدم‬ ً‫ال‬‫معمو‬ ‫از‬ ‫چه‬ ‫دستگاهی‬ ‫برای‬ ‫وصل‬ ‫شدن‬ ‫به‬ ‫اینترنت‬ ‫استفاده‬ ‫کنند؟‬‫می‬ ،‫کامپیوتر‬ ‫لپ‬ ،‫تاپ‬ ‫تبلت‬ ‫یا‬ ‫موبایل؟‬ ‫اگر‬ ‫جواب‬ ‫شما‬ ‫موبایل‬ ،‫است‬ ‫پس‬ ‫درست‬ ‫فکر‬ ‫کنید‬‫می‬ . • ‫در‬ ‫سال‬ 2015 ‫بود‬ ‫که‬ ‫گوگل‬ ‫اعالم‬ ‫کرد‬ ‫جستجوهای‬ ‫انجام‬ ‫شده‬ ‫با‬ ‫موبایل‬ ‫بیش‬ ‫از‬ 51 % ‫کل‬ ‫جستجوهای‬ ‫گوگل‬ ‫را‬ ‫شامل‬ ‫شوند‬‫می‬ . ‫و‬ ً‫ال‬‫کام‬ ‫طبیعی‬ ‫است‬ ‫که‬ ‫این‬ ‫موضوع‬ ‫در‬ ‫اکثر‬ ‫های‬‫سایت‬ ‫دیگر‬ ‫نیز‬ ‫صادق‬ ‫باشد‬ . ‫در‬ ،‫واقع‬ ‫خود‬ ‫ما‬ ‫هم‬ ‫تا‬ ‫به‬ ‫حال‬ ‫آمار‬ ‫های‬‫سایت‬ ‫بسیار‬ ‫مختلفی‬ ‫را‬ ‫ایم‬‫دیده‬ ‫و‬ ‫به‬ ‫ندرت‬ ‫به‬ ‫سایتی‬ ‫ایم‬‫برخورده‬ ‫که‬ ‫ورودی‬ ‫موبایل‬ ‫آن‬ ‫کمتر‬ ‫از‬ ‫کامپیوتر‬ ‫باشد‬ .
  • 6. ‫به‬ ‫شدن‬ ‫وصل‬ ‫برای‬ ‫موبایل‬ ‫از‬ ‫استفاده‬ ‫محبوبیت‬ ‫صعودی‬ ‫روند‬ ‫زیر‬ ‫نمودار‬ ‫شما‬ ‫به‬ ‫را‬ ‫اینترنت‬ ‫دهد‬‫می‬ ‫نشان‬ . ‫باشد‬ ‫جالب‬ ‫شما‬ ‫برای‬ ‫نمودار‬ ‫این‬ ‫بررسی‬ ‫کنم‬‫می‬ ‫فکر‬ . ‫در‬ ،‫بینید‬‫می‬ ‫که‬ ‫همانطور‬ ‫سال‬ 2018 ‫لپ‬ ‫یا‬ ‫دسکتاپ‬ ‫برابر‬ ‫دو‬ ‫حدود‬ ‫چیزی‬ ،‫جستجو‬ ‫برای‬ ‫موبایل‬ ‫از‬ ‫استفاده‬ ، ‫است‬ ‫تاپ‬ .
  • 7. ‫دیگر‬ ‫های‬‫نسخه‬ ‫از‬ ‫بیشتر‬ ،‫سایت‬ ‫وب‬ ‫یک‬ ‫موبایل‬ ‫نسخه‬ ‫اگر‬ ،‫وجود‬ ‫این‬ ‫با‬ ‫حداقل‬ ،‫باشد‬ ‫نداشته‬ ‫اهمیت‬ ‫آن‬ ‫ندارد‬ ‫هم‬ ‫کمتر‬ . ‫موبایل‬ ‫برای‬ ‫را‬ ‫خود‬ ‫سایت‬ ‫باید‬ ً‫ا‬‫حتم‬ ‫شما‬ ( ‫صفحه‬ ‫های‬‫اندازه‬ ‫دیگر‬ ‫کنار‬ ‫در‬ ) ‫کنید‬ ‫بهینه‬ ‫کنند‬‫می‬ ‫استفاده‬ ‫شما‬ ‫سایت‬ ‫از‬ ‫خوبی‬ ‫به‬ ‫کاربران‬ ‫همه‬ ‫شوید‬ ‫مطمئن‬ ‫تا‬ . ‫تاثیر‬ ‫گوگل‬ ‫رتبه‬ ‫در‬ ‫سایت‬ ‫بودن‬ ‫ریسپانسیو‬ ‫دارد‬ ! • ‫ایجاد‬ ‫کاربران‬ ‫برای‬ ‫بهتر‬ ‫تجربه‬ ‫یک‬ ‫تواند‬‫می‬ ‫شما‬ ‫سایت‬ ‫وب‬ ‫گرایی‬ ‫واکنش‬ ‫کند‬ ... ‫شود‬‫نمی‬ ‫ختم‬ ‫همینجا‬ ‫به‬ ‫قضیه‬ ‫اما‬ . ‫بلکه‬ ‫شود‬‫می‬ ‫هم‬ ‫گوگل‬ ‫در‬ ‫بهتری‬ ‫های‬‫رتبه‬ ‫کسب‬ ‫باعث‬ ‫سایت‬ ‫بودن‬ ‫ریسپانسیو‬ ،‫این‬ ‫بر‬ ‫عالوه‬ ‫تر‬‫تخصصی‬ ‫کمی‬ ‫بخواهیم‬ ‫اگر‬ ‫یا‬ ‫در‬ ،‫کنیم‬ ‫صحبت‬ ‫سئو‬ ‫بود‬ ‫خواهد‬ ‫تاثیرگذار‬ ‫هم‬ ‫شما‬ ). ‫چگونه؟‬ ‫اما‬ • ‫دهد‬ ‫نمایش‬ ‫آنها‬ ‫به‬ ‫را‬ ‫نتایج‬ ‫بهترین‬ ‫کند‬‫می‬ ‫تالش‬ ‫بنابراین‬ ‫باشد؛‬ ‫داشته‬ ‫را‬ ‫خود‬ ‫کاربران‬ ‫هوای‬ ،‫خواهد‬‫می‬ ‫گوگل‬ ً‫ا‬‫طبیعت‬ . ‫پس‬ ‫بدهد؛‬ ‫ریسپانسیو‬ ‫های‬‫سایت‬ ‫به‬ ‫را‬ ‫اولویت‬ ،‫کرد‬ ‫جستجو‬ ‫گوگل‬ ‫در‬ ‫خود‬ ‫موبایل‬ ‫گوشی‬ ‫با‬ ‫کاربری‬ ‫وقتی‬ ‫که‬ ‫است‬ ‫طبیعی‬ ً‫ال‬‫کام‬ ( ‫است‬ ‫متفاوت‬ ‫هم‬ ‫با‬ ً‫ال‬‫معمو‬ ‫موبایل‬ ‫و‬ ‫کامپیوتر‬ ‫در‬ ‫کلمه‬ ‫یک‬ ‫جستجو‬ ‫نتایج‬ ،‫واقع‬ ‫در‬ ). ‫ریسپانسیو‬ ‫شما‬ ‫سایت‬ ‫اگر‬ ‫یعنی‬ ‫این‬ ‫کنید‬ ‫کسب‬ ‫رتبه‬ ‫توانید‬‫می‬ ‫موبایل‬ ‫نتایج‬ ‫در‬ ‫سخت‬ ‫خیلی‬ ،‫نباشد‬ . ‫بزنید‬ ‫را‬ ‫خود‬ ‫بازدیدکنندگان‬ ‫از‬ ‫بسیاری‬ ‫قید‬ ‫باید‬ ‫بنابراین‬ . ‫به‬ ‫گوییم‬‫می‬ ‫همین‬ ‫خاطر‬ : ‫گوگل‬ ‫از‬ ‫گرفتن‬ ‫ورودی‬ ‫برایتان‬ ‫اگر‬ ( ‫سئو‬ ) ‫باشید‬ ‫داشته‬ ‫ریسپانسیو‬ ‫سایت‬ ‫یک‬ ‫باید‬ ً‫ا‬‫حتم‬ ،‫است‬ ‫مهم‬ .
  • 8. ‫کرده‬ ‫بهینه‬ ‫را‬ ‫ها‬‫هزینه‬ ‫ریسپانسیو‬ ‫سایت‬ ‫است‬ ! • ،‫شدند‬ ‫می‬ ‫زیادی‬ ‫های‬ ‫هزینه‬ ‫متحمل‬ ‫نمودند‬ ‫می‬ ‫سایت‬ ‫طراحی‬ ‫به‬ ‫اقدام‬ ‫که‬ ‫زمانی‬ ‫گذشته‬ ‫عصر‬ ‫در‬ ‫بازاریابان‬ ‫کردند‬ ‫می‬ ‫آن‬ ‫طراحی‬ ‫و‬ ‫سایت‬ ‫صرف‬ ‫جداگانه‬ ‫طور‬ ‫به‬ ‫را‬ ‫ای‬ ‫هزینه‬ ‫که‬ ‫صورت‬ ‫این‬ ‫به‬ . ‫نیز‬ ‫را‬ ‫ای‬ ‫هزینه‬ ‫طرفی‬ ‫از‬ ‫نمودند‬ ‫می‬ ‫همراه‬ ‫تلفن‬ ‫های‬ ‫دستگاه‬ ‫برای‬ ،‫موبایل‬ ‫ورژن‬ ‫عنوان‬ ‫تحت‬ ‫دیگر‬ ‫سایتی‬ ‫برای‬ . ‫هزینۀ‬ ‫این‬ ‫االن‬ ‫اما‬ ‫اعمال‬ ‫شما‬ ‫اینترنتی‬ ‫فروشگاه‬ ‫یا‬ ‫سایت‬ ‫روی‬ ‫را‬ ‫قابلیت‬ ‫این‬ ‫سایت‬ ‫طراحان‬ ‫از‬ ‫بعضی‬ ‫و‬ ‫است‬ ‫شده‬ ‫حذف‬ ‫اضافی‬ ‫کنند‬‫می‬ .
  • 9. ‫است؟‬ ‫شدنی‬ ‫ها‬‫سایز‬ ‫تمام‬ ‫برای‬ ‫ریسپانسیو‬ ‫سایت‬ ‫طراحی‬ ‫آیا‬ • ‫شما‬ ‫زمانی‬ ‫که‬ ‫دنبال‬‫به‬ ‫یک‬ ‫سایت‬ ‫ریسپانسیو‬ ،‫هستید‬ ‫یک‬ ‫مانع‬ ‫بزرگ‬ ‫بر‬ ‫سر‬ ‫راه‬ ‫شما‬ ‫قرار‬ ‫خواهد‬ ‫گرفت‬ : ‫هزاران‬ ‫مدل‬ ،‫مانیتور‬ ،‫تاپ‬‫لپ‬ ‫تبلت‬ ‫و‬ ‫موبایل‬ ‫در‬ ‫دنیا‬ ‫وجود‬ ‫دارد‬ ‫و‬ ‫در‬ ،‫نتیجه‬ ‫تنوع‬ ‫های‬‫اندازه‬ ‫صفحه‬ ‫بسیار‬ ‫باالست‬ . ‫حاال‬ ‫سوال‬ ‫پیش‬ ،‫آید‬‫می‬ ً‫ال‬‫اص‬ ‫چطور‬ ‫باید‬ ‫سایت‬ ‫خود‬ ‫را‬ ‫برای‬ ‫این‬ ‫همه‬ ‫این‬ ‫ها‬‫اندازه‬ ‫آماده‬ ‫کنید؟‬ ‫آیا‬ ‫خواهید‬‫می‬ ‫تک‬ ‫تک‬ ‫آنها‬ ‫را‬ ‫بررسی‬ ‫کنید‬ ‫و‬ ‫مطمئن‬ ‫شوید‬ ‫که‬ ‫سایت‬ ‫شما‬ ‫در‬ ‫هر‬ ‫ای‬‫اندازه‬ ‫درست‬ ‫نمایش‬ ‫داده‬ ‫شود؟‬‫می‬ ً‫ا‬‫قطع‬ ‫این‬ ‫مساله‬ ‫حتی‬ ‫اگر‬ ‫ممکن‬ ،‫باشد‬ ‫چیزی‬ ‫شبیه‬ ‫به‬ ‫دیوانگی‬ ‫است‬ . • ‫بهینه‬ ‫کردن‬ ‫یک‬ ‫سایت‬ ‫برای‬ ‫تمام‬ ‫های‬‫اندازه‬ ‫صفحه‬ ‫چندان‬ ‫عملی‬ ‫نیست‬ . ‫بنابراین‬ ‫بهتر‬ ‫است‬ ‫قبل‬ ‫از‬ ‫هر‬ ،‫کار‬ ‫های‬‫اولویت‬ ‫خود‬ ‫را‬ ‫مشخص‬ ‫کنیم‬ . ‫چگونه؟‬ ‫کافی‬ ‫است‬ ‫به‬ ‫آمار‬ ‫مختلف‬ ‫رجوع‬ ‫کنیم‬ .
  • 10. ‫گوگل‬ ‫در‬ ‫شده‬ ‫انجام‬ ‫های‬‫جستجو‬ ‫تعداد‬ ‫که‬ ‫دهد‬‫می‬ ‫نشان‬ ‫ما‬ ‫به‬ ‫زیر‬ ‫آمار‬ ‫با‬ ‫است‬ ‫چقدر‬ ‫دستگاه‬ ‫نوع‬ ‫به‬ ‫توجه‬ : • ‫موبایل‬ : 51 ‫درصد‬ • ‫تاپ‬‫لپ‬ ‫و‬ ‫دسکتاپ‬ : 45 ‫درصد‬ • ‫تبلت‬ : 3.5 ‫درصد‬ • ‫غیره‬ ‫و‬ ‫هوشمند‬ ‫های‬‫تلویزیون‬ : 0.5 ‫درصد‬ ‫دستگاه‬ ‫سایر‬ ‫از‬ ‫بیش‬ ‫گردی‬‫وب‬ ‫برای‬ ‫تاپ‬‫لپ‬ ‫و‬ ‫کامپیوتر‬ ،‫موبایل‬ ‫از‬ ‫استفاده‬ ‫میزان‬ ،‫بینید‬‫می‬ ‫که‬ ‫همانطور‬ ‫ها‬ ‫می‬ ‫باشد‬ . ‫و‬ ‫کنید‬ ‫ها‬‫دستگاه‬ ‫این‬ ‫برای‬ ‫سایت‬ ‫کردن‬ ‫گرا‬ ‫واکنش‬ ‫صرف‬ ‫را‬ ‫خود‬ ‫گرانبهای‬ ‫وقت‬ ‫است‬ ‫بهتر‬ ‫پس‬ ‫نگذارید‬ ‫ها‬‫دستگاه‬ ‫سایر‬ ‫یا‬ ‫تبلت‬ ‫برای‬ ‫را‬ ‫چندانی‬ ‫وقت‬ .
  • 11. • ‫شویم‬ ‫دقیق‬ ‫موبایل‬ ‫های‬‫دستگاه‬ ‫در‬ ‫کمی‬ ‫بیایید‬ ‫حاال‬ . ‫مواجه‬ ‫تنوع‬ ‫با‬ ‫هم‬ ‫باز‬ ‫اینجا‬ ‫در‬ ‫شویم‬‫می‬ . ‫متفاوتند‬ ‫هم‬ ‫با‬ ‫نیز‬ ‫موبایل‬ ‫های‬‫صفحه‬ ‫سایز‬ ‫یعنی‬ . ‫راه‬ ‫بهترین‬ ‫هم‬ ‫باز‬ ‫پس‬ ‫برویم‬ ‫بازار‬ ‫رایج‬ ‫های‬‫صفحه‬ ‫اندازه‬ ‫و‬ ‫ها‬‫گوشی‬ ‫سراغ‬ ‫به‬ ‫که‬ ‫است‬ ‫این‬ . ‫یعنی‬ ‫این‬ ‫مطرح‬ ‫های‬ ‫گوشی‬ ‫در‬ ‫را‬ ‫خود‬ ‫گرایی‬ ‫واکنش‬ ( ‫همینطور‬ ‫و‬ ‫آیفون‬ ‫سری‬ ‫مثال‬ ‫برای‬ ‫سامسونگ‬ ‫های‬‫موبایل‬ ) ‫کنید‬ ‫تست‬ . ‫شد‬ ‫تر‬‫دقیق‬ ‫توان‬‫می‬ ‫هم‬ ‫این‬ ‫از‬ ‫حتی‬ ‫اما‬ . ‫طبق‬ ،‫ها‬‫گوشی‬ ‫در‬ ‫صفحه‬ ‫اندازۀ‬ ‫ترین‬‫رایج‬ ،‫آمار‬ 1366 * 768 ‫است‬ . ‫خواهید‬‫نمی‬ ‫اگر‬ ‫پس‬ ‫بررسی‬ ‫سایز‬ ‫این‬ ‫در‬ ‫را‬ ‫خود‬ ‫سایت‬‫وب‬ ‫بودن‬ ‫ریسپانسیو‬ ‫حداقل‬ ،‫بگذارید‬ ‫وقت‬ ‫خیلی‬ ‫کنید‬ .
  • 12. ‫واکنش‬ ‫از‬ ‫چطور‬ ‫شوید؟‬ ‫مطمئن‬ ‫خود‬ ‫سایت‬ ‫بودن‬ ‫گرا‬ • ‫آید‬‫نمی‬ ‫بر‬ ‫آن‬ ‫پس‬ ‫از‬ ‫معمولی‬ ‫کاربر‬ ‫یک‬ ،‫دارد‬ ‫نیاز‬ ‫کدنویسی‬ ‫مهارت‬ ‫به‬ ‫ریسپانسیو‬ ‫سایت‬ ‫طراحی‬ ‫که‬ ‫جا‬‫آن‬ ‫از‬ . ً‫ا‬‫قطع‬ ،‫سایت‬‫وب‬ ‫یک‬ ‫صاحب‬ ‫عنوان‬ ‫به‬ ‫اما‬ ‫توانید‬‫می‬ ‫بگیرید‬ ‫نظر‬ ‫در‬ ‫را‬ ‫گرایی‬ ‫واکنش‬ ‫مساله‬ ،‫سایت‬ ‫طراحی‬ ‫هنگام‬ ‫شوید‬ ‫مطمئن‬ ‫خود‬ ‫سایت‬ ‫بودن‬ ‫ریسپانسیو‬ ‫از‬ ‫و‬ . ‫می‬ ‫پرسید‬ ‫چگونه؟‬ • ‫کنید‬ ‫چک‬ ‫را‬ ‫خود‬ ‫سایت‬ ‫گرایی‬‫واکنش‬ ،‫بتوانید‬ ‫آن‬ ‫وسیلۀ‬‫به‬ ‫که‬ ‫کنیم‬‫می‬ ‫معرفی‬ ‫کاربردی‬ ‫راه‬ ‫چند‬ ‫شما‬ ‫به‬ ‫ادامه‬ ‫در‬ ( . ‫را‬ ‫خود‬ ‫سایت‬ ‫باشد‬ ‫نیاز‬ ‫اینکه‬ ‫بدون‬ ‫باز‬ ‫تبلت‬ ‫یا‬ ‫موبایل‬ ‫گوشی‬ ‫در‬ ‫کنید‬ ). • ‫سایت‬‫وب‬ ‫یک‬ ‫بودن‬ ‫ریسپانسیو‬ ‫بررسی‬ ‫برای‬ ‫ساده‬ ‫راه‬ ‫دو‬  ‫بشناسیم‬ ‫را‬ ‫سایت‬ ‫وب‬ ‫یک‬ ‫گرایی‬ ‫واکنش‬ ‫کردن‬ ‫چک‬ ‫برای‬ ‫راحت‬ ‫مسیر‬ ‫دو‬ ‫بگذارید‬ ‫ابتدا‬ ‫در‬ : .1 ‫سایت‬‫وب‬ Am I Responsive: ‫سایت‬ ‫به‬ Am I Responsive ‫مراجعه‬ ‫کنید‬ ‫وارد‬ ‫را‬ ‫خود‬ ‫سایت‬ ‫آدرس‬ ‫و‬ ‫کنید‬ . ‫چهار‬ ‫سرعت‬ ‫به‬ ‫سایت‬ ‫این‬ ‫ک‬ ‫تست‬ ‫را‬ ‫آن‬ ‫گرایی‬ ‫واکنش‬ ‫توانید‬‫می‬ ‫راحتی‬ ‫همین‬ ‫به‬ ‫و‬ ‫داد‬ ‫خواهد‬ ‫نمایش‬ ‫برایتان‬ ‫را‬ ‫شما‬ ‫سایت‬ ‫از‬ ‫موبایل‬ ‫و‬ ‫تبلت‬ ،‫تاپ‬‫لپ‬ ،‫کامپیوتر‬ ‫نسخه‬ ‫نید‬ . .2 ‫مرورگر‬ ‫صفحه‬ ‫اندازۀ‬ ‫تغییر‬ : ‫کنید‬ ‫خارج‬ ‫صفحه‬ ‫تمام‬ ‫حالت‬ ‫از‬ ‫را‬ ‫خود‬ ‫مرورگر‬ ‫توانید‬‫می‬ ،‫کنید‬ ‫بررسی‬ ‫را‬ ‫مختلف‬ ‫های‬‫نسخه‬ ‫تر‬‫دقیق‬ ‫خواهید‬ ‫می‬ ‫اگر‬ ‫کنید‬ ‫کوچک‬ ‫و‬ ‫بزرگ‬ ‫دلخواه‬ ‫به‬ ‫را‬ ‫آن‬ ‫صفحه‬ ‫با‬ ‫و‬ . ،‫ترتیب‬ ‫این‬ ‫به‬ ‫داد؛‬ ‫خواهد‬ ‫تطبیق‬ ‫را‬ ‫خودش‬ ‫شما‬ ‫سایت‬ ،‫دهید‬‫می‬ ‫تغییر‬ ‫را‬ ‫مرورگر‬ ‫اندازه‬ ‫شما‬ ‫وقتی‬ ‫شوید‬‫می‬ ‫مطمئن‬ ‫ها‬‫اندازه‬ ‫تمام‬ ‫در‬ ‫آن‬ ‫درست‬ ‫نمایش‬ ‫از‬ .
  • 13. ‫وب‬ ‫بودن‬ ‫ریسپانسیو‬ ‫کردن‬ ‫چک‬ ‫برای‬ ‫تخصصی‬ ‫راه‬ ‫سایت‬ • ‫اگر‬ ‫قصد‬ ‫روش‬ ‫یک‬ ،‫کنید‬ ‫بررسی‬ ‫دقیق‬ ‫سایزهای‬ ‫در‬ ‫را‬ ‫آن‬ ‫و‬ ‫بپردازید‬ ‫خود‬ ‫سایت‬ ‫بررسی‬ ‫به‬ ‫تر‬‫دقیق‬ ‫دارید‬ ‫دارد‬ ‫وجود‬ ‫شما‬ ‫برای‬ ‫ای‬‫حرفه‬ . ‫کلیدهای‬ ‫و‬ ‫کنید‬ ‫باز‬ ‫را‬ ‫خود‬ ‫سایت‬ Ctrl+Shift+I ‫بر‬ ‫اینکه‬ ‫یا‬ ،‫دهید‬ ‫فشار‬ ‫را‬ ‫گزینه‬ ‫و‬ ‫کرده‬ ‫راست‬ ‫کلیک‬ ‫خود‬ ‫سایت‬ ‫روی‬ inspect ( ‫یا‬ inspect element) ‫را‬ ‫کنید‬ ‫انتخاب‬ . ‫حاال‬ ‫های‬‫دکمه‬ Ctrl+Shift+M ‫کنید‬ ‫کلیک‬ ‫تصویر‬ ‫در‬ ‫شده‬ ‫مشخص‬ ‫آیکون‬ ‫روی‬ ‫بر‬ ‫یا‬ ‫دهید‬ ‫فشار‬ ‫را‬ . ‫شما‬ ‫سایت‬ ‫شود‬‫می‬ ‫ریسپانسیو‬ ‫حالت‬ ‫وارد‬ ‫اینکار‬ ‫با‬ . • ‫سایت‬ ‫تا‬ ،‫کنید‬ ‫انتخاب‬ ‫را‬ ‫خود‬ ‫نظر‬ ‫مورد‬ ‫مدل‬ ،‫بازار‬ ‫مطرح‬ ‫های‬‫تبلت‬ ‫و‬ ‫ها‬‫گوشی‬ ‫بین‬ ‫از‬ ‫توانید‬‫می‬ ‫شما‬ ‫حاال‬ ‫شود‬ ‫داده‬ ‫نمایش‬ ‫خاص‬ ‫مدل‬ ‫این‬ ‫صفحه‬ ‫اندازه‬ ‫در‬ ‫شما‬ . ‫خواهید‬ ‫موضوع‬ ‫متوجه‬ ‫بهتر‬ ،‫زیر‬ ‫تصویر‬ ‫به‬ ‫نگاه‬ ‫با‬ ‫شد‬ .