این آموزش در تاریخ ۱۴۰۱/۰۶/۰۲ آپدیت شده است.
آموزش قدم به قدم واکنش گرایی یا Responsive
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش قدم به قدم واکنش گرایی یا Responsive با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش قدم به قدم واکنش گرایی یا Responsive
خب اصلا یعنی چی این واکنش گرایی یا ریسپانسیو ( یا به انگلیسی Responsive ) ؟ بطور کلی یعنی اینکه سایت ما این قابلیت یا قدرت رو داشته باشه که بتونه روی انواع صفحه نمایش ها ( مثه گوشی های موبایل ، تبلت ها و.. ) بدون هیچ مشکلی نمایش داده بشه.
یعنی مثلا اگه یه عکس داشتیم که اندازش خیلی بزرگ بود، با واکنش گرایی باید کاری کنیم که مثلا اون عکس در گوشی های موبایل اندازش کوچیک ( یا در کل مناسب ) باشه، نکه مثلا عکس از صفحه بزنه بیرون و اینجوری استایل سایت خراب میشه.
Free-Learn
وقتی هنوز واکنش گرایی ایجاد نشده بود
خیلی سال های پیش برخی از گوشی های موبایل حتی امکان اتصال به اینترنت رو هم نداشتن چه برسه به اینکه شما بخوای داخلش وبگردی کنی، بعضی هاشونم که این امکان رو داشتن خب صفحه شون خیلی کوچیک بود و اگه شما باهاش میرفتید تو یه سایت کلا داستانی بود برای خودش.
در نتیجه اونموقع ها اصلا چیزی به اسم واکنش گرایی وجود نداشت، چون اونموقع وبگردی در موبایل اصلا به وجود نیومده بود ، یعنی اگه شما میرفتید داخل یک سایت ، اینورش اونور بود اونورش اینور بود 😃😃 اصلا داستانی بود
در نتیجه اونموقع ها، وقتی میخواستن سایت رو طراحی کنن در یک اندازه ثابت طراحی میشد و فقط هم باید از طریق کامپیوتر واردش میشدیم تا میتونستیم به درستی سایت رو ببینیم.
حالا کمی جلوتر که اومدیم ( یعنی بازم در اصل واکنش گرایی هنوز درست نشده بود ) دیگه میومدن ۲ نسخه مجزا از سایت ایجاد میکردن ، یکی مثلا برای گوشی های موبایل و یکی هم برای کامپیوتر ، اونی که برای موبایل بود دیگه مثلا اندازه ها کوچیکتر بود و… در مجموع کاری میکردن که حداقل عناصر در موبایل به خوبی قابل نمایش باشن.
خب طبیعتا اینکار هزینه زیادی برای مدیر سایت برمیداشت، چون مثه این بود که باید هزینه ۲ طراحی رو میپرداخت، یکی برای موبایل یکی هم برای کامپیوتر و صفحه نمایش های بزرگ.
Free-Learn
وقتی واکنش گرایی تحول در طراحی وب ایجاد کرد
دیگه گذشت اون دوران که گوشی ها اینترنت نداشتن یا اگه داشتن هم نمیشد وبگردی کرد و.. الان دیگه وقتی یه نوزاد میخواد به دنیا بیاد همون قبلش تو شکم مادرش میگه علی یارتون گوشیمو آماده کنید که دارم میام.
بعله الان دیگه درصد استفاده از گوشی های موبایل بیشتر از کامپیوتر و لپ تاپ هستش ( البته طبق این آمار ) در نتیجه الان تو حوزه وب واکنش گرا بودن یک سایت از واجباته. ( واجبه حا )
پس با این وجود شما نمیتونی یک سایت داشته باشی ولی سایتتون واکنش گرا نباشه، چون اگه نباشه طبیعتا تو این حوزه آسیب میبینید و خیلی راحت درصد زیادی از کاربران رو از دست خواهید داد اونم فقط به واسطه واکنش گرا نبودن سایتتون.
Free-Learn
آیا الان سایتی هست که واکنش گرا نباشه؟
آره چرا نباشه، ولی خب نسبت به سال های اخیر تعداد سایت هایی که واکنش گرا نیستند خیلی کمتر شده ولی خب بازم هستن سایت هایی که واکنش گرا نیستن و هنوزم فعالیت میکنند و حتی در دسته سایت های برتر هم هستن.
مثلا سایت ورزش ۳ ( varzesh3.com ) یکی از محبوب ترین سایت های ورزشی هستش ولی متاسفانه صفحه اصلی این سایت واکنش گرا نیست ( صفحه نمایش مطالبش روی موبایل واکنش گرا هستش ولی خوده صفحه اصلی رو موبایل واکنش گرا نیست ) من امیدوارم که هرچه سریعتر تیم برنامه نویسی شون این مسئله رو بررسی و اوکی کنن.
توی حوزه وب ۲تا موضوع خیلی مهم و اصلی وجود داره، یکی رابط کاربری ( یا UI یا User Interface ) و یکی هم تجربه کاربری ( یا UX یا User Experience )
UI یعنی شکل و شمایل یک سایت و UX یعنی تجربه استفاده از اون سایت، مثلا الان واکنش گرا نبودن سایت ورزش ۳ بطور مستقیم روی UX اش تاثیر میزاره. به همین سادگی
Free-Learn
آیا ریسپانسیو نبودن یک سایت به اون سایت ضربه میزنه؟
خب در ادامه آموزش قدم به قدم واکنش گرایی یا Responsive میخوایم ببینیم آیا واکنش گرا بودن یا نبودن یک سایت در سئوی اون سایت تاثیر داره.
ضربه که مثلا بگیم زیر چشش کبود شه خب نه ( خخخ ) ، ولی از نظر سئو و صددرصد از نظر تجربه کاربری یا همون UX بله صددرصد ضربه میزنه، و همین خودش یعنی فروش کمتر یعنی کاربر کمتر یعنی بازدیدکننده کمتر و…
ممکنه خیلی ها باشن که اگه ببینن سایتی واکنش گرا نیست دیگه اصلا نرن داخلش ( مثلا من خودم یکیشم ) واکنش گرا نبودن یه سایت خیلی برام مهمه و روی ذهنیتم در مورد اون سایت تاثیر منفی میزاره.
Free-Learn
آیا واکنش گرایی تاثیری در سئو داره؟
بطور کلی بله تاثیر داره ولی نه در این حدی که مثلا بگیم فلان سایت چون واکنش گرا نیست پس دیگه کلا سئو نداره و بهمان سایت چون واکنش گرا هست پس دیگه سئوش کامله ، نه اصلا اینجوری نیست.
سئو برای خودش یه دنیای داره و خیلی چیزا هستن که تاثیر در سئو دارند ، مثلا سرعت بارگذاری سایت در سئو تاثیر داره ، اینکه سایت شما گواهینامه ssl داشته باشه تاثیر داره و خیلی مسائل دیگه که میتونن تاثیر داشته باشند.
و اینکه واقعا واکنش گرا نبودن یک سایت تو ذوق میزنه و حتی موتورجستجوگری همچون گوگل به شدت از این سایت ها دوری میکنه و سعی میکنه این سایت هارو خیلی کمتر تو نتایج جستجو نمایش بده خب همین یعنی سئو.
ولی در مجموع بدونید سئو ، ساده ترین پیچیدگی در حوزه وب می باشد، و سئو چیزیه که تاحد زیادی قابل پیش بینی نیست ، مثلا ممکنه یه سایت UI و UX خوبی داشته باشه ولی تو نتایج گوگل ظاهر نمیشه ، یا مثلا ممکنه یه سایتی از نظر ظاهر زشت و … باشه تو نتایج ظاهر میشه.
Free-Learn
واکنش گرایی از طریق چه چیزی انجام میشه؟
خیلی راحت و با استفاده از چند تکه کد، نه نرم افزاری میخواد نه چیز آنچنان پیچیده و عجیبی هست، خیلی بیشتر از اون چیزی که فکرشو کنید راحتتره.
یعنی با اضافه کردن یه تکه کد به تگ Head و نوشتن چنتا دستور CSS به راحتی میشه یک صفحه وب رو واکنش گرا کرد.
بطور کلی ۴ قدم اصلی ( اجباری ) و ۳ قدم اختیاری برای طراحی واکنش گرا وجود داره ، اینکه میگم اختیاری منظورم اینه که شما با همون ۴ قدم اجباری هم میتونید واکنش گرایی انجام بدید و قدم های ۵ و ۶ بیشتر حالت کمکی داره و میتونه قدرت شمارو در طراحی واکنش گرا بیشتر کنه.
- قدم اول اضافه کردن متای ViewPort به داخل تگ head ( اجباری )
- قدم دوم واکنش گرا کردن تصاویر و ویدئوها ( اجباری )
- قدم سوم استفاده از دستور Media@ برای ایجاد نقاط شکست در صفحه ( اجباری )
- قدم چهارم طراحی و استفاده از حالت نمایش گرید ( ستون بندی صفحه ) ( اجباری )
- قدم پنجم استفاده از تکنیک فلکس باکس ( اختیاری )
- قدم ششم استفاده از تکنیک گرید ( اختیاری )
- قدم هفتم استفاده از فریم وُرک ( FrameWork ) های آماده مثه بوت استرپ ( اختیاری )
Free-Learn
در ادامه و در بخش های بعدی ( قدم اول تا ششم ) رو بطور کامل آموزش خواهم داد ، و شما به راحتی میتونید طراحی واکنش گرایی صفحات وب رو یاد بگیرید و صفحات وبتون رو واکنش گرا کنید.
قدم هفتم استفاده از فریم ورک بوت استرپ هست، چون بوت استرپ خودش یه سیستم و آموزشش کاملا مجزاست و بهمین دلیل من در این قسمت چیزی در موردش نمیگم تا ایشالا به وقتش که آموزش بوت استرپ در سایت ارسال بشه.
خب دوستان به پایان این بخش ( آموزش قدم به قدم واکنش گرایی یا Responsive ) رسیدیم، لطفا در ادامه و در بخش های بعدی با من همراه باشید.
