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

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

عارفه عسکری

انتشار در: ۶ آبان ۱۳۹۹
خواندن این مطلب حدود [rt_reading_time] دقیقه زمان می برد

راهنمای مطالعه

دنبال درآمد زیاد هستی؟

با شرکت در این دوره تضمین می کنم
که به درآمد بیش از حد می رسی

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

یک طراحی وب پاسخگو چیست؟

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

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

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

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

طراحی وب پاسخگو

طراحی وب پاسخگو

مقایسه طراحی وب پاسخگو با طراحی انطباقی (Adaptive design)

تفاوت بین طراحی پاسخگو و طراحی تطبیقی این است که طراحی پاسخگو ارائه یک نسخه از یک صفحه را متناسب صفحه‌ی مورد نظر می کند. اما در طراحی انطباقی چندین نسخۀ کاملاً متفاوت از همان صفحه ارائه داده می شود.

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

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

مقایسه طراحی وب پاسخگو با طراحی انطباقی (Adaptive design)

مقایسه طراحی وب پاسخگو با طراحی انطباقی (Adaptive design)

چرا طراحی پاسخگو حائز اهمیت است؟

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

پاسخ ساده است. طراحی کردن برای تنها یک دستگاه دیگر کافی نیست. امروزه ترافیک وب حاصل از موبایل از دسکتاپ پیشی گرفته است و هم اکنون بیشترین بازدید وب سایت با بیش از ۵۱% بازدیدها را تشکیل می دهد.

دلیل اهمیت طراحی وب پاسخگو

دلیل اهمیت طراحی وب پاسخگو

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

آیا سایت های وردپرس پاسخگو هستند؟

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

برای اینکه ببینید تم وردپرس شما پاسگو است یا خیر، می توانید نحوه نمایش آن را در دستگاه های مختلف یا با استفاده از Chrome Developer Tools تست کنید.

بلوک های ساختاری یک طراحی وب پاسخگو

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

CSS و HTML

بلوک های ساختاری یک طراحی وب پاسخگو

بلوک های ساختاری یک طراحی وب پاسخگو

اساس طراحی پاسخگو ترکیبی از HTML و CSS است، دو زبانی که محتوا و طرح صفحه را در هر مرورگر وب کنترل می کنند.

HTML به طور عمده ساختار، عناصر و محتوای یک صفحه وب را کنترل می کند. به عنوان مثال، برای افزودن تصویر به وب سایت، باید از کد HTML مانند زیر استفاده کنید:

<img src=”image.gif” alt=”image” class=”full-width-img”>

می توانید یک “class” یا “id”نیز به آن اضافه کنید که بعداً بتوانید با کد CSS بر روی آن تغییر ایجاد کنید.

همچنین می توانید اتریبیوت های اصلی مانند ارتفاع و عرض را در کد HTML خود کنترل کنید، اما این دیگر بهترین روش محسوب نمی شود.

در عوض، از CSS برای ویرایش طرح و الگوی عناصری که در صفحه ای با HTML قرار داده‌اید استفاده می شود. کد CSS را می توان در بخش <style> یک متن HTML یا به عنوان یک فایل صفحه جداگانه قرار داد.

به عنوان مثال، ما می توانیم عرض تمام تصاویر HTML را در سطح یک عنصر ویرایش کنیم:

img {

width: 100%;

}

یا می توانیم کلاس خاص “full-width-img” را با اضافه کردن یک نقطه در ابتدای آن هدف قرار دهیم.

.full-width-img {

width: 100%;

}

همچنین می توانید طراحی را فراتر از تنها ارتفاع، عرض و رنگ کنترل کنید. استفادۀ اینگونه از CSS، نحوۀ ایجاد پاسخگویی در طراحی است که شما آن را با روشی به نام media query ترکیب می کنید.

Media Queries

یک media query بخشی اساسی از CSS3 است که به شما امکان می دهد محتوا را به گونه‌ای ارائه دهید تا با عوامل مختلف مانند اندازه صفحه نمایش یا وضوح تصویر سازگار شود.

Media Queries

Media Queries

این کار چیزی شبیه به به روش “if{}” در برخی از زبان های برنامه نویسی کار می کند، این اساساً قبل از اجرای کد بررسی می کند که نمای دید(viewport) صفحه به اندازه کافی گسترده یا خیلی گسترده باشد.

@media screen and (min-width: 780px) {

.full-width-img {

margin: auto;

width: 90%;

}

با توجه به کد بالا، اگر صفحه حداقل ۷۸۰ پیکسل عرض داشته باشد، تصاویر کلاس “full-width-img ” 90٪ از صفحه را اشغال می کنند و به طور خودکار با حاشیه هایی هرکدام به اندازۀ ۵% صفحه (۵% در راست و ۵% در چپ که در مجموع ۱۰% از صفحه جزو حاشیه محسوب می شود) در مرکز قرار میگیرند.

Fluid Layouts

یک fluid layout بخشی اساسی در طراحی وب پاسخگوی مدرن است. در زمان های قدیم، شما برای هر عنصر HTML یک مقدار ثابت مانند ۶۰۰ پیکسل تعیین می کردید.

Fluid Layouts

Fluid Layouts

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

تصاویر پاسخگو

ساده ترین نوع تصاویر پاسخگو همان مفهوم fluid layout را دنبال می کند که از یک واحد پویا برای کنترل عرض یا ارتفاع استفاده می کند. این نمونه کد CSS این امر را محقق میکند:

img {

width: 100%;

}

واحد ٪ تقریباً به یک درصد از عرض یا ارتفاع نمای دید نزدیک می شود و اطمینان حاصل می کند که تصویر متناسب با صفحه باقی بماند.

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

برای ارائه نسخه های مختلف که برای دستگاه های با اندازه‌ی مختلف استفاده می شود، باید از اتربیوت HTML srcset در تگ های img خود استفاده کنید تا بیش از یک اندازه برای تصویر را انتخاب کنید. اینگونه بسته به اندازه‌ی صفحه عکس ها مطابق اندازه‌ی مشخص شده نشان داده می شوند.

<img srcset=”large-img.jpg 1024w,

middle-img.jpg 640w,

small-img.jpg  320w”

src=”small.jpg”

/>

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

پایان

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

معرفی برترین افزونه های طراحی وب برای سایت وردپرس + لینک دانلود افزونه ها

مطالب مرتبط

همه چی درباره آزمون sat

همه چی درباره آزمون sat

SAT مخفف عبارت scholastic Aptitute Test است. این آزمون مهارت و دانش شرکت کنندگان را ارزیابی می کند و هدف آن ارزیابی شرکت کنندگان برای ورود به دانشگاه است

۰ دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *