آنالیز و تحلیل وب سایت ها

آنالیز و تحلیل وب سایت ها و آشنایی با ابزارهای سئو و بهینه سازی برای وب سایت ها برای مدیریت بهتر در گوگل ادوردز

آنالیز و تحلیل وب سایت ها

آنالیز و تحلیل وب سایت ها و آشنایی با ابزارهای سئو و بهینه سازی برای وب سایت ها برای مدیریت بهتر در گوگل ادوردز

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

طراحی سایت ریسپانسیو

يكشنبه, ۲۹ فروردين ۱۳۹۵، ۰۴:۴۴ ب.ظ

طراحی سایت ریسپانسیو: مثال ها و تمرین ها

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


حالا می توانید قابلیت ریسپانشیو بودن سایت خودتان را در اینجا امتحان کنید.

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

 

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

 

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

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

مثال هایی از طراحی سایت واکنش گرا

responsive-web-design

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

responsive-web-design

در این مثال صفحه شامل 3 قسمت اصلی است، هر کدام بر اساس تصویر پس زمینه جدا شده اند. و راه حل این است در مقیاس های متفاوت با اندازه های متفاوت نمایش داده شود.

موافقین ۰ مخالفین ۰ ۹۵/۰۱/۲۹
رضا محمدی

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی