اندازه استاندارد برای طراحی وبسایت

[Aligfx]

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

[Thor God]

اشتباه فکر نمیکنم
من حرفی از طراحی داینامیک نزدم . پست دومم :




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

توضیحاتتون هم بی ربط هست.


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

دوست عزیز این پست شما :

شما متوجه نیستی عزیز. صفحه استاتیک رو فکر کنم با برنامه نویسی استاتیک اشتباه گرفتی.

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

من نپیچوندم فقط شما لغات جدید و تکنیک های جدید از خودت درآوردی ( برنامه نویسی استاتیک ! )

شما داری تکنیک ها و روش ها و انواع برنامه نویسی رو با هم قاطی می کنی. ببینید طراحی fluid یک تکنیک طراحی هست نه یک حالت طراحی که شما با طراحی استاتیک مقایسه می کنید. همچنین طراحی فیکسد.
ما دو نوع طراحی داریم، استاتیک و داینامیک. حالا زیر مجموعه اینها که جزو هر دو نیز هستند تکنیک های رسپانسیو و فیکسد و فلوید و حتی Infinite Scrolling هستند.

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

[Thor God]

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

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

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


موفق باشید.

[A.N.A.P]

من تو قانع کردن شما عاجزم.

همین که Infinite Scroll رو هم جزو طراحی ها میدونید برای من کافیه.

موفق باشید.

[Thor God]

من تو قانع کردن شما عاجزم.

همین که Infinite Scroll رو هم جزو طراحی ها میدونید برای من کافیه.

موفق باشید.

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

همون طور که گفتم :

ما دو نوع طراحی داریم، استاتیک و داینامیک. حالا زیر مجموعه اینها که جزو هر دو نیز هستند تکنیک های رسپانسیو و فیکسد و فلوید و حتی Infinite Scrolling هستند.

من کی گفتم Infinite Scrolling طراحی هست ؟ گفتم یک تکنیکه. مثله رسپانسیو. که الان گوگل از این تکنیک (Infinite Scrolling) داره استفاده.
در هر صورت این موارد به پوینت اف ویو هر شخص بستگی داره که یک روش رو طراحی بدونه یا تکنیک. این وسط لغات جدید که وارد این عرصه شدند مثله برنامه نویسی استاتیک مورد بحث هستند ( من هنوز هم نمیدونم این لغت یعنی چی )


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


موفق باشید.

[behnamy01]

فرق بین Adaptive و ریسپانسیو چیه دوستان؟

[Thor God]

فرق بین Adaptive و ریسپانسیو چیه دوستان؟

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

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

[behnamy01]

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

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

آقا ما اومدیم Adaptive (درصدی) طراحی کنیم، بیزار شدیم همون fixed بهتره نگاه کنید مشکلم اینه که مثلا من یک صفحه رو به دوقسمت چپ و راست تقسیم کردم، یعنیwidthبرای div سمت راست رو 50درصد گذاشتم و div سمت چپ رو هم 50درصد. یک float هم دادم که کنار هم وایستن تا اینجاش خوبه، ولی اومدم دور div ها border گذاشتم بعدش دیگه div ها کنار هم واینمستین یکی میره زیر اون یکی دلیلش هم فکر کنم اینه که مثلا 1px به border هم که بدی مجموع عرضت میشه 100% + 1px که دیگه div ها میان زیر هم. امتحان هم کردم نشد که به جای پیکسلی اندازه دادن واسه border درصدی اندازه بدم، مثلا 49.5 درصد هر کدوم از div ها و 1درصد هم border حالا میگید راه حل چیه؟

[mtchabok]

آقا ما اومدیم Adaptive (درصدی) طراحی کنیم، بیزار شدیم همون fixed بهتره نگاه کنید مشکلم اینه که مثلا من یک صفحه رو به دوقسمت چپ و راست تقسیم کردم، یعنیwidthبرای div سمت راست رو 50درصد گذاشتم و div سمت چپ رو هم 50درصد. یک float هم دادم که کنار هم وایستن تا اینجاش خوبه، ولی اومدم دور div ها border گذاشتم بعدش دیگه div ها کنار هم واینمستین یکی میره زیر اون یکی دلیلش هم فکر کنم اینه که مثلا 1px به border هم که بدی مجموع عرضت میشه 100% + 1px که دیگه div ها میان زیر هم. امتحان هم کردم نشد که به جای پیکسلی اندازه دادن واسه border درصدی اندازه بدم، مثلا 49.5 درصد هر کدوم از div ها و 1درصد هم border حالا میگید راه حل چیه؟

سلام یک راه حل میتونه به صورت زیر باشه

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

[kian98]

سلام

بهترین اندازه ای که میشه برای ساخت قالب سای توی فتوشاپ در نظر گرفت اندازه ۱۰۲۴×۷۶۸ هست. این اندازه رو خود w3c تعیین کرده.
البته برای عرض قالب بهتره از اندازه 960 px استفاده کنید چون معمولا توی مرورگر یه مقداری از صفحه رو فضای اسکرول و یا تولبار ها و خود منوی مرورگر اشغال کرده ولی با این عرض دیگه عرض صفحه شما به اسکرول احتیاج نخواهد داشت.

باتشکر