رونمایی قالب جدید گروه کوهنوردی سالار + توضیحات فنی

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

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

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

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

۱)نمای کلی سایت :

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

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

۲)قسمت ناوبری/ navigation

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

از کارهایی که در این بخش انجام شد این بود که:

۱- شرایطی ایجاد شود که کاربر با سهولت بیشتر به زیر شاخه ها دسترسی پیدا کند

۲- فضای زیادی که این بخش اشغال کرده آزاد شود تا بتوان از آن فضای خالی در جهت بهبود سایت استفاده کرد.

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

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

۳)قسمت کناری/ sidebar :

عرض قسمت کناری ۳۰۰ پیکسل در نظر گرفته شده است که در مقایسه با قسمت مطلب عریض بوده و امکان انتخاب منو مورد نظر را با سهولت بیشتری به کاربر می دهد.

بخش اصلی منو های سایت در این قسمت قرار گرفته است که به شرح ذیل می باشند :

تقویم برنامه ها : نمایی از تقویم شش ماهه گروه و همچنین برنامه آتی گروه همراه با لینک به مطلب.

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

مقالات : مقالاتی که بر روی سایت قرار داده می شوند در این بخش برای استفاده کاربر قرار می گیرد.

آرشیو : آرشیو ماهیانه مطالب در این بخش در دسترس است که با کلیک بر روی هر ماه مطالب ارسالی در آن ماه نمایش داده می شوند.

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

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

۴)طراحی بر اساس Grid :

یکی از مفاهیمی که در سال های اخیر در طراحی وب رایج شده است، استفاده از Grid یا شبکه بندی در طراحی است. Grid به شما کمک می کند تا سایت شما هارمونی خود را حفظ کرده و اجزا به شکل مناسب تری در کنار هم قرار بگیرند. در حال حاضر می توان گفت که اغلب سایت هایی که طراحی مجدد می شوند از گرید استفاده می کنند. در این میان، سیستم Grid سایت ۱www.960.gs از همه محبوب تر است. البته در طراحی این سایت از کدهای نوشته شده در فریم ورک این گرید استفاده نشده و تنها Template گرید این فریم ورک در فوتوشاپ مورد استفاده قرار گرفته شده است.
در حال حاضر اکثر طراحی ها با عرض ۹۴۰ تا ۱۰۰۰ پیکسل انجام می شوند زیرا در این سایز، طرح بدون مشکل در مرورگر نمایش داده  می شود  و در زیر طرح  نوار اسکرول افقی ظاهر نخواهد شد . در  حال حاضر کمترین  سایز  صفحه کاربران، ۱۰۲۴ در ۷۶۸ است و سایز صفحه ۸۰۰ در ۶۰۰ تقریبا منسوخ شده است.

همانطور که در تصویر زیر مشخص است بر اساس آمار سایت Statcounter در ماه گذشته در ایران تنها ۲ درصد از کل کاربران اینترنت از سایز صفحه ۸۰۰ در ۶۰۰ استفاده کرده اند، در حالی که خط سبزی که در بالا قرار گرفته است ومقدار بیش از ۴۰ درصد را در جدول نشان می دهد، مربوط به سایز صفحه ۱۰۲۴ در ۷۶۸ است. به همین خاطر سایز طرح سالار نیز به شکلی در نظر گرفته شده که در کمترین رزولوشن ممکن که همان ۱۰۲۴ در ۷۶۸ است، به وضوح دیده شود.

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

۵)استفاده از بهترین تکنولوژی های کدنویسی:

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

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

۶)استفاده از جاوا اسکریپت :

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

۷)طراحی بر اساس نکات usability :

نکته دیگری که در طراحی به آن توجه شده است در نظر گرفتن نکات کاربردپذیری سایت است. در حال حاضر سعی کردیم که در طرح نکاتی از Usability را که اهمیت زیادی دارند را رعایت کنیم. اغلب مواردی که در این طرح استفاده شده است به طور کامل در کتاب Don’t make me Think و یا Principles of beautiful web design توضیح داده شده است.

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

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

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

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

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

۸)توجه به سرعت بارگذاری صفحات :

یکی از مواردی که در طراحی سایت ها به آن کم توجهی می شود، مسئله حجم صفحات است. در اغلب سایت های دانلود گاها حجم یک صفحه از ۲ مگابایت نیز می گذرد. این حجم بسیار زیاد است. حجم معقول برای یک صفحه وب حدود ۱۰۰ تا ۳۰۰ کیلوبایت است ولی با توجه به ماهیت سایت سالار و تصاویر بسیاری که در این سایت وجود دارد سعی کردیم حجم صفحات را تا جایی که امکان دارد کم کنیم. در حال حاضر در آخرین تست حجم قالب سایت حدود ۳۵۰ کیلوبایت بوده و حجم صفحه اول در حدود ۴۵۰ کیلوبایت است. البته در فاز بعدی صفحات Gzip خواهند شد و تصاویر مربوط به قالب سایت نیز به CSS Sprite تبدیل می شوند تا هم حجم صفحه و هم تعداد HTTP Requestها تا حد امکان کاهش پیدا کند. با انجام این فاز احتمال می رود که حجم صفحه اول بین ۱۰۰ تا ۲۰۰ کیلوبایت سبک ترشود و همین مسئله باعث افزایش سرعت بارگذاری شدن صفحه می شود که هم برای کاربران خوشایند است و هم پهنای باند کمتری مصرف خواهد شد. ازطرفی یکی از فاکتور هایی که گوگل برای سایت ها منظور می کند مسئله سرعت لود صفحات است. صفحاتی که سریع تر بارگذاری شوند در نتایج جستجو موقعیت بهتری خواهند داشت (البته اثر اندک است).

