اصول طراح وب سایت واکنشگرا

طراحی وبسایت Responsive یا واکنشگرا یک راهکار بسیار کارآمد برای بهینه سازی وب سایت در سخت افزار های مختلف مثل موبایل و تبلت :
 
این نوع طراحی فاقد اندازه‌ی ثابت صفحه، فاقد میلی‌متر و اینچ و فارغ از محدودیت‌های صفحه نمایش است. طراحی در واحد پیکسل فقط برای دستگاه‌های رومیزی (desktop) یا همراه (mobile) دیگر قدیمی شده، چراکه همواره گجت‌های بیشتر و بیشتری توانایی باز کردن یک وبسایت را دارند. بنابراین میخوام در این بخش چند اصل اساسی را درخصوص طراحی وب‌سایت واکنشگرا به شما دوستا و همراهان دوست داشتی آکادمی آی تی بگم و به جای مقابله با وبسایت شناور (fluid web) به استقبال آن بریم. برای حفظ سادگی کار، بر چیدمان (layout) تمرکز می‌کنیم .
اما لازم که چند نکته رو در این مورد خدمت شما عرض کنم :
 
جریان (flow)
 
زمانی که شما در ابزاری مثل موبایل که عرض اون نسبت به صفحه کمتر هست وب سایت رو میبینید خوب طبیعتا ارتفاع وب سایت بسیار بیشتر میشه مثلا اگر توی یک دریف در دسکتاپ ۳ ستون اخبار جا میشده توی موبایل هر ستون در یک سطر باید قرار بگیره و اینکار یعنی اشغال کردن بیشتر فضای عمودی باید باعث بشه همه محتویات بعدشون به پایین تر هل داده بشن نه اینکه به علت رعایت نکردن اصول طراحی رسپانسیو محتویات روی هم بیفتن به این کار flow یا جریان میگن . اگر شما به طراحی با پیکسل و پوینت (point) عادت کردی شاید درک این قابلیت کمی برات سخت باشه، اما وقتی به اون عادت کنی به راحتی قابل درک می‌شه.
 
طراحی سایت ارزان
 
واحدهای نسبی (Relative units)
 
به جای استفاده از واحد های ثابت مثل پیکسل و … بهتره از واحد های نسبی مثل درصد استفاده کنیم تا وب سایت رو نسبت به تغییرات عرض سازگارتر کنه . مثلا وقتی میگیم ۱۰۰% منظورمون کل عرض مرورگر توی هر سخت افزاریه حالا چه عرض اون سخت افزار ۴۰۰px باشه جه ۱۹۰۰px فرقی نمیکنه ولی وقتی میگیم ۸۰۰px دیگه توی سخت افزار هایی که صفحه نمایش اونها از ۸۰۰px کمتر هست قطعا به مشکل بر میخوریم و اسکرول افقی خواهیم داشت . به طراحی با مقیاس های ثابت مثل px , point و… Static Unit میگن و به طراحی با واحد های نسبی مثل درصد Relative Units میگن.
 
طراحی سایت تهران
 
مقادیر بیشینه (Max) و کمینه (Min)
 
بعضی وقت ها خیلی خوبه که محتوا همه‌ی عرض صفحه را بگیره یعنی Full Width باشه ، مثلا روی یک دستگاه همراه. اما اینکه همان محتوا کل عرض صفحه نمایش تلویزیونتان را بگیرد معمولا کار معقولی نیست. اینجاست که مقادیر min و max به کمک می‌آد. مثلاً پهنای ٪۱۰۰و عرض بیشینه‌ی ۱۰۰۰ پیکسل به این معناست که محتوا کاملا صفحه را پر می‌کند، اما نباید بیشتر از ۱۰۰۰ پیکسل بشه .
 
شرکت طراحی سایت
 
نقاط شکست (Breakpoints)
 
نقاط شکست به چیدمان امکان می‌دهد در نقاط معینی تغییر کند، مثلا در صفحه‌ی دسکتاپ سه ستون داشته باشد ولی در صفحه‌ی همراه فقط یک ستون. بیشتر خصوصیات CSS می‌تواند از یک نقطه‌ی شکست به دیگری تغییر کند. معمولا مکان قرارگیری یک نقطه بستگی به محتوا دارد. اگر یک جمله بشکند باید یک نقطه‌ی شکست اضافه کنید. بایستی این نقاط را با احتیاط به‌کار برید چراکه ممکن است کارتان خیلی سریع به هم ریخته شود و تشخیص اینکه چه چیزی بر دیگری اثر می‌گذارد سخت شود.
 
طراحی سایت تهران

خانه --> اخبار و مقالات --> اصول طراح وب سایت واکنشگرا

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

لطفا آدرس ایمیل را بدون WWW وارد نمائید.

نظرات کاربران