طراحی واکنش گرا در HTML

طراحی واکنش گرا در HTML

آشنایی با طراحی واکنش گرا (Resposive) در HTML

طراحی صفحات ریسپانسیو در HTML

طراحی واکنش گرا چیست؟ آیا فرقی بین طراحی ریسپانسیو و واکنش گرا وجود دارد؟

از چه روش هایی برای ساخت صفحات ریسپانسیو می‌توانیم استفاده کنیم؟‌

در این مقاله در رابطه با طراحی ریسپانسیو (Responsive) یا واکنش‌گرا ( فرقی ندارند) صحبت میکنیم.

 روش های پیاده سازی این نوع صفحات

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<img src="img_faraznetwork.jpg" style="width:100%;">

<img src="img_faraznetwork.jpg" style="max-width:100%;height:auto;">

<picture>
  <source srcset="img_smallSeo.jpg" media="(max-width: 600px)">
  <source srcset="img_Google.jpg" media="(max-width: 1500px)">
  <source srcset="Mizfa.jpg">
  <img src="img_smallSeo.jpg" alt="faraznetwork-SEO">
</picture>

<h1 style="font-size:10vw">Hello Faraznetwork</h1>

<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>

متا تگ تنظیم کننده منطقه نمایش – ویو پورت

منظور از Viewport‌ چیست؟ متا تگ viewport در صفحات واکنش گرا یا responsive چه کاربردی دارد؟

در این اینجا با متا تگ ویو پورت آشنا می‌شویم.

آشنایی با ViewPort

ویو پورت منطقه قابل نمایش برای کاربر در یک صفحه وب است.

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

قبل از رواج تبلت و موبایل ها، صفحات وب فقط برای کامپیوتر طراحی می‌شدند، از این رو اندازه های این صفحات ثابت بود.

پس از رواج استفاده از تبلت و موبایل ها، صفحات وب برای نمایش بر روی این دستگاه ها که دارای ویو پورت کوچکی بودند بسیار بزرگ بود.

برای حل این مشکل مرورگر های این دستگاه ها تمام صفحه را کوچک می کردند تا با اندازه صفحه دستگاه یکسان شود.

بنابر این به طور کلی ویو پورت یک تگ Meta است که در بخش تگ head قرار می‌گیرد

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

باعث می‌شود که اسکرول عرضی در صفحه ایجاد شود تا صفحه به درستی نمایش داده شود که باعث کاهش تجربه کاربری می‌شود.

چرا ویو پورت پر اهمیت است؟

در نتایج موتور های جستجو (  SERP ) یکی از فاکتور های پر اهمیت برای رتبه بندی صفحات Mobile-Friendly بودن صفحات است

به این معنی که صفحات وب سایت ما در هر دستگاه موبایلی بهترین نمایش را داشته باشند

و کاربر برای دستیابی به مطالب به کمترین میزان اسکرول و تغییر سایز صفحه نیاز داشته باشد.

طراحی رسپانسیو ( واکنش گرا ) در صفحات بسیار پر اهمیت و ضروریست است چون انتظار می‌رود

که وب سایت ما توسط هر کاربری با هر نوع و سایز صفحه نمایشی دیده شود. این وظیفه شماست

که بهترین نحوه نمایش را برای صفحات خود را با استفاده از viewport درست ارائه دهید.

تاثیر ویو پورت موبایل در سئو

تنظیم ویو پورت موبایل برای وب سایت بسیار آسان است و یکی از تاثیر گذار ترین راه برای افزایش سطح دوستانه بودن صفحه با موبایل (Friendliness) می‌باشد.

گوگل در توضیحات آموزشی خود در رابطه با طراحی صفحات رسپانسیو در ابتدایی ترین توضیحات خود به ویو پورت اشاره کرده است

که این اهمیت بالای ویو پورت را نمایش می‌دهد که برای سئو باید هر کسی در وب سایت خود به آن توجه داشته باشد.

برای تشویق کاربران به تنظیم ویو پورت گوگل در توضیحاتش با ابتکار عمل خود اینطور توضیح داده است :

« صفحات برای بهینه بودن در دستگاه های مختلف می‌بایست متا تگ ویو پورت را در صفحات خود در بخش Head خود وارد کنند ».

تنظیم Viewport

نسخه HTML5 یک روش برای طراحان وب ارائه کرد که توسط آن امکان تحت اختیار در آوردن ویو پورت از طریق تگ <meta> فراهم می شود.

برای تنظیم یک ویو پورت بر روی صفحه وب باید از کد های زیر استفاده کنید.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

متای ویو پورت به مرورگر دستورالعمل نحوه کنترل ابعاد و مقیاس صفحه را می‌دهد.

بخش اول محتوای متا width=device-width طول صفحه وب را برابر با طول صفحه دستگاه قرار می‌دهد (که برای هر دستگاه متفاوت است).

قسمت دوم آن مقدار بزرگنمایی(زوم) صفحه را هنگام بارگیری تعیین می‌کند.

اندازه محتوا

کاربران وبسایت ها را چه در کامپیوتر و چه در سایر دستگاه ها به صورت عمودی اسکرول می‌کنند.

اگر کاربر مجبور شود برای دیدن کل صفحه به صورت افقی اسکرول کند یا مجبور به کوچک نمایی شود،

آن وبسایت دارای تجربه کاربری ضعیفی است.

در استفاده از ویو پورت ها قوانین بیشتری برای لحاظ کردن وجود دارند که به شرح زیر هستند.

از عناصر بزرگ با طول ثابت استفاده نکنید –

به عنوان مثال، اگر یک تصویر در یک اندازه بزرگ تر از اندازه ویو پورت نمایش داده شود،

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

اجازه ندهید محتوای صفحه بر روی اندازه طولی یک ویو پورت خاص تکیه کند –

از آنجایی که اندازه صفحهو طول آن بر روی دستگاه های مختلف در واحد پیکسل های css متفاوت است.

محتوای تنظیم شده نباید بر روی اندازه طولی یک ویو پورت خاص تکیه کند.

از قابلیت مدیا کوئری داخل css برای تنظیم استایل های متفاوت در صفحه نمایش های بزرگ و کوچک استفاده کنید –

استفاده از اندازه های مطلق در css برای عناصر داخل صفحه ممکن است باعث طولانی شدن طول عناصر برای صفحه های کوچک شود.

به جای آن استفاده از مقدار دهی وابسته مانند 100% برای طول می تواند راه حل مناسبی باشد.

همچنین مراقب باشید در تنظیم موقعیت عناصر داخل صفحه، عناصر ممکن است

بر روی دستگاه های با ویو پورت کوچک تر به بیرون از صفحه هدایت شوند.

در این مقاله به صورت کامل با ویو پورت آشنا شدیم،‌ در طراحی وب حتما باید این متا تگ را جدی بگیرید

چرا که به سئو وب سایت شما خیلی کمک می‌کند و همچنین یکی از مهمترین تگ ها برای طراحی واکنش گرا هست.

در انتها چند نکته را در نظر بگیرید :

1. این متا تگ مثل بقیه متا تگ ها حتما در بخش Head قرار می‌گیرد.
2. در وارد کردن مقادیر دقت کنید که مقدار درست را وارد کنید تا صفحه شما بهم نریزد و از حالت Mobile-Friendly خارج نشود.
3. از قوانین اندازه محتوا در  CSS حتما استفاده کنید.

این مقاله نیز به پایان رسید. امیدوارم توضیحاتم اهمیت بالای این متا تگ را مشخص کرده باشد.

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده:راحله تبریزی