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

مطالب مرتبط

نگاهی به داخل فروشگاه Samsung 837 در نیویورک [تماشا کنید]

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

طراحی متریال به گوگل کروم هم رسید

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

نگاهی بر 10 مورد از شاهکارهای مهندسی ساختمان در عصر کنونی

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

نگاهی به داخل خانه ساتیا نادلا که به قیمت 3.5 میلیون دلار برای فروش گذاشته شده

به گزارش LA تایمز، مدیر عامل کنونی مایکروسافت یعنی ساتیا نادلا خانه ی سیاتل خود را با قیمت 3.5 میلیون دلار برای فروش گذاشته.این خانه که در وب سایت املاک و مستغلات Redfin فهرست گشته، 4 اتاق خواب و سه سرویس بهداشتی دارد و  مساحت کلی آن نیز حدود 372 متر مربع اعلام گشته. این... ادامه مطلب

نگاهی به چشم انداز گوگل برای آینده پر از هرج و مرج پردازش کامپیوتری

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

با «اکوکپسول» آشنا شوید؛ خانه ای متحرک با کلیه امکانات زندگی

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

نظرات ۳۵

وارد شوید

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

ورود

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