מאמרים בחינם - Like2Read | עיצוב אתרים רספונסיביים (responsive)
שלום אורח, התחבר | הרשם | התחבר דרך פייסבוק 12
12

החברים בפייסבוק

תגיות נפוצות

אנחנו במספרים

קטגוריות: 28
נושאים: 181
משתמשים: 2193
מאמרים: 7153
Like: 59
מאמרים -> טכנולוגיה -> אינטרנט ומחשב
הוסף עכשיו מאמר למדור :
אינטרנט ומחשב
 

עיצוב אתרים רספונסיביים (responsive)


אבנר שקד

אבנר שקד

 
 

 

עיצוב אתרים בימים מוטרפים אלה הפך לקצת יותר מאתגר, בזכות מגוון המכשירים האין סופי שאנשים משתמשים על מנת לגלוש באינטרנט. מחשבים נייחים הפכו למשהו מעט ארכאי ואת רוב המגה בייטים שטסים ממקום למקום על גבי פסי האינטרנט תופסים לפטופים, טאבלטים, פאבלטים, וטלפונים חכמים וכל מיני הכלאות שונות ומשונות. למכשירים השונים יש מסכים בגדלים שונים, רזולוציות שונות, יחס תמונה שונה, וזה עוד לפני שאנחנו מדברים על הבעייה הותיקה יותר של הדפדפנים השונים שמראים את אותו אתר בשתי צורות שונות לגמרי. בעולם מורכב שכזה האתר שאתם מעצבים צריך להיראות לא פחות ממעולה! אז מה עושים? קרוב לודאי שהאתר שלכם כרגע מותאם לעולם הישן שאומר צפייה במחשב עם מסך מעל 12 אינץ' ברזולוציה של מינימום 1024 רוחב על 768 גובה. האתר נראה טוב, אפילו טוב מאוד. אבל מה לעשות והיום חלק מהותי מהאנשים גולשים באמצעות הטלפון שלהם. זה נכון שהטלפונים החכמים החדשים מבורכים ברזולוציה גבוהה לא פחות מהמחשבים הניידים. לדוגמא לסמסונג גלקסי 3 יש מסך בעל 720 פיקסלים ברוחב ו-1280 פיקסלים בגובה. לשם השוואה לאייפון 5 יש 640 פיקסלים רוחביים ו-1136 פיקסלים אורכיים. אם כן כאשר המשתמש מחזיק את הטלפון לרוחב אין לו בעייה לראות את כל הפיקסלים של רוב האתרים באינטרנט שמתאימים לרזולוציה של 1024 פיקסלים לרוחב. הבעייה היא שרוב האנשים מחזיקים את הטלפון בצורה אנכית ואז הם לא יכולים לראות את כל הפיקסלים. אך זאת לא הבעייה המרכזית שעליה אני רוצה לדבר. הבעייה היא הגודל הפיזי של המסך והיכולת של המשתמש לקרוא את הטקסט בנוחות בלי לצבוט את המסך כדי להתקרב ולהתרחק מהמסך. כדי שהיוזר יוכל לקרוא בנוחות את תוכן האתר צריך לעשות סידור מחדש לעיצוב האתר ולהתאימו לגלישה במכשירים עם מסכים קטנים יותר, לא משנה אם הם מחזיקים את הנייד שלהם לאורך או לרוחב, האתר יסתדר בצורה שתאפשר לקרוא ולנווט באתר בכיך. היכולת של אתר להתאים את עצמו לפי המכשיר של המשתמש נקרא עיצוב אתרים רספונסיביים, כיוון שהאתר מגיב למכשיר של המשתמש.

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

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


 
 

דירוג : starstarstarstarstar | 1 צפיות ייחודיות | דווח למערכת על מאמר לא תקין

תגובות בפייסבוק


תגובות באתר :

לא נמצא


אנא מלא את כל השדות

כותרת:


תגובה:


אימות:
Captcha כתוב את הטקסט

שת"פ

© כל הזכויות שמורות like2.co.il · שיתופי פעולה