آشنایی با طراحی سایت فلت و متریال

سبک های طراحی Flat  و Material همیشه موضوع داغ و اصلی بحث هایی در خصوص طراحی سایت حرفه ای بوده است.با اینکه این دوتا سبک طراحی یکسانی دارند اما یکی از آنها دارای طراحی معمولی هستش و دیگری دارای بهترین گزینه های بصری برای طراحی میباشد.طراحی Flat در دوسال گذشته مورد توجه بیشتر افراد قرار گرفته است در حالی که برای طراحی Material، افراد معتقد هستند که آخرین سال های خود را میگذراند.

طراحی Flat

این طراحی با توجه به قابلیت هایی که داشت، مورد توجه و محبوبیت قرار گرفت.یکی از مهمترین ویژگی های این طراحی این میباشد که میتوان در برابر عملکردهای و کارهای دستکاری شده ، مقاومت کند.این مساله منجر به سرعت بالای بارگذاری و تجربه بصری ایده آل بدون درنظرگرفتن وضوح صفحه نمایش گردد.بنابراین کاربر وطراح همیشه ازطراحی Flat احساس رضایت میکنند.

مزایای طراحی تخت:

1.    از مد روز پیروی میکند.

2.    دارای رابط موبایل ساده است.

3.    دارای مجموعه رنگ های روشن میباشد.

4.    بر تاپوگرافی های بزرگ تمرکزمیکند.

5.    موارد بصری آن واضح میباشند.

6.    مانع طراحی و دکوراسیون بی روح و کسالت آور میشود.

طراحی Material

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

مزایای طراحی Material

1.    عناصر اضافی موجود در این سبک، ابعاد جدیدی را ایجاد میکنند که باعث راحت شدن درک کاربر میگردد.

2.    با این سبک و صرف نظر از ابزار طراحی، سریعا میتوان فرایند استاندارد برای هر جزئیات پیدا کرد.

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

پارامترهای trust flow و citation flow در بهینه سازی سایت

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

اهمیت پارامترهای گردش (flow):

اگر زمانی کاربرد page rank گوگل در ارزش گذاری سایت ها، از رده خارج شود، پارامترهای جایگزین آن اهمیت بسیاری خواهند یافت. پارامترهایی از جمله؛ نفوذ دامنه (domain authority) و trust flow و citation flow به مرور در حال تبدیل به فاکتورهایی مهم در سیستم رتبه بندی گوگل هستند.

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

Citation flow چیست؟

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

Trust flow چیست؟

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

نکات:

•    با افزایش  ، citation flow ,trust flow نیز افزایش میابد (لزوما این افزایش به یک میزان نیست) اما برعکس این قضیه صادق نیست؛ یعنی با افزایش trust flow ,citation flow لزوما افزایش نخواهد یافت.

•    

•    اگر سایت هایی با citation flow  بالا سایت شما را لینک کنند، citation flow سایت شما نیز افزایش خواهد یافت.

•    

•    دریافت بک لینک از سایت هایی با trust flow کم و citation flow بالا نه تنها اثر مثبت بر رتبه سایت شما نخواهد داشت بلکه باعث افت آن خواهد شد.

•    

•    Citation flow یک سایت ارتباطی با اعتبار بک لینک های آن سایت ندارد.

•    

•    هر چه کیفیت بک لینک های یک سایت بیشتر باشد، trust flow آن سایت بیشتر خواهد بود.

•    

•    هر چه trust flow یک سایت بیشتر باشد، رتبه آن سایت در گوگل افزایش خواهد یافت.

•    چرا در اکثر سایت ها trust flow از  citation flow کمتر است؟

