SlideShare a Scribd company logo

Role of Responsive Design in Web Application Development.pdf

•
•
Mohammad Omid Khairandish
Mohammad Omid Khairandish

This slide tries to provide knowledge about the Role of Responsive design in Web Application Development.

Technology
1 of 15
Download to read offline
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 ‫کنید‬ ‫کلیک‬ ‫تصویر‬ ‫در‬ ‫شده‬ ‫مشخص‬ ‫آیکون‬ ‫روی‬ ‫بر‬ ‫یا‬ ‫دهید‬ ‫فشار‬ ‫را‬ . ‫شما‬ ‫سایت‬ ‫شود‬‫می‬ ‫ریسپانسیو‬ ‫حالت‬ ‫وارد‬ ‫اینکار‬ ‫با‬ . • ‫سایت‬ ‫تا‬ ،‫کنید‬ ‫انتخاب‬ ‫را‬ ‫خود‬ ‫نظر‬ ‫مورد‬ ‫مدل‬ ،‫بازار‬ ‫مطرح‬ ‫های‬‫تبلت‬ ‫و‬ ‫ها‬‫گوشی‬ ‫بین‬ ‫از‬ ‫توانید‬‫می‬ ‫شما‬ ‫حاال‬ ‫شود‬ ‫داده‬ ‫نمایش‬ ‫خاص‬ ‫مدل‬ ‫این‬ ‫صفحه‬ ‫اندازه‬ ‫در‬ ‫شما‬ . ‫خواهید‬ ‫موضوع‬ ‫متوجه‬ ‫بهتر‬ ،‫زیر‬ ‫تصویر‬ ‫به‬ ‫نگاه‬ ‫با‬ ‫شد‬ .
ANY QUESTION

Recommended

علت نیاز به سئو و تبلیغ گوگل
علت نیاز به سئو و تبلیغ گوگلعلت نیاز به سئو و تبلیغ گوگل
علت نیاز به سئو و تبلیغ گوگلطراحی وب سایت فکر برتر
 
طراحی سایت در اراک-www.SiteMand.com
طراحی سایت در اراک-www.SiteMand.comطراحی سایت در اراک-www.SiteMand.com
طراحی سایت در اراک-www.SiteMand.comشرکت رهبان فاخر ساعی تولیدکننده انواع گریتینگ و کف پله
 
تفکر واکنش‌گرا و ارتباط آن با مشتریان یک سیستم
تفکر واکنش‌گرا و ارتباط آن با مشتریان یک سیستمتفکر واکنش‌گرا و ارتباط آن با مشتریان یک سیستم
تفکر واکنش‌گرا و ارتباط آن با مشتریان یک سیستمWeb Standards School
 
Support site-پشتیبانی سایت
Support site-پشتیبانی سایتSupport site-پشتیبانی سایت
Support site-پشتیبانی سایتwebnoosh web
 
تحلیل سئو سایت تلوبیون - تلوزیون جیبی قدرتمند
تحلیل سئو سایت تلوبیون - تلوزیون جیبی قدرتمندتحلیل سئو سایت تلوبیون - تلوزیون جیبی قدرتمند
تحلیل سئو سایت تلوبیون - تلوزیون جیبی قدرتمندAmirhoseinArshad1
 
طراحی سایت
طراحی سایتطراحی سایت
طراحی سایتEhsan Shahsavan
 
کتاب آموزش سئو
کتاب آموزش سئوکتاب آموزش سئو
کتاب آموزش سئوMasoud Javaheri
 
Afzayesh bazdid-site(kafeniaz.com)
Afzayesh bazdid-site(kafeniaz.com)Afzayesh bazdid-site(kafeniaz.com)
Afzayesh bazdid-site(kafeniaz.com)kafeniaz
 

Recommended

علت نیاز به سئو و تبلیغ گوگل
علت نیاز به سئو و تبلیغ گوگلعلت نیاز به سئو و تبلیغ گوگل
علت نیاز به سئو و تبلیغ گوگلطراحی وب سایت فکر برتر
 
طراحی سایت در اراک-www.SiteMand.com
طراحی سایت در اراک-www.SiteMand.comطراحی سایت در اراک-www.SiteMand.com
طراحی سایت در اراک-www.SiteMand.comشرکت رهبان فاخر ساعی تولیدکننده انواع گریتینگ و کف پله
 
تفکر واکنش‌گرا و ارتباط آن با مشتریان یک سیستم
تفکر واکنش‌گرا و ارتباط آن با مشتریان یک سیستمتفکر واکنش‌گرا و ارتباط آن با مشتریان یک سیستم
تفکر واکنش‌گرا و ارتباط آن با مشتریان یک سیستمWeb Standards School
 
Support site-پشتیبانی سایت
Support site-پشتیبانی سایتSupport site-پشتیبانی سایت
Support site-پشتیبانی سایتwebnoosh web
 
تحلیل سئو سایت تلوبیون - تلوزیون جیبی قدرتمند
تحلیل سئو سایت تلوبیون - تلوزیون جیبی قدرتمندتحلیل سئو سایت تلوبیون - تلوزیون جیبی قدرتمند
تحلیل سئو سایت تلوبیون - تلوزیون جیبی قدرتمندAmirhoseinArshad1
 
طراحی سایت
طراحی سایتطراحی سایت
طراحی سایتEhsan Shahsavan
 
کتاب آموزش سئو
کتاب آموزش سئوکتاب آموزش سئو
کتاب آموزش سئوMasoud Javaheri
 
Afzayesh bazdid-site(kafeniaz.com)
Afzayesh bazdid-site(kafeniaz.com)Afzayesh bazdid-site(kafeniaz.com)
Afzayesh bazdid-site(kafeniaz.com)kafeniaz
 
Why seo is important for my business
Why seo is important for my businessWhy seo is important for my business
Why seo is important for my businessmarzieh shahbazi
 
طراحی سایت
طراحی سایتطراحی سایت
طراحی سایتhttp://www.novinwebsite.com
 
Seo -google -http://seofirstpage.ir-هانیه غفرانی
Seo -google -http://seofirstpage.ir-هانیه غفرانیSeo -google -http://seofirstpage.ir-هانیه غفرانی
Seo -google -http://seofirstpage.ir-هانیه غفرانیHanieh Ghofrani
 
Seo alguritm-google [www.irpdf.com]
Seo alguritm-google [www.irpdf.com]Seo alguritm-google [www.irpdf.com]
Seo alguritm-google [www.irpdf.com]Hanieh Ghofrani
 
علت نیاز به وب سایت
علت نیاز به وب سایتعلت نیاز به وب سایت
علت نیاز به وب سایتطراحی وب سایت فکر برتر
 
Behine saze site
Behine saze siteBehine saze site
Behine saze sitedanesh_fd
 
آموزش سئو-سایت-seo training-هانیه غقرانی
آموزش سئو-سایت-seo training-هانیه غقرانیآموزش سئو-سایت-seo training-هانیه غقرانی
آموزش سئو-سایت-seo training-هانیه غقرانیHanieh Ghofrani
 
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایتhttp://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایتHanieh Ghofrani
 
آموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایت
آموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایتآموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایت
آموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایتHanieh Ghofrani
 
META IRAN
META IRANMETA IRAN
META IRANHamid Chamanchi
 
Seo
SeoSeo
SeoArezouShokrdayi
 
نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...
نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...
نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...davood dehghan
 
هانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایت
هانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایتهانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایت
هانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایتHanieh Ghofrani
 
آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...
آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...
آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...Hanieh Ghofrani
 
شرکت طراحی سایت مبنا
شرکت طراحی سایت مبناشرکت طراحی سایت مبنا
شرکت طراحی سایت مبناmostafa saeedi ( rajabi )
 
