در جهانی ایده آل تمامی صفحات وب سایت می بایست محتوای مطالب مفید و مورد نیاز کاربران باشند که نیاز جستجو شده کاربر را ارضاء نماید. متاسفانه روش های سیاهی برای بالا بردن رنک صفحات سایت در موتورهای جستجو وجود دارد. زمانی که صفحات وب سایت را طراحی می نمایید تک تم صفحات سایت را با کیفیت بالا و برای موضوع مورد نظر صفحه طراحی نمایید. در صورتی که این کار را به درستی انجام دهید کاربران خود را به صفحه ای هدایت نموده اید که به آن نیاز خواهند داشت. پس چه زمانی با گوگل دچار مشکل می شویم و دچار مجازات های گوگل می شویم. در زیر چند مورد آن را برای شما بیان نموه ام:
محتوای تکراری، محتوای اسپمی / Duplicate, Spam Content
گوگل به دو صفحه وب سایت با محتوای تکراری علاقه ای ندارد و به خصوص زمانی که محتوا از سایت دیگری کپی شده باشد و یا اینکه محتوا اسپمی باشد. در صورتی که وب سایت شما دارای صفحات با محتوای یکسان می باشد از تگ rel="canonical" در صفحات کپی صفحه اصلی استفاده نمایید و آن را به صفحه اصلی لینک دهید.این مورد به گوگل نسخه اصلی مطلب را نمایش می دهد.
استفاده بسیار از کلمات کلیدی / Keyword Stuffing
هرگز در صفحات سایت خود از کلمات کلیدی غیر مرتبط استفاده ننمایید و همچنین از یک کلمه کلیدی بیش از حد طبیعی استفاده نکنید زیرا انجام این موارد سایت را درگیر مجازات های گوگل خواهد نمود.
خرید لینک / Link Schemes
از خرید لینک در سایت های دیگر و مخصوصا سایت هایی که نمی دانید موضوع آن ها چه هستند خودداری نمایید. زیرا این کار باعث مجازات شدن در گوگل می شود. برای آنکه صفحات سایت مناسب سئو داشته باشد بهتر است لینک مطلب خود را در سایت های و صفحات مرتبط قرار دهید.
نمایش محتوای مختلف برای موتور جستجو و کاربر / Cloaking
همیشه محتوای یکسانی را به کاربر و موتور جستجو نمایش دهید. هرگز مطالب خود را در سایت مخفی ننمایید. این مورد حتی باعث خارج شدن سایت از نتیجه های جستجوی گوگل می شود.
لود سنگین صفحات
پایین بودن سرعت صفحات وب سایت فقط باعث آزار کاربران نخواهد شد بلکه در صورتی که سایت شما به صورت طبیعی و با سرعت مناسب لود نشود ممکن است گوگل شما را جریمه نماید. صفحات سایت خود را در موبایل و کامپیوتر بررسی نمایید تا سرعت مناسبی داشته باشند. در صورت نیاز می توانید از سرعت سنج گوگل استفاده نمایید و این ابزار مشکلات وب سایت شما را مشخص می نماید. طراحی سایت دارکوب وب سایت های طراحی شده را در حد 80 درصد به بالا سرعت سنج گوگل طراحی می نماید.
بهترین روش، کیفیت محتوا
موارد دیگری از مجازات های گوگل وجود دارند که در این مقاله به آنها پرداخت نشده. در صورتی که در سایت خود مطالب مفید و مورد نیاز مرتبط با کاربران و مشتریان خود را ایجاد نمایید گوگل رتبه سایت شما را بالا می برد، پس بنابراین بهترین روش برای گرفتن رنکینگ در موتورهای جستجو ایجاد مطالب با کیفیت در سایت است.
همیشه قانون گوگل را در نظر داشته باشید که تمرکز اصلی آن بر ارائه محتوای مفید به کاربران در زیمنه جستجو انجام شده توسط آنان می باشد. تمام روش هایی که از این کار گوگل جلوگیری نماید منجر به مجازات های و جریمه های گوگل می شود.
منبع:
http://sitedesign.joomir.com/طراحی-سایت-سئو/item/801-google-penalties.html
با گذشت بیش از نیمی از سال 2013 الگوهای جدیدی در طراحی وب به وجود آمده اند. بعضی از این الگوها از سال قبل پایه گذاری شده بودند و برخی نیز در سال جدید ایجاد شدند. در صورتی که یک طراح وب حرفه ای هستید و یا یک شرکت کوچک دارید دانستن این موارد به شما کمک خواهد نمود که سایت خود را بهتر طراحی نمایید
محتوا اول
طراحان سایت توجه بیشتری به مطالبی که کاربران به آن علاقه نشان می دهند دارند و طراحی سایت را بر اساس آن اطلاعات انجام می دهند تا اینکه سایتی طراحی نمایند و اطلاعات را در قالب سایت بارگذاری نمایند. طراحی سایت بر اساس محتوا بر این مبنا پیاده سازی شده که کاربر به راحترین روش به اطلاعات درخواستی خود برسد. طراحی سایت با توجه به محتوای سایت موردی است که باعث می شود سایت بازدید کننده بیشتری به دست آورد تا طراحی سایت و بعد پر کردن محتوای آن.
طراحی منعطف
طراحی منعطف بر پایه پیاده سازی سایت انعطاف پذیر می باشد که سایت در مرور توسط سایر وسایل نظیر موبایل و در سایزهای مختلف نمایش درستی داشته باشد. رشد روز افزون استفاده کاربران از موبایل، تبلت و سایر وسائل الکترونیکی در مرور وب طراحان را به این سمت سوق داد که سایتی طراحی نمایند که در این وسائل و همچنین سایزهای مختلف نمایش درستی داشته باشد.
Metro
با انتشار ویندوز نسخه 8 و مطرح شدن مسائلی به مانند ارائه محتوا قبل از هر چیزی وب سایت های بسیاری قالب خود را به مانند قالب Metro پیش فرض ویندوز 8 طراحی نمودند. Metro طراحی است که در آن آیتم های محتوا به باکس هایی در سایزهای مختلف تقسیم بندی شده , که با تصویر ، آیکون تزئین شده است.
پشتیبانی Retina
Apple نمایش Retina خود را برای iPhone 4, iPad, و MacBook Pro در سال 2012 معرفی نمود. نمایش Retina نوع نماشی می باشد که شرکت apple برای صفحات کریستالی نمایشی خود طراحی نموده است. Apple ادعا می نماید نمایش Retina از نظر کیفیت پیکسلی به گونه ای است که چشم انسان قادر به رویت پیکسل های آن نیست. طراحان وب بسیاری کیفیت تصاویر و فایل های css خود را به گونه ای طراحی نمودند تا از این قابلیت پشتیبانی نماید. Retina.js راه دیگری برای ارسال تصاویر با کیفیت به مرورگرهای apple می باشد.
اسکرول نامحدود
شبکه های اجتماعی بسیاری از اسکرول نامحدود پشتیبانی می نمایند - قابلیت اینکه صفحه مطالب بیشتری را نمایش دهد زمانی که اسکرول کاربر به انتهای صفحه برسد. اسکرول نامحدود به این دلیل طراحی شده که دیگر نیاز نباشند کاربران برای رویت سایر موارد صفحه جدید بازنمایند و به این ترتیب .
Parallax
یک روش اسکرولینگ که در سال 2012 مطرح شد, و امسال نیز مطرح بود, "Parallax," می باشد هنگامی که دو آیتم به طور موازی با سرعت متفاوت حرکت می کنند. با پشتیبانی مرورگر از این قابلیت, Parallax برای اجرا در صفحات وب سایت محبوب تر شد.
سایت های تک صفحه ای
تمرکز بر پایه طراحی محتوا اول و همچنین اسکرول نامحدود منجر به ایجاد وب سایت های تک صفحه ای گردید. این سایت ها گرافیک کمتری دارند و فقط به ارائه مطالب سایت می پردازند و کاربر در همان تک صفحه می تواند تمام موارد مورد نیاز خود را بیابد.
پس زمینه تصویر و یا ویدئو کامل
در سال پیش تصاویر پس زمینه بسیار بزرگ محبوب شده بود. امسال به علاوه استفاده از تصاویر بزرگ برای پس زمینه استفاده از ویدئو برای پس زمینه مورد توجه طراحان وب قرار گرفته. سایت های بسیاری ویدئو های مرتبط را در پس زمینه سایت خود قرار می دهند به جهت جنبه بصری معرفی آن.
طراحی نظیر نرم افزارها
طراحی سایت شبیه به نرم افزارهای موبایل تا حد زیادی در بین طراحان وب محبوبیت پیدا کرده. طراحی سایت شبیه به طراحی نرم افزارها باعث می شود طراحی سایت در سایر ابزارها نیز به درستی نمایش داده شود و به این روش در زمان برای طراحی سایت نسخه موبایل و سایر وسائل مرور وب صرفه جویی می گردد.
افکت های CSS3
با توجه به امکانات جدید و گسترده css3 طراحان امکانات بسیاری برای پیاده سازی افکت های جدیدتر از طریق css3 یافتند. CSS3 به طراحان این اجازه را می دهد که بر روی آیتم ها سایه بیاندازند و همچنین به طراحان این امکان را می دهد که به اسکریپت های سبک ابزارهای نظیر تصاویر و فلش بسازند.
استفاده از فونت ها و تیترهای درشت
استفاده از تیترهای درشت و تفاوت سایز در وب مورد محبوبی شده. در این نوع طراحی که بر پایه ابتدا محتوا می باشد کاربر به آسانی خواهد توانست موضوع صفحه ای که در آن قرار دارد را درک نماید.
طراحی المنت ها به صورت کروی
طراحان وب بسیاری از اشکال دایره ای شکل به جای اشکال مستطیلی و گوشه های گرد استفاده نمودند . دایره ها همچنین در طراحی "Metro" استفاده می شوند.
فید کردن
در این سال تمایل به فید نمودن آیتم های موجود در صفحه بیشتر شده به طوری که در صفحات کمتر از افکت های دیگر استفاده می شود و استفاده از این افکت نیز به دلیل خوانایی محتوا می شود.
منبع:
http://sitedesign.joomir.com/مقالات-طراحی-سایت/item/690-12-گرایش-طراحی-وب-در-سال-2013.html
امروز سازگاری وب سایت طراحی شده با مرورگرهای موبایل بسیار مهم می باشد بنابراین تمامی طراحان سعی در سازگار سازی سایت با مرورگرهای موبایل دارند. در این مقاله به شما نحوه ایجاد منو سازگار با موبایل توسط html و css و بدون استفاده از جاوا اسکریپت آموزش داده خواهد شد. این منو قابلیت چپ چین، راست چین و وسط چین سدن را دارد. این منو با موسط اور بر روی منو باز می شود. همچنین این منو شامل مشخص کننده منو فعال می باشد. این منو در مرورگرهای موبایل و کامپیوتر سازگاری کامل دارد.
هدف
هدف این مقاله چگونگی تبدیل یک لیست منو به منو آبشاری می باشد که به فضای بسیار کنتری برای نمایش نیازمند است.
شما می توانید تمامی منوهای خود را در یک کلید قرار دهید و بدین وسیله در فضای صفحه خود صرفه جویی نمایید.
Nav HTML Markup
در بخش کد html منو توضیح داده خواهد شد. تگ <nav> برای ایجاد منو آبشاری مورد نیاز می باشد. این را در ادامه مقاله توضیح خواهم داد. کلاس current منوی فعلی که در آن هستیم را نمایش می دهد.
<nav class="nav">
<ul>
<li class="current"><a href="#">Portfolio</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>
CSS
کد ایجاد منوی آبشاری بسیار ساده می باشد بنابراین توضیح خاصی برای آن ندارم. فقط دقت نمایید از display:inline-block به جای float:left در تگ <li> استفاده شده. بنابراین با text-align به UL می توانید منوهای خود را راست چین، چپ چین و یا وسط چین نمایید.
/* nav */
.nav { position: relative; margin: 20px 0; }
.nav ul { margin: 0; padding: 0; }
.nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; }
.nav a { padding: 3px 12px; text-decoration: none; color: #999; }
.nav a:hover { color: #000; }
.nav .current a { background: #999; color: #fff; border-radius: 5px; }
وسط چین و یا راست چین
به طوری که در بخش قبل توضیح داده می شود می توانید جهت منوهای خود را عوض نمایید:
/* right nav */
.nav.right ul { text-align: right; }
/* center nav */
.nav.center ul { text-align: center; }
پشتیبانی از اینترنت اکسپلورر
تگ html5 که در این کد استفاده شده یعنی <nav> در اینترنت اکسپلورر نسخه 8 با پایین پشتیبانی نمی شود. برای پشتیبانی css3-mediaqueries.js (یا respond.js) و html5shim.js استفاده نمایید. در صورتی که نمی خواهید از این کتابخانه ها استفاده نماید می توانید <nav> را با <div> جایگزین نمایید.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Responsive
هم اکنون که می بایست این منوی ایجاد شده را با استفاده از media query سازگار با نسخه موبایل نمایید. در رزولوشن کمتر از 600px از تگ nav استفاده شده بنابراین می توان تگ <ul> را به بالای صفحه انتقال داد. تمامی <li> توسط display:none مخفی شده اند. اما .current به صورت بلاک نمایش داده می شود. اما در هاور nav کلیه <li> ها به حالت display:block خواهد بود. آیکون به .current اضافه شده تا منوی فعال مشخص گردد.
@media screen and (max-width: 600px)
{ .nav { position: relative; min-height: 40px; }
.nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.nav li { display: none; /* hide all <li> items */ margin: 0; }
.nav .current { display: block;
/* show only current <li> item */
}
.nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; }
.nav .current a { background: none; color: #666; }
/* on nav hover */
.nav ul:hover { background-image: none; }
.nav ul:hover li { display: block; margin: 0 0 5px; }
.nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; }
/* right nav */
.nav.right ul { left: auto; right: 0; }
/* center nav */
.nav.center ul { left: 50%; margin-left: -90px; } }
منبع:
در صورتی که قصد راه اندازی وب سایت برای شرکت خود را دارید به جای مناسبی آمده اید. جهت طراحی سایت برای شرکت ابتدا می بایست اهداف خود را از طراحی سایت معین نمایید. قبل از شروع حتما مشخص نمایید که هدف شما از طراحی سایت چیست و قصد دارید چه نیازهایی از شرکت خود را از طریق سایت برآورده نمایید.
انتخاب دامنه و اختصاص هاستینگ نیز بخشی از یک پروژه طراحی سایت است که در موفقیت یک سایت بسیار تاثیر دارد. انتخاب نام دامنه درست و مناسب تاثیر بسیاری در موفقیت شغلی شما خواهد داشت بنابراین قبل از اقدام به ثبت دامنه حتما با متخصص سئو و بهینه سازی سایت دارکوب مشورت نمایید. هاست نیز تاثیر بسیار زیادی در عملکرد سایت دارد، زیرا سایت شما همیشه می بایست آنلاین باشد و جزو سرورهای بلاک نباشد. همچنین امنیت هاستینگ بسیار مهم می باشد و سرور می بایست از شرکت های معتبر تهیه گردد. طراحی سایت دارکوب هاستینگ های خود از شرکت hostgator که جزو بهترین برندهای هاستینگ دنیاست تهیه می نماید.
پس از مشخص شدن اهداف ساختار و طراحی مناسب را با توجه به نیازها انتخاب نمایید. می توانید قالب مناسب خود را از سایتhttp://templatemonster.com انتخاب نمایید. در این سایت طراحان سایت قالب های خود را برای فروش قرار می دهند. طرح های پیاده سازی شده در این سایت با آخرین تکنیک های روز پیاده سازی شده اند بنابراین کافی است فالب مورد نیاز مطابق با سلیقه های شما باشد. در صورتی قالب مورد نظر خود را در این سایت نیافتید می بایست با طراح گرافیک دارکوب جلسه ای داشته باشید تا نیازهای خود را اعلام نمایید و طراح براساس نیازهای شما طراحی نماید. طراح تا زمانی کار خود را ادامه می دهد تا طرح اولیه سایت مورد تایید کارفرما باشد.
پس از تایید طرح اولیه سایت، کارفرما می بایست اطلاعات کامل شرکت خود را جهت پیاده سازی صفحات داخلی سایت ارسال نماید. پس از ارسال اطلاعات از طرف کارفرما صفحات داخلی سایت تکمیل خواهد گردید و سایت برای اعلام نظر بر روی سرور اصلی بارگذاری خواهد شد. کارفرما می تواند در این مرحله تغییرات درخواستی خود را اعلام نماید. پس از اعلام نظرات از طرف کارفرما ویرایش ها توسط دارکوب انجام خواهد گردید و سایت تحویل نهایی خواهد گردید.
خدمتی که دارکوب پس از پایان پروژه انجام می دهد بهینه سازی سایت برای نمایش در صفحه اول نتایج جستجوی گوگل است. به این معنا که در صورتی که کاربران در گوگل کلمه خاصی مرتبط به نام شرکت جستجو نمایند سایت شرکت در صفحه اصلی گوگل نمایش داده می شود. انجام این مورد تاثیر بسیار زیادی در رونق کسب و کار شرکت خواهد داشت.
* قبل از اقدام به طراحی سایت حتما مشاوره بگیرید تا سایت شما با هزینه کمتر، کیفیت بالاتر پیاده سازی گردد.
منبع:http://sitedesign.joomir.com/مقالات-طراحی-سایت/item/709-طراحی-سایت-شرکتی.html
موردی که برای اکثر طراحان وب پس از طراحی وب سایت مهم است آن است که سایت را در تمامی مرورگرها بررسی نماید, در زیر به شما 5 روز برای بررسی وب سایت در مرورگرهای مختلف ارائه داده خواهد شد. برخی از این موارد وب سایت هستند و کافی است آدرس سایت مورد نظر خود را در آنها وارد نمایید و برخی نیز نرم افزار هستند و می بایست بر روی کامپیوتر خود نصب نمایید.
Adobe Browserlab
Litmusapp (paid service)
VMware Fusion
لطفا به خاطر داشته باشید که برنامه های بسیاری به مانند این برنامه وجود دارند که با استفاده از آنها می توانید سایت خود را بررسی نمایید ولی از نظر بنده VMWare Fusion از همه مناسب تر است.
IE Tester
به روز رسانی مقاله:
سایتی نیز با عنوان http://www.browserstack.com/ نیز برای بررسی سایت در مرورگرهای مختلف وجود دارد که نیاز به عضویت در سایت دارد.
لیست کل یادداشت های این وبلاگ
http://sitedar.com
http://joomir.com
