مشکلات طراحی وب و راه حل آن ها (قسمت ۱) مشکلات طراحی وب و راه حل آن ها مشکلات طراحی وب و راه حل آن ها (قسمت ۱) web design problems and their solutions part 1به نام خدا

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

پس از خواندن تمامی قسمت های این دوره به یک طراح وب حرفه ای تبدیل می شوید. پس با ما همراه باشید با مشکلات طراحی وب و راه حل آن ها (قسمت ۱).

خب ، خیلی سریع بریم سراغ راه حل مشکلاتی که اکثر کاربران از ما می پرسند و شاید مشکل شما هم باشد.

 

مشکل اول :


چرا برخی وبسایت ها در کامپوتر های مختلف با فونت های تعریف شده خود نشان داده نمی شوند؟ چگونه باید این ناسازگاری وبسایت را برطرف کرد؟

راه حل :

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

علت این مشکل ، استفاده از از ویژگی font-family : Your font ، بدون تعریف فونت و فایل هایش می باشد. زمانی که شما از این ویژگی بدون تعریف فونت و فایل هایش استفاده کنید و به جای your font نام فونت مورد نظرتان را بنویسید ، مرورگر بررسی می کند که آیا فونت مورد نظر شما در کامپیوتر کاربر وجود دارد یا نه ؟

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

برای برطرف کردن این موضوع ، یک ویژگی به نام font-face وجود دارد که شکل صحیح آن در  زیر آمده است :


شکل کلی این ویژگی به صورت بالا می باشد ، که به جای font-properties باید ویژگی های مورد نیاز خود را وارد کنید.

ویژگی هایی که می توانید وارد کنید نزدیک به ۶ تا می باشند که مهم ترین آنها به ترتیب قرار گیری دو ویژگی src , font-family است. در ویژگی اول یعنی font-family شما باید یک نام به دل خواه که دوست دارید از این به بعد در کدهایتان فونت مورد نظرتان را  با آن صدا کنید (معرفی کنید) انتخاب کنید و بنویسید. ویژگی src هم که برای آدرس فایل های فونت می باشد. به مثال زیر توجه کنید :


برای اینکه از لود فونت مورد نظر کاملا اطمینان خاطر داشته باشید بهتر است از وبسایت های web font generator استفاده کنید که می توانید با جستجو عبارت font kit generator در گوگل آن ها را پیدا کنید. این سایت ها فونت شما را با ۵ فرمت در اختیار شما قرار می دهند تا شما با لود کردن هر ۵ تا ، از نمایش فونت برای کاربر اطمینان داشته باشید.

 

مشکل دوم :


آیا سایت شما در مرور گر های مختلف یا در کامپیوتر های مختلف به صورت های متفاوتی نمایش داده می شود؟ راه حل چیست؟

راه حل  :

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

راه حل این مشکل CSS Reset می باشد.

CSS Reset چیست؟

همانطور که می دانید بسیاری از مرور گرها با ورژن های مختلف بر روی سایت شما یک سری تنظیمات پیش فرض خود را انجام می دهند. برای مثال مرورگر فایر فاکس برای تگ <body>  یک مقدار padding , margin می گذارد که این مقدار مثلا در مرورگر سافاری بسیار بیش تر است. به همین دلیل سایت شما در مرورگر سافاری به یک شکل و در فایر فاکس به شکل دیگری نمایش داده می شود و باعث بروز این ناسازگاری می شود .

CSS Reset یک سری کد CSS می باشد که در آن تمامی این padding و margin ها و تمامی ویژگی های مورد نیاز دیگر برای رفع این ناسازگاری در تمامی تگ های html اعمال شده است.

حال چطور این فایل را پیدا کنیم و از آن استفاده کنیم؟

برای این کار شما باید به سایت http://cssreset.com بروید و یکی از انواع CSS Reset را انتخاب کنید که معمولا Eric Meyer’s Reset CSS و Normalize از محبوبیت بیشتری برخودار هستند. سپس ایمیل خود را وارد می کنید و فایل به ایمیل شما ارسال خواهد شد.

سپس شما باید فایل را در کنار فایل های css وبسایتتان قرار دهید و به عنوان مثال اگر نام فایلی که کد های css شما در آن قرار دارد style.css است باید به صورت زیر فایل CSS reset را لود کنید.


البته می توانید با استفاده تگ link ، از CSS Reset استفاده کنید که به دلیل زیاد شدن درخواست ها و کاهش سرعت سایت توصیه نمی شود.

امیدوارم مطالب این دوره برای شما کاربران عزیز ، مفید بوده باشد.

در اینجا مشکلات طراحی وب و راه حل آن ها (قسمت ۱) به پایان می رسد.

منتظر مشکلات شما در زمینه طراحی وب هستیم تا موضوع جلسه آینده ما مشکل شما باشد.

تا جلسه آینده خدا نگهدار.

مطالب ام ام جی نوین را در کانال تلگرام ام ام جی نوین دنبال کنید.