طراحی سایت اختصاصی یا قالب های آماده
طراحی سایت اختصاصی یا قالب های آمادهطراحی سایت اختصاصی یا قالب های آماده
طراحی سایت اختصاصی یا قالب های آمادهشرکت طراحی سایت پردو
 
نرم افزار افزایش بازدید سایت
نرم افزار افزایش بازدید سایتنرم افزار افزایش بازدید سایت
نرم افزار افزایش بازدید سایتmahmoodlotfi
 
کتاب راهنمای صفحه فرود
کتاب راهنمای صفحه فرودکتاب راهنمای صفحه فرود
کتاب راهنمای صفحه فرودAnetwork
 
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایتhttp://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایتHanieh Ghofrani
 
http://seofirstpage.ir- هانیه غفرانی- آموزش سئو سایت
http://seofirstpage.ir- هانیه غفرانی- آموزش سئو سایتhttp://seofirstpage.ir- هانیه غفرانی- آموزش سئو سایت
http://seofirstpage.ir- هانیه غفرانی- آموزش سئو سایتHanieh Ghofrani
 

More Related Content

Similar to Role of Responsive Design in Web Application Development.pdf

Why seo is important for my business
Why seo is important for my businessWhy seo is important for my business
Why seo is important for my businessmarzieh shahbazi
 
Seo -google -http://seofirstpage.ir-هانیه غفرانی
Seo -google -http://seofirstpage.ir-هانیه غفرانیSeo -google -http://seofirstpage.ir-هانیه غفرانی
Seo -google -http://seofirstpage.ir-هانیه غفرانیHanieh Ghofrani
 
Seo alguritm-google [www.irpdf.com]
Seo alguritm-google [www.irpdf.com]Seo alguritm-google [www.irpdf.com]
Seo alguritm-google [www.irpdf.com]Hanieh Ghofrani
 
Behine saze site
Behine saze siteBehine saze site
Behine saze sitedanesh_fd
 
آموزش سئو-سایت-seo training-هانیه غقرانی
آموزش سئو-سایت-seo training-هانیه غقرانیآموزش سئو-سایت-seo training-هانیه غقرانی
آموزش سئو-سایت-seo training-هانیه غقرانیHanieh Ghofrani
 
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایتhttp://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایتHanieh Ghofrani
 
آموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایت
آموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایتآموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایت
آموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایتHanieh Ghofrani
 
نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...
نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...
نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...davood dehghan
 
هانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایت
هانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایتهانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایت
هانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایتHanieh Ghofrani
 
آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...
آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...
آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...Hanieh Ghofrani
 
نرم افزار افزایش بازدید سایت
نرم افزار افزایش بازدید سایتنرم افزار افزایش بازدید سایت
نرم افزار افزایش بازدید سایتmahmoodlotfi
 
کتاب راهنمای صفحه فرود
کتاب راهنمای صفحه فرودکتاب راهنمای صفحه فرود
کتاب راهنمای صفحه فرودAnetwork
 
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایتhttp://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایتHanieh Ghofrani
 
http://seofirstpage.ir- هانیه غفرانی- آموزش سئو سایت
http://seofirstpage.ir- هانیه غفرانی- آموزش سئو سایتhttp://seofirstpage.ir- هانیه غفرانی- آموزش سئو سایت
http://seofirstpage.ir- هانیه غفرانی- آموزش سئو سایتHanieh Ghofrani
 

Similar to Role of Responsive Design in Web Application Development.pdf (20)

Why seo is important for my business
Why seo is important for my businessWhy seo is important for my business
Why seo is important for my business
 
طراحی سایت
طراحی سایتطراحی سایت
طراحی سایت
 
Seo -google -http://seofirstpage.ir-هانیه غفرانی
Seo -google -http://seofirstpage.ir-هانیه غفرانیSeo -google -http://seofirstpage.ir-هانیه غفرانی
Seo -google -http://seofirstpage.ir-هانیه غفرانی
 
Seo alguritm-google [www.irpdf.com]
Seo alguritm-google [www.irpdf.com]Seo alguritm-google [www.irpdf.com]
Seo alguritm-google [www.irpdf.com]
 
