اصول طراحی وب سایت

چگونه طراحی وب سایت استاندارد میتواند مانع خروج کاربران از وب سایت شود و میزان Bounce rate را کاهش دهد ؟

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

در این مقاله سعی خواهیم کرد تا با واژه Bounce rate آشنا شویم و تعدادی از دلایل خروج کاربران در اولین بازدید از وب سایت را بررسی نمائیم و همچنین راه کارهایی برای کاهش میزان خروج کاربران از وب سایت – Bounce rate – ارائه کنیم .

کاهش میزان خروج کاربران از وب سایت – Bounce rate – به واسطه طراحی بهتر

راهنمای , آموزش استفاده از فایر باگ – firebug – برای طراحان وب

فایر باگ – firebug – ، یک برنامه اپن سورس است و به عنوان ابزار اضافی یا کمکی ، برای توسعه وب استفاده می شود که مخصوص مرور گر موزیلا فایر فاکس – firefox – می باشد. این ابزار به طرز باورنکردنی قدرتمند است و با ابعاد وسیعی از امکانات و خصوصیات کاربردی ، برای هر طراح و یا توسعه دهنده وب مفید و مناسب است.
در واقع این امکان اضافی ( در مرور گر های دیگر با قابلیت کمتر نیز وجود دارد) یدک کش اسم مرور گر خود می باشد.فایر باگ دربین ابزار های دیگر( مانند ابزار بررسی و تست قالب و پروفایل اجرایی صفحات وب )، برای سرعت بخشیدن به روند کاری، زمان انجام عملیات آزمون و خطا را هنگام دی باگ کردن یا رفع اشکال صفحات وب کاهش می دهد.

فایرباگ – Firebug – چیست و چگونه از فایر باگ استفاده کنیم ؟

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

چگونه طراح وب سایت بهتری شوم ؟

اشتباهاتی که نباید در طراحی وب سایت خود مرتکب شوید

با گذر زمان قوانین و روشهای کاربردی تری ، برای کمک به بهبود فابلیت استفاده عمومی از وب سایت ها توسعه و گسترش یافته اند.این مقاله خلاصه ای است از ده اشتباه رایج و یا نادیده گرفته شده در طراحی وب و ارائه راه حل های جایگزین برای کمک به افزایش قابلیت استفاده از وب سایت .

10 نکته کاربردی در طراحی وب سایت

همه طراحان وب که به صورت انفرادی کار می کنند با یک سناریوی مشترک مواجه هستند و آن شانس داشتن پروژه ای است که باید از تکنیک یا موضوعات جدیدی که قبلا اجرا نکرده اند ، استفاده کنند . مثلا ادیت کردن یک ویدئو برای وب سایت یا ایجاد وب سایت برای موبایل.
هر موضوعی که باشد برای افزایش توانایی و قابلیت های شما ارزش دارد .

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

پنج تجربه در طول یک پروژه

اهمیت تگ های h1,h2,h3,h4,h5,h6 در چینش صفحات وب سایت

بسیاری از طراحان وب سایت بر این عقیده هستند که کسب کردن استانداردهای طراحی وب سایت در استاندارد بودن کدهای HTML است وValidate بودن کدهای HTML به تنهایی نشان دهنده استاندارد بودن وب سایت طراحی شده توسط آنهاست . اما باید بدانید این تازه اول راه است !?

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

استفاده مناسب از تگهای Heading

چینش صفحه با ساختار دو ستون با عرض متغیر درCSS

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

چینش صفحه – دو ستون – عرض متغیر

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

با نظرات و پیشنهادات خود در مورد این مطلب و همچنین روند کلی حرکت این وبلاگ ما را در افزایش کیفیت مطالب و همچنین حرکت در مسیر درست یاری نمائید – با تشکر

آشنایی با گزینشگرها – selector – در CSS

