כמה שאלות על קידוד אתר

[dabi]

1)באיזה תוכנה הכי נוח להשתמש? הרי מה שאני צריך זה כלי שאני יוכל להגדיל בו את התמונה וככה לחתוך ממנה חלקים וצריך משהו שאני יעביר עליו את העכבר והוא יאמר לי מה הקוד של הצבע, פוטושופ עושה את זה השאלה אם יש תוכנה יותר "קטנה" ופשוטה ושעושה את 2 הפעולות האלה

2) כאשר מגדירים גובה ורוחב של DIV כלשהו למה אני רואה שכולם עושים את זה בפיקסלים ולא באחוזים מהדף? יש לזה חיסרון?

תודה

[BuildDream]

הקטע זה לא רק "לחתוך" תמונה, אם אתה מקבל את העיצוב בPSD (פוטושופ) אז זה מחולק לשכבות ומסודר לפי חלקים בעיצוב (אם המעצב עבד בצורה מסודרת).
לחתוך רק לפי תמונה הוא יותר מסורבל והרבה פחות יעיל, אם אתה רוצה לעבוד נורמלי את החיתוך מבצעים עם פוטושופ ושימוש נכון שהתוכנה מציעה לך ולא "להגדיל את התמונה ולחתוך ממנה חלקים".

בקשר לשאלה השנייה - הרבה אתרים בנויים ברוחב של בסביבות ה1,000px כי זה פעם היה רוחב מאוד נפוץ (1024) ומחשבים ברזולוציות גבוהות יותר היו רואים את האתר בצורה טובה, פשוט עם רווחים בצדדים אבל עדיין רואים את כל האתר.
אם אתה נותן גודל קבוע - אתה יודע שהעיצוב יראה אותו הדבר בכל מצב. אם אתה משתמש באחוזים - העיצוב משתנה בהתאם לרזולוציה של הגולש. יותר קשה לעצב ככה את העמוד - אבל אם עושים את זה כמו שצריך האתר מוצג טוב יותר ברזולוציות גבוהות (וגם רזולוציות קטנות, אם עשית אותו מותאם לזה. ככה שגם בפלאפונים יראו אותו מותאם).

[IgalSt]

נכתב במקור על ידי BuildDream

בקשר לשאלה השנייה - הרבה אתרים בנויים ברוחב של בסביבות ה1,000px כי זה פעם היה רוחב מאוד נפוץ (1024) ומחשבים ברזולוציות גבוהות יותר היו רואים את האתר בצורה טובה, פשוט עם רווחים בצדדים אבל עדיין רואים את כל האתר.
אם אתה נותן גודל קבוע - אתה יודע שהעיצוב יראה אותו הדבר בכל מצב. אם אתה משתמש באחוזים - העיצוב משתנה בהתאם לרזולוציה של הגולש. יותר קשה לעצב ככה את העמוד - אבל אם עושים את זה כמו שצריך האתר מוצג טוב יותר ברזולוציות גבוהות (וגם רזולוציות קטנות, אם עשית אותו מותאם לזה. ככה שגם בפלאפונים יראו אותו מותאם).

רק כדי לחדד את הנקודה המעולה שהעלת פה.
כיום המגמה (או האופנה?) היא לעשות עיצובים רספונסיבים, המתאימים את עצמם לכל רזולוציה - בין אם מדובר במסך Full HD רחב מאוד (כמעט 2,000 פיקסלים) ובין אם מדובר בטלפון נייד עם רזולוציה של 320 פיקסלים לרוחב.
כמובן שבצורה הזאת צריך לשכוח כמעט לחלוטין מיחידת המידה px, ולהתחיל להשתמש ב-% על מנת לקבוע מימדים לאלמנטים.
כמו כן, שיטת העבודה כוללת בד"כ עבודה עם media query על מנת להתאים את העיצוב למסכים השונים.
לפני מספר שבועות יצא לי לעבוד על פרויקט של אתר רספונסיבי, מומלץ להציץ - UX on BEER

[אדיר]

בהמשך לדברים של יגאל:
לדעתי חשוב להבהיר שעיצוב גמיש (רספונסיבי) הוא לא האופציה היחידה לפתח ו/או להתאים אתרים למובייל וגם לא תמיד האופציה העדיפה.
כל מי שמעוניין לפתח למובייל צריך להבין שההבדלים בין דסקטופ למובייל הם הרבה מעבר לגודל ולרזולוציה של מסך.

יש קורס נחמד של Lynda בשם "Mobile Web Design & Development Fundamentals" שמבהיר בצורה טובה את רוב הדברים.
ונקודתית לעניין העיצוב הגמיש אני ממליץ לקרוא את הפוסט הזה: http://www.bluetrainmobile.com/blog/...il-for-mobile/
בנוסף ל- 2 אלו ניתן להגיע להמון חומר מצויין דרך גוגל.

ולעניין השאלות ששאלת:
1. פוטושופ הוא כלי מצויין, לרוב אתה גם חייב אותו כדי לברור מהעיצוב layers ספציפיים.
2. אין כאן תשובה חד משמעית למה כדאי ומה יותר טוב, זה משתנה.