هنگام طراحی وب سایت خود ، مهم است که مطمئن شوید بدون توجه به اندازه و شکل صفحه ، روی هر دستگاه عالی به نظر می رسد. وب سایت های ریسپانسیو به گونه ای طراحی شده اند که در انواع دستگاه های مدرن مانند رایانه ، تلفن ، رایانه لوحی ، تلویزیون ، پوشیدنی ها و حتی صفحه نمایش ماشین ها ظاهر خوبی داشته باشند. برای پاسخگویی وب سایت ، باید کد CSS و HTML خود را تغییر دهید تا اندازه عناصر آن بسته به شرایط خاص به طور خودکار تغییر یابد. این wikiHow به شما می آموزد که چگونه می توانید طراحی وب اولیه واکنش گرا را برنامه ریزی و پیاده سازی کنید.
مراحل
روش 1 از 3: برنامه ریزی طراحی پاسخگو
مرحله 1. نحوه استفاده مخاطبان از وب سایت شما را بیابید
این روزها ، اکثریت مردم در حال مرور وب از طریق تلفن های همراه و رایانه های لوحی هستند. برای پاسخگو بودن سایت ، باید اطمینان حاصل کنید که در هر مکانی که مشاهده می شود به درستی نمایش داده می شود. اگر زمان و پول از اهمیت بالایی برخوردار است ، بر انواع دستگاه هایی که بیشتر در بین کاربران شما محبوب هستند (در صورت موجود بودن این اطلاعات) و نحوه استفاده آنها از سایت شما تمرکز کنید. با استفاده از نرم افزار تجزیه و تحلیل خود یا سایر تحقیقات ، به موارد زیر پی ببرید:
- با توجه به مارک های تلفن همراه/رایانه لوحی/رایانه و اندازه صفحه نمایش/وضوح تصویر ، بیشتر از چه دستگاه هایی برای مشاهده وب سایت استفاده می کنند.
- کدام مرورگرها بیشتر در بین کاربران شما محبوب هستند. از نظر آمار جهانی ، Google Chrome محبوب ترین مرورگر وب در سراسر جهان است ، اما Safari در رتبه دوم قرار دارد.
- نحوه استفاده بازدیدکنندگان از وب سایت شما ، مانند مدت زمانی که برای مشاهده آن صرف می کنند ، کجا آن را مشاهده می کنند و کدام محتوا از محبوبیت بیشتری برخوردار است. این می تواند به شما در تعیین نوع محتوای مهم و حذف آن کمک کند.
مرحله 2. طرح بندی های مختلف برای دستگاه های مختلف را طراحی کنید
می توانید از ترکیبی از CSS و جاوا اسکریپت برای تشخیص دستگاه کاربر و همچنین قابلیت های آن (آیا از جاوا ، فلش و غیره پشتیبانی می کند) استفاده کنید و بر این اساس نسخه خاصی از سایت خود را نمایش دهید. پرس و جوهای رسانه CSS به ویژه برای تعیین اندازه/وضوح دستگاه مفید است.
مرحله 3. انواع مختلف تعاملات را حساب کنید
بازدیدکنندگان شما می توانند با وب سایت شما با استفاده از ماوس ، صفحه کلید ، صفحه لمسی یا حتی صفحه خوان برای افراد کم بینا تعامل داشته باشند. با توجه به این موضوع ، وب سایت شما باید به کلیک ماوس ، کلیدهای صفحه کلید (Tab ، Enter ، Return و غیره) و انگشتان دست روی صفحه پاسخ دهد.
جلوه های شناور بیش از موش کار نمی کند. به جای استفاده از این جلوه ها ، می توانید از بازدیدکننده استفاده کنید تا بر روی دکمه یا نمادی کلیک کند تا آنچه را که قبلاً روی نشانگر ماوس نشان داده شده بود نمایش دهد
مرحله 4. استفاده از سیستم مدیریت محتوا (CMS) را در نظر بگیرید
یک راه آسان برای اطمینان از واکنش گرا بودن طراحی سایت شما استفاده از CMS با موضوع ریسپانسیو از پیش ساخته شده است. استفاده از CMS مانند جوملا ، دروپال یا وردپرس به شما امکان می دهد اطمینان حاصل کنید که وب سایت شما بدون نیاز به کدگذاری عناصر پاسخگو خود در همه دستگاه ها عالی به نظر می رسد. با ارائه دهنده میزبانی وب خود مشورت کنید تا ببینید کدام ابزار CMS با سرویس شما موجود است.
مرحله 5. از ابزارهای آنلاین برای آزمایش وب سایت خود استفاده کنید
اکنون که محبوبیت طراحی سایت واکنش گرا افزایش یافته است ، انواع مختلفی از ابزارهای رایگان وجود دارد که می توانید از آنها برای آزمایش وب سایت خود استفاده کنید. اگر قبلاً وب سایت خود را کدگذاری کرده اید ، از این ابزارها برای آزمایش ظاهر آن در شرایط مختلف استفاده کنید تا بدانید برای بهبود پاسخگویی به کجا نیاز دارید:
- تست دوستانه موبایل توسط Google: به شما این امکان را می دهد که بدانید آیا سایت شما در دستگاه های تلفن همراه به خوبی صفحه نمایش رایانه کار می کند یا خیر.
- resizeMyBrowser: به شما امکان می دهد سایت خود را در وضوح مختلف مشاهده کنید.
- Responsiator: سایت شما را در صفحه های مختلف دستگاه در چیدمان های مختلف (به صورت جانبی یا راست به بالا) نمایش می دهد.
روش 2 از 3: چیدمان صفحه را پاسخگو کنید
مرحله 1. یک چارچوب شیوه نامه پاسخگو رایگان را در نظر بگیرید
فریم ورک مجموعه ای از پیش نوشته شده از HTML ، CSS و/یا جاوا اسکریپت است که می توانید به عنوان یک اسکلت برای سایت خود استفاده کنید. همه چارچوب ها برای کار با همه مرورگرها آزمایش شده و بهینه شده اند ، بنابراین تنها کاری که باید انجام دهید این است که محتوای خود را وارد کنید ، رسانه ها و ترجیحات رنگ خود را اضافه کنید و سایت خود را منتشر کنید. برخی از چارچوب های محبوب عبارتند از:
- بوت استرپ
- اسکلت
- پایه
مرحله 2. نما را با یک متا تگ تنظیم کنید
اگر از چارچوب استفاده نمی کنید ، باید از مهمترین جنبه کدگذاری یک وب سایت پاسخگو شروع کنید: Viewport. Viewport بخشی از وب سایت است که برای کاربر قابل مشاهده است. نکته اصلی در نمایش صحیح سایت بدون توجه به اندازه صفحه نمایش ، مقیاس بندی اندازه نمای در برچسب META است. برای انجام این کار ، این برچسب را در بالای هر صفحه در سایت قرار دهید:
مرحله 3. اندازه متن را در رابطه با نمای نما مشخص کنید
هنگامی که نمای نمای شما تنظیم می شود ، متن صفحه شما متناسب با صفحه تغییر می کند. با این حال ، اگر اندازه فونت ها در رابطه با نمای نمایش مشخص نشود ، ممکن است بیش از حد بزرگ یا خیلی کوچک نشان داده شود. شما می توانید این کار را با تعیین اندازه فونت به عنوان درصد خاصی از نمای نمایش با واحد vw انجام دهید. این مثال به سرصفحه های H1 می گوید که 10٪ از عرض نما ، صرف نظر از اندازه آن ، نمایش داده شود:
wikiHow
مرحله 4. از نمایش داده های رسانه ای برای نشان دادن سبک های مختلف برای اندازه های مختلف صفحه استفاده کنید
پرس و جوهای رسانه ای به شما امکان می دهد بسته به اندازه صفحه ، برخی از عناصر CSS را نمایش دهید یا خیر. می توانید مشخصات درخواست رسانه خود را در فایل CSS خود مشخص کنید. در این مثال ، اگر اندازه صفحه نمایش کاربر 480 پیکسل یا بیشتر باشد ، رنگ پس زمینه بدن قرمز می شود:
wikiHow
media screen و (حداقل عرض: 480px) {body {background-color: aqua؛ }}
روش 3 از 3: واکنش گرا بودن تصاویر
مرحله 1. برای مقیاس بندی تصاویر از ویژگی CSS width استفاده کنید
به جای تنظیم عرض تصویر به مقدار مشخصی از پیکسل (به عنوان مثال ، 500 پیکسل) ، از درصد (به عنوان مثال ، 100)) استفاده کنید تا تصویر به عرض والد خود نگاه کند و متناسب با آن تنظیم شود. تنظیم عرض تصویر بر روی 100٪ باعث می شود که تصویر بسته به اندازه صفحه بیننده بالا و پایین برود. برای انجام این کار بصورت خطی:
مرحله 2. از ویژگی max-width برای محدود کردن اندازه واقعی اندازه تصویر استفاده کنید
اگر از ویژگی width در مرحله قبل برای مقیاس بندی یک تصویر به 100٪ استفاده کنید ، تصویر بزرگ یا کوچک می شود و 100٪ محتوی آن را بدون در نظر گرفتن اندازه اندازه می گیرد. این بدان معناست که اگر تصویر در طرف کوچکتر باشد ، بزرگتر از اندازه اصلی خود ظاهر می شود و کیفیت کمتری دارد. برای جلوگیری از این اتفاق ، از max-width استفاده کنید تا حداکثر اندازه مقیاس بندی تصویر را 100 ((اندازه واقعی آن) تنظیم کنید. در اینجا نحوه:
مرحله 3. از عنصر تصویر HTML برای نمایش تصاویر مختلف در اندازه های مختلف صفحه استفاده کنید
اگر می خواهید تصاویر با اندازه سفارشی برای نمایش در صفحه های با اندازه های مختلف ایجاد کنید ، می توانید تعیین کنید که کدام عکس ها در کد HTML شما نمایش داده شوند. تصاویر با اندازه های مختلف ایجاد کنید و سپس از این کد به عنوان مثال برای تعیین اینکه کدام تصویر در صفحه های عرض 600 و 1500 پیکسل استفاده کنید استفاده کنید:
