מהן המידות בעיצוב לסמארטפון?

דינקיס

משתמש פעיל
D I G I T A L
@רמה פלוס, מצחיק, כל מה שכותבים על רזולוציה של מכשירים בגודל של 720X1280 זה ממש לא קשור לאתרי רספונסיב, אלא לאתרים שלא עשו התאמה למובייל - אבל בעיקר לתצוגת מדיה.

כך גם לפי שיטת בוטסטראפ 3.0 - המובילים בתחום פיתוח פרונט בעולם - בהגדרה של מובייל זה כל מה שמתחת ל 768px

כנסו מהנייד לאתר של מחלבת מולר שהעלנו לפני שבוע, תראו אתר רספונסיב בהתגלמות.
 

רמה פלוס

משתמש סופר מקצוען
עיצוב גרפי
נכתב ע"י דינקיס;1113695:
@רמה פלוס, מצחיק, כל מה שכותבים על רזולוציה של מכשירים בגודל של 720X1280 זה ממש לא קשור לאתרי רספונסיב, אלא לאתרים שלא עשו התאמה למובייל - אבל בעיקר לתצוגת מדיה.

כך גם לפי שיטת בוטסטראפ 3.0 - המובילים בתחום פיתוח פרונט בעולם - בהגדרה של מובייל זה כל מה שמתחת ל 768px

כנסו מהנייד לאתר של מחלבת מולר שהעלנו לפני שבוע, תראו אתר רספונסיב בהתגלמות.

מצטער, אבל ישנה אפשרות של התאמת אתר רספונסיב למובייל לפי רזולוצייה,
והרזולוצייה השולטת כיום בשוק הסמארטפונים היא 720X1280.
 

Shia

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
D I G I T A L
mat, אני לא מתווכח עם הטיעון שלך כי לא הצלחתי לרדת לסוף דעתך כלל וכלל.
מכיוון ואני מתעסק הרבה עם התאמה רספונסיבית וצד הפרונט של תבניות עיצוב, ואני נחשף לכל שיטות העבודה המקובלות בתחום, ומעולם לא נתקלתי בשימוש ביחידות של אינצ'ים, ואני מכיר כמה שיטות להתאמה ריספונסיבית, וכולן מבוססות על media queries של css3 על בסיס פיקסלים, אי לכך, כל דבריך נדמו לי כחידה סתומה ולכן ניסיתי להבין האם מדובר ברעיון המעוגן בנסיון מעשי בתחום, או הגיג תאורטי מופשט.
 

mat

------- Magicode -------
@shia
אני לא אוהב את ההשתלחות שלך ופגיעות אישיות במקום דיון נורמלי.

שמתי את הלינק הזה.
http://www.creativebloq.com/css3/master-css-pixels-retina-displays-8122955

כדי להדגים את הבעיה שאני חשבתי עליה.

גם אתה תסכים איתי שאם פיתחת רק לפי הפיקסלים אז יהיה בעיה נניח בין סמארטפון לטאבלט עם אותם פיקסילים. כי בטאפלט זה פחות dpi.
ואז בטאבלט הכפתורים יראו גדולים מידי.

אז לכן יש אפשרות לדעת את היחס של הפיקסלים למסך כלומר dpi או ppi וזה מפורט בלינק שהבאתי.
ואולי זה דרך יותר טובה להגדיר מדיה.

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

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

דרך אגב בדקתי במסמכים הרשמיים לא ממולץ להשתמש באינצ וסנטימטר כי זה לא מבטא את הגודל האמיתי.
 

דינקיס

משתמש פעיל
D I G I T A L
ערבבתם פה Screen Size (גודל מסך) יחד עם רזולוציית מסך. כמדומני שאלו שני דברים שונים.

חבל על הויכוח העקר. בתכלס, כל מי שמפתח פרונט-אנד יודע את הסטנדרט:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices

ו MAT אתה צודק בעניין שיטת em אבל אפשר גם להגדיר גודל פונט שונה בפיקסלים לפי המסך.
 

s976

משתמש סופר מקצוען
הנדסת תוכנה
D I G I T A L
נכתב ע"י Shia;1113087:
בעבר הלא-כל-כך-רחוק היה מקובל להתייחס לרזולוציה של 320x480 כסמן תחתון למסכי סמארטפונים.

