یکی از مهم ترین ویژگی هایی که باید در طراحی سایت صنعتی رعایت کرد ، طراحی واکنشگرا یا ریسپانسیو این سایت ها میباشد ، در این مقاله سعی بر آن شده که درباره سایت های صنعتی که با تکنولوژی ریسپانسیو طراحی شده اند بیشتر صحبت شود. در ادامه به چیستی واکنش گرایی ، نحواه ریسپانسیو کردن سایت ها و مزایای آن اشاره میکنیم ؛ با ما همراه باشید.
طراحی واکنش گرا (ریسپانسیو) چیست ؟
سایت هایی که Responsive طراحی شده اند ، در تمامی دستگاه هایی که میتوان با آن ها سایت را مشاهده کرد، به درستی نمایش داده میشوند. این دستگاه ها شامل لپ تاپ ها ، کامپیوتر های شخصی که به Desktop mode شهرت دارند ، انواع تبلت ها که به Tablet mode معروفند و تمامی گوشی های همراه میشوند. بنابراین یک سایت واکنش گرا باید در تمامی گوشی های همراه ، تبلت ها و رایانه های شخصی و قابل حمل به درستی نمایش داده شود و تجربه کاربری خوبی را برای کاربر داشته باشد.
تاریخچه سایت های ریسپانسیو
در اوایل روز های گسترش وبسایت های اینترنتی ، سایت ها برای نمایش در صفحه نمایش رایانه های شخصی طراحی میشدند و بیشتر با عرض های ثابت با تکنولوژی های Table , Div , Grid طراحی و توسعه داده میشدند . همین امر باعث میشد در صورتی که سایت را با استفاده از یک صفحه نمایش کوچک تر ببینیم ، سایت بصورت اسکرولی قابل دسترسی باشد و در سایز های بزرگتر از صفحه نمایش استاندارد ، حاشیه ها و فاصله های خالی در اطراف سایت ایجاد میکرد که ظاهر و کاربری بدی داشتند.
با پیشرفت تکنولوژی و به بازار آمدن انواع گوشی ها هوشمتد و تبلت ها نیاز به سایت های ریسپانسیو با سازگاری اتوماتیک بیشتر به چشم آمد تا بتوان سایت ها را در تمامی دستگاه ها با ظاهری مطلوب و قابل استفاده مشاهده کرد.
شیوه های اولیه برای این نیازمندی ، طراحی جداگانه سایت ها برای گوشی های همراه بود که معمولا در ساب دامنه m.domain.com بارگزاری میشد. اما این روش دارای ایرادات زیادی بود که مهم ترین آن هزینه بالا طراحی و پشتیبانی دو سایت مجزا برای یک هدف واحد بود و تجربه کاربری ضعیفی را نیز به کاربران ارائه میداد.
در سال 2010 ایتان مارکوت در مقاله ای در مجله A List Part ، بینش متحول کننده ای را مطرح کرد و آن را طراحی واکنش گرا وب سایت یا Responsive Web Design نامید ، رویکرد او دارای مبانی مهم بودند و دارای ایده های جذابی بودن که در ادامه به آنها اشاره میکنیم.
هسته اصلی طراحی واکنش گرا مارکوت
گرید های سیال و غیر ثابت (Fluid Grids) : منظور از گرید های سیال استفاده از واحد های نسبی در طراحی سایت بجای واحد های ثابت و غیر قابل تغییر است . برای مثال استفاده از واحد های درصد ، em ، rem و … بجای واحد های CM , PX در مقداردهی عرض باکس ها و چیدمان صفحه .
تصاویر انعطاف پذیر با اندازه متغیر (Flexible Images ) : یکی از مهم ترین پایه های سایت های واکنش گرا استفاده از تصاویر با واحد های نسبی است ، بصورتی که هیچگاه تصاویر از محل خود خارج نشوند و بزرگتر از سایت صفحه نشوند.
دستور های رسانه ای یا کوئری مدیا ها (Media Queries) : باید یک قابلیت جدید در CSS ایجاد میشد ، که بتوان عناصر موجود در صفحه را براساس اندازه عرض صفحه مشخص کند و این ویژگی در CSS تحولی بزرگ در طراحی ریسپانسیو سایت ها ایجاد کرد.
مزایای طراحی واکنش گرا (ریسپانسیو ) سایت های صنعتی
تجربه کاربری عالی و هماهنگ : کاربران سایت ها در تمامی دستگاه هایی که سایت را مشاهده میکنند ، میتوانند با تجربه کاربری خوبی تمامی محتوای سایت شما را مشاهده کنند و بدون مشکلی به تمامی امکانات سایت صنعتی شما دسترسی داشته باشند.همین امر باعث محبوبیت سایت صنعتی شما میشود.
کاهش هزینه های طراحی سایت صنعتی : همانطور که بیان شد پیشتر بری طراحی سایت ها از دونسخه موبایل و دسکتاپ استفاده میشد که هزینه طراحی سایت را دو برابر و نگهداری آن را سخت تر میکرد . با طراحی ریسپانسیو سایت های صنعتی ، این هزینه ها صفر شده و نیازی به طراحی مجدد سایت برای گوشی های همراه نیست.
مدیریت آسان محتوای سایت : طبق گفته های قبلی ، طراحی سایت های مجزا برای دسکتاپ و موبایل علاوه بر هزینه بر بودن ، مشکلاتی هم در بروزرسانی محتوای آن دارد ، برای بروزرسانی محتوا در این گونه سایت ها باید تمامی تغییرات در هردو سایت اعمال میشد ولی با طراحی ریسپانسیو سایت های صنعتی شما با تغییر یکباره در دیتابیس سایت خود میتوانید آن را در تمامی دستگاه ها مشاهده کنید.
چرا سایت های صنعتی باید واکنشگرا باشند؟
با توجه به مواردی که در بالا بیان شد و مزایایی که برای طراحی سایت های صنعتی بصورت واکنش گرا گفته شد ، طراحی واکنش گرای سایت دیگر یک گزینه اضافی در طراحی سایت های صنعتی نمیباشد و به یک ضرورت مهم در طراحی سایت صنعتی تبدیل شده است که باید تمامی شرکت های طراحی سایت در پروژه های خود آن را پیاده سازی کنند.
علاوه بر مزایای بالا ، تقریبا میتوان گفت اکثر رقبای شما در زمینه صنعتی که اقدام به طراحی سایت کرده اند آن را بصورت ریسپانسیو و واگنش گرا سفارش داده اند .بنابراین شما نباید از رقابت در دنیای دیجیتال عقب بمانید.
در ادامه به دو مزیت مهم در طراحی واکنش گرای صنعتی بصورت مفصل اشاره خواهیم کرد.
تاثیر طراحی ریسپانسیو سایت صنعتی در تجربه کاربری (UX)
دسترسی همیشگی مخاطبان : مخاطبین و کاربران سایت های صنعتی در حوزه های مختلف دائما از جلسات مختلف ، نمایشگاه های متفاوت و شرکت ها مختلف در حال حرکتند، ممکن است آن ها نیاز داشته باشند ، تا از طریق موبایل به اطلاعات فنی ، کاتالوگ های محصولات سایت شما دسترسی داشته باشند و یا یخواهند با شما از طریق سایت در ارتباط باشند ، سایت واکنشگرای صنعتی این امکان را میدهد تا کاربران در هر مکان از سایت شما به درستی استفاده کنند.
نمایش داده های بزرگ بصورت بهینه : محتواهای سایت های صنعتی اغلب شامل جداول فنی ، نمودارها و تصاویر با کیفیت بالا هستند ، طراحی واکنش گرا سایت های صنعتی ، امکان نمایش این محتوا های پیچیده را بصورت بهینه فراهم میکند ، تا بتوان از امکانات سایت های صنعتی به راحتی بهره برد.
افزایش نرخ تبدیل یا Conversion rate : در سایت های صنعتی که واکنشگرا هستند ، میتوان با ایجاد فرم های تماس که براحتی در موبایل بتوان آن ها را پر کرد ، شانس بیشتری برای دریافت لید یا مشتریان احتمالی وجود دارد ، همچنین میتوان بصورت مستقیم با ایجاد دکمه هایی برای تماس مستقیم ، ارتباط در اینستاگرام ، واتساپ و … تماس را برای کاربران راحت تر کرد.
تاثیر ریسپانسیو کردن بر سئو سایت های صنعتی
Mobile-First Indexing یا اولویت داشتن موبایل در ایندکس : گوگل در سال 2015 اعلام کرد که برای ایندکس کردن صفحات سایت شما ، نسخه موبایل صفحات سایت شما را ایندکس میکند و در رتبه بندی مبنا را نسخه موبایل شما قرار می دهد . بنابراین هر اندازه سایت صنعتی شما Mobile-Friendly یا ریسپانسیو تر باشد ، میتواند در سئو سایت صنعتی شما موثر باشد.
کاهش نرخ پرش یا Bounce Rate : نرخ پرش یا بانس ریت به مدت زمانی که کاربران شما در سایت صنعتی شما قراردارند ، مرتبط است ، بنابراین اگر سایت صنعتی شما بصورت ریسپانسیو طراحی نشده باشد کاربرانی که با استفاده از گوشی های همراه وارد سایت صنعتی شما میشوند ، بلافاصله از آن خارج میشوند که این مساله تاثیر بدی در بانس ریت صفحات شما در نتیجه سئو سایت صنعتی شما دارد.
ارتقا سئو محلی سایت صنعتی : سئو محلی به این معناست که شما سایت صنعتی خود را برای شهر محل زندگی خود سئو کنید برای مثال اگر شما یک سایت صنعتی در زمینه فروش آچار و ابزارآلات صنعتی دارید ، میتوانید سایت خود را در کلمات کلیدی فروش آچار فرانسه در کرج سئو کنید ، ریسپانسیو بودن سایت صنعتی یکی از مولفه هایی است که در رتبه بندی سئو های محله در زمینه صنایع مهم و حائز اهمیت است.
نحوه ریسپانیسو کردن سایت های صنعتی
پیاده سازی سایت صنعتی واکنش گرا با المنتور
المنتور به عنوان یک صفحه ساز قدرتمند وردپرس ، دارای امکانات ویژه ای در ریسپانسیو کردن صفحات شما در سایت صنعتی دارد ، برای مشاهده تمامی امکاناتی که در المنتور برای سایت های صنعتی وجود دارد به صفحه طراحی سایت صنعتی با المنتور مراجعه کنید.
مراحل ریسپانسیو کردن سایت های صنعتی با استفاده از المنتور
در اینجا یک مثال عملی در طراحی صفحه درباره کارخانه در طراحی سایت های صنعتی با استفاده از المنتور با هم پیش میبریم.
در ابتدا بهتر است صفحه درباره کارخانه و درباره ما را در سایت صنعتی خود برای نمایش (Viewport) در دسکتاپ طراحی کنید . پس از طراحی تمامی قسمت های صفحه درباره کارخانه از قبیل سخن مدیرعامل کارخانه، چرا کارخانه ما و … در بالای صفحه طراحی المنتور ، آیکن های تبلت و موبایل را برای طراحی صفحه کارخانه با ابزار های المنتور کلیک کنید . با کلیک بر روی هر گزینه میتوانید صفحه خود را مختص آن دستگاه ریسپانسیو کنید.
اگر برروی هر عنصر یا المنتی در صفحه درباره کارخانه کلیک کنید در سمت راست تنظیمات مربوط به ریسپانسیو کردن آن صفجه را مشاهده میکنید . برای مثال برای ریسپانسیو کردن اندازه فونت عنوان صفحه درباره کارخانه به بخش فونت این عنصر میرویم و در آنجا آیکن کوچکی شبیه موبایل یا تبلت وجود دارد که این بدان معناست که این تعقیرات فقط برای دستگاه موبایل یا تبلت انجام میشود پس از تغییر اندازه فونت مناسب در این دستگاه ها دکمه انتشار یا ذخیره سازی را بزنید تا تفییرات انجام شده برروی صفحه درباره کارخانه اعمال شود.
لازم به ذکر است که شما میتوانید اکثر ویژگی های المنت ها یا عناصر صفحاتی را که با المنتور ایجاد کرده اید را به این شیوه ریسپانسیو کنید . برای مثال مارجین ، پدینگ ، اندازه فونت ، اندازه باکس ها و …
در بعضی موارد پیچیده بهتر است یک عنصر در گوشی های موبایل نمایش داده نشود که شما میتوانید از گزینه Responsive قسمت تنظیمات المنتور ، عناصری را که در دسکتاپ نمایش داده میشود را در موبایل Hide یا مخفی کنید.
در نهایت بهتر است بعد از هر تغییری صفحه مورد نظر را که در اینجا صفحه درباره مارخانه است را تست و ارزیابی کنید تا از ریسپانسیو بودن این صفحه مطمئن شوید.
پیاده سازی سایت صنعتی واکنش گرا با CSS
در بیشتر موارد ، سایت های صنعتی با استفاده از CSS استایل دهی میشود ، برای مثال سایت های صنعتی که بصورت اختصاصی در وردپرس کدنویسی شده اند ، یا سایت های صنعتی که با لارول طراحی شده اند بهترین مثال از این نوع سایت ها میباشد.
در اینصورت روش های زیر را برای ریسپانسیو کردن سایت های صنعتی خود بکار برید.
ریسپانسیو کردن سایت با استفاده از CSS و Media Queries : یکی از پایه ترین روش های ریسپانسیو کردن سایت های صنعتی استفاده از دستور عمل های آن در استایل دهی CSS با استفاده از مدیا کوئری ها میباشد. شما میتوانید با این روش ، در هر عرضی از صفحه که نمایش داده میشود المان ها را ریسپانسیو کنید . برای مثال اگر در طراحی صفحه ی درباره کارخانه بخواهید صفحه خود را برای گوشی های همراه با عرض کمتر از 768 پیکسل ، واکنش گرا بکنید ؛ میتوانید از روش زیر استفاده کنید
css
/* استایل پیشفرض (رویکرد Mobile-First) */
.container {
width: 100%;
padding: 10px;
}
/* برای تبلت */
@media (max-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* برای دسکتاپ */
@media (min-width: 1024px) {
.container {
width: 980px;
}
}استفاده از فریم ورک های آماده CSS : امروزه فریم ورک ها زیادی در زمینه CSS و HTML و JS وجود دارد که معروفترین این فریم ورک ها کتابخانه Bootstrap و Tailwind CSS است که با آموزش این فریم ورک ها میتوانید صفحات ریسپانسیو را با استفاده از کلاس هایی در HTML پیاده سازی کنید . برای مثال میتوانید در صفحه درباره کارخانه با افزودن کلاس col-md-6 به باکس ابتدایی صفحه ، این باکس را ریسپانسیو کنید. معمولا این فریم ورک ها صفحه را به 12 قسمت مساوی تقسیم میکنند که col-md-6 یعتی باکس ابتدایی صفحه درباره کارخانه در عرض های متوسط نصف صفحه را اشغال کنند.
