استفاده از تصویر به عنوان پس زمینه برای طراحی سایت ، روز به روز ارزش و محبوبیت بالاتری پیدا می‌کند. شکست دادن تصاویر خوب، کار ساده ای نیست. این تصاویر باعث فروش بالای سایت شما و افزایش بازدید می شوند و همچنین بهترین روش برای نشان دادن محصول شماست.
اما جمله بالا به آن معنا نیست که می توانید از هرگونه تصویر قدیمی استفاده کنید.
عوامل مختلفی وجود دارد که به هنگام برنامه ریزی برای طراحی تصویر وب سایت خود باید آن ها را در نظر بگیرید - سایز و اندازه، رنگ، منظم بودن تصویر و فضای قرار گیری آن.
هنگام استفاده از عکاسی، به خصوص عکس های بزرگ این است که کیفیت عکس حائز بیشترین اهمیت است.لزومی نیست تا تنها از عکس های مستطیلی شکل استفاده کنید؛ بلکه تنها کافیست تا از بهترین و مناسب ترین عکس های موجود برای یک پروژه طراحی سایت استفاده کنید. عکس ها همواره باید دارای بالاترین کیفیت، وضوح بالا (بدون پیکسل کردن) باشد. با این وجود باید زمان بارگذاری و بهینه سازی تصویر را نیز در نظر داشته باشید، تا این دو عامل زمان زیادی از کاربران وب سایت شما نگیرد. اطمینان حاصل کنید که به تصاویر شما به درستی بهینه سازی شده است و دارای اندازه و سایز مناسب می باشد؛ به طوری که هنگام بازدید افراد از سایت شما، دچار مشکلات بارگذاری تصاویر نشوید.
تصاویر پس زمینه، می بایستی پیامی را که سایت شما سعی در انتقال آن دارد، تصویر سازی کند. استفاده از یک تصویر زیبا کافی نیست؛ بلکه تصاویر مورد استفاده باید با محتوای طراحی سایت شما هم خوانی داشته باشد.
آیا تصویر مورد استفاده شما مورد علاقه اکثریت افراد است؟ برخی از بهترین طراحی وب سایت ها که بر اساس تصاویر موجود آن ها را دسته بندی کرده ایم شامل تصاویری از چهره ها و پس زمینه های زیبا، محصول شرکت و تصاویری از صحنه های قابل توجه است.
آخرین و کم اهمیت ترین موردی که هنگام تصمیم گیری در رابطه با تصویر پس زمینه خود باید آن را در نظر بگیرید، قرار دادن نوشته یا لوگوی شما در تصویر پس زمینه است. به غیر از موارد ذکر شده، قصد نمایش چه مواردی در پس زمینه خود را دارید؟ آیا فضای مورد نظر طراحی سایت در کنار آن برای قرار دادن این اطلاعات وجود دارد؟
هنگام ساخت تصویر، همواره این سوالات را در ذهن داشته باشید. اگر می خواهید فضای تاریک یا روشن را برای نوشته های خود در نظر بگیرید، این فضا نباید تضاد زیادی با سایر فضا های طراحی سایت داشته باشد. در بسیاری از موارد، بهتر است از قرار دادن متن یا لوگو در قسمت بالای تصویر خودداری کنید.
تصمیم‌گیری در مورد تون (Tone) عکس، یکی از اولین انتخاب ها در طول این مسیر است.
آیا قصد دارید از تصاویر زنده و پر جنب و جوش استفاده کنید؟ یا ترجیح می دهید که تنها از تناژ سیاه و سفید در تصاویر طراحی سایت خود استفاده کنید؟ پاسخ سوالات بالا بستگی به حال و هوای وب سایت شما و پیام و هدف مورد نظر شما دارد. از تصاویر رنگی برای نشان دادن زندگی، پویایی صحنه های زیبا استفاده کنید. عکس های سیاه و سفید می تواند روشی دراماتیک برای نشان دادن افراد یا چهارچوب‌های ثابت باشد.
بهتراست تا در رابطه با میزان روشنایی تصاویر پس زمینه خود نیز تصمیم گیری کنید. می‌توانید از تصاویر خنثی، یکنواخت یا تصاویر پس زمینه با کیفیت بالا و تضاد کم تر استفاده کنید. این نوع از جاذبه های رنگی به شما اجازه می دهد فضای بیشتری در پس‌زمینه‌ی طراحی سایت خود در اختیار داشته باشید و متن مورد نظر خود را راحت تر به آن اضافه کنید. در عین حال، استفاده از این تصاویر نسبت به تصاویر سیاه و سفید دارای تفاوت هایی است. هنگام استفاده از تصویر یکنواخت، بهتر است نوع تصویر خود را با توجه به زمینه و معانی رنگ در نظر بگیرید.
مهم ترین بخش اجرایی در به کارگیری قانون یک سوم در طراحی سایت ، قسمتی است که در بالای اسکرول یا قسمت پیمایش ظاهر می‌شود. قسمت ورودی به یک صفحه وب، به طور معمول حاوی چندین عنصر کلیدی است - لوگو یا هدر (Header)، ناوبری (Navigation) و تصویر پایه یا اطلاعات. بهتر است این اطلاعات و موارد را در قسمت های کلیدی قانون یک سوم قرار دهید تا تاثیر آن را مشاهده کنید.
سپس به این فکر کنید که کاربران چگونه صفحه وب سایت شما را مورد جستجو قرار می دهند؟ آیا در طراحی سایت شما قسمت هایی وجود دارد که بهتر است در آن بخش از قانون یک سوم استفاده کنید؟
مفهوم قانون یک سوم دارای بیشترین اهمیت در قسمت هوم پیج (Homepage) طراحی سایت میباشد. زیرا این قسمت مکانی است که کاربران، نظر و احساسات اولیه نسبت به طراحی سایت شما را در ذهن خود شکل می دهند و تصمیم می گیرند که آیا این وبسایت برای آن ها مفید میباشد یا خیر. قانون یک سوم در قسمت محتوای صفحه دارای درجه اهمیت کمتری میباشد، اما همچنان دارای ارزش بالایی در این بخش است. قانون یک سوم به طور رایج برای ایجاد بخش اخبارو تبلیغ نیز مورد استفاده قرار می‌گیرد.
تبلیغات، اغلب در کنار گرید بالا در سومین بخش صفحه نمایش و در قسمت زیرین هدر (Header) افقی ظاهر می‌شود. سایدبار ها و تبلیغات سایدبار اغلب در قسمت گریدلاین (Gridline) سمت راست قرار می‌گیرند. این تنظیمات رایج به این جهت طراحی شده است که نگاه ها را به سمت تبلیغات پولی بکشاند و همچنین این بخش را از بخش محتوای اصلی طراحی سایت جدا سازد.
یکی از مهم ترین کاربردهای قانون یک سوم، در عکاسی و برش تصویر است. روش شکل گیری یک عکس می تواند کمک بسیار زیادی به سوی نگاه به تصویر و طراحی سایت و جلب توجه آن کند.
عکاسان، اغلب تصاویر خود را با در نظر گرفتن قانون یک سوم ثبت می‌کنند. یک عکاس سعی می کند تا به نحوی تصویر خود را ثبت کند که چشمان شخص بیننده با استفاده از قانون یک سوم، گرید لاین های مختلف را مشاهده کند. این قانون اغلب در رابطه با فیلم بردارها نیز صدق می‌کند.
با استفاده از قواعد یک سوم برای تصاویر در طراحی سایت ، می توان از آن برای فضاهای باز و اشیای جهت دار نیز استفاده کرد. استفاده از گرید، به ایجاد حس تعادل و هماهنگی طبیعی نیز کمک می‌کند. به این فکر کنید که چگونه یک تصویر می تواند در قانون یک سوم و گرید قرار بگیرد - به این فکر کنید که منظره افقی یک چشم انداز یا آسمان از چه جهتی درون یک تصویر قرار می‌گیرند (بخش یک سوم بالایی پیشنهاد می شود). همچنین باید توجه زیادی به قرارگیری فضای مرده یا بلا استفاده در تصویر نشان دهید (به به فضای زیادی در نزدیکی قسمت داخلی تقاطع یک سوم ها توجه زیادی نشان دهید.)
ایجاد گرید قانون یک سوم برای استفاده در پروژه طراحی سایت ، کاری تقریبا راحت است. اکثر برنامه های ویرایش تصویر الگویی درون ساخته دارند که با استفاده از آن ها می توانید گرید ایجاد کنید. در ادامه با چندین پیشنهاد برای شروع این کار با شما همراه هستیم. بر روی کاغذ، نه بلوک طراحی کنید به طوری که هر نه بلوک دارای اندازه های یکسان باشند. هنگام ایجاد این طرح، اطمینان حاصل کنید که نسبت ابعاد طراحی سایت خود را در ذهن داشته باشید.
این کار را می توانید با استفاده از محاسبات ریاضی نیز به وسیله دست انجام دهید. (برای انجام این کار چندین وب سایت نیز در دسترس می باشد.) کار خود را با اندازه گیری طول و عرض اندازه صفحه نمایش که می خواهید از آن استفاده کنید شروع کنید. سپس عرض و طول آن را به سه قسمت تبدیل کنید. اندازه هر کدام از آن ها به اندازه بلوک های شما می باشد. به عنوان مثال، یک سایت به اندازه 768 در 1024 به نه بلوک 256 در 341 تقسیم می شود که نسبت آن ها سه به سه می باشد.
در نرم افزار ویرایش تصویر مانند فتوشاپ، می توانید از یک ابزار برش استفاده کنید؛ یا این که گرید سفارشی درست کنید. برای ایجاد گرید سفارشی، منوی Preferences را باز کنید و از گزینه Guide، Grid and Slices را انتخاب کنید. در گزینه گرید: تمامی گرید لاین ها را به صد در صد و Subdivision ها را به سه تغییر دهید. گزینه گرید را روشن کنید (یا خاموش) تا بتوانید گرید موردنظر را با استفاده از دکمه Ctrl+’ بر روی تصویر خود قرار دهید (در سیستم مک از دکمه +’ استفاده کنید). این گرید قابل پرینت شدن نیست؛ بلکه تنها بر روی تصویر قرار می گیرد.
در نسخه های اخیر فتوشاپ، هنگام استفاده از گرید قانون یک سوم، ابزار برش نیز باز می‌شود. با استفاده از ابزار برش اتوماتیک، طراح می تواند مشاهده کند که تصویرش چگونه به نظر می‌رسد.
بهتر است همواره از ابزارهای اختصاصی گوگل و منابع شخص ثالث برای آزمایش صفحه وب سایت خود استفاده کنید تا بتوانید html ارائه شده را مشاهده کنید و از این طریق بتوانید مطمئن شوید تمامی محتوای مورد نظرتان در صفحه وب سایت منتشر شده است و از سئو ی مناسب برخوردار است .
گوگل، راهی بسیار طولانی برای ارائه جاوا اسکریپت پیموده است و به دلیل چارچوب های متنوع جاوا اسکریپت که هرروزه بیشتر و بیشتر برای انتشار محتوا مورد استفاده قرار می‌گیرند، بسیار مهم است تا اطمینان حاصل کنید که گوگل می‌تواند تمامی محتوای مورد نظر سئو را به دقت بر روی صفحه وب سایت منتشر کند. اگر به دلایلی گوگل نتواند با دقت تمام صفحات شما را ارائه دهد، بنابراین ممکن است برخی از محتوای مورد نظرتان منتشر نشود و در بدترین حالت، ممکن است بخشی از محتوای اصلی که در واقع مهم ترین بخش مطالب مورد نظر شماست، انتشار داده نشود.
در ابتدا، اگر با نحوه ارائه جاوا اسکریپت در گوگل آشنا نیستید، این ویدیو می‌تواند خلاصه بسیار مفیدی را به شما ارائه دهد. نحوه کار به این صورت است که گوگل، صفحه را کرال یا خزش (خزنده ها ( Robots- Spider-Crawler) در اصل نرم افزارهای تحت وبی هستند که با الگوریتم های هوشمند و پیچیده ای که موتورهای جستجو برای آنها تهیه کرده اند وارد صفحات وب می شوند . این کرولر ها با دیدن لینک هایی که در این صفحات مشاهده می کنند بیکار ننشسته و به آن لینک ها میخزند . و ممکن است باز مجددا در آن صفحات , لینک های دیگری باشد که به همین صورت این خزیدن ادامه پیدا می کند .) می کند و آن را به بخش پردازنده برای ارائه محتوای سئو ارسال می‌کند.
زمان نشان دادن صفحات استاتیک
Html پایدار یا استاتیک هنگامی نشان داده می شود که لینک ها یا پیوند های موجود به بخش کاوشگر (Crawler) منتقل می شوند. پردازنده، صفحه مورد نظر را به کروم منتقل می کند و محتوای مورد نظر سئورا ارائه می‌دهد. این محتوا شامل محتوای منتشر شده از طریق جاوا اسکریپت است. سپس صفحه نهایی یا نتیجه پردازش سایر لینک ها یا پیوند های اضافی، مجددا به بخش کاوشگر منتقل می‌شوند.
مراحل انتشار محتوا
بنابراین، در واقع دو فاز یا مرحله برای انتشار محتوایی که بر اساس جاوا اسکریپت تهیه شده است وجود دارد:
هنگامی که اختلافاتی را در انتشار محتوای مورد نظر مشاهده می‌کنید، ممکن است متوجه شوید که برخی از دستورالعمل ها یا کدهای مهم گم شده اند یا این که به مکان جدیدی منتقل شده اند. در مطالعه ای که اخیراً انجام شده است، موردی مشاهده شده است که در آن تگ ربات های متای سئو (قطعاتی از کد هستند که دستورالعمل های خزنده برای چگونگی خزیدن یا فهرست محتوای وب را ارائه می دهند.)
در حالی که دستورالعمل فایل robots.txt به پیشنهادات رباتها برای چگونگی بررسی سئو ی صفحات وبسایت است، دستورالعمل های متا پیشنهادهای بیشتری را در مورد نحوه خزیدن و فهرست محتوای یک صفحه ارائه می دهند.) و تقریباً هزار خط پایین تر از کد اصلی و خارج از تیتر و در بخش بدنه ی محتوای مورد نظر منتقل شده است. این اتفاق برای کسی که اهمیت زیادی به انتشار محتوای خود می دهد ممکن است بسیار ترسناک باشد.
اهمیت بررسی صفحات
به همین علت، آزمایش و تست نهایی صفحات وب سایت برای افرادی که صاحب سایت هستند و برای بخش سئو بسیار مهم است تا مطمئن شوید که تمامی بخش های مهم محتوا به صورت مناسب و منظم ارائه شده است. متاسفانه، در حالی که به بسیاری از شرکت ها طی سال های گذشته کمک کرده ام (از زبان نویسنده)، متاسفانه متوجه شدم که تعدادی از آن ها بهترین روش و راه برای مشاهده html ارائه شده را نمی‌دانند؛ بلکه ترجیح می دهند که به سادگی صفحات خود را داخل نسخه فعلی کروم مشاهده کنند و محتوا را بدون ارائه جاوا اسکریپت منتشر کنند و با انجام این کار تصور می‌کردند که بهترین کار را انجام داده‌اند. متاسفانه، این کار باعث ارتکاب خطا و اشتباهات زیادی می شود. در بدترین حالت، سایت مورد نظر ممکن است با عدم ارائه و انتشار مقدار زیادی از محتوای مورد نظر مواجه شود.
بنابراین تست صفحات واقعا مهم است.
به همین دلیل تصمیم گرفتیم پستی در این رابطه منتشر کنیم. در ادامه 6 روش برای مشاهده html ارائه شده در صفحات خود را مشاهده می کنید. تمرکز اصلی این پست بر روی ابزارهای اختصاصی گوگل خواهد بود، اما در کنار این ابزارها برخی از ابزار های شخص ثالث را نیز مورد بحث قرار می دهیم.
آژانس John Cabot پس از بررسی 1,324 نفر در انگلستان دریافت که کاربران وب پس از مشاهده ی پیام "غیر ایمن" در وب سایت ها، به نوعی اشتیاق خود برای مشاهده ی وب سایت را از دست می دهند و در موارد بسیار زیادی از جستجو در سایت مورد نظر منصرف می شوند. اما بحث امروز در رابطه با واکنش سریع و بدون فکر به این پیغام نیست، بلکه نتایج بررسی ها و تحقیقات انجام شده نشان داد که مشاهده ی پیغام ذکر شده بر روی رفتار کاربران و احساس آن ها نسبت به وب سایت و برند مورد نظر نیز تاثیر بسزایی دارد و چه بسا سئو ی آن را به خطر میندازد .
از سال 2014، HTTPS تبدیل به سیگنال اصلی سئو در گوگل شده است، و از جولای سال 2018 (تیر ماه 1397) به بعد، شرکت گوگل تصمیم گرفت تا تمامی وب سایت های HTTP را در مرورگر "کروم" خود با نام "غیر ایمن" علامت گذاری کند. با این وجود، نتایج این بررسی نشان می دهد که نزدیک به 47 درصد افراد تا حدودی معنای اخطاری که آن را مشاهده می کردند، می دانستند. نزدیک به 46 درصد نیز اعلام کردند که مایل نیستند اطلاعات شخصی یا مالی خود را با این گونه وب سایت ها به اشتراک بگذارند و 64 درصد از گروه ذکر شده گفتند که در صورت مشاهده با چنین اخطاری، سایت را بلافاصله ترک خواهند کرد.
سایر نگرانی های کاربران عبارتند از:
نتایج این بررسی همچنین نشان می دهد بسیاری از افراد نگران این هستند که اطلاعات بخش Search History یا تاریخچه ی جستجوی آن ها به فروش برسد.
با توجه به انتظارات متفاوت افراد از برند مورد نظر، پیغام "غیر ایمن" تاثیر بسزایی بر روی نظرات و انتظارات افراد از برند مورد نظرشان داشته است که به طور مستقیم روی سئو تاثیر می گذارد . اما جان لوئیس، خرده فروش آمریکایی، تا حدی با این ایده مخالف بود و اعلام کرد در اکثر موارد، وفاداری، اعتبار و مشتری مداری برند مورد نظر می تواند بر پیغام "غیر ایمن" در وب سایت غلبه کند.
به هرحال، با توجه به ایده ها، بررسی ها و تحقیقات ذکر شده به نظر می رسد هشدار "غیر ایمن" مبحثی بسیار مهم است و امروزه نرخ تبدیل سئو یا ماندن کاربران در سایت (Conversion Rate) به شدت تحت تاثیر این پیغام اخطار قرار دارد.
نتایج بالا نشان می دهد نیمی از جمعیت آماری این بررسی نگرانی زیادی از بابت این پیغام نداشتند. بنابراین هنگام مواجهه با این اخطار، نیمی از این افراد واکنش خاصی نشان نمی دهند، اما ترکیب HTTPS به عنوان عاملی برای سئو و واکنش های ناخواسته ی بازدید کنندگان در هنگام مشاهده ی پیغام "غیر ایمن"، در واقع ضرورتی برای به کار گیری رمزگذاری (Encryption) HTTPS است. به عبارتی دیگر، هیچ بهانه ای برای عدم به کارگیری HTTPS وجود ندارد.
John Cabot دریافت که علاوه بر این بررسی، همچنان میلیون ها وب سایت با اخطار "غیر ایمن" وجود دارند.
طراحان، همواره در رابطه با ساختارهای گرید یا شبکه مانند صحبت می کنند. محبوبیت این ساختارها به دور از تعجب نیست؛ زیرا گرید ها مانند پایه و استخوان بندی تمامی پروژه هایی است که مربوط بهطراحی سایت می باشند.
اما استفاده از قانون یک سوم - یک گرید مبتنی بر ریاضی - برای طراحی سایت هایی که قدمت آن ها به هزاران سال می رسد چگونه است؟ آیا طراحان تا به حال به این مورد فکر کرده اند؟
پاسخ این سوال باید مثبت باشد.
قانون یک سوم مسئله ای سیار مهم در بخش گرید میباشد؛ که می‌تواند چگونگی نگاه مردم به تصاویر، وب سایت‌ها و سایر اطلاعات بصری را توصیف کند و توضیح دهد. انجام این کار، چه به صورت غریزی و چه از روی قصد، حتمی است و تقریباً تمامی افرادی که به یک تصویر نگاه می‌کنند، تصویر مورد نظر را با استفاده از تئوری که پشت این گرید وجود دارد تحلیل می‌کنند.
قانون یک سوم دارای سه فریم یا چهارچوب در قسمت عرض و سه فریم یا چهار چوب در قسمت طول می باشد که می تواند بر روی یک تصویر قرار بگیرد و به طراحان، اطلاعات زیادی در رابطه با چگونگی جهت‌گیری چشم ها هنگام نگاه کردن به یک تصویر یا طراحی سایت خاص منتقل کند. گرید به طراحان و علی‌الخصوص عکاسان کمک می‌کند تا بتوانند چگونگی و جهت نگاه شخص به یک تصویر را درک کنند.
تمامی بلوک ها در قانون یک سوم دارای یک اندازه می باشند (9 بلوک در کل)؛ اما این بلوک ها می توانند بسته به پروژه موردنظر، دارای اندازه و شکل های متفاوت باشند. تمامی بلوک ها یا کل گرید، تمامی پروژه یا شبکه کامل را مورد پوشش قرار می دهند یا می توانند بر روی یک تصویر کامل یا اسکرین شات قرار بگیرند.
این گرید، در چندین نکته مهم کمک بزرگی به طراحان می کند که این نکته ممکن است کمی باعث تعجب شما باشد.
سوی نگاه، هنگام نگاه کردن به طرحی خاص معمولا از سمت بالا به پایین و سپس از چپ به راست می باشد.
بهترین طراحی سایت ، به معنای طراحی سایت متقارن نیست. بیشترین مکان بازدید شده در نگاه به یک طراحی سایت ، با توجه به قانون یک سوم، قسمت داخلی گوشه پایین بلوک بالایی می باشد.
حتی اگر درهنگام طراحی سایت ، قانون یک سوم را در ذهن خود در نظر نمی گیرید، این قانون همچنان قابل اجرا است.
به این فکر کنید که چگونه این اصول می‌تواند در طراحی سایت شما مورد استفاده قرار بگیرد. هر کاربر بر روی قسمت های داخلی گرید قانون یک سوم تمرکز می کند. بخش کانونی شماره یک، تقاطع یا قسمت داخلی بخش بالای گرید و سمت چپ آن می باشد - 41% چشم ها در این قسمت توقف می کنند و به این قسمت از تصویر یا صفحه نگاه می کنند. این امر باعث می‌شود این بخش یا مکان از تصویر، بهترین قسمت برای قرار گیری لوگو یا سایر اطلاعات کلیدی و مهم باشد.
پس از قرارگیری نگاه ها به این سمت، چشم ها به تقاطع یا بخش داخلی زیرین این قسمت منتقل می‌شوند - سپس کاربران، تقاطع قسمت داخلی بالا و سمت راست این بخش را نگاه می کنند و در آخر به تقاطع یا قسمت داخلی پایین و سمت راست آن خیره می‌شوند. بهتر است به این نکته نیز اشاره کنیم که کمتر از 15 درصد افراد بر روی قسمت یک سوم پایینی صفحه تمرکز می کنند؛ طراحان باید به این نکته توجه کنند و به مکان قرارگیری اطلاعات نیز حساسیت خاصی نشان دهند.