•    جواب این سوال واضح است. ممکن است یک سایت هزاران بک لینک داشته باشد، اما اکثر آن ها بی کیفیت باشد. این سایت قاعدتا بر اساس تعریفی که از پارامتر citation flow  ارائه کردیم، citation flow بالایی خواهد داشت اما به دلیل کیفیت پایین بک لینک ها و برا اساس تعریف پارامتر trust flow، trust flow  پایینی خواهد داشت. علاوه بر این گرفتن بک لینک از سایت های با اعتبار بالا کار چندان آسانی نیست! بنابراین در اکثر موارد مقدار پارامتر trust flow از citation flow کمتر خواهد بود.

10ویژگی که ما در html6 به دنبال آن هستیم

با ظهور HTML، تحول عظیمی در طراحی سایت حرفه ای  و فروشگاه ها ایجاد گردید و امروزه شاهد رشد روزافزون این زبان طراحی وب هستیم.ازاول تا الان شاهد پیدایش نسخه های مختلف ازHTML هستیم.آخرین نسخه ای که در حال حاضر استفاد میشود، نسخه HTML5  میباشد.همچنین قابلیت های مانند رسپانسیو کردن وبسایت و غیره، مواردی هستند که باعث توجه بیشتر افراد به طراحی وب گردیده است.این موارد از قابلیتهای html5  و css3 هستند.اما این زبان مانند بقیه دارای مشکلات فنی است.ما در اینجا قصد داریم که 10 پیشنهادی را ارائه دهیم که با استفاده از آنها در نسخه HTML6 میتواند مشکلات قبلی را حل بنماییم.

1.کتابخانه های اختصاصی

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

2.یکپارچه سازی عکس ها و ویدئوها

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

3.پیش عمل کننده هایی با قابلیت پلاگ شدن

این پیش عمل کننده ها تقریبا در تمامی نسخه های HTML برای تبدیل زبان ها به جاوا اسکریپت وجود داشته اند.HTML5 نسخه کلی جاوااسکریپت را درنظرگرفته است و همچنین توانسته است کدهای مربوط تا حدودی بهینه نماید.در نسخه 6 باید این بهینه سازی کدها بهترگردد.

4.زبان های قابل پلاگ شدن

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

5.زیر نویسی و حاشیه نویسی بهتر

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

6.تصدیق های سخت

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

7.کنترل بیشتر بر روی ویدئو

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

8.میکرو-فرمت های قوی تر

HTML دارای تگ های مختلفی میباشد که میتوانیم با استفاده از آن به راحتی جزئیات صفحه مانند شماره و آدرس را نمایش دهیم.این تگها تاثیری بر بیشتر شدن سرعت وبسایت شما در موتورهای جستجو ندارد اما کیفیت کددهی صفحه شما را بهتر میکند.با استفاده از نسخه 6 تعداد جزئیات بیشتری مانند زمان،تاریخ و غیره را نشان داد که تاثیر بهتری در موتورهای جستجو داشته باشد.

9.تعیین دقیق اندازه تصویر در مرورگرها با اندازه مختلف

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

10.دسترسی محافظت و کنترل شده به اطلاعات

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

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

CSS ویژگی های زیادی دارد که ممکن است شما آنها را در  طراحی سایت حرفه ای  شنیده باشید.ویژگی هایی مانند box-shaow،border-radius و غیره.اما یک سری از خصوصیات و ویژگی ها هستند که کمتر کسی آنها را شنیده است.در این مقاله قصد داریم این 6 ویژگی منحصر به فرد با به شما معرفی نماییم.

1.Tab Size

شما با این دستور، میتوانید میزان فرورفتگی کدهای داخل صفحه را تنظیم نمایید.برای مثال در تگ <pre> میتوانید میزان فرورفتگی متن داخل آن را بیشتر نمایید.

pre { tab-size: 2; }

 

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

2.Text Rendering

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

در متن زیر میتوانید فرق یک جمله معمولی و بهینه شده را ببینید

Comparison courtesy by AestheticallyLoyal

For more advice on good typography, check out Practical Typography

3.Font Stretch

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

h1 { font-style: bold; font-stretch: ; }

 

این ویژگی در فایرفاکس و اینترنت اکسپلورر9 عمل میکند.

 

 4. Text Overflow

تا به حال دقت کرده اید که بعضی از متن ها کوتاه شده اند یا به عبارتی در ادامه آنها سه نقطه قرار گرفته است.با این ویژگی شما میتوانید متن خود را overflow  یا همان کوتاه و بریده نمایید.مقدار پیش فرض این مقدار به صورت clip میباشد که متنهای بریده شده را مخفی میکند.اگر میخواهید مقدار حذفیات به صورت افقی باشد از ellipsis استفاده باید بکنید.نوشتن نوع این دستور به صورت زیر است:

 

.content-box { text-overflow }

 

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

5. Writing Mode

بعضی از زبانها مانند زبان ژاپنی از بالا به پایین نوشته میشوند.برای سازگار کردن و کار کردن بهتر با این زبانها، یک ویژگی جدیدی به نام writing-mode به css اضافه شده است.با این ویژگی میتوانند جهت زبان ها را عوض کنند.برای اینکه بتوانید مسیر نوشتن افقی را تغییر بدید از دستور زیر استفاده میکنید:

p { writing-mode: rl-tb; }

همچنین برای تغییر مسیر نوشتن عمودی از دستور زیر استفاده کنید:

p { writing-mode: vertical-lr; }

6.Pointer Event

با این دستور میتوانید رفتار نشانگر ماوس را هنگام انجام عملیات مختلف مانند درگ یا کلیک و غیره کنترل نمایید.با این استفاده این ویژگی شما میتوانید تعیین کنید زمانی که کاربر کلیک کرد، برروی لینک هیچ گونه اتفاقی نیفتد یا لینک را غیرفعال نماید یا به آدرسی که در href قرار گرفته است انتقال نگردد.

a { pointer-events: none; }

البته این ویژگی در نسخه css4 قرار است مورد استفاه قرار گیرد.

سه موردی که بازدید کننده شما نمیتواند داخل وب سایتتان پیدا کند

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

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

در این مقاله، قصد داریم سه موردی که بیشترین کاربران در پیدا کردن آنها در وب ساتیها مشکل دارند را برایتان بیان نماییم.

1.اطلاعات کافی در خصوص خودتان

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

شما باید مطمئن باشید که در صفحه درباره ما وب سایتتان به چنین سوالاتی پاسخ داده میشود:

• چرا کسب و کار شما با بقیه متمایز میباشد.

• چرا برای کاربران خود اهمیت قائلید.

• شما کی هستید.

• اطلاعاتی در خصوص شرکتتان.

• تصاویر و  ویدئوهایی از نوع کسب و کارتان

2.حساب شبکه های اجتماعی

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

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

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

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

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

انواع منو و کاربردهای آن در طراحی سایت

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

نوار منوی افقی

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

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

. محدودیت

همانطور که گفتیم، این نوع منوها برای سایتهایی که ساده و خلوتند مناسب است، به این معنی که برای سایت هایی که منوهای زیادی نیاز دارند، مناسب نیست

کاربرد:

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

منوهای عمودی

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

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

منوی کشویی بالا به پایین

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

کاربردهای این منو

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

محدودیت این نوع زبانه

برخی اوقات تا زمانیکه موس روی دسته بندی قرار نگیرد بازدید کننده متوجه نشود منوها دارای دسته بندی اند.

منوهای Fly-out

منوهای آکاردئونی که زیرمنوها بصورت عمودی و در کنار منوی اصلی باز می شوند.

مانند منوهای کشویی این سیستم به سایت نظم می بخشد.

دونوع از منوهای آکاردئونی:

منوهای شناور: زمانیکه می خواهید لیستی با پنجره های کوتاهی داشته باشید

منوهای درختی: زمانیکه می خواهید به منو لینک ها ظاهری مرتب و حرفه ای ببخشید.

منو موجود در فوتر

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

مشکل این نوع منو:

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