9 تصویر GIF که طراحی پاسخگو را کاملا روشن توضیح می دهند
آیا تشخیص یک وب سایت پاسخگو (responsive) از یک وب سایت تطبیق پذیر (Adaptive) شما را نیز گیج کرده است؟ در این مطلب چند تصویر متحرک گیف وجود دارند که به سادگی تفاوت های این ...
در دیجیاتو ثبتنام کنید
جهت بهرهمندی و دسترسی به امکانات ویژه و بخشهای مختلف در دیجیاتو عضو ویژه دیجیاتو شوید.
عضویت در دیجیاتوتازههای تکنولوژی
آیا تشخیص یک وب سایت پاسخگو (responsive) از یک وب سایت تطبیق پذیر (Adaptive) شما را نیز گیج کرده است؟ در این مطلب چند تصویر متحرک گیف وجود دارند که به سادگی تفاوت های این دو نوع طراحی را توضیح می دهند.
طراحی پاسخگو چیست؟ تصوری که بیشتر مردم از این نوع طراحی دارند، وب سایت هایی هستند که روی نمایشگر دسکتاپ و گوشی های هوشمند به همان خوبی کار می کنند. اما طراحی پاسخگو چیزی فراتر از این است که باعث می شود این نوع طراحی تا حدودی گیج کننده باشد.
وب سایت هایی که با تقدم موبایل طراحی می شوند، دست شما را برای تصمیم گیری در مورد محدودیت ها باز تر می گذارند.
اما به لطف این مجموعه تصاویر فوق العاده گیف که توسط بچه های Froont ساخته شده، درک اصول اولیه طراحی پاسخگو آن قدر ها هم مشکل نیست. Froont یک شرکت سانفرانسیسکویی است که ابزار هایی را برای طراحان وب سایت های پاسخگو مهیا می کند. اگر کمی زمان برای دیدن این تصاویر گیف بگذارید، از این به بعد نه تنها هرگز در تشخیص وب سایت های پاسخگو و تطبیقی دچار مشکل نخواهید شد، بلکه به سرعت آن ها را از یکدیگر تمیز می دهید. با دیجیاتو همراه باشید.
در دو تصویر زیر می بینید که طراحی پاسخگو خیلی روان گسترش می یابد اما طراحی تطبیقی برای گسترش خود در یک مرورگر بزرگتر کمی به دردسر می افتد.
قرار گیری عناصر طراحی با استفاده از مختصات X و Y وب سایتی را به شما تحویل خواهد داد که در یک نمایشگر عالی عمل می کند ولی ممکن است در نمایشگر دیگری عجیب و غریب به نظر برسد. در طراحی پاسخگو به جای واحد های ثابت مانند پیکسل از واحد های خویشاوند مانند درصد صفحه نمایش استفاده می کنند.
همانطور که اندازه صفحه نمایشگر کوچک تر می شود، محتویات فضای عمودی بیشتری را به خود اختصاص می دهند و عناصری که در زیر آن محتویات قرار دارند به سمت پایین هل داده می شوند. به این عمل، فلو یا جریان گفته می شود.
نقاط شکست یا بریک پوینتز (Breakpoints) به لایه ها اجازه می دهند که در قسمت های تعیین شده، تغییر پیدا کنند.
با اسفاده از عناصر تودرتو (nesting elements) می توان مجموعه هایی از عناصر ساخت که خودشان را با کشش یا گسترش صفحه نمایش به جای حرکات جداگانه، به صورت یک مجموعه تطبیق می دهند.
گاهی وقتی محتویات یک وب سایت عرض یک صفحه نمایش را پر می کنند نتیجه عالی می شود، مثل صفحه های نمایش گوشی های موبایل. اما صفحه های نمایشی هم مثل صفحه تلویزیون ها هوشمند هستند که این عرض زیاد وب سایت در آن ها، ویژگی جالبی نخواهد بود.
از نظر فنی تفاوت زیادی بین پروژه هایی که ابتدا از یک صفحه کوچکتر و سپس برای یک صفحه بزرگتر طراحی می شوند (تقدم موبایل mobile first) یا برعکس (تقدم دسکتاپ desktop first) وجود ندارد. اما اگر طراحی شما با تقدم موبایل صورت گرفته باشد، کمک می کند که برای محدودیت های بیشتری که در صفحه نمایش کوچکتر دارید، بهتر تصمیم گیری کنید.
درست است که استفاده از فونت های سیستمی شاید خیلی جلوه نداشته باشد و گاهی ترجیح می دهید از فونت های وب استفاده کنید، اما به خاطر داشته باشید که این نوع فونت ها همیشه باید ابتدا توسط کاربر دانلود شوند و هر چه بیشتر از این فونت ها در طراحی استفاده شود، زمان مدت دانلود بالاتر می رود و این یعنی تاخیر بیشتر در لود شدن صفحه وب سایت. در عوض فونت های سیستمی در همه سیستم ها وجود دارند و نیاز به دانلود شدنشان نیست و تنها در صورتی که در سیستم کاربر فونت مورد نظر وجود نداشته باشد، این فونت با فونت پیش فرض جایگزین خواهد شد.
آیا آیکون های شما جزییات زیاد و جلوه های فانتزی دارد؟ اگر اینطور است از یک تصویر bimap استفاده کنید. اگر خیر، سعی کنید تصاویر وکتور به کار ببرید. تفاوت آن ها را در زیر می بینید. یک تصویر وکتور به راحتی خودش را با رزولوشن های مختلف تطبیق می دهد.
دیدگاهها و نظرات خود را بنویسید
برای گفتگو با کاربران ثبت نام کنید یا وارد حساب کاربری خود شوید.
البته باید به طراحی ریسپانسیو خود دیجیاتو هم اشاره کرد که واقعا خوب و تر تمیز درش آوردن ...
عالی بود.ممنون
اقا ببخشید من دوباره اومدم فردا ساعت 9 صبح رئال مادرید با مایکروسافت گفتگو دارن
اینم لینکش http://www.microsoft.com/spain/realmadrid/en/
داداش چه سرعت عمل تندی داری ، می خواستم همینو بگم / اگه فردا اسم باشگاه برنابائو تغییر کنه به مایکروسافت چه حالی می ده / به صورت زنده مراسم پخش می شه ، کار تمومه فکر نمی کنم به گز عوض کردن اسم ورزشگاه ، چیزه دیگه ای باشه
مگه میشه؟!!!
جدی میگی؟!
چون سانتیاگو برنابئو کم کسی نیست از نظر هوادارای رئال
رئالم یا این پولایی که خرج کرده بعیده تا این حد مشکل مالی داشته باشه.
شاید مایکرو بخواد اسپانسر روی پیراهن رئال باشه بعد فلای امریتس
راستی با اینکه ابدا رئالی نیستم و مایکرو رو هم دوست دارم تغییر اسم استادیوم اصلا کار جالبی نیست.
الان آرسنال این کار رو کرد و همه ی دنیا دارن مسخرشون میکنن
حتی خود آرسنالیا هم بیشتر به امارات میگن اشبرتون (اگه اشتباه نکنم)
کلا دخالت کردن مسائل غیر ورزشی تو فوتبال خوب نیست
آپدیت اندروید ۵ بصورت ota برای نکسوس ۴ همین الان نوتیفیکیشنش برام اومد
شرمنده بی ربطه!
مایکروسافت به ۲ درخواست ایرانیان در صدای کاربر ویندوز پاسخ داد!
لینک ؟؟؟
مقاله بسیار عالی بود.جدیدا سطح مقالات دیجیاتو رفته بالا.تشکر ویژه دارم
ــــــــــــــــــــــــــــــــــ
دیجیاتو اگه میشه تصاویر گیف هم به شکلک ها اضافه کن :)
البته قدیما ریسپانسیو رو واکنشگرا ترجمه میکردن نه پاسخگو!
عالی بود مثه همیشه مرسی
..............................................................
شبتون خوش
هووم؟ :-/
گرفتی مارو آخرشبی دیجی؟
اقا یک خبر تازه مایکروسافت به دو تا از درخواست های ایرانی ها پاسخ داده یکی تقویم شمسی یکی دیگه درست کردن زمان ایران در ویندوز شرمنده بی ربط پست گذاشتم
sleep well good night pals
یه سوال داشتم شما می دونید لومیا ۲۵۲۰ قرمز فقط برای وریزون هست یا نه ، انگار فقط رنگ سیاه این تبلت اومده ایران
http://www.alldigitall.ir/product/45140/Tablet-Nokia-Lumia-2520#page=1
نه داداش اشتباه می کنی ، هیچی معتبر تر و دقیق تر از رادیو چین نیست
سایت مایکروسافت رو چک کن!
https://windows.uservoice.com/forums/265757-windows-feature-suggestions
تو اینقد واسه مایکروسافت وقت میزاری و خبراشو میای اینجا پوشش میدی و کلی هم حمایتو و طرفداری میکنی
انصافا از مایکروسافت حقوق میگیری؟؟؟
یا
جهاد فی سبیل الله حساب میشه؟
این فرمت(GIF)، جیف هست نه گیف !
دوست عزیزم تلفظ این عبارت همون گیف هست چون در زبان انگلیسی این عبارت acronym هست نه initials، پس باید بصورت کلمه خونده شه
هردوش درسته اما دقیقش جیف میشه فک کنم...
از دیجیاتو انتظار داریم کاملا صحیحو استفاده بکنه ...سایت تخصصیه بالاخره
دوستای عزیز تلفظ درست این کلمه همون گیف هست، چون تو زبان انگلیسی این عبارت acronym هست نه initials، بنابراین باید به صورت یک کلمه و اینطور تلفظ شه
طبق گفته مخترع این فرمت، آقای Steve Wilhite، تلفظ درست(تر) این واژه "جیف" هست.
دوست عزیز من از لحاظ زبان شناسی اینو می دونستم ولی ممنون ازینکه این اطلاع رو دادید نمی دونستم ایرو پس با این حساب هر دو تلفظ درست هستن ولی با این چیزی که شما گفتید جیف پس بهتره، ممنون