آموزش طراحی وب واکنش گرا (Responsive)

دسته بندی: آموزش طراحی وب

آموزش طراحی وب واکنش گرا

آنچه در این صفحه می خوانید:

معرفی طراحی وب واکنش گرا (Responsive)

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

سایتی که با RWD طراحی شده است با استفاده از شبکه های سیال، مبتنی بر تناسب، تصاویر انعطاف پذیر و پرس و جوهای رسانه CSS3، توسعه دهنده رسانه، طرح را با روش های زیر متناسب می کند:

  • مفهوم شبکه سیال می خواهد اندازه عناصر صفحه در واحدهای نسبی مانند درصد باشد، نه واحدهای مطلق مانند پیکسل یا نقطه.
  • اندازه تصاویر انعطاف پذیر نیز در واحدهای نسبی است، به طوری که از نمایش آنها در خارج از عنصر حاوی آنها جلوگیری می کند.
  • کوئری رسانه به صفحه اجازه می دهد تا از قوانین مختلف CSS براساس ویژگی های دستگاهی که سایت در آن نمایش داده می شود استفاده کند، به عنوان مثال عرض سطح ارائه (عرض پنجره مرورگر یا اندازه نمایش فیزیکی).
  • چیدمان های ریسپانسیو به طور خودکار هر صفحه صفحه دستگاه، اعم از دسک تاپ، لپ تاپ، تبلت یا تلفن همراه را تنظیم و سازگار می کنند.

طراحی وب واکنش گرا (Responsive) از اهمیت بیشتری برخوردار شده است زیرا میزان ترافیک تلفن همراه اکنون (چه زمانی؟) بیش از نیمی از کل ترافیک اینترنت را تشکیل می دهد. بنابراین، Google Mobilegeddon را در سال 2015 اعلام کرد و اگر جستجو از یک دستگاه تلفن همراه انجام شود، رتبه بندی سایت های دوستانه تلفن همراه را افزایش می دهد. طراحی وب واکنش گرا نمونه ای از قابلیت انعطاف پذیری رابط کاربر است.

مفاهیم مرتبط با طراحی وب واکنش گرا (Responsive)

Mobile-first، جاوا اسکریپت ساده، و پیشرفت تدریجی

"Mobile-first"، جاوا اسکریپت ساده، و پیشرفت تدریجی مفاهیمی مرتبط هستند که قبل از RWD قرار دارند. مرورگرهای تلفن های همراه، بیسیک جاوا اسکریپت یا کوئری رسانه ای درک نمی کنند، بنابراین یک روش توصیه شده ایجاد یک وب سایت بیسیک و ارتقا آن برای تلفن های هوشمند و رایانه های شخصی است.

افزایش روزافزون بر اساس مرورگر، دستگاه یا تشخیص ویژگی

به دلیل حجم بالای ترافیک اینترنت با استفاده از دستگاه های تلفن همراه، دیگر نمی توان از آنها چشم پوشی کرد. در سال 2014، برای اولین بار، تعداد زیادی از کاربران از طریق دستگاه های تلفن همراه خود به اینترنت دسترسی داشتند. در مواردی که یک وب سایت باید از دستگاه های تلفن همراه که فاقد جاوا اسکریپت هستند پشتیبانی کند، تشخیص مرورگر ("عامل کاربر") و تشخیص دستگاه تلفن همراه دو روش برای استنباط در صورت پشتیبانی از برخی از ویژگی های اچ تی ام ال (HTML) و سی اس اس (CSS) هستند. با این حال، این روش ها کاملاً قابل اعتماد نیستند، مگر اینکه همراه با یک پایگاه داده قابلیت های دستگاه استفاده شوند.

برای تلفن های همراه و رایانه های شخصی با توانایی بیشتر، فریمورک های JavaScript مانند Modernizr، جی کوئری (JQuery) و جی کوئری موبایل (jQuery Mobile) که می توانند به طور مستقیم پشتیبانی مرورگر را برای ویژگی های HTML / CSS تست کنند (یا دستگاه یا عامل کاربر را شناسایی کنند) محبوب هستند. از Polyfill می توان برای افزودن پشتیبانی از ویژگی ها استفاده کرد.

مزایای طراحی وب واکنش گرا (Responsive)

طراحی وب واکنش گرا برای هر کسب و کار با اهمیت است. یک وب سایت ریسپانسیو بهترین تجربه کاربر (UX) را در همه دستگاه ها ارائه می دهد و دارای مزایای بسیار دیگری است. اگر هنوز مطمئن نیستید که سایت شما باید ریسپانسیو باشد در اینجا مزیت های طراحی وب واکنش گرا آورده شده است که ممکن است تصمیم شما را تحت تأثیر قرار دهد:

جذب مخاطبان گسترده

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

نظارت بر تجزیه و تحلیل آسان است.

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

نگهداری آسان

باز هم، چندین وب سایت برای چندین دستگاه به این معنی است که هر تغییری باید در همه آنها ایجاد شود. با یک وب سایت ریسپانسیو به این معنی است که شما فقط باید یک بار تغییر ایجاد کنید.

افزایش سئو

آشکارا بازاریابی تجارت شما برای یافتن شما بسیار مهم است و سئو (SEO) یکی از بهترین راه ها برای هدایت بازدید به وب سایت شماست. اکنون گوگل به منظور بهبود نتایج جستجوی کاربران موبایل، از وب سایت های ریسپانسیو پشتیبانی می کند تا در نتایج موتورهای جستجو بالاتر باشند.

سازگاری در طراحی و برند تجاری

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

نرخ گزاف (bounce rates) پایین تر

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

نرخ تبدیل بهبود یافته است.

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

آیا این نوشته را دوست داشتید؟
skillshare-fundamentals-of-web-design-in-illustrator

مبانی طراحی وب در Illustrator


با استفاده از این دوره، شما دانش مورد نیاز برای طراحی وب سایت های جذاب را به دست خواهید آورد. در این دوره شما اطلاعاتی در مورد: 1-چگونه ایلاستریتور ر...

1399/02/07 901 بازدید
skillshare-building-a-responsive-website-with-adobe-muse-cc-part-2

ساختن یک وب سایت واکنشگرا با Adobe Muse CC - قسمت 2


در قسمت دوم این دوره، نحوه ساخت یک وب سایت واکنشگرا در Adobe Muse CC را خواهید آموخت. این دوره شما را در کل مراحل از برنامه ریزی تا انتشار همراه می کن...

1399/02/06 543 بازدید
skillshare-building-a-responsive-website-with-adobe-muse-cc-part-1

ساختن یک وب سایت واکنشگرا با Adobe Muse CC - قسمت 1


در قسمت اول این دوره شما نحوه برنامه ریزی و طراحی وب سایت، افزودن تعامل به سایت را در Adobe Muse CC خواهید آموخت. این دوره شما را در کل مراحل از برنام...

1399/02/06 614 بازدید
linkedin-designing-a-first-website-with-dreamweaver-cc

طراحی اولین وب سایت با Dreamweaver CC


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

1399/01/02 1100 بازدید زیرنویس دارد
linkedin-responsive-layout-2-0

آموزش طرح بندی ریسپانسیو 2.0


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

1398/12/29 3666 بازدید زیرنویس دارد
skillshare-responsive-web-development-html-css-for-web-designers

آموزش توسعه وب واکنش گرا - HTML و CSS برای طراحان وب


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

1398/11/16 3438 بازدید
teamtreehouse-responsive-layouts

آموزش طرح بندی های واکنش گرا


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

1398/10/01 776 بازدید
linkedin-learning-wix

آموزش ویدئویی Wix


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

1398/08/09 673 بازدید
skillshare-adobe-dreamweaver-cc-web-design-from-adobe-illustrator-mockups

