آموزش گام به گام طراحی وب ریسپانسیو
چرا ما باید از طریق آموزش گام به گام در زیر طراحی وب ریسپانسیو، گام به گام زمانی که ما فقط می توانیم از وردپرس استفاده و پیدا کردن یک موضوع است که مراقبت از ساخت وب سایت ریسپانسیو است؟
چرا طراحی از ابتدا ریسپانسیو است؟
در مقاله من نمونه کارها وردپرس، مشتریان ما بود که بودجه محدود بود و ما خواستار ایجاد نمونه کارها ریسپانسیو وب سایت های وردپرس با استفاده از قالب نمونه کارها (نه یک پلاگین نمونه کارها) است که نشان دادن کار سخت خود را.
ما این هدف را با پیدا کردن تم های رایگان وردپرس برای انجام این کار انجام دادیم، اما جدیدترین مشتری ما حتی ارزان تر است و قطعا نمی خواهد ما را مجددا طراحی سایت فعلی خود را در WordPress و یا هر سیستم مدیریت محتوا دیگر. کاملا به طور مستقیم به ما گفت، "من به همه این نیاز ندارم."
معلم درس پیانو، در حال حاضر دارای یک وب سایت استاتیک با HTML و CSS است و همه او می خواهد ما را انجام دهد این است که سایت خود را ریسپانسیو باشد برای حدود 15 درصد از دانش آموزانی که به او گفته اند "خانم اعتماد به نفس، سخت است که برنامه کلاس را در سایت خود در تلفن همراه (رایانه لوحی) مشاهده کنم. "
جدا از برنامه کلاس او، محتوا در وب سایت خود را به سختی تغییر می کند، به همین دلیل است که او نمی خواهد با تعمیر و نگهداری که با نگه داشتن وردپرس امن، مزاحم است، اما او می خواهد با زمان نگه دارید از آنجایی که او می داند او دارد برخی از دانش آموزانی که به وب سایت خود می آیند و برنامه کلاس را بر روی تبلت های زیبا و گوشی های هوشمند خود بررسی می کنند.
این چیزی است ...
پس از آنکه وردپرس شروع به کسب محبوبیت کرد، بسیاری از طراحان وب ما به اکثریت مشتریان ما عادت کردند و گفتند: «من سایت خود را در وردپرس میخواهم!» مهم نیست که آیا آنها «همه اینها» را دارند یا خیر. آنها شنیده بودند که وردپرس راهی برای رفتن بود و بعدا رشد کرد، بنابراین آنها خواستار «قرار دادن» آنها در وردپرس شدند. بنابراین ما انجام دادیم، و ما (دوباره نه شما، فقط من و برخی از طراحان وب دیگر) کمی زنگ زده بود با سمت وب سایت استاتیک چیزها.
به همین دلیل است که من با این آموزش طراحی وب ریسپانسیو گام به گام برای بازخوانی در مورد چگونگی ایجاد یک وب سایت HTML و CSS را در رایانه های رومیزی، لپ تاپ ها، قرص ها و / یا تلفن های همراه با تنها یک طراحی سایت نگاه. اگر شما همچنین یک طراح وب هستید که باید یاد بگیرد که چگونه یک وبسایت ریسپانسیو طراحی کند، شما در حال خواندن راهنمای درست هستید.
آموزش طراحی وب ریسپانسیو : 5 مرحله
شما می توانید یک وب سایت ریسپانسیو را در پنج مرحله اولیه طراحی کنید:
درک عناصر طراحی ریسپانسیو
جستجو برای مثال
پرس و جوهای رسانه ای خود را تعریف کنید
نقاط نقطهای خود را تعریف کنید.
گزینه های خود را آزمایش کنید
بیایید شروع کنیم!
1. عناصر یک طراحی ریسپانسیو را درک کنید
در طراحی وب ریسپانسیو : این فقط یک روند نیست، سونیا گرگوری می نویسد: "طراحی وب ریسپانسیو یک سیستم برای یک سایت واحد ایجاد می کند تا بتواند به اندازه یک دستگاه کاربر واکنش نشان دهد".
او ادامه می دهد که طراحی ریسپانسیو دارای سه عنصر در پایه ی آن است: یک شبکه مایع، تصاویر انعطاف پذیر و پرس و جو های متن و رسانه:
یک شبکه مایع به وب سایت اجازه می دهد بزرگتر یا کوچکتر به نظر برسد به اندازه یک دستگاه بازدید کننده.
تصاویر و متن انعطاف پذیر نیز به نظر می رسد بزرگتر، کوچکتر، در همه نیست و یا بسته به یک دستگاه بازدید کننده مبادله می شود.
در نهایت، این کار پرس و جو رسانه ای است تا شبکه های مایع و تصاویر و متن های قابل انعطاف به درستی به نظر برسد، بنابراین بیایید توضیحات مربوط به رسانه ها را کمی توضیح دهیم، زیرا آنها با استفاده از طراحی وب ریسپانسیو را از بین می برند.
اما اول بیا ...
2. نمونه هایی را جستجو کنید
حالا که ما تعریف دقیق کار را از طراحی وب ریسپانسیو داریم، و قبل از اینکه ما به سمت طراحی وب سایت ریسپانسیو حرکت کنیم، باید یک جستجو برای طراحی وب پاسخگو انجام داد.
آنچه در ادامه می آید، تنها نمونه برداری بسیار کوچکی است، اما این نمونه ایده خوبی است که ما با وب سایت خودمان را درگیر می کنیم.
در تمام چهار نمونه از این، وب سایت ها به انواع مختلفی از دستگاه ها نگاه می کنند. طرح بندی مایع و محتوای reflows به خوبی. این دقیقا همان چیزی است که ما می خواهیم اتفاق بیافتد وقتی که وب سایت را دوباره طراحی کنیم.
و ما قصد داریم که با درخواست های رسانه ای این اتفاق بیفتد.
3. درخواست های رسانه ای خود را تعریف کنید
با طراحی وب سایت ریسپانسیو ، HTML یک وبسایت باقی می ماند، اما نمایش داده ها رسانه CSS اجازه می دهد بخش های مختلف CSS خود را هنگامی که وب سایت در اندازه های مختلف صفحه نمایش مشاهده می شود اعمال می شود.
یک پرس و جو رسانه ای به نظر می رسد:
@media (max-width: 500px;) }
/* Your CSS rules here */
}
این بخش های خاصی از CSS شما، که در نمایش داده های رسانه ای موجود است، تنها زمانی اعمال می شود که نقطه های معینی از مواجهه رخ می دهد.
نقطه توقف؟ بله میدانم. ما حتی از طریق این آموزش نمیتوانیم، و یک اصطلاح دیگر که باید تعریف کنیم وجود دارد. همانطور که به عنوان پرس و جو رسانه ای مهم است، آنها هیچ چیزی بدون نقطه پایانی هستند!
4. نقطه توقف خود را تعریف کنید
به عبارت ساده، نقطه توقف تعیین می کند زمانی که شبکه سیال یک سایت تغییر اندازه و زمانی که محتوای یک صفحه دوباره مرتب شده، پنهان و یا تغییر یافته است. نقطه توقف معمولا (اما نه همیشه) بر اساس اندازه صفحه نمایش رایج برای دستگاه های مختلف است.
Stephani Worts در مسیر حرکت رپید طراحی ریسپانسیو ، نشان می دهد که ما "فقط با چند نقطه توقف منطقی شروع می کنیم" و من موافقم.
بهترین روش ایجاد نقطه توقف برای اندازه های متوسط مانیتورهای رومیزی و صفحه نمایش دستگاه های تلفن همراه است. در مورد نسل S یا نسل هشتم و غیره، مقیاس نیافته اید. بهترین توصیه من این است که با آنچه که دستگاه ها مشترک هستند، نه آنچه آنها را متفاوت می سازد.
بنابراین برای وبسایت طراحی شده و ریسپانسیو ما در حال تعیین پنج پرس و جو رسانه ای و نقطه های پایانی:
@media (max-width: 1200px) { ... } /* for desktops */
@media (max-width: 991px) { ... } /* for laptops */
@media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
@media (max-width: 768px) { ... } /* for smaller tablets */
@media (max-width: 500px) { ... } /* for cellphones */
