طراحی سایت پایدار

طراحی سایت ریسپانسیو یا واکنش گرا چیست

طراحی سایت ریسپانسیو

طراحی سایت ریسپانسیو  که همچنین به طراحی سایت واکنش گرا نیز معروف است به وب سایتی می گویند که طراحی آن به گونه ای باشد که در تمامی دیوایس ها و سایز های مختلف صفحه نمایش در حد قابل قبولی سایت را به نمایش بگذارد تا کاربر بازدید کننده وب سایت بتواند از حداکثر امکانات موجود در سایت استفاده نماید. این مسئه کاملا به نوع طراحی سایت بر میگردد و طراح وب سایت باید با در نظر گرفتن این مسائل یک وب سایت مناسب را طراحی کند.

وب سایت معروف w3schools طراحی سایت ریسپانسیو یا طراحی واکنش گرا را این گونه تعریف کرده است: طراحی سایت ریسپانسیو عملیاتی است که با زبان های برنامه نویسی HTML و CSS انجام می شود تا اجزای صفحه بصورت خودکار تغییر سایز، مخفی، کوچک یا بزرگ شوند تا در تمامی دستگاه ها به خوبی دیده شوند (دسکتاپ، تبلت و موبایل).

در چند سال گذشته کاربران تلفن های هوشمند و تبلت ها انقدر رشد قابل ملاحظه ای داشتند که مطابق با آمار ها نشان می دهد بیش از هفتاد درصد صفحات وب از طریق دیوایس های موبایلی باز می شوند. هر چند که این آمار برای کسب و کار های مختلف کمی متفاوت است بعنوان مثال در مورد طراحی سایت شرکتی شاید در قیاس با طراحی سایت های فروشگاهی این آمار کمتر باشد و مخاطبان سایت هایی مثل شرکت پتروشیمی با دستگاه های سنتی و کامپیوتر دسکتاپ بیشتر از موبایل باشند. اما در کل میانگین را در نظر می گیریم و روشن است که طراحی سایت ریسپانسیو اهمیت فوق العاده دارد و روز به روز بیشتر خم خواهد شد.

انواع طراحی سایت واکنشگرا

در گذشته که تمامی دستگاه ها سایز صفحات نمایش مشابهی داشتند و نیازی برای مباحث طراحی سایت ریسپانسیو نبود، رفته رفته که تلفن های همراه به صحنه آمدند در صفحه نمایش کوچکشان بازدهی مناسبی نداشتند و کاربران مجبور به بزرگنمایی می شدند و در حالت صد در صد همه چیز ریز و کوچک بود و به سختی می توانستند وبگردی کنند.

کم کم طراحان سایت به فکر افتاند که ظاهری متفاوت برای موبایل ها طراحی کنند و طراحی سایت را در دو نسخه مجزا انجام بدهند. این روش نیز معایبی داشت که از همه مهمتر حجم کار طراحی سایت را نزدیک به دو برابر می کرد.

پس در نظر داشته باشید که طراحی سایت موبایلی با طراحی سایت واکنش گرا متفاوت است، در طراحی سایت مخصوص موبایل، سایت به صورتی طراحی می گردد که وقتی در موبایل یا تلفن های هوشمند سایت را باز کردید کاملا طراحی متفاوتی را داشته باشید. در این روش حتی می تواند کاملا طراحی ویژه موبایل با طراحی سایت ویژه دسکتاپ متفاوت باشد و هر کدام از المان ها و چیدمان متفاوتی برخوردار باشند.

اما در طراحی ریسپانسیو همان طراحی را خواهیم داشت در حدی که چیدمان آن ها متفاوت باشد، ممکن است برخی از عناصر در موبایل کامل مخفی باشد و در صفحه قابل مشاهده نباشند. برخی دیگر مثلا بصورت زیر هم نمایش داده شوند که در نسخه دسکتاپ در کنار هم قرار داشته اند و موارد دیگری مانند رنگ ها و تصاویر هم می توانند در صفحه های مختلف تفکیک شوند و متفاوت باشند.

طراحی سایت ریسپانسیو

همیشه در پی نیاز کاربران متد های جدیدی برای راحتی بیشتر ایجاد می شود، این موضوع هم برای تولید کنندگان و هم برای مصرف کنندگان شامل می شود. اینجا بود که طراحی سایت واکنش گرا یا ریسپانسیو در پی این مشکلات مطرح شد. به صورتی که طراحی سایت فقط یکبار انجام می شود ولی به گونه ای که با استفاده از همان طراحی اولیه سایت برای سایز های مختلف صفحه نمایش استفاده می شود به شکلی که مثلا آیتم های موجود در وب سایت، در یک صفحه نمایش با عرض تصویر بیشتر از ۸۰۰  پیکسل به گونه ای به نمایش گذاشته شود که مطابق با آن سایز بهترین تصویر و کارایی را فراهم نماید.

همین سناریو می تواند برای صفحه نمایش هایی با عرض بیشتر از ۴۰۰ پیکسل نیز طراحی گردد. در این صورت بین سایز های ۴۰۰ تا ۸۰۰ پیکسل سایت به صورت مورد نظر طراح به نمایش گذاشته می شود و بالاتر از ۸۰۰ پیکسل نیز جور دیگری سایت مشاهده می شود. برای تمامی سایز ها می بایست این پیش بینی ها انجام شود و مرحله مرحله کد های مربوطه نوشته شود و به اصطلاح نحوه نمایش را برای سایز های مختلف محدود کرد.

