زمانی برای طراحی ریسپانسیو

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

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

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

در این پست برای آگاهی صاحبان سایت‌ها و وبلاگ‌ها ایرانی و همچنین طراحان وب، دو نمونه از سایت‌هایی را ذکر می‌کنم که به تازگی به طراحی ریسپانسیو روی آورده‌اند.

سایت اول سایت readWriteWeb است که به خاطر داشتن تحلیل‌های ژرف، یکی از سایت‌های مورد علاقه من در حوزه فناوری است، این سایت البته سال پیش توسط Say Media خریداری شد، «ری برند» شد و نامش به readWrite تغییر پیدا کرد و تیم دبیری آن هم تغییر پیدا کرد.

اما در تازه‌ترین تغییر در این سایت، ما شاهد یک قالب جدید، زیبا و کارا در آن هستیم که ریسپانسیو است.

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

اگر به این سایت سر بزنید و با مرورگر خود روی سایت زوم کنید، می‌بیند که به تناسب افزایش زوم، سایت واکنش نشان می‌دهد و با سایز جدید، سازگار می‌شود.

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

قبلی «
بعدی »

نظرات

  1. برای این کار از
    bootstrap
    استفاده کرده

  2. یادم میاد جی میل این خاصیت رو خیلی وقت پیش گذاشته بود.
    اما انصافاً چیز ضروریه، مخصوصاً اگه با تبلت یا موبایل وب گردی کنی

  3. البته همیشه یک دکمه برای بازگشت به نسخه ی اصلی داره!(قابل توجه آقای مجیدی)

  4. سلام؛

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

    http://www.smashingmagazine.com/

    صفحه رو از حالت maximized با استفاده از ماوس، آروم آروم ریسایز کنید و ۴ مرحله تغییر عالی در تغییر استایل این سایت رو ببینید.

    ممنون از این مطلب خوب شما آقای مجیدی

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

  6. چرا ریسپانسیو را به “پاسخگو” ترجمه نکرده اید؟

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

  8. اولین و بزرگترین سایتی که از این تکنولوژی استفاده کرد مایکروسافت بود

  9. آقای مجیدی
    با سلام و احترام

    چه خوب شد به این موضوع پرداختید، چند وقتی بود یک سوالی ذهنم را مشغول کرده بودم، بد نمی دانستم اگر نظر شما را هم درباره آن بدانم.

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

    نظر شما درباره آن چیست؟ محتوای منحصر به فرد که باعث افزایش دانش کاربران، تاثیرگذاری در مخاطبان هدف، جذب کاربران و… شود.

    در برابر سیستم مدیریت وبلاگی، قالب های آماده و بدون افزونه ها و امکانات حرفه ای

    شما چه نمره ای به چنین سایتی و چنین سیستمی میدهید؟ (اگر در افزایش دانش عمومی و سایر موارد اثرگذاری مطلوب داشته باشد)

    دلایل عدم استفاده از سیستم های مدیریت محتوا می توانند به هر دلیلی باشد:
    عدم هزینه کرد، سادگی استفاده از سیستم های وبلاگی و…

  10. با سلام

    آقای مجیدی چرا پاسخی به سوال بالا ندادید؟؟

  11. سلام،

    جناب مجیدی کاش خود شما به عنوان اولین سایت اقدام به این نوع طراحی می‌کردید! سایت شما در وضعیت موبایل (iOS) واقعا اسفباره! و یکبار دیگه هم به بهتون گفتم و متاسفانه مثل دیگران هیچ ترتیب اثری ندادید، اینکه کاش حداقل یک لینک سوییچ به نسخه دسکتاب در ورژن موبایل قرار می‌دادین.

  12. پاسخ: گزاره‌ها » لینک‌های هفته (۱۱1)
  13. مطلب مفیدی است.
    طراحان وب برای به روز ماندن باید به این نکات توجه داشته باشند.

    سپاس

دیدگاه خود را با ما اشتراک بگذارید:

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

اینستاگرام ما را لطفا دنبال کنید!

پیشنهاد می‌کنیم