mmfallah

طراحی سایت ریسپانسیو (واكنش گرا)

7 پست در این موضوع

طراحی سایت ریسپانسیو

طراحی سایت ریسپانسیو چیست؟

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

طراحی سایت ریسپانسیو

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

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

دو روش استفاده شده در طراحی سایت ریسپانسیو

استفاده از ترکیبی از کوئری های CSS و افکت های حرکتی

یک نظریه در مورد استفاده از ترکیبی از کوئری های CSS و افکت های حرکتی CSS ارائه داده اند که مضمون آن به این شرح است: شما برای طراحی یک سایت ریسپانسیو از کوئری های مدیا برای انطباق با عرض مروگر استفاده می کنید، و شما به صورت مداوم سایز مرورگر را تغییر می دهید تا واکنش سایت را مشاهده کنید، اما هر گاه یک کوئری وارد عمل می شود، استایل اول و دوم یک پرش فاحش است. پس چرا از افکت های حرکتی CSS برای جلوگیری از چنین پرش هایی بهره نبریم؟ با استفاده از چنین افکت هایی تغییرات به صورت انیمیشنی انجام می گیرند.

دراپ داون شدن منو

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

از سایت های بسیار حرفه ای در این زمینه Smashing Magazine و john polacek می باشد.

منبع: شركت آرنيكا وب

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

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

Share this post


Link to post
Share on other sites
حالا راهکردهای واکنش گرا در سی اس اس رو کامل توضیح میشه بدین؟ آموزشی در این مورد هست؟

انشالله یه آموزش تصویری برای اعمال ریسپانسیو برای قالب های که ریسپانسیو نیستن درست میکنم gift

Share this post


Link to post
Share on other sites

قبل از هر چیز ، IE8 لعنة الله علیه چی میشه ؟ اون که html5 و Css3 رو ساپورت نمی کنه !!

Share this post


Link to post
Share on other sites
قبل از هر چیز ، IE8 لعنة الله علیه چی میشه ؟ اون که html5 و Css3 رو ساپورت نمی کنه !!

هیچی زمان اون رسیده که اکسپلورر رو تحریم کنن سایت ها - بهتره تو تمامی سایت ها این کد که مانع از استفاده از اینترنت اکسپلورر میشه رو قرار بدیم

Share this post


Link to post
Share on other sites

خدا لعنت کنه میرزا حسین کدیوری رو که به ناصرالدین شاه خیانت کرد!!!

من چه میدونم چه ربطی داشت!

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

Share this post


Link to post
Share on other sites
حالا راهکردهای واکنش گرا در سی اس اس رو کامل توضیح میشه بدین؟ آموزشی در این مورد هست؟

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

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری