آیا می دانستید در حدود 5.9 بیلیون کاربر با استفاده از موبایل خود وب را مرور می نمایند و به این تعداد هر لحظه اضافه می گردد!
در حدود 20% از کاربران موبایل وب را از طریق موبایل خود مرور می نمایند و این دلیل بسیار مناسبی می باشد که می بایست سایتی مخصوص مرورگر موبایل طراحی نمایید تا مرور سایت شما توسط مرورگر موبایل مناسب باشد.
شرکت های بزرگی نسخه موبایلی سایت خود را به همین دلیل طراحی نموده اند. در حال حاضر تعداد بسیار زیادی کاربر در اینترنت موجود است که توسط موبایل خود وب سایت ها را مرور می نمایند ولی تعداد سایت های کمی هستند که نسخه سایت مناسب موبایل دارند به طوری که سایت آنها در موبایل به راحتی قابل رویت باشد.
کارهای متفاوتی از طراحی سایت معمولی می بایست برای طراحی سایت مناسب موبایل صورت گیرد. مقاله حاضر به شما در طراحی سایت موبایل کمک خواهد نمود.
کاربران وب سایت موبایل
قدم اول در طراحی سایت مناسب موبایل آن است که بدانید چه شخصی سایت شما را مشاهده می نماید. کاربران وب سایت های موبایل اشخاصی هستند که زمان کمی دارند و معمولا پشت میز نیستند بنابراین می بایست دسترسی و ظاهر آن به گونه ای طراحی گردد تا کاربر سریع مطلب مورد نظر خود را بیابد.
تفاوت مرور سایت از طریق کامپیوتر و موبایل آن است که کاربری که سایت را از طریق موبایل رویت می نماید ممکن است در حال حرکت باشد.
اصول اولیه طراحی سایت موبایل
باید در نظر داشته باشید سایتی که برای کامپیوتر طراحی می گردد برای موبایل مناسب نیست، زیرا اصول و قواعد طراحی سایت برای کامپیوتر بر مبنای استانداردهای کامپیوترها می باشد که به عنوان w3c شناخته می شود.
مرورگرهای موبایل برای رویت مطالب با حجم پایین ایجاد شده اند بنابراین در طراحی سایت موبایل خود می بایست به حجم صفحه و میزان دیتاها دقت نمایید و سایت را در پایین ترین حجم ممکن طراحی نمایید
ساده ترین راه برای پیاده سازی وب سایت موبایل استفاده از قالب سایت فعلی شما می باشد که برای عرض و قالب موبایل طراحی شده باشد. در صورتی که قصد دارید این کار را انجام دهید می بایست تغییرات بسیاری در گرافیک و ساختار سایت خود دهید.
در اینجا اصول و قواعدی را برای طراحی سایت موبایل بیان می کنم که قبل از طراحی سایت می بایست به آن توجه داشته باشید:
در ایجاد ساختار سایت از css استفاده نمایید و سایت را با استفاده از دایو طرح ریزی نمایید و سعی نمایید حتی الامکان از جداول استفاده ننمایید.ساده تر است که کد نویسی سایت را بر مبنای XML یا XHTML انجام داده باشید, برای کاراکتر ست از UTF-8 استفاده نمایید.در نظر داشته باشید که سایت صفحه موبایل ها نیز با یکدیگر متفاوت می باشند سایت را به گونه ای طراحی نمایید تا در نسخه های مختلف عرض موبایل به خوبی پیاده سازی گردد و حتی المکان از عرض های ثابت استفاده ننمایید و عرض را به صورت درصدی مقدار دهید.در نظر داشته باشید موارد مهم را حتی المکان در بالای صفحه قرار دهید. به دلیل کوچک بودن ابعاد صفحه موبایل مرور یک سایت توسط موبایل ممکن است زمانبر باشد آیتم های موجود در صفحه را به گونه ای ساده در اختیار کاربر قرار دهید.برای انگشت طراحی نمایید. سایز لینک ها حداقل می بایست 30-40 پیکسل باشد و فواصل بین کلید ها را برای انگشت انسان حتما رعایت نمایید.زمان دانلود را در نظر داشته باشید. از تصاویر پس زمینه استفاده ننمایید... زیرا ممکن است خوانایی مطالب را از بین ببرد. از گرافیک های کوچک در سایت استفاده نمایید و حتی المکان گرافیک کمتری استفاده نمایید. سایز تمامی آیتم های صفحه خود را به حداقل برسانید تا درخواست های http به حداقل برسد و سایت سریع تر بارگذاری شود.فرم ها را از طریق تکت باکس ها انتخاب ننمایید و آن ها را از طریق رادیو و چک باکس ها طراحی نمایید. عناوین فیلدهای فرم را بالای فیلد کار نمایید و فرم را حتما به صورت تک ستونی طراحی نمایید. پر کردن فرم از طریق موبایل بسیار سخت می باشد آن را هر چه می توانید ساده طراحی نمایید.در طراحی فرم ها فیلدهای فرم را حداقل طراحی نمایید و داده های ثبت شده کاربر را برای دفعه بعد در سیستم ثبت نماییداکثر مرورگرها از پلاگین ها و اکستنشن ها پشتیبانی نمی نمایند.در پایان برای طراحی سایت موبایل این مطلب را در ذهن داشته باشید که کمتر بهتر است. سعی نمایید از گرافیک های بی مورد در طراحی سایت خود استفاده ننمایید
برای دانستن مطالب بیشتر در مورد طراحی سایت موبایل مطالب زیرا را مطالعه نمایید:
چگونه وب سایت موبایل طراحی نماییم
طراحی وب سایت موبایل دقیقا به مانند طراحی سایت کامپیوتر می باشد. هر دوی آنها ازHTML, CSS وJavascript پشتیبانی می نمایند و از طریق ابزارهای مختلف طراحی سایت ایجاد می گردند. همچنین اکثر مرورگرهای موبایل ازHTML5 و CSS3 پشتیبانی می نمایند فقط می بایست مواردی را برای سایت موبایل به تگ های صفحه اضافه نمایید.
تگ های مختلفی می بایست به <head> صفحه اضافه گردد تا مرورگر موبایل اطلاع یابد که این سایت برای موبایل طراحی شده:
<meta name="HandheldFriendly" content="True"><meta name="MobileOptimized" content="320"><meta name="viewport" content="width=device-width">موارد بیشتری را در مورد تگ های متا می توانید در این بخش مطالعه نمایید.
همچنین برای آنکه نوع وسیله و ابعاد مرورگری که سایت را مرور می نماید را مشخص نمایید می بایست از اسکریپت php استفاده نمایید و فایل استایل مناسب را برای وسیله مورد نظر اجرا نمایید. راه حل های بسیاری برای پیاده سازی سایت موبایل وجود دارد. مهترین نکته آن است که سایت موبایلی خود را برای تمامی مرورگرهای موبایل طراحی نمایید و سایت را اختصاصا برای مرورگر خاصی طراحی نکنید. همینطور ابزارهای موبایل پیوسته در حال تغییر می باشند.
این مورد بسیار مهم می باشد که سایت موبایلی شما برای تمامی مرورگرها یکسان نمایش داده شود. برای آنکه سایت شما با تمامی مرورگرها سازگای داشته باشد می بایست سایت را بسیار ساده طراحی نمایید.
منابع
برای لیست کاملی از منابع موبایل,  کلیک نمایید.
قیمت های ما
تیم طراحی سایت دارکوب آماده است سایت موبایلی شما را طراحی نمایید و یا سایت موبایلی را از نسخه فعلی سایت شما ایجاد نماید. لیست قیمت ها در زیر آماده
قابلیت اولیه پیشرفته پیشرفته و سئوطراحی صفحات وب سایت موبایل ? ? ?یکپارچه سازی با سایت فعلی ? ? ?تغییر خودکار سایز صفحه برای سایز های مختلف ? ? ?نصب کد انتقال به صفحه ویژه موبایل ? ? ?قابلیت ارسال ایمیل ? ? ?قابلیت ارسال درخواست ? ? ?قابلیت خاموش و روشن کردن موبایل ? ? ?نقشه موقعیت ? ? ?قابلیت ویدئو ? ? ?سیستم آماد گوگل ? ? ?نقشه سایت موبایل ? ? ?ایجاد فرم ها ? ?سئو برای موبایل ?برنامه نویسی های خاص تماس بگیرید تماس بگیرید تماس بگیریداتصال به پایگاه داده ها تماس بگیرید تماس بگیرید تماس بگیریدقیمت اولیه 500 هزار تومان 700 هزار تومان 1 میلیون توماندر صورت نیاز به مشاوره تماس بگیرید  در نتیجه
به طوری که می بینید می بایست در طراحی سایت موبایل موارد مختلفی دقت نمایید. اصول و قواعد طراحی سایت موبایل با اصول طراحی سایت کامپیوتر تا حدی متفاوت است. در صورتی که زمان کافی برای یادگیری سیستم کد نویسی برای موبایل را ندارید,   می توانید شرکتی را انتخاب نمایید تا کار طراحی سایت موبایل شما را انجام دهد

منبع:

http://sitedesign.joomir.com/مقالات-طراحی-سایت/item/682-طراحی-و-ساخت-وب-سایت-موبایل.html 

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

3 مورد از فروم ها برای طراحان و برنامه نویسان وب

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

در بخش زیر 3 مورد از بهترین فروم ها را برای طراح و برنامه نویسی وب سایت معرفی می نمایم:

• Forrst. این فروم یک انجمن سنتی و قدیمی نمی باشد, در این انجمن کاربران متخصص بسیاری عضو هستند. تمرکز اصلی برای روی طراحی (که به دسته بندی های مختلفی تقسیم شده) و مرور کد است, و بحث در مورد موضوعات روز می باشد.
• Stack Overflow. این فروم بسیار جالب می باشد زیرا به خوانندگان این امکان را می دهد در بحث شرکت نمایند بدون آنکه نیاز باشد به سوالی پاسخ دهند و یا سوالی را مطرح نمایید. کاربران می توانند به بهترین پاسخ ارائه شده رتبه دهند, پس بنابراین زمانی که شما در حال رویت پاسخ های سوالات می باشید بهترین پاسخ به عنوان اولین نتیجه نمایش داده می شود. هر کس می تواند سوال بپرسد, هر کس هم می تواند پاسخ دهد, و هر کسی می تواند رای دهد. نیاز به عضویت در سایت نیست, که این قابلیت در انجمن های معمولی موجود نیست.
• Web Developer. یکی از معروفترین انجمن ها (که در موتورهای جستجو به عنوان اولین نتایج می باشد) و دارای اطلاعات بسیاری می باشد. قبل از ارسال می بایست در سایت ثبت نام نمایید, و می توانید مطمئن باشید سوالات و پاسخ های شما در این فروم بسیار دیده می شود.

