תוכן העניינים
06 בנובמבר 2009 / מאת רבי אינטראקטיב

בניית אתרים תוך התאמה לרזולוציית מסך


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

למרות שרוב המוחלט של המשתמשים משתמש ברזולציות מסך גבוהות יחסית, קיימים משתמשים המוגדרים על רזולוציית מסך של 800 על 600 ואפילו רזולוציות נמוכות יותר! למה? בדרך כלל מדובר על משתמשים מבוגרים יותר, משתמשים האוהבים שהכל "גדול" על המסך ומשתמשים שאינם מודעים לרזולוציית המסך שלהם כלל או משתמשים המחוברים למסכים ישנים / טלוויזיות LCD אשר לא תומכות ברזולוציות מסך גבוהות. העוגה מתפרסת לעוד כמה חלוקות של משתמשים המוגדרים על רזולוציית מסך גבוהות במיוחד אך בשלב זה לא נתייחס אליהם.

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

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

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

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

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

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

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

 ♦

זכויות היוצרים על התכנים באתר שמורות ל־rabbi interactive agency, ניתן להשתמש בחומרים אלו
רק בצירוף קישור לעמוד הכולל את המאמר המקורי
Rabbi Interactive Agency LTD 2004-2020 ©