برخی از مشتریان:

پنجره دهم
بر حال بارگزاری..

طراحی سایت جدید زاکروت رونمایی شد

تاریخ

چهارشنبه ۲۲ شهریور ۱۳۹۱

به اشتراک بگذارید

مطالب مرتبط

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

رسپانسیو دیزاین و یا طراحی واکنش‌گرا

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

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

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

طراحی واکنش‌گرا یا رسپانسیو دیزاین دلالت بر این دارد که کدام خصیصه (style) در مواجه با “سایز صفحه” دیوایس پردازش گردد، زمانی که با سیستم‌های رومیزی و یا لپ تاپ‌ها وبسایت را ملاحظه می‌کنیم استایل‌های مربوط به همین سایز صفحه پردازش شوند، و اگر با تبلت سایت را بررسی کنیم استایل سایز مربوط به تبلت پردازش و نتیجه نهایی به کاربر نمایش داده شود و همین طور برای موبایل و سایر دیوایس‌ها با سایز صفحه مختلف استایل‌های طراحی و تعریف شده نمایش داده شوند.

برای ایجاد طراحی واکنش‌گرا راه‌های زیادی وجود دارد، ما برای طراحی سایت جدید زاکروت از فریمورک رسپانسیو MQFramework استفاده کردیم.

تصاویر سایزهای مختلف سایت به شکل زیر است:

طراحی سایت برای سه سایز بزرگ، متوسط و تبلت

طراحی سایت برای سه سایز بزرگ، متوسط و تبلت

طراحی سایت برای نمایش در موبایل بصورت افقی

طراحی سایت برای نمایش در موبایل بصورت افقی

طراحی سایت برای نمایش در موبایل بصورت عمودی

طراحی سایت برای نمایش در موبایل بصورت عمودی

گرید سیستم و یا طراحی ساختارمند

مغز ما برای قابل فهم کردن همه چیز “ساده سازی” را دوست دارد، به همین دلیل است که ما برای اجرای نظم بر روی چیزهایی که پر هرج و مرج به نظر می‌رسد تلاش می‌کنیم.

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

دو آرایش صفحه نمایش داده شده درتصویر زیر را در نظر بگیرید:

دیزاین ساختارمند

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

برای طراحی سایت با استفاده از گرید سیستم راه‌های متفاوتی وجود دارد، انتخاب ما بر اساس گرید سیستم ۹۶۰ انجام گرفته است و سپس همخوان سازی آن با سیستم رسپانسیو  MQFramework انجام شده است، در ادامه طرح گرافیکی بر اساس سیستم دوازده ستونه ۹۶۰ را می‌توانید مشاهده نمایید.

پیاده سازی گرافیک طرح با الگوی ۹۶۰

پیاده سازی گرافیک طرح با الگوی ۹۶۰

ایجکس

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

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

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

کارایی ایجکس بر همه ثابت شده است و اکنون اکثر‌ وب سایت‌های برتر دنیا در بخشی از سایت خود از تکنولوژی ایجکس استفاده می‌کنند.

ایجکس در واقع مجموعه‌ای از چند تکنولوژی موجود است، در سمت کاربر از تکنولوژی‌های JavaScript و CSS استفاده می‌شود که هر دو تکنولوژی‌هایی آشنا و موفقند. اغلب برای کار با ایجکس از یک فریم‌ورک جاوا اسکریپت برای ارتباط بین رابط کاربری و  موتور پردازش اطلاعات استفاده می‌شود.

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

Css Sprite

مشاهده و بررسی سایت‌های زیادی نشان داده است که به طور متوسط کمتر از ۳۰ درصد زمان بارگزاری صفحات صرف دریافت HTML می‌شود و بخش اعظم دیگر برای ثبت درخواست‌ها و دریافت اجزای صفحه (مانند تصاویر، جاوا اسکریپت، برگه‌های استایل‌دهی) می‌شود.

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

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

طراحی سایت با تکنیک css sprite

طراحی سایت با تکنیک css sprite

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

۱۳ دیدگاه نوشته شده است! می توانید دیدگاه خود را بنویسید

  1. مجتبی می‌گه:

    کارتون حرف نداره امین جان ، به امید موفقیت های بیشتر …

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

    یه نکته کوچک دیگه هم درباره تایپوگرافی کلی سایت بگم: به نظرم اگر سایز فونت ها کمی بزرگتر بشه بهتره و برای بخش های مختلف از فونت های متناسب با زمینه و پیام استفاده بشه بسیار خوب خواهد بود. الان یه کم یکنواختی داره و باعث خستگی چشم میشه…

    • جناب روشنایی از انرژی مثبت شما کمال تشکر را داریم؛
      یکی از برنامه‌های جاری ما در زاکروت آموزش، آماده‌سازی پلاگین و ابزارهای رایگان برای دولوپرهاست، بر همین اساس بخش لابراتوار و مقالات را برای این مهم در نظر گرفته‌ایم. به یاری خدا، بزودی مطالب جذاب‌تری از ما خواهید خواند.

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

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

  4. مرتضی می‌گه:

    کارت درسته

  5. پدرام می‌گه:

    خیلی عالی …
    به امید پیشرفت و موفقیت در آینده …

  6. ساسان اس ام اس می‌گه:

    قالب هاتون واقعاً زیباست

    • الناز می‌گه:

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

  7. سئو می‌گه:

    سلام
    خیلی خوب شده مبارک باشد

  8. میثم می‌گه:

    ممنون
    به امید پیروزی روز افزون

  9. erfan می‌گه:

    خیلی توپه دمتون گرم