ریسپانسیو بودن وب سایت توانایی یک وب سایت برای نمایش صحیح در آن است دستگاه های مختلفبا ویژگی های مختلف
ویدیوهای بیشتر در کانال ما - بازاریابی اینترنتی را با SEMANTICA یاد بگیرید
امروزه وب سایت ها در رایانه های شخصی، تبلت ها و گوشی های هوشمند مشاهده می شوند. هر دستگاه ویژگی های خاص خود را دارد - سرعت، وضوح صفحه نمایش.
اگر سایت ریسپانسیو نباشد، به درستی روی کامپیوتر نمایش داده می شود. و در تلفن می تواند "برود" - بلوک ها با یکدیگر همپوشانی دارند ، فونت می تواند ناخوانا شود.
خود اصطلاح واکنش گرایی از زمان انتشار کتاب طراحی وب واکنش گرا – طراحی وب واکنش گرا نوشته ایتان مارکوت به طور گسترده مورد استفاده قرار گرفت. سایت هایی که می توانند به صورت پویا با ویژگی های داده شده دستگاه های مشاهده تنظیم شوند، به عنوان تطبیقی شناخته شده اند.
نمونه طرح پاسخگو
نمایش بر روی کامپیوتر:
در تبلت:
در گوشی هوشمند:
چرا به یک وب سایت واکنش گرا نیاز دارید؟
فناوری با سرعتی سریع در حال توسعه است و سازندگان تجهیزات از آنها فاصله زیادی ندارند. گوشی های هوشمند، تبلت ها، تلویزیون ها و سایر دستگاه های الکترونیکی متصل به اینترنت برای هر سلیقه و بودجه ای در دسترس هستند و گزینه های زیادی برای اندازه صفحه نمایش وجود دارد.
در عین حال، مصرف محتوا به طور تصاعدی در حال افزایش است. در مبارزه برای مشتری، صاحبان سایت از همه ابزارها و روش ها استفاده می کنند. به ویژه، در مرحله توسعه، آنها امکان نمایش صحیح منبع وب خود را در دستگاه های مختلف فراهم می کنند.
درصد دستگاه هایی که به شما امکان مشاهده آنلاین اطلاعات را می دهند هر سال در حال افزایش است. فرمت‌ها و وضوح‌های مختلف فرآیند توسعه را به طور کلی پیچیده می‌کنند، الزامات اضافی باید در تمام مراحل در نظر گرفته شود: طراحان، طراحان صفحه‌آرایی و برنامه‌نویسان.
مفهوم طراحی تطبیقی به شما این امکان را می دهد که فرآیند را ساده کنید، زیرا مانند نسخه های تلفن همراه در گذشته نیازی به ایجاد چندین نوع سایت ندارید. در آن مورد، مجموعه ای جداگانه از توابع در یک زیر دامنه جداگانه طراحی شد.
سایت های قدیمی نیاز به بهبود دارند و رویکردهای مختلف برای سازگاری امکان تحقق این امر را فراهم می کند. نکته اصلی این است که در ابتدا مقیاس را به درستی ارزیابی کنید، در برخی موارد استفاده از طرح‌بندی‌ها و قالب‌های طراحی جدید آسان‌تر، سریعتر و ارزان‌تر است. اگر هویت شرکتی شما یک نام تجاری قابل تشخیص نیست، این واقعیت که از نظر اخلاقی منسوخ شده است اغلب شما را به کار مجدد سوق می دهد. و تغییر نام تجاری، به عنوان مرحله انتقال به سطح جدید، لغو نشده است. یک وب سایت واکنش گرا ابزار قدرتمندی برای کسب و کار شماست.
خدماتی برای بررسی اینکه چگونه سایت با الزامات سازگاری مطابقت دارد وجود دارد.
علاوه بر این، امروزه بزرگترین موتورهای جستجوی Google و Yandex این پارامتر را هنگام رتبه بندی وب سایت ها در نظر می گیرند. از آنجایی که قابلیت استفاده، ناوبری یکی از عوامل اجباری برای ارزیابی کیفیت یک سایت است. سرعت بارگذاری اطلاعات و در صورت بهینه سازی تصاویر، ریزش آن، متن ناخوانا و عناصر تحریف شده که خیلی کوچک هستند یا روی صفحه قرار نمی گیرند، یافتن اطلاعات را دشوار می کند و به سادگی منجر به افزایش پرش - کاربر می شود. صفحه را می بندد اینها عوامل رفتاری هستند که بر موقعیت در نتایج جستجو نیز تأثیر می گذارند.
برای صاحبان سایت، اصطلاحات فنی و پارامترهای رتبه بندی معیارهای کاملاً واضح و ملموس نیستند. اما برای آنها کافی است که بفهمند چگونه این امر بر پویایی حضور تأثیر می گذارد. در بسیاری از مناطق، سهم ترافیک دستگاه های تلفن همراه با ترافیک دسکتاپ قابل مقایسه و حتی از آن بیشتر است. این باید در نظر گرفته شود. کمتر و کمتر امکان ملاقات با توسعه دهندگانی وجود دارد که پیشنهاد تطبیق وب سایت را نمی دهند، اما پیمایش این موضوع برای کنترل فرآیند ضرری نخواهد داشت.
اصول سازگاری
نخ زنی
فرض کنید برای مرورگرهای دسکتاپ طراحی کرده اید. همه چیز عالیه. هنگام مشاهده این سایت از یک دستگاه تلفن همراه، بلوک ها جابه جا می شوند و به زیر یکدیگر می روند.
به این جریان می گویند. و در حال حاضر این یکی از اصول اصلی است که در طراحی واکنش گرا استفاده می شود. این را در نظر بگیرید.
نسبیت واحد
از درس های فیزیک مدرسه مشخص است که سرعت می تواند مطلق باشد، زمانی که صرف نظر از اینکه حرکت را از کجا مشاهده می کنید، سرعت یکسان باشد. و نسبی - زمانی که بسته به نقطه مرجع، سرعت می تواند تغییر کند.
واحدهای اندازه گیری هم همینطور. دستگاه های مختلف تراکم پیکسلی متفاوتی دارند. و اندازه، به عنوان مثال، 320 پیکسل بر روی صفحه نمایش رایانه و تلفن هوشمند متفاوت به نظر می رسد.
راه حل استفاده از واحدهای نسبی است. وقتی همه اندازه‌ها، مقیاس‌ها و مختصات بلوک را نسبت به عنصری که هم روی صفحه رایانه شخصی و هم روی صفحه نمایش تلفن هوشمند است تنظیم می‌کنید. به عنوان مثال، کران بالا.
استفاده از نقاط شکست
اینها عناصری هستند که مکان آنها تنها در صورت استفاده از دستگاه خاصی برای مشاهده تغییر می کند. پارامترهای داده شدهصفحه نمایش
به عنوان مثال، اگر محتوای صفحه از بین برود، پس منطقی است که چنین نکته ای را اضافه کنید و محتوا را اصلاح کنید.
حداقل و حداکثر مقادیر
در تلفن همراه، مقاله را می توان آنطور که باید نمایش داد. اما در اینجا همان صفحه را روی یک مانیتور عریض باز می کنید و تصویر شما را خوشحال نمی کند. همه چیز گسترده است، خوانایی مطرح نیست.
به عنوان مثال، می توانید ویژگی ها را مشخص کنید. اگر عرض صفحه کمتر از 1000 پیکسل باشد، محتوا باید به صورت تمام صفحه نمایش داده شود. در غیر این صورت حداکثر عرض 1000 پیکسل خواهد بود.
لانه سازی اشیاء
این اتفاق می افتد که شما باید از عناصر زیادی استفاده کنید که به موقعیت بلوک های دیگر بستگی دارد. کنترل کردنش سخته شما می توانید چنین اشیایی را در یک ظرف لانه کنید. این برای بلوک هایی مناسب است که نمی خواهید با پارامترهای صفحه - دکمه ها، آرم ها و غیره سازگار شوند.
فونت های صحیح
فونت های وب زیبا به نظر می رسند. اما فراموش نکنید که همه آنها بارگذاری شده اند. این بر سرعت بارگذاری صفحه کاربر تأثیر می گذارد.
استفاده صحیح از گرافیک شطرنجی و برداری
اگر عکس دارای جزئیات کوچک زیادی است، از فرمت شطرنجی استفاده کنید. در غیر این صورت - بردار.
اما هیچ تصویری نباید بدون بهینه سازی - فشرده سازی استفاده شود. تصاویر برداری معمولاً از قبل فشرده شده اند. اما همه مرورگرهای قدیمی از آنها پشتیبانی نمی کنند.
انطباق با اندازه های طرح
استانداردهای کلی در مورد ابعاد اساسی وجود دارد که معمولاً هنگام توسعه یک طرح بندی روی چه ابعادی تمرکز می شود.
در طراحی واکنشگرا، چیزی به نام نقاط شکست وجود دارد. اینها پارامترهایی هستند که در توابع رسانه منتقل می شوند. مشخص کنید که طراحی با چه رزولوشن هایی تغییر می کند.
- برای موبایل 320 پیکسل، 480 پیکسل.
- برای تبلت های 768 پیکسل.
- برای نت بوک ها و برخی تبلت ها 1024 پیکسل.
- برای رایانه های شخصی 1280 پیکسل یا بیشتر.
اتصال به یک وضوح خاص سخت نیست. بستگی به تنظیمات و پارامترهای دستگاه دارد.
گاهی اوقات نیازی به ایجاد طرح بندی برای رزولوشن های متوسط نیست، به عنوان مثال، 480 پیکسل، اگر طرح بندی به درستی در محدوده 768 - 320 پیکسل نمایش داده شود.
اگر چیدمان در یک ابزار خاص به اشتباه نمایش داده شود، مقادیر واقعی برای این صفحه به عنوان نقاط شکست در نظر گرفته می شود.
داستان های رسانه
توسعه سایت های تطبیقی بر اساس اصل تعریف پارامترهای سبک با استفاده از پرس و جوهای رسانه ای (پرسش های رسانه ای) است.
درخواست ها تعریف می کنند:
- نوع دستگاه: پروژکتور، گوشی هوشمند، مانیتور، تلویزیون و ...
- مقررات.
در درخواست و پاسخ مربوطه، تنظیمات نمایش مربوط به دستگاه از فایل سبک css اعمال خواهد شد.
بررسی پاسخگویی وب سایت
با استفاده از سرویس ها و ابزارهای مختلف می توانید نحوه نمایش سایت خود را در دستگاه های تلفن همراه بررسی کنید.
با استفاده از مرورگر
به عنوان مثال، Google Chrome یک جعبه ابزار داخلی برای بررسی طراحی وب سایت برای نمایش صحیح در دستگاه های تلفن همراه دارد. شما باید کلید F12 یا Ctrl + Shift + I را فشار دهید یا "ابزارهای اضافی" - "ابزارهای توسعه دهنده" را در منو انتخاب کنید.
که در موزیلا فایرفاکساین را می توان به این روش "منو" - "توسعه" - "طراحی پاسخگو" یا Ctrl + Shift + M انجام داد.
Google Mobile Friendly (کنسول جستجوی گوگل)
ما فقط URL کامل را در رشته تایپ می کنیم و نتایج را دریافت می کنیم. بررسی معمولا کمتر از یک دقیقه طول می کشد.
وب سایت تطبیقی یک استاندارد توسعه وب، یکی از شاخص های کیفیت یک منبع اینترنتی و نگرش توجه به نیازهای کاربر است.
چیدمان تطبیقیسایت به صفحات وب اجازه می دهد تا به طور خودکار با صفحه نمایش تبلت ها و گوشی های هوشمند تنظیم شوند. ترافیک اینترنت موبایل هر سال در حال افزایش است و برای پردازش موثر این ترافیک، لازم است سایت های تطبیقی با رابط کاربر پسند به کاربران ارائه شود.
موتورهای جستجو از تعدادی معیار برای ارزیابی پاسخگویی سایت هنگام مشاهده در دستگاه های تلفن همراه استفاده می کنند. گوگل در تلاش است تا استفاده از اینترنت را برای دارندگان گوشی‌های هوشمند و تبلت‌ها، با علامت‌گذاری در نسخه‌های موبایلی که برای دستگاه های تلفن همراهسایت هایی با علامت ویژه سازگار با موبایل. Yandex همچنین دارای الگوریتمی است که به سایت های دارای نسخه موبایل / تطبیقی برای کاربران در جستجوی تلفن همراه اولویت می دهد.
می توانید نمایش صفحه را در دستگاه های تلفن همراه در سرویس ها و.
برنج. 1. صدور موبایل Yandex و Google با یادداشتی در مورد دوستی سایت با دستگاه های تلفن همراه چیدمان تطبیقی چیست
چیدمان تطبیقی دلالت بر عدم وجود دارد نوار افقیمناطق اسکرول و مقیاس پذیر هنگام مشاهده در هر دستگاه، متن قابل خواندن و مناطق بزرگ برای عناصر قابل کلیک. با استفاده از پرسش‌های رسانه‌ای، می‌توانید طرح‌بندی و موقعیت بلوک‌ها را در صفحه کنترل کنید و الگو را به گونه‌ای تنظیم کنید که با اندازه‌های مختلف صفحه نمایش دستگاه سازگار شود.
تکنیک های اصلی برای ایجاد یک سایت تطبیقی در مقاله آورده شده است. برای طراحی تعاملیعرض کانتینر اصلی سایت بر حسب % تنظیم شده است، در حالی که می تواند برابر یا کمتر از 100 درصد عرض پنجره مرورگر باشد. عرض ستون های شبکه نیز بر حسب درصد تنظیم می شود. که در طراحی تعاملیعرض کانتینر اصلی و ستون های شبکه با استفاده از مقادیر px ثابت می شود.
تکنیک چیدمان سیال ریسپانسیو که در این آموزش مورد بحث قرار گرفته است، روی یک قالب دو ستونی عالی عمل می کند و سایت را واکنش گرا و سازگار با موبایل می کند. قالب طرح بندی متفاوتی از محتوای اصلی صفحات را در نظر می گیرد، در این درس طرح بندی صفحه اصلی تحلیل می شود.
طرح بندی صفحه اصلی
این صفحه از سه بلوک اصلی تشکیل شده است: یک هدر (سرصفحه)، یک محفظه بسته بندی برای محتوای اصلی و یک نوار کناری، و یک پاورقی (پانویس). بیایید 768 پیکسل و 480 پیکسل را به عنوان نقاط شکست طراحی در نظر بگیریم.
در مرحله اول، منوی بالا را مخفی می کنیم و نوار کناری را به زیر کانتینر همراه با پست ها منتقل می کنیم. در مرحله دوم، مکان عناصر هدر را تغییر می دهیم، موقعیت دکمه های شبکه های اجتماعی را در پست ها لغو می کنیم و بسته بندی ستون های فوتر صفحه را لغو می کنیم.
برنج. 2. نمونه ای از چیدمان تطبیقی 1. متا تگ ها و بخش
1) به بخش اضافه کنید
فایل های ضروری - پیوندی به فونت های مورد استفاده، کتابخانه jQuery و همچنین افزونه prefixfree (به طوری که پیشوندهای مرورگر را برای ویژگی ها ننویسید):
2. هدر صفحه
در هدر صفحه
لوگو ;
دکمه برای نمایش/پنهان کردن منوی اصلی
