طراحی به شیوه ابتدا موبایل (Mobile First)

  • بوسیله: محسن شفیعی
  • در 1393/03/14 - 23:12
  • نظرات (8)
Mobile First Web Design

Mobile First Web Design

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

زمانی که طراحی تنها با یک ستون به پایان رسید با استفاده از Media Queryها و JavaScript سایت را برای نمایشگرهای بزرگتر آماده میکنیم. برای مثال ستون‌های بیشتری اضافه میکنیم، عکس‌های با رزولویشن بالاتری را لود میکنیم و هر کاری که میخواهیم در نمایشگرهای بزرگتر انجام دهیم.

اما فواید این روش چیست؟ در ادامه مطلب همراه ما باشید…

(بیشتر…)

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

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

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

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

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

(بیشتر…)

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

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

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

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

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

(بیشتر…)

تمپلیت برای قالبهای ریسپانسیو

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

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

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

در ابن مطلب شما میتوانید یک تمپلیت برای قالب هایی که میخواهید توسط HTML5 و به صورت Responsive طراحی کنید دانلود کنید. این تمپلیت از نظر ظاهری کاملا خالی (Blank) است.

در این تمپلیت کدهای CSS Reset, Meida Query, متا تگ های مخصوص HTML5 و کدهای Font-Face به صورت پیشفرض موجود است. شما میتوانید از این تمپلیت برای قالب های HTML5 خود استفاده کنید.

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

(بیشتر…)

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

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

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

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

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

(بیشتر…)

تشخیص جهت نمایشگر در CSS3

  • بوسیله: محسن شفیعی
  • در 1392/02/27 - 17:46
  • نظرات (3)
CSS3

CSS3

همانطور که میدانید امروزه اکثر موبایل ها و تبلت ها دارای دو نوع نمایش هستند. نمایش Landscape یا افقی و نمایش Portrait یا عمودی

برای تشخیص اینکه در حال حاظر کدام نمایش فعال است میتوان از Media Queryهای CSS3 استفاده کرد.

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

(بیشتر…)

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

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

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

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

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

(بیشتر…)

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

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

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

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

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

(بیشتر…)

مجموعه بزرگی از آیکون فونت ها

  • بوسیله: محسن شفیعی
  • در 1391/11/22 - 11:04
  • دیدگاه‌ها برای مجموعه بزرگی از آیکون فونت ها بسته هستند
مجموعه بزرگی از آیکون فونت ها

مجموعه بزرگی از آیکون فونت ها

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

(بیشتر…)

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

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

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

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

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

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

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

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

  (بیشتر…)

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