9 تصویر GIF که طراحی پاسخگو را کاملا روشن توضیح می دهند

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

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

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

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

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

3038367-inline-i-1-9-gifs-that-explain-responsive-design-brilliantly-01responsive-vs-adaptive-copy

قرار گیری عناصر طراحی با استفاده از مختصات X  و Y وب سایتی را به شما تحویل خواهد داد که در یک نمایشگر عالی عمل می کند ولی ممکن است در نمایشگر دیگری عجیب و غریب به نظر برسد. در طراحی پاسخگو به جای واحد های ثابت مانند پیکسل از واحد های خویشاوند مانند درصد صفحه نمایش استفاده می کنند.

3038367-inline-i-2-9-gifs-that-explain-responsive-design-brilliantly-02relative-units-vs-static-units-1-copy

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

3038367-inline-i-4-9-gifs-that-explain-responsive-design-brilliantly-04flow-vs-static-2-copy

نقاط شکست یا بریک پوینتز (Breakpoints)  به لایه ها اجازه می دهند که در قسمت های تعیین شده، تغییر پیدا کنند.

3038367-inline-i-3-9-gifs-that-explain-responsive-design-brilliantly-03with-breakpoints-vs-without-breakpoints-1-co

با اسفاده از عناصر تودرتو (nesting elements) می توان مجموعه هایی از عناصر ساخت که خودشان را با کشش یا گسترش صفحه نمایش به جای حرکات جداگانه، به صورت یک مجموعه تطبیق می دهند.

3038367-inline-i-5-9-gifs-that-explain-responsive-design-brilliantly-05nested-vs-not-nested-1-copy

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

3038367-inline-i-7-9-gifs-that-explain-responsive-design-brilliantly-07max-width-vx-no-max-width-1-copy

از نظر فنی تفاوت زیادی بین پروژه هایی که ابتدا از یک صفحه کوچکتر و سپس برای یک صفحه بزرگتر طراحی می شوند (تقدم موبایل mobile first) یا برعکس (تقدم دسکتاپ desktop first) وجود ندارد. اما اگر طراحی شما با تقدم موبایل صورت گرفته باشد، کمک می کند که برای محدودیت های بیشتری که در صفحه نمایش کوچکتر دارید، بهتر تصمیم گیری کنید.

3038367-inline-i-8-9-gifs-that-explain-responsive-design-brilliantly-08desktop-first-vs-mobile-first-3-copy

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

3038367-slide-s-6-9-gifs-that-explain-responsive-design-brilliantly-06system-fonts-vs-webfonts-1

 

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

3038367-inline-i-9-9-gifs-that-explain-responsive-design-brilliantly-09vectors-vs-images-1-copy

منبع:
fastcodesign

مطالب مرتبط

کیم دات کام به علت نقض قوانین کپی رایت، به دولت ایالات متحده تحویل داده می شود

«کیم دات کام» هم نام یک شخص است و هم یک وب سایت؛ فردی که پایگاه اینترنتی Megaupload را تاسیس نموده بود و موجب شد تا استودیوهای تهیه فیلم و موسیقی زیان های زیادی را تجربه کنند. در سال ۲۰۱۲، دولت آمریکا خبر داده بود که کیم دات کام تحت تعقیب پلیس این کشور قرار دارد. همچنین وزارت... ادامه مطلب

نسل سوم اینترنت همراه؛ همچنان پیشتاز در آمار های جهانی

بر اساس گزارشات GlobalWebIndex که از دسترسی کاربران موبایل به اینترنت در سطح جهانی خبر می دهد، صرفا 16 درصد از آنها از نسل 4G برای اتصال به این شبکه از طریق تلفن های هوشمند و تبلت هایشان استفاده می کنند. 16 درصد دیگر نیز از ارتباطات وایرلس بهره برده و در نهایت 36 درصد هم از نسل... ادامه مطلب

فناوری 5G چیست و چه تاثیراتی بر زندگی روزمره کاربران خواهد گذاشت؟

تا پنچ سال آینده، اینترنت، تاثیرات شگرفی بر زندگی انسان خواهد داشت. به تازگی شبکه های 3G و 4G میهمان اسمارت فون های ما شده اند اما آنگونه که از کنگره جهانی موبایل خبر می آید، تا سال ۲۰۲۰، اینترنت نسل پنجم یا همان 5G به بهره برداری خواهد رسید. 3G سرعتی تقریبا قابل قبول دارد... ادامه مطلب

فیس بوک بالاخره از اموجی های جدید خود رونمایی کرد

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

بررسی ۱۰ استارت‌آپ جالب سال ۲۰۱۵

سال گذشته فیسبوک پذیرفت برای به دست آوردن واتس‌اپ ۱۹ میلیارد دلار بپردازد. سهام Uber نیز بعد از ارزشگذاری ۱۸ میلیارد دلاری آن، یک میلیارد دلار دیگر صعود کرد، طبق گزارشات احتمال می‌ رفت به رقمی بالاتر از این نیز برسد. همینطور در مورد اسنپ‌چت نیز شنیده می‌ شود که ارزش آن ۱۰ میلیارد دلار... ادامه مطلب

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

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

نظرات ۳۵

وارد شوید

برای گفتگو با کاربران، وارد حساب کاربری خود شوید.

ورود
x