اگر کاربری یک سایتی بسیار خاص باشد، شرکت طراحی سایت می تواند برای بسیاری از صفحات مختلف این طراحی را متناسب کند و بر روی تک تک دیوایس ها تنظیم نماید حتی با اختلاف های کوچک، مثلا هر ۱۰۰ پیکسل که صفحه بزرگتر شود یک پیش بینی در نظر گرفته شود تا نهایتا برای مانیتور های رزولیشن بالا مانند ۱۹۲۰ پیکسل تنظیمات انجام گردد و برنامه نویسی شود.

ابعاد استاندارد در طراحی سایت ریسپانسیو
ابعاد استاندارد در طراحی سایت ریسپانسیو

معمولا برای هر وب سایت سه مدل طراحی پیش بینی می شود، طراحی سایت مناسب برای موبایل، طراحی سایت مناسب برای تبلت ها و طراحی وب سایت برای نسخه دسکتاپ یا کامپیوتر های رومیزی
برای مشاهده انواع مختلف در نظر گرفته می شود.

همانطور که در تصویر بالا مشاهده می فرمائید معمولا طراحی سایت برای صفحه نمایش های با عرض بالاتر از ۱۰۲۴ پیکسل که مناسب برای لپتاپ و دسکتاپ خواهند بود، برای ابعاد عرض تصویر ۷۶۸ پیکسل تا ۱۰۲۳ پیکسل که معمولا متناسب با تبلت ها و گاهی کاربرانی که عادت به استفاده از مرورگرشان در پنجره کوچک تر هستند و در آخر هم برای غرض های ۲۳۰px تا ۷۶۷px که در اسمارت فون ها و دیوایس های کوچک مورد استفاده و کاربرد قرار و طراحی ریسپانسیو انجام می گیرد.

تست ریسپانسیو بودن

در طراحی سایت ریسپانسیو یا واکنشگرا می توانید صفحه مرورگر خود را از حالت تمام صفحه maximize خارج کنید و عرض پنجره را کوچک کنید تا طراحی انجام شده برای نسخه تبلت و موبایل را مشاهده نمائید. در مرورگر های استاندارد مثل گوگل کروم و موزیلا فایرفاکس، اگر همزمان در حالت inspect element نیز باشید می توانید دقیقا عرض پنجره به پیکسل را مشاهده نمائید و تست کنید که واکنش گرا بودن سایت در چه ابعاد تصویری چه واکنشی نشان می دهد. هرچه عرض صفحه را کوچک تر کنید تا حدود ۳۰۰ پیکسل به حالت موبایلی نزدیک تر می شوید. ممکن است حالاتی مختلفی در نظر گرفته شده باشد یا فقط برای سه حالت استاندارد طراحی سایت واکنش گرا انجام شده باشد.

در تصاویر زیر که از نمونه طراحی سایت شرکت حسابداری اسکرین شات گرفته شده است می توانید این تست ریسپانسیو بودن یا تست واکنش گرا بودن سایت را ملاحظه بفرمائید. در ۲ تصویر اول بالای صفحه اصلی سایت و یک صفحه محتوایی را مشاهده می کنید که دقیقا همان تصاویر در پنجره مرورگر با عرض کم تر عکس برداری شده است. می توان به وضوح دید که اجزا و المان های صفحه در حالت نمایش موبایل متفاوت از حالت نمایش دسکتاپ می باشند.

در تصویر اول می توانید منوی سایت را ببینید که در حالت موبایل وجود ندارد و یک آیکون همبرگر (سه خط روی هم) جاگزین آن شده است که در صورت کلیک بر روی آن همان منو در حالت عمودی باز می شود. و در تصویر دوم با عنوان “از کجا باید شروع کنیم” یک شمای گرافیکی میبینید بصورت افقی مراحل خرید و استفاده از محصول حسابداری را می بینید که در حالت ریسپانسیو موبایلی این مراحل بصورت عمودی در آمده اند و خبری از ظاهر دسکتاپی آن نیست.

نمونه طراحی سایت ریسپانسیو
نمونه طراحی سایت ریسپانسیو
نمونه طراحی سایت واکنش گرا
نمونه طراحی سایت واکنش گرا
نمونه طراحی سایت واکنش گرا
نمونه طراحی سایت واکنش گرا
نمونه طراحی سایت ریسپانسیو
نمونه طراحی سایت ریسپانسیو

سفارش طراحی سایت ریسپانسیو

ابتدا متشکریم از اینکه تا انتهای مقاله طراحی سایت ریسپانسیو یا واکنشگرا چیست با ما همراه بودید. در صورتی که سوالی برایتان پیش آمده است که پاسخش را در متن مقاله پیدا نکردید در بخش نظرات می توانید با ما در میان بگذارید تا حتما در اولین فرصت پاسخ دهیم و همچنین ما را از نظرات و پیشنهادات ارزشمندتان بی بهره نگذارید.

اگر قصد طراحی سایت دارید و وب سایت ریسپانسیو مناسبی نیاز دارید تا بتواند به بهترین نحو ممکن و شایسته خودتان خدمات و محصولاتتان را به نمایش بگذارد می توانید روی ما حساب کنید. شرکت طراحی سایت پایدار آماده ارائه هر گونه مشاوره در حوزه طراحی وب سایت و سامانه های تحت وب پذیرای شماست، با ما تماس بگیرید.

این مطلب را به اشتراک بگذارید:

پایدار سامانه

ارائه دهنده خدمات طراحی سایت، طراحی فروشگاه اینترنتی، بهینه سازی سایت و سئو، سامانه های تحت وب، توسعه و تولید نرم افزار، پورتال و اتوماسیون و نرم افزارهای مالی و حسابداری

اضافه کردن نظر