علت نیاز به وب سایت
علت نیاز به وب سایتعلت نیاز به وب سایت
علت نیاز به وب سایت
 
Behine saze site
Behine saze siteBehine saze site
Behine saze site
 
آموزش سئو-سایت-seo training-هانیه غقرانی
آموزش سئو-سایت-seo training-هانیه غقرانیآموزش سئو-سایت-seo training-هانیه غقرانی
آموزش سئو-سایت-seo training-هانیه غقرانی
 
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایتhttp://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
 
آموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایت
آموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایتآموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایت
آموزش سئو-سایت-http://seofirstpage.ir/ هانیه غفرانی آموزش سئو سایت
 
META IRAN
META IRANMETA IRAN
META IRAN
 
Seo
SeoSeo
Seo
 
نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...
نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...
نکات مفید در راه اندازی استارتاپ و مدیریت کسب و کارهای اینترنتی و وب سایت - N...
 
هانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایت
هانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایتهانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایت
هانیه غفرانی-آموزش سئو-سایت-بهینه-سازی-سایت
 
آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...
آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...
آموزش سئو-سایت-بهینه-سازی-سایت/http://seofirstpage.ir/ هانیه غفرانی آموزش سئو...
 
شرکت طراحی سایت مبنا
شرکت طراحی سایت مبناشرکت طراحی سایت مبنا
شرکت طراحی سایت مبنا
 
طراحی سایت اختصاصی یا قالب های آماده
طراحی سایت اختصاصی یا قالب های آمادهطراحی سایت اختصاصی یا قالب های آماده
طراحی سایت اختصاصی یا قالب های آماده
 
نرم افزار افزایش بازدید سایت
نرم افزار افزایش بازدید سایتنرم افزار افزایش بازدید سایت
نرم افزار افزایش بازدید سایت
 
کتاب راهنمای صفحه فرود
کتاب راهنمای صفحه فرودکتاب راهنمای صفحه فرود
کتاب راهنمای صفحه فرود
 
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایتhttp://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
http://seofirstpage.ir-هانیه غفرانی-آموزش سئو سایت
 
http://seofirstpage.ir- هانیه غفرانی- آموزش سئو سایت
http://seofirstpage.ir- هانیه غفرانی- آموزش سئو سایتhttp://seofirstpage.ir- هانیه غفرانی- آموزش سئو سایت
http://seofirstpage.ir- هانیه غفرانی- آموزش سئو سایت
 

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 ‫کنید‬ ‫کلیک‬ ‫تصویر‬ ‫در‬ ‫شده‬ ‫مشخص‬ ‫آیکون‬ ‫روی‬ ‫بر‬ ‫یا‬ ‫دهید‬ ‫فشار‬ ‫را‬ . ‫شما‬ ‫سایت‬ ‫شود‬‫می‬ ‫ریسپانسیو‬ ‫حالت‬ ‫وارد‬ ‫اینکار‬ ‫با‬ . • ‫سایت‬ ‫تا‬ ،‫کنید‬ ‫انتخاب‬ ‫را‬ ‫خود‬ ‫نظر‬ ‫مورد‬ ‫مدل‬ ،‫بازار‬ ‫مطرح‬ ‫های‬‫تبلت‬ ‫و‬ ‫ها‬‫گوشی‬ ‫بین‬ ‫از‬ ‫توانید‬‫می‬ ‫شما‬ ‫حاال‬ ‫شود‬ ‫داده‬ ‫نمایش‬ ‫خاص‬ ‫مدل‬ ‫این‬ ‫صفحه‬ ‫اندازه‬ ‫در‬ ‫شما‬ . ‫خواهید‬ ‫موضوع‬ ‫متوجه‬ ‫بهتر‬ ،‫زیر‬ ‫تصویر‬ ‫به‬ ‫نگاه‬ ‫با‬ ‫شد‬ .
  • 14.