אולם המגמה העקבית היא עליה ברזולוציית המסך.
רוב מוחלט של המכשירים היום הם בעלי רזולוציה של לפחות 480×800.
משנת 2011, התחלנו לראות מכשירים בעלי רזולוציה של 540×960.
החל משנת 2012, אנחנו רואים בשוק יותר ויותר מכשירים עם רזולוציה של 1280×720...

מכיוון שאלה נתונים שמשתנים בתהליך בלתי פוסק במהלך ה3 שנים האחרונות, הייתי ממליץ נכון להיום, כשמעצבים למובייל, לנסות להתאים לרזולוציה של מינימום 480×800, אבל לקחת בחשבון שרוב משתמשי הסמארטפונים החדשים משתמשים ברזולוציות גבוהות יותר, כנ"ל.

ראיתי כאן כמה דברים חדשים באשכול (מבחינת הסטטיסטיקה)... בדקתי באנליטיקס בכמה אתרים, וראיתי שהרצזולוציה הנפוצה במכשירים ניידים היא 320 על 480
מצורף הצילום
 

קבצים מצורפים

  • ללא שם.jpg
    KB 44.2 · צפיות: 8

יאלילי

משתמש סופר מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
איור וציור מקצועי
נכתב ע"י s976;1115427:
ראיתי כאן כמה דברים חדשים באשכול (מבחינת הסטטיסטיקה)... בדקתי באנליטיקס בכמה אתרים, וראיתי שהרצזולוציה הנפוצה במכשירים ניידים היא 320 על 480
מצורף הצילום

זה חייב להיות לקוח מכתבה ישנה מאוד,
כי לא זו הרזולוצייה השולטת בשוק כיום.
 

s976

משתמש סופר מקצוען
הנדסת תוכנה
D I G I T A L
נכתב ע"י המקצוען;1115428:
זה חייב להיות לקוח מכתבה ישנה מאוד,
כי לא זו הרזולוצייה השולטת בשוק כיום.
כפי שכתבתי, זה לא לקוח משום כתבה. בדקתי סטטיסטיקה בכמה אתרים של הלקוחות שלי. מדובר בנתונים של התקופה האחרונה ממש.

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

קבצים מצורפים

  • ללא שם2.jpg
    KB 48.3 · צפיות: 1

יאלילי

משתמש סופר מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
איור וציור מקצועי
סתם שאלה שאני לא מבין [בלי קשר לבניית אתרים]-
הרזולוציות האלו זה הנתונים מהשטח מאיזה רזולוציות גולשים הגולשים?
כי אם כן, אז יש לסטטיסטיקה הזו בעיה!
כי לאלו מכשירים בדיוק יש 320X480???
הא?
לכל המכשירים יצאו בשנתיים האחרונות אין רזולוצייה כזו מזוויעה..
זה קשקוש!
 

רמה פלוס

משתמש סופר מקצוען
עיצוב גרפי
מה זה הסטטיסטיקות המוזרות האלו?!?!?!?!?!
אם היא נכונה אני צנצנת..
 

רמה פלוס

משתמש סופר מקצוען
עיצוב גרפי
יופי.

עכשיו תהיה ריאלי, זה נראה לך הגיוני מה שהעלית?
 

mat

------- Magicode -------
נכתב ע"י רמה פלוס;1115503:
יופי.

עכשיו תהיה ריאלי, זה נראה לך הגיוני מה שהעלית?


תראה ניכר מדברך שאתה מבין בסמארטפונים. ומבין בתחום.

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

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


http://gs.statcounter.com/#mobile_resolution-ww-monthly-201209-201309

צריפתי תמונה קודם בהודעה הזאת.
http://www.prog.co.il/showpost.php?p=1113521&postcount=16


אם אתה רוצה לסתור את זה אתה צריך להביא אתר סטיסטיקה אחר באותו סדר גודל שאומר אחרת.

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

דינקיס

משתמש פעיל
D I G I T A L
אני אחזור שוב על מה שכתבתי למעלה:
ערבבתם פה Screen Size (גודל מסך) יחד עם רזולוציית מסך.

לעניין התאמת האתר למובייל מה שרלוונטי זה: Screen Size

ולכן כל הדיון על הרזולוציות פה הוא אינו קשור לשאלה המקורית של פותחת האשכול.
 

Shia

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
D I G I T A L
נכתב ע"י דינקיס;1115518:
אני אחזור שוב על מה שכתבתי למעלה:
ערבבתם פה Screen Size (גודל מסך) יחד עם רזולוציית מסך.

