X
تبلیغات
رایتل

طراحی وب سایت

سایت ریسپانسیو چیست؟

در چند سال اخیر، رشد عظیمی در دسترسی کاربران  به وب سایت ها، از طریق وسایل سیار مانند تلفن های هوشمند و تبلت ها به وجود آمده است. این ابزارها عموما صفحه نمایش کوچکتری نسبت به لپ تاپ ها و دسکتاب ها دارند، همچنین وب سایت های مرسوم برای خواندن مطالب، نیازمند به بالا پایین کردن زیاد و بزرگنمایی دارند. این مساله، ما را به روش های جدیدی برای ساختن وب سایت های سازگار با موبایل هدایت می کند. این در نهایت مفهوم اصلی responsive web design است. 
آماده کردن متن به صورتی خودکار که با ابعاد صفحه نمایش تطبیق پیدا کند،از وظایف وب سایت های ریسپانسیو است.
وب سایت های ریسپانسیو به دنبال تحقق گزینه های زیرهستند:
ایجاد دسترسی آسان به بخش های منو- مشخص کردن جای کلیدها و کلیک کردن راحت بر آن 
در ابزارات خیلی کوچک، منو ممکن است به پایین صفحه حرکت کند، که هنگامی که به آن کلیک می کنیم تمام منو به نمایش در می آید.
برای نمایش بخش عظیمی از مطلب، بزرگ نمایی را حذف می کند.
کوچک کردن و حذف کردن حرکت افقی
متن باید بدون نیاز به بزرگنمایی، خوانا و واضح باشد.
تصاویر به صورت خودکار، با عرض صفحه نمایش تطبیق پیدا کرده و از عرض آن تجاوز نمی کند.
در صورت امکان با کاهش وضوح تصویر، به کاهش پهنای باند و افزایش سرعت نمایش کمک می کند.
مطالب content block به صورت انباشته در آمده تا به اندازه ی ابعاد صفحه نمایش درآید.
مطالب کلیدی در موقعیت بالاتری قرار گرفته و مطالب کم اهمیت تر حتی ممکن است در ابزارات کوچک تر پنهان شوند.
اغلب مواقع Media queries برای تعیین کردن مشخصه های نمایش مرورگر استفاده می شود و بعد از آن گونه های مختلف وب سایت بر اساس آن مشخصه ها تغییر می کنند.
مهم ترین اصل که باید در نظر گرفته شود، عرض صفحه نمایش است- چه تعداد پیکسل در عرض صفحه می تواند به نمایش درآید؟
برای حذف بزرگنمایی و کوچک نمایی یا حرکت بالا و پایین صفحه، مطالب نباید از عرض نمایش مرورگر تجاوز کند.
 آیفون های شرکت اپل بسیار محبوب هستند و با و جود اینکه پیکسل های صفحه در آخرین مدل آن دو برابر شده است –تعداد پیکسل های موثر در عرض صفحه نمایش آیفون که برای نمایش پرتره به کار می رود، 320 پیکسل است- در طراحی ریسپانسیو هر متنی که از 320پیکسل تجاوز کند، نیاز به تغییر سایز برای جلوگیری از خارج شدن از عرض صفحه دارد. بنابراین اگر مطلب شما 4 بسته ی 300 پیکسلی است که به صورت افقی در صفحه نمایش قرار دارد( که به عرض 1280 پیکسل است) شما باید آن 4 بسته مطلب را به صورت عمودی در آیفون نمایش دهید.
اکثر طراحی های ریسپانسیو نیاز به شبکه ها و بلاک های مطالب دارند تا بتوانند نمایش را به اندازه مناسب تغییر دهند.
مهمترین نکته ها برای درک وب سایت هایی که از طراحی وب ریسپانسیو استفاده میکنند، به شرح زیر است:
طراحی به اندازه ی عرض صفحه نمایش در می آید.
گونه های کوچک همانند گونه های بزرگ نیستند، هر چه صفحه نمایش کوچکتر باشد، مطلب نیاز به تغییر مکان بیشتر دارد.
به همان مقدار که حرکت افقی صفحه کمتر می شود، حرکت دادن عمودی بر اساس حجم مطلب، بیشتر می شود.
صفحه نمایش بزرگتر بهتر از صفحه نمایش کوچکتر است.
طراحی ریسپانسیو حرکت دادن صفحه و همین طور بزرگ و کوچک کردن آن را حذف کرده است، در صورتی که در صفحات non-responsive  نیاز به این گونه کارها برای نمایش وجود داشت.
متن ممکن است به صورت بسته هایی از مطالب، برای تغییر مکان و اندازه در بیاید. متن باید همیشه به صورت خوانا و واضح باشد.

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

 نظر برتری ها و مزیت هاش، بین وردپرس و دروپال قرار داره. پلتفرمش کاربرپسندتر از دروپال (البته نه به سادگی وردپرس)، اما از وردپرس قوی تره و افزونه ها و قابلیت های بی شماری داره.
سهمش از بازار، کمی بیشتر از دروپال (83/5 درصد در مقابل 70/5 درصد).
مطمئنا به این زودی ها نمیتونه سهم عظیم 52/51 درصدی وردپرس رو تهدید کنه، اما کاربرهاش از هاروارد گرفته تا ebay،  لینوکس، Ikea، Barnes & Noble و خیلی های دیگه.
22 تا از مزیت های مهم جوملا:

  • قدرتمندتر از وردپرس

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

  • استفاده و یادگیری راحتتر نسبت به دروپال

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

  • آیا جوملا برای من مناسب است؟

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

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

 نظر برتری ها و مزیت هاش، بین وردپرس و دروپال قرار داره. پلتفرمش کاربرپسندتر از دروپال (البته نه به سادگی وردپرس)، اما از وردپرس قوی تره و افزونه ها و قابلیت های بی شماری داره.
سهمش از بازار، کمی بیشتر از دروپال (83/5 درصد در مقابل 70/5 درصد).
مطمئنا به این زودی ها نمیتونه سهم عظیم 52/51 درصدی وردپرس رو تهدید کنه، اما کاربرهاش از هاروارد گرفته تا ebay،  لینوکس، Ikea، Barnes & Noble و خیلی های دیگه.
22 تا از مزیت های مهم جوملا:

  • قدرتمندتر از وردپرس

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

  • استفاده و یادگیری راحتتر نسبت به دروپال

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

  • آیا جوملا برای من مناسب است؟

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

طراحی وب سایت با جوملا

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

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

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

* پس از اتمام عملیات نصب حتما بر روی "حذف فایل نصب" کلیک نموده تا فایل های نصب حذف گردند.

هم اکنون سایت جوملای شما با قالب پیش فرض جوملا آماده استفاده می باشد و می توانید آن را مدیریت نمایید. برای تغییر قالب جوملای خود می بایست به منوی extension >> template manager مراجعه نمایید و قالب پیش فرض خود را انتخاب نمایید. پیش فرض جوملا در حدود سه قالب دارد و برای نصب قالب های جدید جوملا می بایست قالب مورد نظر را در extensions >> extension manager نصب نمایید.

روش طراحی منوی وب سایت

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

  • منو را واضح و روشن کنید.

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

  • منو را ثابت نگه دارید.

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

  • منو را مختصر و مفید نگه دارید.

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

  • از معماری فلت استفاده کنید.

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

1 2 3 4 5 ... 7 >>