مفهوم اصلی از طراحی ریسپانسیو ، پیاده سازی یک وب سایت به صورت نمایش آسان، بدون در نظر گرفتن ابزار و صفحه نمایش آن است.
در چند سال اخیر، رشد عظیمی در دسترسی کاربران به وب سایت ها، از طریق وسایل سیار مانند تلفن های هوشمند و تبلت ها به وجود آمده است. این ابزارها عموما صفحه نمایش کوچکتری نسبت به لپ تاپ ها و دسکتاب ها دارند، همچنین وب سایت های مرسوم برای خواندن مطالب، نیازمند به بالا پایین کردن زیاد و بزرگنمایی دارند. این مساله، ما را به روش های جدیدی برای ساختن وب سایت های سازگار با موبایل هدایت می کند. این در نهایت مفهوم اصلی responsive web design است.
آماده کردن متن به صورتی خودکار که با ابعاد صفحه نمایش تطبیق پیدا کند،از وظایف وب سایت های ریسپانسیو است.
وب سایت های ریسپانسیو به دنبال تحقق گزینه های زیرهستند:
ایجاد دسترسی آسان به بخش های منو- مشخص کردن جای کلیدها و کلیک کردن راحت بر آن
در ابزارات خیلی کوچک، منو ممکن است به پایین صفحه حرکت کند، که هنگامی که به آن کلیک می کنیم تمام منو به نمایش در می آید.
برای نمایش بخش عظیمی از مطلب، بزرگ نمایی را حذف می کند.
کوچک کردن و حذف کردن حرکت افقی
متن باید بدون نیاز به بزرگنمایی، خوانا و واضح باشد.
تصاویر به صورت خودکار، با عرض صفحه نمایش تطبیق پیدا کرده و از عرض آن تجاوز نمی کند.
در صورت امکان با کاهش وضوح تصویر، به کاهش پهنای باند و افزایش سرعت نمایش کمک می کند.
مطالب content block به صورت انباشته در آمده تا به اندازه ی ابعاد صفحه نمایش درآید.
مطالب کلیدی در موقعیت بالاتری قرار گرفته و مطالب کم اهمیت تر حتی ممکن است در ابزارات کوچک تر پنهان شوند.
اغلب مواقع Media queries برای تعیین کردن مشخصه های نمایش مرورگر استفاده می شود و بعد از آن گونه های مختلف وب سایت بر اساس آن مشخصه ها تغییر می کنند.
مهم ترین اصل که باید در نظر گرفته شود، عرض صفحه نمایش است- چه تعداد پیکسل در عرض صفحه می تواند به نمایش درآید؟
برای حذف بزرگنمایی و کوچک نمایی یا حرکت بالا و پایین صفحه، مطالب نباید از عرض نمایش مرورگر تجاوز کند.
آیفون های شرکت اپل بسیار محبوب هستند و با و جود اینکه پیکسل های صفحه در آخرین مدل آن دو برابر شده است –تعداد پیکسل های موثر در عرض صفحه نمایش آیفون که برای نمایش پرتره به کار می رود، 320 پیکسل است- در طراحی ریسپانسیو هر متنی که از 320پیکسل تجاوز کند، نیاز به تغییر سایز برای جلوگیری از خارج شدن از عرض صفحه دارد. بنابراین اگر مطلب شما 4 بسته ی 300 پیکسلی است که به صورت افقی در صفحه نمایش قرار دارد( که به عرض 1280 پیکسل است) شما باید آن 4 بسته مطلب را به صورت عمودی در آیفون نمایش دهید.
اکثر طراحی های ریسپانسیو نیاز به شبکه ها و بلاک های مطالب دارند تا بتوانند نمایش را به اندازه مناسب تغییر دهند.
مهمترین نکته ها برای درک وب سایت هایی که از طراحی وب ریسپانسیو استفاده میکنند، به شرح زیر است:
طراحی به اندازه ی عرض صفحه نمایش در می آید.
گونه های کوچک همانند گونه های بزرگ نیستند، هر چه صفحه نمایش کوچکتر باشد، مطلب نیاز به تغییر مکان بیشتر دارد.
به همان مقدار که حرکت افقی صفحه کمتر می شود، حرکت دادن عمودی بر اساس حجم مطلب، بیشتر می شود.
صفحه نمایش بزرگتر بهتر از صفحه نمایش کوچکتر است.
طراحی ریسپانسیو حرکت دادن صفحه و همین طور بزرگ و کوچک کردن آن را حذف کرده است، در صورتی که در صفحات non-responsive نیاز به این گونه کارها برای نمایش وجود داشت.
متن ممکن است به صورت بسته هایی از مطالب، برای تغییر مکان و اندازه در بیاید. متن باید همیشه به صورت خوانا و واضح باشد.
عموما گرافیک های همراه با متن باید حذف شوند. چون ممکن است وقتی که صفحه را برای وسایل کوچک تر، کوچک کنیم، نتوانیم که متن را در اندازه ی خوانا نگه داریم.
برای تولید طراحی ریسپانسیو نیاز به وقت، دانش و تجربه ی بیشتر است.
اگر شما می خواهید که با وب سایت های ریسپانسیو کار کنید، ما یعنی گروه طراحی سایت دارکوب اینجاییم تا به شما کمک کنیم.