לעניין התאמת האתר למובייל מה שרלוונטי זה: Screen Size

ולכן כל הדיון על הרזולוציות פה הוא אינו קשור לשאלה המקורית של פותחת האשכול.

שמעון, וmat אתם צודקים, הרזולוציה הנמוכה (320/480) אכן יותר נפוצה ממה שחשבתי...
בכל אופן, ברמה המעשית, מקובל לעשות עיצוב אחד לכל מה שמתחת לרוחב 768, אבל באמת בבוטסטראפ3 הוסיפו נקודת שבירה נוספת ברוחב 480, ומה שמתחת נקרא x-small. זה עולה בקנה אחד עם המציאות שתיארתי בהודעה קודמת באשכול, שרוחב 480 מסמל סטנדרט מסויים במכשירים היותר חדשים ומה שמתחת, נמצא במגמת ירידה.

אריאל, תסביר למה אתה מתכוון כשאתה אומר Screen Size? כי אם אתה מתכוון לגודל פיזי באינצ', הרי זה לא פקטור, מה שמעניין אותנו בעיצוב אתרים זה הרי כמה פיקסלים יהיו לרוחב המסך, יהיו מידותיו הפיזיות אשר יהיו.

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

mat

------- Magicode -------
נכתב ע"י Shia;1115524:
דבר אחרון, נפלא מבינתי למה יש אנשים שחשים צורך להביע דעה בתחום מקצועי שהם לא מתמצאים בו.
יש באשכול הזה שלושה מגיבים שמתמודדים בעבודתם עם הסוגיה הזו על בסיס שוטף. מצד שני יש כאן אנשים שלא בנו דף אינטרנט מעולם, שלא לומר אתר ריספונסיבי, מהיכן אם כן מגיע הדחף להביע דעה לא מלומדת על נושא מקצועי? נשגב מבינתי.
באתרים מקצועיים נהוג מנגנון דירוג שעוזר להבליט את התשובות האינפומטיביות והמקצועיות. מכיוון שכאן לא קיים כזה מנגנון, כמנהל הפורום, אני לוקח על עצמי את האחריות להקטין את מידת הבלבול שעלולה להיגרם בעקבות מידע לא מקצועי, לא מבוסס ולא מועיל. ואם יהיה צורך, אף במחיר של מחיקת הודעות מהסוג הזה.

אני דווקא חושב שגם לא מקצוענים יכולים להביע דעה ואם הם לא צודקים אתה יכול לנמק למה זה לא נכון.

אבל במקרה הזה דווקא להביא את הלינק של זאפ יכול לשקף תשובה לפותחת האשכול.
שאולי יש כזה דבר גדלים סטנדרטים אבל אין כזה דבר גודל סטנדרטי בטלפון.

הפערים הם עצומים. וזאת עובדה. רואים את זה במציאות שיש ניידים של 230 ויש של 1080 ויותר. המחלוקת לגפי הפצתם לא כלכך מעשית כי בן אדם שבונה מוצר רוצה שזה יתאים לכל המכשירים. וגם שזה יהיה תקף להרבה שנים.

בכלל לדעתי הקטע שמשנה זה הגודל הפיזי אבל גם לשיטתך שהפיקסלים משנים זאת תשובה נכונה.
 

s976

משתמש סופר מקצוען
הנדסת תוכנה
D I G I T A L
נכתב ע"י mat;1115507:
תסתכל פה זה סטיסטיקה עולמית של מיליוני אתרים.


http://gs.statcounter.com/#mobile_resolution-ww-monthly-201209-201309

ודרך אגב, יש שם אפשרות לראות סטטיסטיקה של מדינה מסוימת. תבחרו של 'ישראל', ותראו את זה הבדל משמעותי יש בנושא שאנו מדברים.
השימוש ברזולוציות הנמוכות של 320 על 480, בארץ, הוא כמעט כפול.
 

דינקיס

משתמש פעיל
D I G I T A L
נכתב ע"י Shia;1115524:
אריאל, תסביר למה אתה מתכוון כשאתה אומר Screen Size? כי אם אתה מתכוון לגודל פיזי באינצ', הרי זה לא פקטור, מה שמעניין אותנו בעיצוב אתרים זה הרי כמה פיקסלים יהיו לרוחב המסך, יהיו מידותיו הפיזיות אשר יהיו.

