طراحی وب ریسپانسیو چیست و آیا به وب سایت ریسپانسیو نیاز دارم؟

طراحی وب ریسپانسیو چیست و آیا به وب سایت ریسپانسیو نیاز دارم؟

چرا طراحی وب ریسپانسیو بسیار مهم است؟ خوب برای درک کامل نیاز داریم چند سال به عقب برگردانیم تا تکامل اینترنت را درک کنیم.

وب در سال ۱۹۸۹ به عنوان زاییده فکر تیم برنرز لی متولد شد، زمانی که او اولین وب سایتی را راه اندازی کرد تا به دیگران کمک کند چگونه اطلاعات را در سراسر جهان به اشتراک بگذارند. اولین سایت و آنهایی که مدت کوتاهی پس از آن منتشر شدند، فقط متن و پیوند بودند، بنابراین برای مدتی طولانی هیچ مشکلی در طراحی ظاهر نشد.

چند سالی پیش رفت و وب‌سایت‌ها توسط بسیاری از برندهای پیشرو جهانی پذیرفته شدند. این را با تولد رسانه‌های اجتماعی در سال ۱۹۹۷ با راه‌اندازی Six Degrees ترکیب کنید، و آشکار بود که مخاطبان آنلاین جدیدی در حال تکامل هستند. این بدان معناست که همه کسب‌وکارها باید به نوعی حضور آنلاین داشته باشند تا توجه همه این مشتریان بالقوه جدید را جلب کنند. با بهبود سرعت اینترنت و دور شدن از مودم های شماره گیری به اتصالات اینترنت پهن باند اختصاصی، رایانه های خانگی رایج شدند. این دستگاه‌های «PC» معمولاً دارای صفحه‌نمایش در حدود ۱۵ اینچ و وضوح ۸۰۰×۶۰۰ بودند که معیاری برای اندازه اکثر وب‌سایت‌های اولیه است.

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

راه حل اولیه ایجاد یک نسخه موبایل از یک وب سایت در یک زیر دامنه متفاوت بود به عنوان مثال. mobile.yourdomain.com یا در یک دامنه کاملاً متفاوت به عنوان مثال. yourdomain.mobi. اینها تا آنجا که به تجربه کاربر مربوط می شد راه حل های خوبی بودند اما کار نگهداری وب سایت را دوچندان کردند. همانطور که بهینه سازی موتورهای جستجو اهمیت فزاینده ای پیدا می کند، به زودی مشخص شد که داشتن دو وب سایت مجزا باعث کاهش رتبه صفحه شما می شود، زیرا بازدیدها و لینک ها در چندین URL پخش می شوند.

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

طراحی وب سایت تطبیقی

از آنجایی که مرورگرهای وب به بهبود و اتخاذ پیشرفت‌های جدید در روش‌های چیدمان صفحه وب با استفاده از CSS (سبک شیت‌های آبشاری) ادامه دادند، طراحی صفحات با «پرس و جو رسانه» به گونه‌ای امکان پذیر شد که چیدمان محتوا بسته به موارد خاص قابل تغییر باشد. عرض دستگاه در حال مشاهده صفحه این بدان معنی است که اکنون می توان یک وب سایت واحد ایجاد کرد که با عرض پیکسل های خاص سازگار شود. ما می‌توانیم یک طرح‌بندی برای دسک‌تاپ‌های سنتی داشته باشیم، مثلاً عرض بیش از ۹۰۰ پیکسل (پیکسل) یا هر اندازه که عرض ثابت اصلی سایت باشد، و سپس یک «نقطه شکست» جدید تعیین کنیم که به موجب آن طرح‌بندی صفحه به عرض ثابت باریک‌تری تغییر می‌کند. سپس محتوای کوچکترین دستگاه بعدی، مثلاً یک رایانه لوحی را در حالت عمودی (عمودی) نشان می دهد. iPad بسیار محبوب شد و بنابراین عرض پرتره ۷۶۸ پیکسلی آن به نشانگر نقطه شکست بعدی تبدیل شد. دستگاه‌هایی با صفحه‌نمایش کوچک‌تر از این می‌توانند طرح‌بندی با عرض ثابت حتی باریک‌تری را ببینند. شاید کمتر از ۴۰۰ پیکسل، صفحه منحصراً برای استفاده از تلفن همراه تنظیم شود.

این اصل طراحی تطبیقی ​​است. مجموعه‌ای از طرح‌های با عرض ثابت که می‌توان روی یک صفحه اعمال کرد و بنابراین نیاز به ارائه محتوای یکسان در چندین دامنه را از بین می‌برد. این یک راه حل عالی بود، اما کامل نبود و اغلب با جانشین آن، طراحی وب واکنش گرا اشتباه گرفته می شود.

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

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

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

صفحه را به عرض کمتر از ۸۵۰ پیکسل ببرید – نقطه شکست ساختگی ما – تا تغییر را مشاهده کنید.

۱) – اگر سه ستون متن، که هر کدام ۳۳ درصد از عرض موجود را حفظ می‌کنند، برای خواندن خیلی باریک می‌شدند، می‌توانیم کاری کنیم که هر ستون تمام عرض (۱۰۰٪) صفحه را بپوشاند.

۲) – گزینه دیگر می تواند این باشد که ستون اول با اطلاعات مهم تر تمام عرض صفحه (۱۰۰%) را پوشش دهد و دو ستون باقیمانده ۵۰٪ هر ردیف زیر را اشغال کنند. سپس، هنگامی که عرض صفحه بیشتر کاهش می یابد، همه اینها می توانند به ردیف های عرض کامل تبدیل شوند.