3 شخصیت برتر توسعه دهنده وب در شبکه های اجتماعی و چرا می بایست آن ها را دنبال نماییم

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

• John Resig. John Resig خالق jquery می باشد, یک برنامه نویسی جاوا اسکریپت, و مولف, و او این تکنولوژی ها را کامل می شناسد. توئیتر او مکان بسیار مناسبی برای دنبال کردن می باشد زیرا مطالب مفیدی را توئیت می نماید. موردی که بسیار جالب می باشد آن است که سوال و جواب هایی رو در شبکه اجتماعی مطرح می نماید تا سایر کاربران بتوانند در بحث شرکت کنند.
• Gina Trapani. با وجود اینکه این متخصص در حدود 300000 دنبال کننده در توئیتر دارد, مطالب بسیاری را دائما در شبکه های اجتماعی ارسال می نماید. ایشان شخص بسیار تاثیر گذاری در این صنعت می باشند.
• Eric A. Meyer. من ایشان را دوست دارم زیرا به کلیه سوالات مطرح شده در زمینه html و css پاسخ می دهد و در بحث ها شرکت می نماید. ممکن است که یکی از تاثیر گذارترین افراد نباشد , اما این شخص تسلط بسیاری به این شغل دارد. و این شخص اطلاعات علمی بسیاری دارد, با 22000 توئیت انجام شده می توانیم اعلام نماییم یکی از فعال ترین متخصصان است.

3 مورد از بهترین بلاگ های طراحی و توسعه وب سایت

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

• Smashing Magazine. یکی از محبوب ترین های من و همچنین پر بازدید ترین بلاگ های آموزشی. این بلاگ به صورتی طراحی شده که طراحان و برنامه نویسان به راحتی می توانند مطالب مورد نظر خود را مطالعه نمایند.
• Scott Hanselman. این بلاگ دارای مطالب بسیار مفیدی می باشد. این شخص تجربیات واقعی خود را در زمینه طراحی و برنامه نویسی وب سایت با شما اشتراک می گذارد.
• OXP (One Xtra Pixel). این بلاگ مطالب خود را با کمی طنز ارائه می نماید. و موضوعات آن از موارد پایه تا موارد فنی تر می باشد, اما همیشه در مطالب خود از گرافیک های طنز استفاده می نماید.