על מנת להמחיש למה אני מתכוין, עשיתי צילום מסך מאתר רספונסיבי שהקמנו לאחרונה. שימו לב, אפילו שהמובייל עם רזולוציה של 1024*768 הוא מציג את האתר בגודל של 480*320!

להלן צילום מסך מהדסקטופ ברזולוציה של: 1280*768
צפה בקובץ המצורף 175224

להלן צילום מסך מהדסקטופ ברזולוציה של: 320*480
צפה בקובץ המצורף 175225

להלן צילום מסך מדפדפן מובייל (nexus4) עם רזולוציה של: 1280*768
צפה בקובץ המצורף 175223
 

קבצים מצורפים

  • nexus.png
    KB 393.4 · צפיות: 13
  • 1280-768.png
    KB 826.4 · צפיות: 12
  • 320-480.png
    KB 179.4 · צפיות: 13

mirikmd

משתמש רשום
עיצוב גרפי
הוראות סגירה ישר ולענין

מקווה שזו הכוונה... (בלי הפילוסופיה האין סופית הזאת...)
 

קבצים מצורפים

  • הוראות סגירה סלולר.doc
    KB 179 · צפיות: 22

Shia

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
D I G I T A L
נכתב ע"י דינקיס;1115619:
על מנת להמחיש למה אני מתכוין, עשיתי צילום מסך מאתר רספונסיבי שהקמנו לאחרונה. שימו לב, אפילו שהמובייל עם רזולוציה של 1024*768 הוא מציג את האתר בגודל של 480*320!

להלן צילום מסך מהדסקטופ ברזולוציה של: 1280*768
צפה בקובץ המצורף 175224

להלן צילום מסך מהדסקטופ ברזולוציה של: 320*480
צפה בקובץ המצורף 175225

להלן צילום מסך מדפדפן מובייל (nexus4) עם רזולוציה של: 1280*768
צפה בקובץ המצורף 175223
אריאל, מה שאני רואה זה:
PHP:
@media (max-width: 767px) {
    .container {  max-width: 460px; }
}
זה הכל...

mat, שוב אתה מוכיח את הנקודה שלי.
"הפערים העצומים" אתה אומר ומביא טווח שבכלל לא רלבנטי הלכה למעשה.
230 זה רוחב שלא קיים בכלל ו"1080 ויותר" זה בכלל לא שייך לסוגיה של מובייל. ברוחב זה ייעשה שימוש באותו עיצוב שמשמש לדסקטופ.

מה שרלבנטי זה הטווח שבין רוחב 320 ל768
ואת הטווח הזה אפשר לחלק לשניים - מעל ומתחת 480
עם התשובה הזו אפשר לגשת לעבודה בראש שקט.

כל שאר עודף האינפורמציה, חסרת חשיבות מעשית.
 

אולי מעניין אותך גם...

הפרק היומי

הפרק היומי! כל ערב פרק תהילים חדש. הצטרפו אלינו לקריאת תהילים משותפת!


תהילים פרק קיט ר'

קנג רְאֵה עָנְיִי וְחַלְּצֵנִי כִּי תוֹרָתְךָ לֹא שָׁכָחְתִּי:קנד רִיבָה רִיבִי וּגְאָלֵנִי לְאִמְרָתְךָ חַיֵּנִי:קנה רָחוֹק מֵרְשָׁעִים יְשׁוּעָה כִּי חֻקֶּיךָ לֹא דָרָשׁוּ:קנו רַחֲמֶיךָ רַבִּים יְהוָה כְּמִשְׁפָּטֶיךָ חַיֵּנִי:קנז רַבִּים רֹדְפַי וְצָרָי מֵעֵדְוֹתֶיךָ לֹא נָטִיתִי:קנח רָאִיתִי בֹגְדִים וָאֶתְקוֹטָטָה אֲשֶׁר אִמְרָתְךָ לֹא שָׁמָרוּ:קנט רְאֵה כִּי פִקּוּדֶיךָ אָהָבְתִּי יְהוָה כְּחַסְדְּךָ חַיֵּנִי:קס רֹאשׁ דְּבָרְךָ אֱמֶת וּלְעוֹלָם כָּל מִשְׁפַּט צִדְקֶךָ:
נקרא  2  פעמים

לוח מודעות

למעלה