پی نوشت :

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

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

با تشکر

اشکان رشیدجلودار

High quality cheap price korean japanese fashion at asianfashion4u
rastreamento correios rings and charms and so on

Top 3 Trendy Knee High Boots for Girls
movie2k She has just made a hot deal with 1921 Jeans

Easy Straightening as Never Before
ebay kleinanzeigen shrimp additionally avocado greens meal

The Best Babies Kids Fashion Clothes
youjizz until your upper arms are parallel to the floor

The Nine Bean Secret Recipe
xvideos a handbag is not just for fashion purposes

teaching program for military and government
free hd porn fashion accessory and style

Tadd Gadduang and Joshua Allen perform a Lil
quick weight loss studded belts and bracelets

Online Shopping For Clothes With Diesel Jeans Brand
snooki weight loss Abercrombie Fitch is the high end brand

نوشته ی در تاریخ ۲ خرداد ۱۳۹۱ | دسته بندی: اطلاعیه ها, عمومی | دیدگاه: ۱۳ | 3125بازدید

برچسب: , , , , , , ,

۱۳ دیدگاه »

  1. احمد ۳ خرداد ۱۳۹۱ at ۸:۴۱ ب.ظ -

    خیلی هم خوب !

    خیلی قشنگ شده اشکان جان

    تشکر میکنم از زحمات دوستان خصوصا اشکان و مهران

    Thumb up 0 Thumb down 0

  2. maryam ۴ خرداد ۱۳۹۱ at ۱:۴۸ ق.ظ -

    kheyli ghashang shode mr30

    Thumb up 0 Thumb down 0

  3. samin nazariyat ۴ خرداد ۱۳۹۱ at ۱۲:۴۳ ب.ظ -

    salam
    vvvvvvvvvvvvvvaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyy khili khob shode dasteton dard nakone aghaye nilsaz va jolodar merciiiiiiiiiiiiiiiiiiiiiii

    Thumb up 0 Thumb down 0

  4. e.gholami ۵ خرداد ۱۳۹۱ at ۶:۲۶ ب.ظ -

    salam
    vaghan kheli ghashange…
    mer3000000000000

    Thumb up 0 Thumb down 0

  5. Behnaz ۵ خرداد ۱۳۹۱ at ۸:۲۵ ب.ظ -

    خوب شده یه تنوع هم شده…
    منتظر آرشیو و پست های جدید هستیم
    مررسی از همه

    Thumb up 0 Thumb down 0

  6. محمدی ۶ خرداد ۱۳۹۱ at ۶:۵۹ ب.ظ -

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

    Thumb up 0 Thumb down 0

  7. مهران نیلساز ۷ خرداد ۱۳۹۱ at ۱۲:۲۳ ق.ظ -

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

    Thumb up 0 Thumb down 0

    • اشکان رشیدجلودار ۷ خرداد ۱۳۹۱ at ۱۲:۵۶ ق.ظ -

      لطف داری مهران جان
      البته از این به بعد هم تیم مدیریت سایت با راهنمایی مهران عزیز جلو میره

      Thumb up 0 Thumb down 0

  8. Robab Roghani ۷ خرداد ۱۳۹۱ at ۹:۱۶ ق.ظ -

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

    Thumb up 1 Thumb down 0

  9. نرگس یوسف نیا ۸ خرداد ۱۳۹۱ at ۸:۴۳ ب.ظ -

    دستتون درد نکنه.

    Thumb up 0 Thumb down 0

  10. مهران نیلساز ۹ خرداد ۱۳۹۱ at ۱۲:۴۴ ب.ظ -

    کوهنوردی تنوره کشیدن بر سر اینکه اولین صعود را من کرده ام یا تو نیست!!!

    مربی کوهنوردی را به تکه ای کاغذ نمیشناسند!!! کوهنوردی را به کفش و کلاه محک نمیزنند!!!

    کوهنوردی به دید است ومعرفت!!! کوهنوردی را به سیرتش میشناسند نه به صورتش!!!

    Thumb up 1 Thumb down 0

  11. محمد خواجه نظر ۹ خرداد ۱۳۹۱ at ۱۱:۵۲ ب.ظ -

    امیدوارم همه اهل عمل باشن نه حرف!!!!!!!

    Thumb up 0 Thumb down 0

  12. سعید مقدس ۱۴ فروردین ۱۳۹۳ at ۱۰:۱۲ ق.ظ -

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

    Thumb up 0 Thumb down 0

+ برای نمایش آواتار خود در فرم نظرات، می‌توانید در سایت گراواتار ثبت‌نام کنید.

+ لطفاً فارسی بنویسید.