نحوه چینش عناصر تمامی سندهای HTML به صورت درختی قابل تحلیل است . هر درجه و رتبه از این درخت معنایی مشابه با روابط انسانی دارد و می توان روابط بین این عناصر را با روابط انسانی مقایسه نمود . معانی مانند جد ، نسل ، والدین ، فرزند و خواهر و برادر – ancestors, descendants, parents, children and siblings – درک مفهوم موقعیت عناصر نسبت به یکدیگر در یک سند HTML می تواند کمک بزرگی برای درک بهتر مفاهیمی مانند گزینشگرها در CSS باشد .

بررسی موقعیت عناصر در یک سند HTML

چینش صفحه با ساختار دو ستون با عرض ثابت به همراه لایه های گسترده به وسیله CSS

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

در این نوع از چینش یک بخش با نام wrapper اضافه شده است . این نوع از چینش ترکیبی از چینش fix و liquid است . قسمت های header , navigation , footer دارای ترکیبی از ساختار متغیر و ثابت هستند .

چینش صفحه – دو ستون – عرض ثابت + لایه های گسترده

چینش صفحه با ساختار دو ستون با عرض ثابت به وسیله CSS

این نوع از چینش در بسیاری از وب سایت ها مورد استفاده قرار میگیرد و شما می توانید نمونه ای از این نوع ساختار را در همین وبلاگ ملاحظه نمائید. با توجه به نوع و تکنیک مورد استفاده در این نوع از چینش توضیحات بیشتری در مورد آن ارائه خواهد شد .

چینش صفحه – دو ستون – عرض ثابت

چینش صفحه با ساختار یک ستون با عرض متغیر به وسیله CSS

در ابتدا می توانید نمونه ای از این ساختار را ملاحظه نمائید . استفاده از این ساختار که در اصطلاح به عنوان ساختار Liquid شناخته می شود با توجه به متغیر بودن عرض صفحات نمایش و رزولوشن های متفاوت تصویر در کامپیوتر های متفاوت بسیار متداول است و می توان گفت پایه تمام ساختارهای متغیر از این چینش به وجود خواهند آمد.

چینش صفحه – یک ستون – عرض متغیر

در این مجموعه آموزشی تلاش خواهد شد تا با ساختار و چینش های استاندارد و مختلف از صفحات وب سایت با استفاده از لایه ها آشنا شوید . مطالب به صورت کاملا کاربردی ، ساده و کوتاه ارائه خواهند شد و آشنایی اولیه با HTML و CSS مورد نیاز است. در این وبلاگ سعی شده است مطالب مورد نیاز برای یادگیری و درک این آموزشها نیز به صورت موازی ارائه شود. امیدوارم که این مجموعه آموزشی مورد توجه و استفاده شما دوستان و همراهان عزیز قرار گیرد . پیشنهادات و انتقادات سازنده شما می تواند در افزایش کیفیت مطالب بسیار تاثیر گذار باشد .

چینش صفحه – یک ستون – عرض ثابت

خلاصه نویسی دستورات CSS – Outline , list-style

Outline properties – خواص و توانایی های Outline

element {

  outline-width: number+unit;

  outline-style: (numerous);

  outline-color: color || #hex || (rgb / % || 0-255);

}

Outline , list-style – خلاصه نویسی دستورات CSS

خلاصه نویسی دستورات CSS – Border

Border properties – خواص و توانایی های Border

element {

  border-width: number+unit;

  border-style: (numerous);

  border-color: color || #hex || (rgb / % || 0-255);

}

Border – خلاصه نویسی دستورات CSS

خلاصه نویسی دستورات CSS – Margin / Padding

برای آشنایی بیشتر با خصوصیت Margin , Padding میتوانید مطلب مفهوم Box Model و آشنایی با مفاهیم Padding , Margin , Border را مطالعه نمائید

Margin , Padding properties – خواص و توانایی های پیش فرض برای Margin , Padding

element {

  margin-top: number+unit;

  margin-right: number+unit;

  margin-bottom: number+unit;

  margin-left: number+unit;

}

Margin , Padding – خلاصه نویسی دستورات CSS