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

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

معرفی Responsive Web Design

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

تقریبا هر مشتری جدید این روزها نسخه تلفن همراه وب سایت خود را نیز می خواهد. یک طراحی برای BlackBerry، دیگری برای آیفون، iPad، Netbook، Kindle  و غیره که تماما باید با رزولیشن های صفحه سازگار باشد.

این روش ترکیبی از شبکه ها و طرح بندی های انعطاف پذیر، تصاویر و استفاده هوشمند از پرس و جوهای رسانه ای CSS است.

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

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

باید بدانید که Responsive Web Design تنها از HTML و CSS استفاده می کند و یک برنامه یا جاوا اسکریپت نیست.

آیا این نوشته را دوست داشتید؟
linkedin-designing-a-first-website-with-dreamweaver-cc

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

1397/05/17 1248 بازدید
teamtreehouse-programmatic-auto-layout

آموزش Auto Layout در کدنویسی


استفاده از Auto Layout در Interface Builder زیبا و آسان است، اما به زمان زیادی در هنگام ایجاد views و طرح بندی در کد نیاز دارد. Auto layout  یک سیستم ...

1397/05/10 538 بازدید
teamtreehouse-how-to-make-a-website-course

آموزش ایجاد وب سایت


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

1397/05/07 1199 بازدید
teamtreehouse-responsive-images-course

آموزش تصاویر واکنش گرا


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

1397/04/31 642 بازدید