طراحی سایت واکنشگرا : صنعت طراحی وب، همیشه حرکت ثابتی دارد. طراحی وب، به طور مداوم در مورد اختراع فناوری‌های جدید و ابزار توسعه یافته است.
مقدمه
طراحی سایت واکنشگرا : دلیل اصلی در یک تغییر طراحی دائمی، ظهور طیف وسیعی از دستگاه‌های موبایل جدید، تبلت‌ها و تلویزیون‌ها با دسترسی به اینترنت است. تزریق فناوری‌های وب جدید، مانند HTML5 و CSS3نیز مهم است. طراحی وب در ایجاد یک وب‌سایت موثر، نقش حیاتی ایفا می‌کند.
هر کاری در زمینه هنر، با انتخاب بوم آغاز می‌شود. یک نقاش یا هنرمند، از یک ورق کاغذ یا پارچه استفاده می‌کند. یک مجسمه ساز، یک تکه سنگ را انتخاب می‌کند. صرف نظر از آنچه یک هنرمند می‌خواهد به عنوان اولین اقدام خلاقانه خود انجام دهد، ابتدا باید بوم را انتخاب کند. حتی قبل از اولین ضربه قلم مو، پارامترها و شکل، عرض و ارتفاع کار آینده، مرزهای آن را تعریف می‌کند.
طراحان وب تلاش می‌کنند که این فرآیند را دنبال کنند. ما یک «بوم» را با عرض، ارتفاع و پارامترهای مشخص، ایجاد می‌کنیم. با این حال، تفاوت قابل توجهی بین مجسمه سازان و طراحان وب وجود دارد. ما در فاصله زیادی از کاربر و پنجره مرورگر وب با همه ناهماهنگی و کاستی‌های خاص آن قرار داریم. بیایید با حقیقت رو به رو شویم: زمانی که پروژه به صورت آنلاین موجود است، همه چیز بستگی به فردی دارد که به آن نگاه می‌کند. از فونت انتخاب شده گرفته تا نمایشگر رنگ، شکل و اندازه پنجره مرورگر.
در مواجهه با چنین عدم قطعیت و انعطاف پذیری، شروع به تنظیم محدودیت‌ها می‌کنیم: تنظیم اندازه فونت بر حسب نقطه یا ایجاد نمایه با عرض ثابت، با توجه به حداقل وضوح صفحه نمایش. تنظیم چنین محدودیت‌هایی، کمی شبیه انتخاب یک بوم است. این محدودیت‌ها، پارامترهای زیادی را برای پروژه‌های آتی ایجاد می‌کنند.
با این حال، در وب گسترده جهانی، یک نکته خوب و در عین حال بد وجود دارد. این شامل پارامترهایی می‌شود که ما در پروژه‌های خود تنظیم کرده‌ایم: آنها به راحتی توسط مرورگر‌‌ها از بین می‌روند. اگر عرض مرورگر وب‌سایت، کمی کمتر از عرض حداقل مورد انتظار باشد، کاربر با این حقیقت مواجه خواهد شد که بخشی از محتوای وب‌سایت از بین خواهد رفت یا کاربر مجبور خواهد شد که از پیمایش افقی برای مشاهده آن استفاده کند. کاربران می‌توانند به سادگی از ناحیه بازدید دور شوند که در نتیجه باعث هدر رفتن زمان کاربر برای پیدا کردن راه بازگشت و حذف قابلیت استفاده می‌شود.
طراحی سایت واکنشگرا
سازندگان وب‌سایت از طراحی وب‌سایت جداگانه برای هر دستگاه شروع کردند تا از چنین رفتاری در نمایه جلوگیری کنند و بازدیدکنندگان هنگامی که در وب‌سایت‌ها می‌گردند، احساس راحتی کنند. ولی این رویکرد زمان و هزینه‌بر است. به همین دلیل است که به جای ایجاد یک طرح جداگانه برای هر دستگاه یا مرورگر جدید، ما می‌توانیم با آنها به عنوان نمونه‌ای متفاوت از همان طراحی رفتارکنیم.
به عبارت دیگر، ما باید وب‌سایت‌هایی را ایجاد کنیم که نه تنها انعطاف پذیرتر هستند، بلکه با صفحه نمایش دستگاه هم سازگار می‌باشند. نام این رویکرد، طراحی وب واکنشگرا (RWD) است. ما می‌توانیم از انعطاف‌پذیری وب بدون رها کردن کنترل جریان نمایه استفاده کنیم. تنها کاری که باید برای اجرای این تکنولوژی انجام دهیم، پیروی از استانداردهای وب و تغییر نگرش خود نسبت به طراحی وب است.
به طورکلی، طراحی وب واکنشگرا شامل بخش‌های زیر است: نمایه واکنشگرا با حاشیه‌های انعطاف‌پذیر، جستارهای رسانه‌ای و رسانه‌های انعطاف‌پذیر.
تغییرات نمایه
طرح صفحه وب‌سایت، بخش بزرگی از یک مطالعه طراحی وب است که جزء گرافیکی طراحی وب‌سایت می‌باشد و نظم و ترتیب اجزای روی صفحه وب را تعیین می‌کند. صفحه‌بندی نه تنها موقعیت اجزا را در شبکه، بلکه UX را نیز در برمی‌گیرد. این حقیقت انتخاب نوع نمایه را بخش بسیار مهمی از فرآیند طراحی رابط کاربر (UI) می‌سازد. مشکل اصلی این است که نمایه را نه تنها برای کاربران مناسب، بلکه زیبا و جذاب می‌سازد.
| % | وضوح (تفکیک پذیری) | |
| ۱۹٫۵۹%۱۳٫۲۵%
۱۱٫۹۲% |
۱۳۶۶×۷۶۸ HD۱۹۲۰×۱۰۸۰ ۱۶:۹ HD 1080
۱۰۲۴×۷۶۸ ۴:۳ XVGA |
۱۲
۳ |
| ۶٫۸۷% | ۱۲۸۰×۱۰۲۴ ۵:۴ SXGA | ۴ |
| ۵٫۰۴%۴٫۸۶%
۴٫۷۱% |
۱۴۴۰×۹۰۰ ۸:۵ WSXGA۱۶۰۰×۹۰۰ ۱۶:۹ HD+ 900p
۱۲۸۰×۸۰۰ ۸:۵ WXGA |
۵۶
۷ |
| ۳٫۴۵% | ۱۶۸۰×۱۰۵۰ ۸:۵ WSXGA+ | ۸ |
| ۳٫۰۲%۱٫۸۸% | ۳۶۰×۶۴۰۷۶۸×۱۰۲۴ | ۹۱۰ |
جدول ۱. آماروضوح (تفکیک پذیری) صفحه نمایش ۲۰۱۵
وضوح صفحه مشخص می‌کند که آیا محتوا روی صفحه صحیح و به طورکامل قرار داده خواهد شد یا خیر. ۷۶۸×۱۰۲۴ چند سال است که جایگاه خود را از دست داده است. این حقیقت که پنجره جستجوگر، بخشی از محتوا را کاهش می‌دهد یا نوار اسکرول افقی هنگامی ظاهر می‌شود که وضوح صفحه کمتر از پهنای باند وب‌سایت است، غیرقابل قبول می‌باشد.
به منظور بهبود قابلیت استفاده، طراحان وب شروع به ابداع روش‌های مختلفی نموده‌اند تا وب‌سایت‌ها در هر دستگاهی با هر وضوحی، خوب به نظر برسند. در اینجا خلاصه‌ای از تغییرات نمایه، به ترتیب زمانی و با محبوبیت آنها آورده شده است.
نمایه ثابت
نمایه ثابت یا ساکن (ایستا)، یک نمایه صفحه است که در آن عرض محتوا به طورکامل بر حسب نقطه تنظیم می‌شود و بسته به اندازه پنجره مرورگر، تغییر نمی‌کند. این نمایه ثابت، یادگار گذشته می‌باشد، زمانی که عرض صفحات به شدت به وسیله وضوح صفحه نمایش داده می‌شد: ۸۰۰ x۶۰۰، ۱۰۲۴ x۷۶۸ و غیره. امروزه پیدا کردن وب‌سایت‌هایی با عرض نمایه ثابت ۹۶۰ پیکسل بسیار ساده است.
نمایه سیال (انعطاف پذیر)
در نمایه سیال، عرض متن به علت استفاده از اجزای ساختاری تنظیم شده در شاخص‌های مرتبط، به هر اندازه از پنجره مرورگر بستگی دارد، به عنوان مثال در مقیاس درصد به جای پیکسل ثابت. این نوع نمایه، تنها یک نوع از دستگاه‌ها را در نظر می‌گیرد و به این موضوع اهمیت نمی‌دهد که محتوا چگونه در صفحات بزرگ یا کوچک ظاهرخواهد شد.
نمایه تطابق پذیر
نمایه انطباقی به نوع طرح واکنشگرا بسیار نزدیک است. این امر مبتنی بر استفاده از جستارهای رسانه‌ای CSS برای تطبیق محتوا به صفحات نمایش و تنظیمات مختلف است. جستارهای رسانه‌ای، بخشی از مشخصه CSS3هستند که به روشن شدن وسعت انتخابگر CSS کمک می‌کنند. این یک واحد پارامتر مشخص دستگاه خروجی مانند: نوع، عرض و ارتفاع پنجره مرورگر، رزولوشن (وضوح) و جهت‌گیری روی بوم است. تفاوت اصلی بین انواع انطباقی و واکنشگرا، این است که در نمایه تطبیقی صفحه “jumps” هر بار در نقاط کنترل، تغییر و تطبیق می‌یابد. یعنی، رسانه‌ها از محتوا برای توصیف موقعیت‌های ثابت برای هر کدام از نقاط کنترل درخواست می‌کنند. در نتیجه، مجموعه‌ای از نمایه‌های ثابت چندگانه برای وضوح‌های مختلف صفحه داریم.
نمایه ترکیبی (چندگانه)
طراحی سایت واکنشگرا : هیچ دلیلی برای انکار این حقیقت وجود ندارد که راه‌حل‌های دیگری برای ایجاد طرح‌های وب‌سایت وجود دارد. تطبیق صفحه بندی برای دستگاه‌های مختلف می‌تواند چیزی بین نمایه انطباقی و واکنشگرا باشد. این وضعیت اغلب به عنوان تلاشی برای بهینه سازی سایت موجود برای انواع مختلف دستگاه‌ها رخ می‌دهد. هیچ اصول خاصی برای نمایه ترکیبی وجود ندارد، به همین دلیل است که هیچ دلیلی وجود ندارد که آن را به عنوان یک نوع کامل از یک رویکرد طراحی نمایه در نظر بگیریم.
نتیجه‌گیری
ما بیشتر گزینه‌های نمایه وب‌سایت را شرح داده‌ایم. اما همه آنها کاستی‌های فراوانی دارند. این حقیقت روش جدیدی را برای ایجاد نمایه‌های وب‌سایت و طراحی وب، به طور کلی ایجاد کرده است. پس برای ایجاد یک نمایه وب واکنشگرا به چه چیزی نیاز است؟ اگر در مورد توسعه نمایه صفحه بحث کنیم، ما به سه جزء اصلی نیاز داریم:
* نمایه مبتنی بر شبکه انعطاف پذیر
* تصاویر انعطاف پذیر
* جستارهای رسانه‌ای
