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

آگهی استخدام

نظرات ۳۵

وارد شوید

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

ورود

رمزتان را گم کرده‌اید؟