زمان تقریبی برای مطالعه: ۶ دقیقه

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

 

مشکلات قالب قبلی چه بود ؟

 

مشخص نیودن هدف سایت :

به گفته دوستان زیادی سایت پیکسلر پیش از این هدف روشنی نداشت . به این معنی که سایت مشخص نمی کرد که شما با یک استودیو متشکل از یک تیم طرف هستید ، یا اینکه سایت ، یک سایت شخصی است . همینطور این ایهام در مورد بخش کارها و برخی از نوشته ها وجود داشت . بعد از گذشت یک سال و اندی از کار سایت روند کاری سایت پیکسلر تقریبا برای من مشخص شد ؛ در قالب جدید خواهید دید که پیکسلر یک “وبلاگ/ وب سایت” شخصی است که منعکس کننده نظرات و کارهای نویسنده آن است .

عدم یکپارچگی در عناصر UI :

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

مشکلات فنی :

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

 

قالب جدید چگونه شکل گرفت ؟

 

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

طراحی :

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

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

رسم بر این است که طراحان وب معمولا از فوتوشاپ برای طراحی رابط استفاده می کنند ؛ به این مرحله  آماده سازی فایل [۱٫ PSD پسوند فایل هایی است که توسط نرم افزار فوتوشاپ ایجاد می شوند .]PSD می گویند .
من نیز در این مورد استثنا نیستم و قالب جدید را به وسیله نرم افزارهای فوتوشاپ[۲٫ Adobe Photoshop نرم افزاری برای کار بر روی تصاویر Bitmap است که به یک خرده فرهنگ بین طراحان و عموم مردم تبدیل شده است . ] و البته ایلیستریتور [۳٫ Adobe Illustrator نرم افزاری بسیار قدرتمند برای کار بر روی تصاویر برداری است . ]اجرا کرده ام . در زیر تصاویری از فایل PSD قالب جدید می بینید :

 

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

کدنویسی :

در این مرحله ،  “طرحی” که وجود دارد باید به مقادیری کد تبدیل شود تا مرورگرها بتوانند آن را به درستی نشان دهند . معمولا در تبدیل طرح به Html/Css همینطور که گفتم تغییرات جزیی نیز در طرح ایجاد می کنم . قالب جدید طبق استاندرادهای مدرن وب کار شده است . به همین دلیل مرورگری مثل مرورگر IE و برخی از مرورگرهای قدیمی سایت را درست نشان نمی دهند . اگر شما هنوز هم از Internet Explorer برای وب گردی استفاده می کنید ، بهتر است به فکر تغییر یا حداقل ارتقا آن باشید . معمولا سفارش دهندگان به طراحان وب توصیه می کنند که وب سایتی که طراحی می شود با همه مرورگرها به خصوص IE هماهنگ باشد . اما در این مورد خاص چون سفارش دهنده و طراح یکی بوده ، ترجیح دادم حمایت از IE را در دستور کار قرار ندهم .
فریم ورکی که برای Css سایت استفاده شده است ، توییتر bootstrap است . البته تغییرات زیادی در فریم ورک دادم و بخش هایی از آن را نیز حذف کرده ام . در نهایت همه فایل های CSS فشرده شدند .

قالب قبلی برای فونت ها از کتابخانه جاوا اسکریپت Cufon استفاده می کرد . مرتضی دوست خوبم در استودیوی آورتا این کتابخانه را تحت نام بیفون فارسی کرده اند . بنا به دلایلی ترجیح دادم تا قالب جدید از همان font-face استفاده کند .

سایت از “سیستم مدیریت محتوا”  ” وردپرس” استفاده می کند . همینطور بخش هایی از قالب را با PHP نوشته و به ورد پرس اضافه کردم . از Gzip و LazyLoad هم برای بهینه کردن سرعت سایت استفاده شده است .

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

در نهایت :

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

 

——————————————