چهارشنبه, ۰۲ آبان ۱۳۹۷ ۱۶:۲۵ ۱۸۹
طبقه بندی: فناوری وب و پورتال
چچ
طراحی وب سایت واکنش گرا (Responsive) یا طراحی نسخه موبایل و تبلت؟

طراحی وب سایت واکنش گرا (Responsive) یا طراحی نسخه موبایل و تبلت؟

1393/09/19

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

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

با توجه به مسائل فوق، نمایش اطلاعات مفید و کاربردی در کمترین حجم ممکن، با رابط کاربری که نیاز به بزرگنمایی نداشته باشد و با صفحات نمایش لمسی درست کار بکند تبدیل به یک الزام شده است. از این رو سازمان ها و ارائه کنندگان محتوا در فضای اینترنت از سه امکان برای پاسخ به این نیاز بهره می برند. این راه کارها، نقاط ضعف و قوتی دارند که در ادامه به صورت خلاصه به آنها اشاره شده است:
تولید برنامه کاربردی اختصاصی موبایلی.
در مواردی، سازمانها و صاحبان وب سایت ها ترجیح دارند به صورت اختصاصی، برنامه کاربردی موبایلی (موبایل اپلیکیشن) تولید نمایند. با توجه به اینکه قبلا ضریب نفوذ اینترنت روی گجت های موبایل و تبلت پایین بود و از طرفی مرورگرهای وب آنها نیز پیشرفته نشده بودند، با طراحی موبایل اپلیکیشن اختصاصی، این الزامات پاسخ داده می شد. این برنامه ها به راحتی روی دستگاه های لمسی کار می کنند و برای استفاده از اطلاعاتی که روی آنها بارگذاری می شود، نیاز به اینترنت ندارند. اطلاعات تکمیلی و اصلاحی را در زمان هایی که کاربر به اینترنت متصل شود با حجم کم دریافت می کنند. این روش مزایای خوبی دارد اما، علاوه بر اینکه احتمال استفاده از اطلاعات قدیمی برای کاربران به دلیل عدم بروز رسانی وجود دارد، برای سیستم عاملهای مختلف این دستگاه ها و نسخه های مختلف آنها می بایست چند نوع نرم افزار تولید کرد که هزینه تولید، نگهداری و مسیر بروز آوری آنها را زیاد می کند. از طرفی کاربران این دستگاه ها معمولا خیلی راحت (به دلیل محدودیت فضای ذخیره سازی) این برنامه ها را از روی دستگاه شان پاک می کنند ولی مشکل اساسی این است که اطلاعات داخل این برنامه ها جستجو پذیر نیز نیستند. خود برنامه ها نیز برای تسهیل رویه بروزآوری، نیازمند ثبت در اپ استورها هستند. با این دلایل، امروزه استفاده از این روش کمتر معمول است.
تولید نسخه وب اختصاصی برای موبایل و تبلت.
برای نمایش یک سایت در موبایل، می توان طراحی و برنامه نویسی اختصاصی نیز انجام ‌داد. در این روش، برنامه تحت وب با استفاده از پارامترهای اولین درخواست (HTTP Request) دریافتی، نوع دستگاه مورد استفاده کاربر را تشخیص داده و در این حالت یا محتوای موبایل را در همان آدرس به او نشان می‌دهد و یا او را به آدرس صفحات مخصوص موبایل هدایت می نماید. در این روش می بایست به تفکیک انواع دستگاه قابل تشخیص، صفحه و محتوا آماده نمود اما انعطاف پذیری بالایی در اختصاصی نمودن محتوا ارائه می نماید. همچنین فقط بخش هایی که لازم است برای آنها طراحی مجدد صورت می گیرد. یکی از مشکلات این روش عدم تشخیص درست برخی از دستگاه های جدید عرضه شده به بازار است.
طراحی به صورت وب سایت واکنش گرا ( Responsive Web Design ).
در طراحی سایت واکنش گرا که ترجمه Responsive Web Design است، پیاده سازی لایه نمایش صفحات وب به روشی انجام می گیرد که به صورت شناور نسبت به تغییر اندازه و همچنین تغییر رزولوشن (تعداد پیکسل) یا جهت صفحه نمایش دستگاه های مختلف مانند تبلت، موبایل، لپ تاپ و ... از خود واکنش نشان داده و با جابجایی بلاک ها و تغییر سایز متن ها باعث می شود اطلاعات متناسب عرض صفحه نمایش تنظیم شود. برای این منظور طراح از خاصیت Media در تگ Link با توجه به جهت و سایز صفحه نمایش، فایل CSS مربوطه را بارگذاری می نماید.امکانات CSS3 Media Queries و رویه طراحی شناور این امکان را برای طراح فراهم می کند که وب سایت را بدون نیاز به نسخه های متفاوت، برای نمایش صحیح روی دستگاه ها و رزولوشن های مختلف پیاده سازی نماید. لازم به ذکر است برای ساخت نمای گرافیکی وب سایت به صورت واکنش گرا، می توان از فریم ورک های آماده مثل توییتر بوت استرپ (Bootstrap) نیز استفاده نمود.
با اینکه طراحی وب سایت واکنش گرا رویکرد مناسبی است و نسبت به تغییر دستگاه کاربران واکنش می دهد، اما هنوز ارائه محتوای اختصاصی آماده شده برای کاربران این دستگاه ها را ممکن نمی سازد (پیاده سازی آن سخت است). در خیلی از مواقع چیدمان و محتوای ویژه این کاربرد ها می بایست متفاوت باشد.
توجه: متاسفانه در خیلی از موارد صرفا ویژگی واکنش گرایی مدنظر قرار می گیرد در حالی که طراحی انجام شده می بایست با صفحات لمسی خازنی در تعاض نباشد. به عنوان مثال، منوهای باز شونده بودن کلیک و فقط با حرکت ماوس مناسب نیستند.
راهکار واکنش گرایی صفحات و نسخه موبایلی در پورتال سامان
در اجرای پروژه های پورتال مبتنی بر پورتال سامان گرچه روش سوم قابل استفاده است اما راهکار ویژه یی که ترکیب روش دو و سه به صورت توام است نیز امکان پذیر است. از آنجا که تاکسونومی محتوا در کل پورتال یکجا مدیریت می شود برای هر گره از ساختار دسته بندی ارائه محتوا، می توان طراحی قالب مجزا برای انواع دستگاه ها داشت. این مسئله با طراحی نمای گرافیکی واکنش گرا در ابزار طراحی تم (TDK) در تعارض نمی باشد. نمونه این طراحی را در پورتال سازمان هواشناسی کشور www.irimo.ir می توانید مشاهده نمایید. اگر دقت نمایید روش ارائه محتوا برای ایستگاه های هواشناسی و جاده ها برای ابزارهای لمسی، واکنش گرا و متفاوت است.

نویسنده: فرامرز کلانتری (رئیس هیئت مدیره)
اجازه انتشار: قید نشده
نوع: تالیف