مطالب و مقالات

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

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

شما نیاز دارید به نمایش سایت به دو صورت دارید: یکی برای تلفن‌های همراه، دیگری برای رایانه‌های رومیزی. بااین‌حال، در سال 2020 ما نمی‌توانیم متعهد شویم که از هر دستگاه و فنّاوری جدید به همین صورت پشتیبانی کنیم، زیرا هرسال شاهد ابعاد و اندازه‌های صفحه‌نمایش جدید هستیم. ساخت صفحات جدا برای هراندازه صفحه‌نمایش زمان‌بر، هزینه‌بر و گران است. بنابراین، چگونه کارآفرینان می‌توانند از این سرنوشت اجتناب کنند و با موفقیت به قلمروهای در حال تغییر سریع وسعت دیجیتال برخورد کنند؟

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

طراحی سایت ریسپانسیو چیست؟

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

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

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

البته طراحی واکنش گرا معایبی نیز دارد. به‌عنوان‌مثال: به‌طور کامل بهینه نشده است. می‌تواند عملکرد را کاهش دهد. ممکن است از ناسازگاری مرورگر وب رنج ببرد. اجرای کمپین‌های تبلیغاتی را چالش‌برانگیز می‌کند. ارائه چیزهای مختلف به کاربران مختلف بسته به دستگاه مورداستفاده چالش‌برانگیز است.

اگر هنوز به طراحی واکنشگرای وب شک دارید، به ما اجازه دهید علت اهمیت آن را دریابیم.

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

ظهور طراحی واکنش گرا با ظهور دستگاه‌های تلفن همراه، تبلت ها و دستگاه‌های هوشمند مانند کیندل، کنسول‌های بازی و غیره ارتباط زیادی دارد. کاربر امروزی انتظار دارد که بتواند به هر وب سایتی با طیف وسیعی از دستگاه‌ها دسترسی داشته باشد. وب سایت شما باید برای مقابله با هر سناریویی آماده باشد. شما نمی‌توانید این خواسته‌ها را نادیده بگیرید زیرا اعداد دروغ نمی‌گویند: طبق مطالعات اخیر، بیش از 80 درصد از کاربران در سال 2019 با استفاده از دستگاه‌های تلفن همراه از طریق اینترنت گشت‌وگذار می‌کنند. بیش از 60٪ از بازدیدهای گوگل از طریق یک دستگاه تلفن همراه انجام می‌شود. دستگاه‌های تلفن همراه بیش از 50 درصد از ترافیک وب سایت در سراسر جهان را تشکیل می‌دهند. برند شما نمی‌تواند این تمایل را نادیده بگیرد. اگر نتوانید با تطبیق سریع با واقعیت جدید این انتظارات و تقاضاهای رو به رشد را برآورده کنید، محکوم‌به شکست هستید و نام تجاری شما محکوم‌به انقراض است.

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

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

 طبق آمار، مردم بیشتر احتمال دارد یک کسب‌وکار را با یک وب سایت موبایلی که به‌خوبی طراحی‌شده است، توصیه کنند. با ارائه یک تجربه ثابت و ارزش‌گذاری در محل، مشتریان بالقوه را مدت بیشتری در وب سایت شما نگه می‌دارد.

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

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

 محبوب‌ترین ویژگی‌های CSS که به تحقق طراحی وب واکنش‌گرا کمک می‌کنند، viewport و پرس‌وجوهای رسانه هستند.

 ویژگی‌های کلیدی طراحی وب سایت واکنش

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

 اجازه دهید آنها را از نزدیک در نظر بگیریم تا نقش آنها را بهتر درک کنیم، چرا آنها بسیار حیاتی هستند و چگونه آنها را زنده کنیم.

طرح‌بندی انعطاف‌پذیر

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

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

تصاویر انعطاف پذیر

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

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

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

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

 استفاده از حداکثر عرض CSS : روش دوم توسط Ethan Marcotte پیشنهاد شد و در اوایل دهه 2010 به گرمی توسط جامعه پذیرفته شد. از حداکثر عرض CSS نهایت استفاده را می‌برد. ایده پشت این کار این است که شما تصاویر را در حداکثر اندازه تحویل می دهید و مرورگر اجازه می دهید اندازه تصاویر را با تصمیم گیری در مورد اندازه نسبی آنها بر اساس راهنمای CSS تغییر کند. دو نکته قابل توجه در مورد این رویکرد وجود دارد. اول از همه، برخی از نسخه های مرورگر از این ویژگی CSS پشتیبانی نمی کنند، به خصوص IE بدنام. با این حال، سهم استفاده از اینترنت اکسپلورر در سراسر جهان به آرامی اما مطمئناً ناچیز می شود. بنابراین، ممکن است به زودی نگران این موضوع نباشید. دومین مشکل بزرگ زمان دانلود است که نسبت به قبلی مشکل بسیار جدی است. اگر اندازه تصویر اصلی بزرگ است، زیرا در ابتدا برای دستگاه های بزرگ در نظر گرفته شده است، ممکن است تنظیم آن بر روی صفحه نمایش های کوچکتر به زمان بیشتری نیاز داشته باشد. در نتیجه، می تواند به طور قابل توجهی سرعت وب سایت را کاهش دهد و عملکرد کلی را بدتر کند و منجر به نرخ پرش بالاتر شود. با این وجود، این رویکرد یک گزینه محبوب است که علیرغم این دو ملاحظه قابل اعتماد تقریباً قابل اعتماد است.

تصاویر واکنش گرا: روش سوم به تقلید از تصاویر پاسخگو دلالت دارد. این فناوری سالهاست که با ما همراه بوده است. بنابراین، چندین راه برای اجرای آن وجود دارد: بسته به اندازه ویوپورت یا چگالی صفحه، می‌توانید تصویر بهینه‌شده وب مناسب را از مجموعه انتخاب کنید و با استفاده از ویژگی srcset در <img> به مشتری نشان دهید. بسته به عرض CSS دستگاه صفحه، می‌توانید همان تصویر را با برش متفاوت انتخاب کنید و با بزرگ کردن ویژگی <picture> روی قسمت معنی‌دار تصویر تمرکز کنید. استفاده از تابع تصویر () که امکان برش عکس را متفاوت می دهد، بسته به اندازه عرض نمای CSS. SVG

روش چهارم به معنای استفاده از SVG است. اگرچه برای عکاسی کار نمی کند، با این حال بقیه موارد بصری مانند تصاویر، آیکون ها، لوگوتایپ ها و غیره تا حد زیادی از این فناوری بهره می برند.

 هر روشی مزایای خاص خود را دارد. هر کدام در اجرا معایب و مشکلاتی دارند. بنابراین، بسته به پروژه ای که باید ایجاد کنید یک روش را انتخاب کنید. علاوه بر این، ممکن است خود را در موقعیت‌هایی بیابید که بهترین راه برای مدیریت تصاویر خاموش کردن همه آنها و تمرکز بیشتر روی محتوای متنی  باشد - باور کنید یا نه، این نیز یک راه مناسب برای مدیریت این موقعیت است.

آخرین موضوع ولی به همان اهمیت

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

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

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

آخرین موضوع ولی به همان اهمیت: به یک نکته توجه کنید اگرچه مرورگرها به طور گسترده ای از درخواست های رسانه ای پشتیبانی می کنند، هنوز برخی از نسخه های قدیمی وجود دارند که آنها را شناسایی نمی کنند. برای رسیدگی به این مشکل خاص، می توانید از کتابخانه جاوا اسکریپت (css3-mediaqueries.js) استفاده کنید که به این مرورگرها کمک می کند تا از این ویژگی پشتیبانی کنند. اگرچه وب‌سایت‌های مدرن از نظر بصری غنی هستند، اما طراحی وب تماماً به شکل دادن به اطلاعات نوشتاری است. محتوا یک پادشاه است. هیچ کس نمی توانست علیه آن استدلال کند. بنابراین، تایپوگرافی، به عنوان ابزار اصلی برای خدمت به آن، اهمیت فزاینده ای دارد. در اوایل دهه 2010، زمانی که وب موبایل هنوز جدید بود، هیچ کس به این فکر نمی کرد که تایپوگرافی را پاسخگو کند، زیرا همه مشغول تلاش برای تسلط بر شبکه های سیال و تصاویر بودند. امروزه در اوایل سال 2020، بخش مهمی از پازل بزرگتر است.

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

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

خبر خوب این است که اگرچه تایپوگرافی واکنش‌گرا نسبتاً جدید است و هیچ استاندارد یا راه‌حل یک‌اندازه‌ای وجود ندارد، باز هم کار با آن آسان است. رویکردهای مختلفی در طبیعت وجود دارد که می توانید آنها را امتحان کنید و ببینید چه چیزی برای پروژه شما بهتر عمل می کند. اجازه دهید دو راه حل محبوب را در نظر بگیریم. راه هایی برای ایجاد تایپوگرافی پاسخگو یکی از راه های محبوب و شناخته شده برای ایجاد تایپوگرافی مقیاس پذیر، استفاده از ویژگی های مرورگر با پشتیبانی خوب، جبر اولیه و اتوماسیون از طریق Sass است. با استفاده از فرمول ساده ریاضی، با نام مستعار تعریف معادله خطی و CSS calc()، می توانید به راحتی معادله خط روند را زنده کنید و اطمینان حاصل کنید که تایپوگرافی به راحتی با طرح بندی خود مقیاس می شود. اگر با Sass آشنایی دارید، می توانید آن را به سادگی با استفاده از یک قطعه کد اتوماتیک کنید. روش دیگر استفاده از واحدهای نمایشی است. این ویژگی های نسبتا جدید CSS فوق العاده مفید هستند. فقط اندازه فونت را در واحدهای viewport تنظیم کنید و اجازه دهید مرورگر کار خود را انجام دهد برای کسانی که نگران سازگاری مرورگر هستند، دومی برای واحدهای viewports و عملکرد calc() بسیار امیدوارکننده است، اما همچنان بی عیب و نقص نیست.

منبع:https://designmodo.com/responsive-design-examples/

ترجمه و تنظیم : مهندس مرتضی خیری