طراحی وب واکنشی Responsive Web Design بخش اول: مفاهیمReviewed by Datacss.ir on Oct 19Rating:

طراحی وب واکنشی Responsive Web Design بخش اول: مفاهیم

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

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

فرض کنید وب سایت شما تنها در مرورگرهای رایج توسط کامپیوترهای شخصی به درستی نمایش داده شود.

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

طراحان وب سایت در طراحی سایت با استفاده از ترکیب برخی موارد در CSS و ترکیب آنها با جداول شناور (Fluid Grid) میتوانند طراحی سایت خود را به صورتی طراحی کنند که در تمامی وسایل و تجهیزات به درستی نمایش داده شوند و این یعنی طراحی واکنشی (طراحی سایت ریسپانسیو) و یا همان Responsive Web Design  که در مورد آن صحبت میکنیم.

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

اما شما با استفاده از دستورات نمایش به صورت کامل مانند: max-width میتوانید این کار را انجام دهید. در واقع تصاویر شما همواره در اندازه واقعی خود نمایش داده میشوند مگر آنکه در فضای کوچکتری قرار گیرند.

در روش Responsive شما میتوانید فایل های CSS گوناگونی را برای نمایش سایت بر روی دستگاه های مختلف فراخوانی کنید.

به عنوان مثال: برای نمایش بر روی موبایل یک فایل CSS و برای نمایش در یک دستگاه دیگر از یک نوع فایل CSS دیگر استفاده نمایید.

نمایش در گوشی موبایل در حالت معمولی و بعد از لمس منو (منو از سمت چپ به داخل باز می شود)

 

منبع

دیدگاهتان را بنویسید

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

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست