طراحي سايت واكنش‌گرا

طراحي سايت واكنش‌گرا : صنعت طراحي وب، هميشه حركت ثابتي دارد. طراحي وب، به طور مداوم در مورد اختراع فناوري‌هاي جديد و ابزار توسعه يافته است.

مقدمه

دليل اصلي در يك تغيير طراحي دائمي، ظهور طيف وسيعي از دستگاه‌هاي موبايل جديد، تبلت‌ها و تلويزيون‌ها با دسترسي به اينترنت است. تزريق فناوري‌هاي وب جديد، مانند HTML5 و  CSS3نيز مهم است. طراحي وب در ايجاد يك وب‌سايت موثر، نقش حياتي ايفا مي‌كند.

هر كاري در زمينه هنر، با انتخاب بوم آغاز مي‌شود. يك نقاش يا هنرمند، از يك ورق كاغذ يا پارچه استفاده مي‌كند. يك مجسمه ساز، يك تكه سنگ را انتخاب مي‌كند. صرف نظر از آنچه يك هنرمند مي‌خواهد به عنوان اولين اقدام خلاقانه خود انجام دهد، ابتدا بايد بوم را انتخاب كند. حتي قبل از اولين ضربه قلم‌ مو، پارامترها و شكل، عرض و ارتفاع كار آينده، مرزهاي آن را تعريف مي‌كند.

طراحان وب تلاش مي‌كنند كه اين فرآيند را دنبال كنند. ما يك «بوم» را با عرض، ارتفاع و پارامترهاي مشخص، ايجاد مي‌كنيم. با اين حال، تفاوت قابل توجهي بين مجسمه سازان و طراحان وب وجود دارد. ما در فاصله زيادي از كاربر و پنجره مرورگر وب با همه ناهماهنگي و كاستي‌هاي خاص آن قرار داريم. بياييد با حقيقت رو به رو شويم: زماني كه پروژه به صورت آنلاين موجود است، همه چيز بستگي به فردي دارد كه به آن نگاه مي‌كند. از فونت انتخاب شده گرفته تا نمايشگر رنگ، شكل و اندازه پنجره مرورگر.

در مواجهه با چنين عدم قطعيت و انعطاف پذيري، شروع به تنظيم محدوديت‌ها مي‌كنيم: تنظيم اندازه فونت بر حسب نقطه يا ايجاد نمايه با عرض ثابت، با توجه به حداقل وضوح صفحه نمايش. تنظيم چنين محدوديت‌هايي، كمي شبيه انتخاب يك بوم است. اين محدوديت‌ها، پارامترهاي زيادي را براي پروژه‌هاي آتي ايجاد مي‌كنند.

با اين حال، در وب گسترده جهاني، يك نكته خوب و در عين حال بد وجود دارد. اين شامل پارامترهايي مي‌شود كه ما در پروژه‌هاي خود تنظيم كرده‌ايم: آنها به راحتي توسط مرورگر‌‌ها از بين مي‌روند. اگر عرض مرورگر وب‌سايت، كمي كمتر از عرض حداقل مورد انتظار باشد، كاربر با اين حقيقت مواجه خواهد شد كه بخشي از محتواي وب‌سايت از بين خواهد رفت يا كاربر مجبور خواهد شد كه از پيمايش افقي براي مشاهده آن استفاده كند. كاربران مي‌توانند به سادگي از ناحيه بازديد دور شوند كه در نتيجه باعث هدر رفتن زمان كاربر براي پيدا كردن راه بازگشت و حذف قابليت استفاده مي‌شود.

طراحي سايت واكنش‌گرا

سازندگان وب‌سايت از طراحي وب‌سايت جداگانه براي هر دستگاه شروع كردند تا از چنين رفتاري در نمايه جلوگيري كنند و بازديدكنندگان هنگامي كه در وب‌سايت‌ها مي‌گردند، احساس راحتي كنند. ولي اين رويكرد زمان و هزينه‌بر است. به همين دليل است كه به جاي ايجاد يك طرح جداگانه براي هر دستگاه يا مرورگر جديد، ما مي‌توانيم با آنها به عنوان نمونه‌اي متفاوت از همان طراحي رفتاركنيم. به عبارت ديگر، ما بايد وب‌سايت‌هايي را ايجاد كنيم كه نه تنها انعطاف پذيرتر هستند، بلكه با صفحه نمايش دستگاه هم سازگار مي‌باشند. نام اين رويكرد، طراحي وب واكنشگرا (RWD) است. ما مي‌توانيم از انعطاف‌پذيري وب بدون رها كردن كنترل جريان نمايه استفاده كنيم. تنها كاري كه بايد براي اجراي اين تكنولوژي انجام دهيم، پيروي از استانداردهاي وب و تغيير نگرش خود نسبت به طراحي وب است.

به طوركلي، طراحي وب واكنشگرا شامل بخش‌هاي زير است: نمايه واكنشگرا با حاشيه‌هاي انعطاف‌پذير، جستارهاي رسانه‌اي و رسانه‌هاي انعطاف‌پذير.

تغييرات نمايه

طرح صفحه وب‌سايت، بخش بزرگي از يك مطالعه طراحي وب است كه جزء گرافيكي طراحي وب‌سايت مي‌باشد و نظم و ترتيب اجزاي روي صفحه وب را تعيين مي‌كند. صفحه‌بندي نه تنها موقعيت اجزا را در شبكه، بلكه UX را نيز در برمي‌گيرد. اين حقيقت انتخاب نوع نمايه را بخش بسيار مهمي از فرآيند طراحي رابط كاربر (UI) مي‌سازد. مشكل اصلي اين است كه نمايه را نه تنها براي كاربران مناسب، بلكه زيبا و جذاب مي‌سازد.

جدول ۱. آماروضوح (تفكيك پذيري) صفحه نمايش ۲۰۱۵

وضوح صفحه مشخص مي‌كند كه آيا محتوا روي صفحه صحيح و به طوركامل قرار داده خواهد شد يا خير. ۷۶۸×۱۰۲۴ چند سال است كه جايگاه خود را از دست داده است. اين حقيقت كه پنجره جستجوگر، بخشي از محتوا را كاهش مي‌دهد يا نوار اسكرول افقي هنگامي ظاهر مي‌شود كه وضوح صفحه كمتر از پهناي باند وب‌سايت است، غيرقابل قبول مي‌باشد.

به منظور بهبود قابليت استفاده، طراحان وب شروع به ابداع روش‌هاي مختلفي نموده‌اند تا وب‌سايت‌ها در هر دستگاهي با هر وضوحي، خوب به نظر برسند. در اينجا خلاصه‌اي از تغييرات نمايه، به ترتيب زماني و با محبوبيت آنها آورده شده است.

نمايه ثابت

نمايه ثابت يا ساكن (ايستا)، يك نمايه صفحه است كه در آن عرض محتوا به طوركامل بر حسب نقطه تنظيم مي‌شود و بسته به اندازه پنجره مرورگر، تغيير نمي‌كند. اين نمايه ثابت، يادگار گذشته مي‌باشد، زماني كه عرض صفحات به شدت به وسيله وضوح صفحه نمايش داده مي‌شد: ۸۰۰ x۶۰۰، ۱۰۲۴ x۷۶۸ و غيره. امروزه پيدا كردن وب‌سايت‌هايي با عرض نمايه ثابت ۹۶۰ پيكسل بسيار ساده است.

نمايه سيال (انعطاف پذير)

در نمايه سيال، عرض متن به علت استفاده از اجزاي ساختاري تنظيم شده در شاخص‌هاي مرتبط، به هر اندازه از پنجره مرورگر بستگي دارد، به عنوان مثال در مقياس درصد به جاي پيكسل ثابت. اين نوع نمايه، تنها يك نوع از دستگاه‌ها را در نظر مي‌گيرد و به اين موضوع اهميت نمي‌دهد كه محتوا چگونه در صفحات بزرگ يا كوچك ظاهرخواهد شد.

نمايه تطابق پذير

نمايه انطباقي به نوع طرح واكنشگرا بسيار نزديك است. اين امر مبتني بر استفاده از جستا‌ر‌هاي رسانه‌اي CSS براي تطبيق محتوا به صفحات نمايش و تنظيمات مختلف است. جستارهاي رسانه‌اي، بخشي از مشخصه  CSS3هستند كه به روشن شدن وسعت انتخابگر CSS كمك مي‌كنند. اين يك واحد پارامتر مشخص دستگاه خروجي مانند: نوع، عرض و ارتفاع پنجره مرورگر، رزولوشن (وضوح) و جهت‌گيري روي بوم است. تفاوت اصلي بين انواع انطباقي و واكنشگرا، اين است كه در نمايه تطبيقي صفحه “jumps” هر بار در نقاط كنترل، تغيير و تطبيق مي‌يابد. يعني، رسانه‌ها از محتوا براي توصيف موقعيت‌هاي ثابت براي هر كدام از نقاط كنترل درخواست مي‌كنند. در نتيجه، مجموعه‌اي از نمايه‌هاي ثابت چندگانه براي وضوح‌هاي مختلف صفحه داريم.

نمايه تركيبي (چندگانه)

هيچ دليلي براي انكار اين حقيقت وجود ندارد كه راه‌حل‌هاي ديگري براي ايجاد طرح‌هاي وب‌سايت وجود دارد. تطبيق صفحه بندي براي دستگاه‌هاي مختلف مي‌تواند چيزي بين نمايه انطباقي و واكنشگرا باشد. اين وضعيت اغلب به عنوان تلاشي براي بهينه سازي سايت موجود براي انواع مختلف دستگاه‌ها رخ مي‌دهد. هيچ اصول خاصي براي نمايه تركيبي وجود ندارد، به همين دليل است كه هيچ دليلي وجود ندارد كه آن را به عنوان يك نوع كامل از يك رويكرد طراحي نمايه در نظر بگيريم.

نتيجه‌گيري

ما بيشتر گزينه‌هاي نمايه وب‌سايت را شرح داده‌ايم. اما همه آنها كاستي‌هاي فراواني دارند. اين حقيقت روش جديدي را براي ايجاد نمايه‌هاي وب‌سايت و طراحي وب، به طور كلي ايجاد كرده است. پس براي ايجاد يك نمايه وب واكنشگرا به چه چيزي نياز است؟ اگر در مورد توسعه نمايه صفحه بحث كنيم، ما به سه جزء اصلي نياز داريم:

* نمايه مبتني بر شبكه انعطاف پذير

* تصاوير انعطاف پذير

* جستار‌هاي رسانه‌اي