اصطلاح طراحی وب ریسپانسیو (پاسخگو) به مفهوم طراحی یک وب سایت به شیوه ای است که نحوه‌ی چیدمان المان‌ها را با توجه به وضوح صفحه نمایش کاربر تغییر می‌دهد.

برای مثال، این مفهوم اجازه می‌دهد که یک طراحی ۴ ستونه‌ با عرض ۱۲۹۲ پیکسل، بر روی صفحه نمایشی با عرض ۱۰۲۵ پیکسل، تبدیل به ۲ ستون شود. همچنین، این نوع طراحی برای نمایش روی موبایل‌ها و تبلت‌ها بسیار مناسب است. به این تکنیک خاص طراحی «طراحی ریسپانسیو» گفته می‌شود.

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

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

تصاویری که  در طراحی وب ریسپانسیو هستند، «مطلع از زمینه» (context-aware) نامیده می‌شوند. این تکنیک خاص به هدف طراحی ریسپانسیو کمک می‌کند. زیرا که تصاویر در عرض‌های مختلف از بزرگ تا کوچک به خوبی نمایش داده می‌شوند. به نظر می‌رسد که تصاویر مقیاس‌شده با استفاده از ابزار‌های به‌روزشده‌ی توسعه‌دهندگان و زبان‌های برنامه‌نویسی، تغییرات روانی دارند و به همین دلیل، طراحی‌ها در هر دستگاهی سریع دیده می‌شوند.

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

مثال‌های طراحی وب ریسپانسیو

بلاگ نهایت توسعه

وبلاگ نهایت توسعه

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

Simon Collison

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

معماران Andersson-Wise

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

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

Stephen Caver

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

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

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

‌Sparkbox

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

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

حس غذا

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

با اینکه هیچ چیز فوق‌العاده‌ای وجود ندارد؛ اعتقاد بر این است که برای جلب توجه خوانندگان آنلاین موبایلی، جذب مخاطب جدید و حفظ زیبایی سایت از شلوغی‌های بصری باید راه‌حل ساده‌ای وجود داشته باشد.

The Boston Globe

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

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

Think Vitamin

Think Vitaminاگر بخواهیم صادق باشیم، Think Vitamin نمی‌تواند به درباره‌ی طراحی بلاگ خود به هیچ چیز ویژه‌ای ببالد. المان‌های صفحه دقیقا مانند هر بلاگ دیگری است. یک ستون اصلی با ویجت‌هایی در نوار سمت راست، یک هدر متشکل از منوی ناوبری، لوگو و یک نوار جستجو و یک پاورقی که اطلاعات را از طریق مجموعه ای از بلوک ها ارائه می دهد.

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

Sasquatch! جشنواره‌ی موسیقی‌

sasquatchfestival

جشنواره‌ی موسیقی باید با تعداد زیادی مطالب چندرسانه‌ای از جمله ویدئو و افکت‌های پویا با چاشنی فونت‌های دستی هنرمندانه و گرافیک فوق‌العاده سر و کار داشته باشد. بنابراین برای این تیم، نمایش درست المان‌ها در موبایل و تبلت یک چالش اساسی است.

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

Internet Images

https://interim.it/این یکی دیگر از وبسایت‌هایی است که به خوبی سازماندهی شده و براساس طرحی با خطوط افقی است. پاسخگویی در این‌جا نیز به طور مؤثری توسط یک تمایز رنگی تقویت شده است و یک بلوک منطقی را به صورت بصری از دیگری جدا می‌کند.
به عنوان یک قاعده، هر چیزی که مانند یک جریان داده مستمر ارائه شود، به علت یکنواختی ذاتی، می‌تواند به راحتی تمام جذابیت را نابود کند و علاقه خوانندگان را کاهش دهد. ولی این ترکیب ساده و در عین حال قدرتمند، عمدتا به افزایش قابلیت خوانایی در دستگاه‌های کوچک کمک می‌کند.

Staffanstorp

https://staffanstorp.se/در اینجا، توانایی سازگاری زیبا با صفحه نمایش‌های کوچک، در عین سازگاری با بزرگترها مزایایی را به همراه می‌آورد. از جمله:

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

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

 

۱