تقریبا اواخر سال 2010 میلادی بود که زمزمه ی طراحی واکنشگرا به گوش همه ی طراحان وبسایت رسیده و این بحث درحال اوج گرفتن بود.
اما واقعا طراحی واکنشگرا چیست؟
شما یک وبسایت را در نظر بگیرید که باید در دستگاهای مختلف با اندازه های مختلف نمایش داده شود.
قطعا شکل یک وبسایت داخل یک مانیتور 26 اینچی نمیتواند همسان با شکل همان وبسایت در یک گوشی 6 اینچی باشد پس تنها چیزی که در این وحله به داد طراحان وبسایت میرسد طراحی واکنشگرا است.
بحث طراحی واکنشگرا تقریبا 3 سال زمان نیاز داشت تا به یک دغدغه تبدیل شود که اواسط سال 2013 میلادی به اوج خود رسید.
طراحی وب واکنشگرا یا ریسپانسیو (responsive web design) یک روش طراحی وب است که هدف آن نمایش مطلوب صفحه در طیف گسترده ای از دستگاه ها از تلفن های همراه تا نمایشگر کامپیوتر های رومیزی است.
یک وبسایت واکنشگرا دارای تصاویر منعطف و مدیا کوئری های متعدد و سازگار با اکثر نسخه های مرورگر ها است.
مزایای طراحی واکنشگرا
در صورت منعطف بودن وبسایت شما کاربران زیادی با دستگاهای مختلف جویای وبسایت شما میشوند و ترافیک وبسایت بالا میرود در نتیجه رتبه بندی وبسایت شما در صفحات گوگل یا به عبارتی سئو وبسایت بالاتر میرود.
از طرفی وبسایت شما بهینه تر عمل کرده و کار با آن از طریق دستگاهای مختلف ، آسان یا به عبارتی میتوان گفت user friendly است.
رویکرد mobile first
بگذارید با یک مثال مزیت این رویکرد را توضیح بدهم.
فرض کنید یک مقدار ثابت وسایل باید داخل یک اتاق 30 متری چیده شود. حال اگر شما طراحی چینش وسایل داخل اتاق 30 متری را انجام بدهید ؛ انتقال آن مقدار ثابت وسایل داخل یک اتاق بزرگتر و طراحی و چینش آن راحت تر است.
عبارت mobile first دقیقا به همین موضوع اشاره میکند که هنگام طراحی یک وبسایت ، بهتر است اولویت طراحی برای موبایل باشد که کوچکترین وسیله برای رفتن به یک وبسایت است. حال که برای موبایل طراحی انجام شد ؛ انتقال آن المان ها به یک صفحه ی بزرگتر مثل تبلت ها یا مانیتور راحت تر است.
css پیشرفته
بعد از گذشت مدت ها و استفاده از مدیا کوئری برای طراحی وبسایت های واکنشگرا ابزار های پیشرفته تری جهت استایل دهی و همچنین طراحی واکنشگرا ، به جمع طراحان وبسایت پیوستند.
از جمله این ابزار ها میتوان به پیش پردازنده های css مانند Sass , Less و همچنین به فریم وورک های css از جمله Bootstrap , TailwindCss , Material UI و... اشاره کرد.
همچنین در نسخه آخر css ابزار هایی مانند FlexBox وGrid Layout کار طراحان را جهت طراحی واکنشگرا راحت تر کرد.
جهت آشنایی بیشتر با نحوه ریسپانسیو کردن فریم وورک پر استفاده ی Bootstrap ، میتوان گفت که بر اساس سیستم Grid Layout کل صفحه ی وبسایت ما را به 12 ستون تقسیم کرده و بر اساس یک استاندارد ثابت میتوان وبسایت را در اندازه های مختلف از جمله : موبایل ، تبلت ، لپ تاپ و ... طراحی کرد.
معیار مهم گوگل
با توجه به افزایش روز افزون استفاده از موبایل و تبلت، گوگل معیاری را به تازگی مورد بررسی قرار داده که اگر سایتی این مورد را رعایت کند، به سادگی میتواند جایگاه بهتری را در جستجوهای گوگل پیدا کند. نام این معیار ریسپانسیو است.
هدف اصلی گوگل این است که سایت‌هایی را در جایگاه بهتری نمایش دهد که کاربر پسندتر باشد و محتوا به گونه ای باشد که آنچه را که مخاطب به دنبال آن میگردد را به راحتی برای او نمایش دهد. اگر سایت مورد نظر یک سایت واکنش گرا یا Responsive نباشد، کار با سایت شما برای افراد مختلف راحت نخواهد بود. به همین دلیل یک امیتاز مهم از دیدگاه گوگل که ریسپانسیو بودن سایت‌تان است را از دست خواهید داد.
در نتیجه میتوان گفت اگر میخواهید یکی از امتیازات مهم را در سایت خود دریافت کنید، حتما باید به طراحی وب واکنش گرا یا ریسپانسیو مسلط باشید.
کاهش هزینه
در عصر گذشته زمانی که اقدام به طراحی سایت می نمودیم بایستی هزینه زیادی پرداخت میکردیم، به این طریق که هزینه ای را به طور جداگانه صرف طراحی سایت می کردند و همچنین از طرفی هزینه ای هم برای سایتی دیگر برای ورژن موبایل، طراحی مینمودند. در نتیجه هزینه ها برای طراحی سایت بسیار بالا بوده و زمان زیادی را شامل میشد. اما الان این هزینۀ اضافی حذف شده است.
بررسی حالت واکنشگرایی
اگر قصد دارید دقیق به بررسی سایت خود بپردازید و آن را در سایزهای دقیق بررسی کنید، یک روش حرفه‌ای برای شما وجود دارد. سایت خود را باز کنید و کلیدهای Ctrl+Shift+I را فشار دهید، یا اینکه بر روی سایت خود کلیک راست کرده و گزینه inspect را انتخاب کنید. حالا دکمه‌های Ctrl+Shift+M را فشار دهید ؛ سایت شما با اینکار وارد حالت ریسپانسیو می‌شود.
اما اکنون میتوانیم از بین گوشی‌ها و تبلت‌های مطرح بازار، مدل مورد نظر خود را انتخاب کنیم، تا سایت شما در اندازه صفحه این مدل خاص نمایش داده شود.
تقریبا اواخر سال 2010 میلادی بود که زمزمه ی طراحی واکنشگرا به گوش همه ی طراحان وبسایت رسیده و این بحث درحال اوج گرفتن بود.
اما واقعا طراحی واکنشگرا چیست؟
شما یک وبسایت را در نظر بگیرید که باید در دستگاهای مختلف با اندازه های مختلف نمایش داده شود.
قطعا شکل یک وبسایت داخل یک مانیتور 26 اینچی نمیتواند همسان با شکل همان وبسایت در یک گوشی 6 اینچی باشد پس تنها چیزی که در این وحله به داد طراحان وبسایت میرسد طراحی واکنشگرا است.
بحث طراحی واکنشگرا تقریبا 3 سال زمان نیاز داشت تا به یک دغدغه تبدیل شود که اواسط سال 2013 میلادی به اوج خود رسید.
طراحی وب واکنشگرا یا ریسپانسیو (responsive web design) یک روش طراحی وب است که هدف آن نمایش مطلوب صفحه در طیف گسترده ای از دستگاه ها از تلفن های همراه تا نمایشگر کامپیوتر های رومیزی است.
یک وبسایت واکنشگرا دارای تصاویر منعطف و مدیا کوئری های متعدد و سازگار با اکثر نسخه های مرورگر ها است.
مزایای طراحی واکنشگرا
در صورت منعطف بودن وبسایت شما کاربران زیادی با دستگاهای مختلف جویای وبسایت شما میشوند و ترافیک وبسایت بالا میرود در نتیجه رتبه بندی وبسایت شما در صفحات گوگل یا به عبارتی سئو وبسایت بالاتر میرود.
از طرفی وبسایت شما بهینه تر عمل کرده و کار با آن از طریق دستگاهای مختلف ، آسان یا به عبارتی میتوان گفت user friendly است.
رویکرد mobile first
بگذارید با یک مثال مزیت این رویکرد را توضیح بدهم.
فرض کنید یک مقدار ثابت وسایل باید داخل یک اتاق 30 متری چیده شود. حال اگر شما طراحی چینش وسایل داخل اتاق 30 متری را انجام بدهید ؛ انتقال آن مقدار ثابت وسایل داخل یک اتاق بزرگتر و طراحی و چینش آن راحت تر است.
عبارت mobile first دقیقا به همین موضوع اشاره میکند که هنگام طراحی یک وبسایت ، بهتر است اولویت طراحی برای موبایل باشد که کوچکترین وسیله برای رفتن به یک وبسایت است. حال که برای موبایل طراحی انجام شد ؛ انتقال آن المان ها به یک صفحه ی بزرگتر مثل تبلت ها یا مانیتور راحت تر است.
css پیشرفته
بعد از گذشت مدت ها و استفاده از مدیا کوئری برای طراحی وبسایت های واکنشگرا ابزار های پیشرفته تری جهت استایل دهی و همچنین طراحی واکنشگرا ، به جمع طراحان وبسایت پیوستند.
از جمله این ابزار ها میتوان به پیش پردازنده های css مانند Sass , Less و همچنین به فریم وورک های css از جمله Bootstrap , TailwindCss , Material UI و... اشاره کرد.
همچنین در نسخه آخر css ابزار هایی مانند FlexBox وGrid Layout کار طراحان را جهت طراحی واکنشگرا راحت تر کرد.
جهت آشنایی بیشتر با نحوه ریسپانسیو کردن فریم وورک پر استفاده ی Bootstrap ، میتوان گفت که بر اساس سیستم Grid Layout کل صفحه ی وبسایت ما را به 12 ستون تقسیم کرده و بر اساس یک استاندارد ثابت میتوان وبسایت را در اندازه های مختلف از جمله : موبایل ، تبلت ، لپ تاپ و ... طراحی کرد.
معیار مهم گوگل
با توجه به افزایش روز افزون استفاده از موبایل و تبلت، گوگل معیاری را به تازگی مورد بررسی قرار داده که اگر سایتی این مورد را رعایت کند، به سادگی میتواند جایگاه بهتری را در جستجوهای گوگل پیدا کند. نام این معیار ریسپانسیو است.
هدف اصلی گوگل این است که سایت‌هایی را در جایگاه بهتری نمایش دهد که کاربر پسندتر باشد و محتوا به گونه ای باشد که آنچه را که مخاطب به دنبال آن میگردد را به راحتی برای او نمایش دهد. اگر سایت مورد نظر یک سایت واکنش گرا یا Responsive نباشد، کار با سایت شما برای افراد مختلف راحت نخواهد بود. به همین دلیل یک امیتاز مهم از دیدگاه گوگل که ریسپانسیو بودن سایت‌تان است را از دست خواهید داد.
در نتیجه میتوان گفت اگر میخواهید یکی از امتیازات مهم را در سایت خود دریافت کنید، حتما باید به طراحی وب واکنش گرا یا ریسپانسیو مسلط باشید.
کاهش هزینه
در عصر گذشته زمانی که اقدام به طراحی سایت می نمودیم بایستی هزینه زیادی پرداخت میکردیم، به این طریق که هزینه ای را به طور جداگانه صرف طراحی سایت می کردند و همچنین از طرفی هزینه ای هم برای سایتی دیگر برای ورژن موبایل، طراحی مینمودند. در نتیجه هزینه ها برای طراحی سایت بسیار بالا بوده و زمان زیادی را شامل میشد. اما الان این هزینۀ اضافی حذف شده است.
بررسی حالت واکنشگرایی
اگر قصد دارید دقیق به بررسی سایت خود بپردازید و آن را در سایزهای دقیق بررسی کنید، یک روش حرفه‌ای برای شما وجود دارد. سایت خود را باز کنید و کلیدهای Ctrl+Shift+I را فشار دهید، یا اینکه بر روی سایت خود کلیک راست کرده و گزینه inspect را انتخاب کنید. حالا دکمه‌های Ctrl+Shift+M را فشار دهید ؛ سایت شما با اینکار وارد حالت ریسپانسیو می‌شود.
اما اکنون میتوانیم از بین گوشی‌ها و تبلت‌های مطرح بازار، مدل مورد نظر خود را انتخاب کنیم، تا سایت شما در اندازه صفحه این مدل خاص نمایش داده شود.