آموزش طراحی وب با Adobe Dreamweaver CC از موکاپ های Illustrator


در این دوره با ایجاد وبسایت با Adobe Dreamweaver آشنا می شوید. همچنین از ابزارهای قالب بندی Dreamweaver برای به روزرسانی آسان وبسایت استفاده می کنید....

1398/06/21 1169 بازدید
pluralsight-creating-a-site-with-css-grid-and-bootstrap-4

آموزش ایجاد سایت با بوت استرپ 4 و CSS Grid


در این دوره شما قدرت بوت استرپ 4 و CSS Grid را با هم ترکیب می کنید تا طرح بندی واکنش گرا ایجاد کنید. همچنین، استفاده از محبوب ترین کتابخانه کامپوننت f...

1398/06/11 4706 بازدید
skillshare-responsive-web-design-learn-to-design-a-responsive-landing-page

آموزش طراحی صفحه فرود (Landing Page) واکنشگرا


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

1398/02/22 2469 بازدید
skillshare-visual-design-for-web-ui-designers-developers-getting-better-at-design

آموزش طراحی بصری برای برنامه نویسان و طراحان وب و UI - تسلط بیشتر بر روی طراحی


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

1398/02/02 2126 بازدید
linkedin-dreamweaver-cc-responsive-design-with-bootstrap-4

طراحی سایت واکنشگرا با Dreamweaver C C و بوت استرپ 4


به نظر می رسد برنامه Dreamweaver CC همراه با Bootstrap 4 - برای طراحان ذهنی حرفه ای جهت ایجاد وبسایت ها، بر روی رایانه های رومیزی و دستگاه های شبیه تل...

1397/12/27 2407 بازدید
linkedin-programming-foundations-object-oriented-design

آموزش اصول برنامه نویسی - طراحی شی گرا


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

1397/10/12 4760 بازدید
lynda-illustrator-for-webdesign

آموزش Illustrator برای طراحی وب


Adobe Illustrator یک ابزار کلیدی برای ایجاد محتوای وب و دارایی است. با استفاده از ابزارهای مدیریت رنگ و طرح بندی در Illustrator همراه با توانایی استفا...

1397/10/01 1799 بازدید زیرنویس دارد
packtpub-the-ultimate-web-developer-how-to-guide-video-2

راهنمای کامل تبدیل شدن به بهترین برنامه نویس وب


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

1397/09/26 2365 بازدید
linkedin-responsive-layout

آشنایی با طرح بندی واکنش گرا


طراحی واکنش گرا مستلزم آن است که وب سایت ها با دستگاهی که روی آنها نمایش داده می شوند، سازگار باشند. طرح بندی واکنش گرا یک کلید است و HTML و CSS در حا...

1397/09/17 1170 بازدید زیرنویس دارد
pluralsight-code-school-journey-into-mobile

آشنایی با طراحی وب برای موبایل


در این دوره با طراحی وب موبایلی ، مفاهیم طراحی وب سازگار و واکنش گرا آشنا شوید. سرفصل: مبانی برای موبایل طرح بندی های Fluid ماجراهای سازگاری ...

1397/09/01 823 بازدید
lynda-sketch-creating-responsive-svg

آموزش Sketch - ایجاد گرافیک های SVG واکنش گرا


فرمت Scalable Vector Graphics یا SVG می تواند شامل CSS خاص خود باشد و برای نمایش در هر اندازه ای واکنش گرا باشد. در این دوره مختصر، نحوه استفاده از Sk...

1397/08/03 1378 بازدید
teamtreehouse-build-a-responsive-navigation-with-flexbox

آموزش ایجاد ناوبری واکنش گرا با Flexbox


در این کارگاه با ایجاد ناوبری وب سایت واکنش گرا با استفاده از کوئری های رسانه ای CSS و طرح بندی flexbox آشنا می شوید. Flexbox Layout که نام رسمی آن C...

1397/05/17 1550 بازدید