آموزش ساخت ایمیل ریسپانسیو

  • بوسیله: محسن شفیعی
  • در 1392/10/02 - 17:32
  • نظرات (8)
ایمیل ریسپانسیو

ایمیل ریسپانسیو

در این پست آموزش ساخت ایمیل به صورت ریسپانسیو داده خواهد شد به صورتی که در تمام سرویس های ایمیل، شامل گوشی های هوشمند و اپلیکیشن های ایمیل درست نمایش داده شود. در این روش میخواهیم تا حد امکان از مدیا کوئری ها کمتر استفاده کنیم و قالب را به صورت شناور (fluid) طراحی کنیم.

در ادامه همراه ما باشید…

(بیشتر…)

منوی های ریسپانسیو – نوع اول

  • بوسیله: محسن شفیعی
  • در 1392/09/06 - 12:27
  • نظرات (9)
طراحی رسپانسیو

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

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

در ادامه همراه ما باشید…

(بیشتر…)

نمای ریسپانسیو در مرورگرها

  • بوسیله: محسن شفیعی
  • در 1392/03/04 - 13:23
  • نظرات (12)
طراحی رسپانسیو

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

اگر طراحی ریسپانسیو میکنید. یکی از دغدغه های شما احتمالا درست کردن اندازه مرورگر با اندازه نمایشگرهای مختلف است. برای مثال شما میخواهید ببینید سایت شما در نمایشگرهای 768*1024 چگونه دیده میشود, اینکار با تغییر سایز پنجره مرورگر به درستی انجام نمیشود. البته امروزه سایت هایی هستند که این امکان را به شما میدهند.

اما در این مطلب با ما باشید تا ببینیم مرورگرهای Firefox و Chrome چه امکاناتی را برای ما گذاشته اند.

(بیشتر…)

مدیا کوئری های توصیه شده در طراحی ریسپانسیو

  • بوسیله: محسن شفیعی
  • در 1392/01/23 - 16:02
  • نظرات (4)
آموزش طراجی رسپانسیو

آموزش طراجی رسپانسیو

اگر شما از آن دسته از کسانی هستید که میخواهید به تازگی از طراحی ریسپانسیو در پروژه های خود استفاده کنید حتما با این سوال روبرو شده اید که از کدام مدیا کوئری ها (Media Query) باید استفاده کرد؟

در این مطلب به معرفی مدیا کوئری های توصیه شده میپردازیم. در ادامه با ما باشید…

(بیشتر…)

تصاویر ریسپانسیو – تکنیک دوم

  • بوسیله: محسن شفیعی
  • در 1392/01/10 - 19:11
  • نظرات (4)
طراحی ریسپانسیو

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

چندی قبل مطلبی به نام “ایجاد تصاویر ریسپانسیو با Jquery و PHP” قرار دادیم که در آن میتوانستیم بسته به اندازه صفحه نمایش کاربر عکس مورد نظر را فراخوانی کنیم. برای مثال برای صفحه نمایش های بزرگتر عکس بزرگ را فراخوانی میکنیم و برای صفحه نمایش های کوچک عکس کوچک را فراخوانی میکنیم. دلیل های اینکار را هم در همان مطلب گفتیم که برای اطلاعات بیشتر میتوانید به آن مطلب مراجعه کنید.

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

(بیشتر…)

طراحی ریسپانسیو یک سایت دیگر

  • بوسیله: محسن شفیعی
  • در 1391/11/05 - 17:35
  • نظرات (5)
آموزش طراجی رسپانسیو

آموزش طراجی رسپانسیو

این مطلب در دسته بندی مطالب طراحی ریسپانسیو است. طراحی ریسپانسیو را در اینجا دنبال کنید.

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

البته این را نیز یادآور میشوم که بهترین کار برای یادگیری عمل کردن است.

دوباره بعضی نکات باید یادآوری شود.

برای اینکه مدیا کوئری ها و عناصر جدید HTML5 در مرورگرهای قدیمی مانند IE8 و IE7 به درستی عمل کنند ما دو کتابخانه css3-mediaqueries.js و html5shim را برای این دو مرورگر فراخوانی میکنیم.

  (بیشتر…)

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

  • بوسیله: محسن شفیعی
  • در 1391/11/03 - 22:28
  • نظرات (6)
طراحی ریسپانسیو در ایران

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

این مطلب در دسته بندی مطالب طراحی ریسپانسیو است. طراحی ریسپانسیو را در اینجا دنبال کنید.

اگر سری با سایت های خارجی بزنید میبینید که اغلب سایت هایی که دارای طراحی جدید هستند(تازه طراحی شده اند) از طراحی ریسپانسیو کمک گرفته اند. ما در آپارنت مطالب زیادی را در این مورد گذاشتیم و به شرح آموزش های این طراحی از جنبه های مختلف کردیم. اما ریسپانسیو در ایران چطور است؟

در ادامه با ما همراه باشید…

(بیشتر…)

آموزش طراحی ریسپانسیو – فونت ها

  • بوسیله: محسن شفیعی
  • در 1391/10/28 - 23:08
  • نظرات (6)
آموزش طراحی ریسپانسیو – قدم اول

آموزش طراحی ریسپانسیو – قدم اول

این مطلب در دسته بندی مطالب طراحی ریسپانسیو است. طراحی ریسپانسیو را در اینجا دنبال کنید.

برای درک طراحی ریسپانسیو ابتدا مطالب طراحی ریسپانسیو (Responsive) چیست؟ و آموزش طراحی ریسپانسیو را بخوانید.

در قدم اول ما در طراحی ریسپانسیو باید اندازه تمام فونت هایمان را از واحد px به واحد em تبدیل کنیم.

در واقع em بر اساس میزان بزرگی یا کوچک بودن والد, اندازه خود را نیز تغییر میدهد و این همان چیزی است که ما آن را لازم داریم. زیرا میخواهیم در دستگاه های کوچکتر مانند موبایل اندازه فونت ها به صورت خودکار تنظیم شود.

(بیشتر…)

ایجاد تصاویر ریسپانسیو با Jquery و PHP

  • بوسیله: محسن شفیعی
  • در 1391/10/23 - 21:04
  • نظرات (4)
طراحی ریسپانسیو

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

این مطلب در دسته بندی مطالب طراحی ریسپانسیو است. طراحی ریسپانسیو را در اینجا دنبال کنید.

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

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

در ادامه با ما همراه باشید…

(بیشتر…)

آموزش قدم به قدم طراحی ریسپانسیو یک سایت کامل

  • بوسیله: محسن شفیعی
  • در 1391/10/21 - 11:52
  • نظرات (67)
آموزش قدم به قدم طراحی ریسپانسیو یک سایت کامل

آموزش قدم به قدم طراحی ریسپانسیو یک سایت کامل

ابتدا توصیه میکنیم حتما مطالب “ طراحی ریسپانسیو (Responsive) چیست؟” و ” آموزش طراحی ریسپانسیو” را بخوانید.

در این آموزش به شما نشان خواهیم داد که چگونه باید یک سایت ریسپانسیو درست کرد. سایتی که در همه رزولیشن ها به خوبی نمایش داده شود.

هدف پروژه: درباره من


ایجاد کردن سند

صفحه رو با doctype HTML5 و متا تگ ها آغاز کردیم. اما در طراحی ریسپانسیو ما نیاز به نصب کامپوننت های اضافی خواهیم داشت. بیشتر این متا تگ ها توسط مرورگرهای مدرن پشتیبانی میشوند.
(بیشتر…)

  • صفحه 1 از 2
  • 1
  • 2
  • <