بلاگ خبری توسعه دهندگان وب

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

• CSS Drive. این سایت به مانند یک سایت خبری طراحی شده, بنابراین مطالب بسیاری را در مرحله اول مشاهده می نمایید. این سایت ساختار بسیار مناسبی دارد و بنابراین به راحتی می توانید موضوعات مورد نظر خود را بیابید و مطالعه نمایید.

 منبع:

http://sitedesign.joomir.com/مقالات-طراحی-سایت/item/808-web-design-resource.html

بهترین شرکت طراحی وب سایت در ایران کدام است؟ چگونه یک شرکت به عنوان بهترین شرکت طراح وب سایت شناخته می شود.

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

کیفیت کار شرکت های طراحی وب سایت

تعریف یک شرکت به عنوان بهترین شرکت طراحی وب سایت تنها بستگی به طراحی ندارد. طراحی سایت فقط به موضوع طراحی اشاره ندارد بلکه طراحی سایت به موضوعات گسترده ای ارتباط دارد.

پس دلیل آنکه یک شرکت طراحی سایت به عنوان برترین شناخته می شود چیست؟

به نظر من برای آنکه به عنوان برترین شرکت طراحی سایت مطرح باشید می بایست واجد شرایط موارد زیر باشید:

طراحی برنده جوائز:

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

تعداد زیاد پروژه های انجام شده:

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

خدمات ارائه شده گسترده:

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

نمایش پروژه های موفق:

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

رشد شرکت:

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

چرا طراحی سایت دارکوب جزو بهترین شرکت های طراحی است؟

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

آیا طراحی سایت دارکوب بهترین شرکت طراحی سایت در ایران است؟

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

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

طراحی های برتر:

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

گستردگی پروفایل:

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

گستردگی خدمات در زمینه وب:

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

پروژه های موفق دارکوب:

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

رشد شرکت:

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

تفاوت طراحی سایت دارکوب با سایر شرکت های طراحی در چیست؟

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

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

منبع:

http://sitedesign.joomir.com/مقالات-طراحی-سایت/item/683-بهترین-شرکت-طراحی-وب-سایت-در-ایران.html

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

محتوا اول

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

طراحی منعطف

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

Metro

با انتشار ویندوز نسخه 8 و مطرح شدن مسائلی به مانند ارائه محتوا قبل از هر چیزی وب سایت های بسیاری قالب خود را به مانند قالب Metro پیش فرض ویندوز 8 طراحی نمودند. Metro طراحی است که در آن آیتم های محتوا به باکس هایی در سایزهای مختلف تقسیم بندی شده , که با تصویر ، آیکون تزئین شده است.

پشتیبانی Retina

Apple نمایش Retina خود را برای iPhone 4, iPad, و MacBook Pro در سال 2012 معرفی نمود. نمایش Retina نوع نماشی می باشد که شرکت apple برای صفحات کریستالی نمایشی خود طراحی نموده است. Apple ادعا می نماید نمایش Retina از نظر کیفیت پیکسلی به گونه ای است که چشم انسان قادر به رویت پیکسل های آن نیست. طراحان وب بسیاری کیفیت تصاویر و فایل های css خود را به گونه ای طراحی نمودند تا از این قابلیت پشتیبانی نماید. Retina.js راه دیگری برای ارسال تصاویر با کیفیت به مرورگرهای apple می باشد.

اسکرول نامحدود

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

Parallax

یک روش اسکرولینگ که در سال 2012 مطرح شد, و امسال نیز مطرح بود, "Parallax," می باشد هنگامی که دو آیتم به طور موازی با سرعت متفاوت حرکت می کنند. با پشتیبانی مرورگر از این قابلیت, Parallax برای اجرا در صفحات وب سایت محبوب تر شد.

سایت های تک صفحه ای

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

پس زمینه تصویر و یا ویدئو کامل

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

طراحی نظیر نرم افزارها

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

افکت های CSS3

با توجه به امکانات جدید و گسترده css3 طراحان امکانات بسیاری برای پیاده سازی افکت های جدیدتر از طریق css3 یافتند. CSS3 به طراحان این اجازه را می دهد که بر روی آیتم ها سایه بیاندازند و همچنین به طراحان این امکان را می دهد که به اسکریپت های سبک ابزارهای نظیر تصاویر و فلش بسازند.

استفاده از فونت ها و تیترهای درشت

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

طراحی المنت ها به صورت کروی

طراحان وب بسیاری از اشکال دایره ای شکل به جای اشکال مستطیلی و گوشه های گرد استفاده نمودند . دایره ها همچنین در طراحی "Metro" استفاده می شوند.

فید کردن

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

منبع:

http://sitedesign.joomir.com/مقالات-طراحی-سایت/item/690-12-گرایش-طراحی-وب-در-سال-2013.html

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

هدف

هدف این مقاله چگونگی تبدیل یک لیست منو به منو آبشاری می باشد که به فضای بسیار کنتری برای نمایش نیازمند است.

شما می توانید تمامی منوهای خود را در یک کلید قرار دهید و بدین وسیله در فضای صفحه خود صرفه جویی نمایید.

Nav HTML Markup

در بخش کد html منو توضیح داده خواهد شد. تگ <nav> برای ایجاد منو آبشاری مورد نیاز می باشد. این را در ادامه مقاله توضیح خواهم داد. کلاس current منوی فعلی که در آن هستیم را نمایش می دهد.

 <nav class="nav">
<ul> 
<li class="current"><a href="#">Portfolio</a></li> 
<li><a href="#">Illustration</a></li> 
<li><a href="#">Web Design</a></li> 
<li><a href="#">Print Media</a></li> 
<li><a href="#">Graphic Design</a></li> 
</ul> 
</nav>

CSS

کد ایجاد منوی آبشاری بسیار ساده می باشد بنابراین توضیح خاصی برای آن ندارم. فقط دقت نمایید از display:inline-block به جای float:left در تگ <li> استفاده شده. بنابراین با text-align به UL می توانید منوهای خود را راست چین، چپ چین و یا وسط چین نمایید.

/* nav */ 
.nav { position: relative; margin: 20px 0; } 
.nav ul { margin: 0; padding: 0; } 
.nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; }
.nav a { padding: 3px 12px; text-decoration: none; color: #999; }
.nav a:hover { color: #000; }
.nav .current a { background: #999; color: #fff; border-radius: 5px; }

وسط چین و یا راست چین

به طوری که در بخش قبل توضیح داده می شود می توانید جهت منوهای خود را عوض نمایید:

/* right nav */
.nav.right ul { text-align: right; } 
/* center nav */
.nav.center ul { text-align: center; }

پشتیبانی از اینترنت اکسپلورر

تگ html5 که در این کد استفاده شده یعنی <nav> در اینترنت اکسپلورر نسخه 8 با پایین پشتیبانی نمی شود. برای پشتیبانی css3-mediaqueries.js (یا respond.js) و html5shim.js استفاده نمایید. در صورتی که نمی خواهید از این کتابخانه ها استفاده نماید می توانید <nav> را با <div> جایگزین نمایید.

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Responsive

هم اکنون که می بایست این منوی ایجاد شده را با استفاده از media query سازگار با نسخه موبایل نمایید. در رزولوشن کمتر از 600px از تگ nav استفاده شده بنابراین می توان تگ <ul> را به بالای صفحه انتقال داد. تمامی <li> توسط display:none مخفی شده اند. اما .current به صورت بلاک نمایش داده می شود. اما در هاور nav کلیه <li> ها به حالت display:block خواهد بود. آیکون به .current اضافه شده تا منوی فعال مشخص گردد.  

@media screen and (max-width: 600px)
{ .nav { position: relative; min-height: 40px; }
.nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.nav li { display: none; /* hide all <li> items */ margin: 0; }
.nav .current { display: block; 
/* show only current <li> item */
} 
.nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } 
.nav .current a { background: none; color: #666; } 
/* on nav hover */ 
.nav ul:hover { background-image: none; } 
.nav ul:hover li { display: block; margin: 0 0 5px; }
.nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } 
/* right nav */
.nav.right ul { left: auto; right: 0; } 
/* center nav */
.nav.center ul { left: 50%; margin-left: -90px; } }

 منبع:

http://sitedesign.joomir.com/css-در-طراحی-سایت/item/740-ساخت-منو-وب-سایت-سازگار-با-موبایل-توسط-css.html